Same Design on different Android versions

Question

I am new at Xamarin and started working with it yesturday. I am trying to make an Android App using it in Visual Studio 2017, it works fine on Android Version 8.0, but on v. 7.0 the control elements on the screen get into different places.

Android 8.0:

Android 7.0:

Designer code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="Available Queries:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/queriescnt"
        android:textAlignment="center" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/queriescnt"
        android:id="@+id/email"
        android:layout_marginHorizontal="10dp"
        android:layout_marginTop="35dp"
        android:layout_marginRight="326.0dp"
        android:singleLine="true" />
    <Button
        android:text="Search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/email"
        android:id="@+id/submit"
        android:layout_marginVertical="20dp"
        android:layout_marginHorizontal="10dp" />
    <EditText
        android:layout_width="249.0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/submit"
        android:id="@+id/keybox"
        android:layout_marginVertical="300dp"
        android:layout_marginHorizontal="50dp"
        android:layout_marginRight="201.5dp"
        android:password="true"
        android:inputType="none|textPassword" />
    <TextView
        android:text="KEY:"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/submit"
        android:id="@+id/textView1"
        android:layout_marginVertical="320dp"
        android:layout_marginHorizontal="10dp" />
    <CheckBox
        android:text="S"
        android:layout_width="54.5dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/submit"
        android:id="@+id/store"
        android:layout_marginVertical="315dp"
        android:layout_marginHorizontal="300dp" />
    <TextView
        android:text="Current line count:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/submit"
        android:id="@+id/dbcount"
        android:gravity="center_horizontal|center_vertical"
        android:textSize="40dp"
        android:inputType="none|textMultiLine" />
</RelativeLayout>

Can you please help me to make all the elements appear the same on different versions? I would be really thankful, if you also suggest me, what i can do better.

Answer 1

Your margins are messing up your layout. You cannot just add more margin to a view to position it relatively to another view.

I have adjusted your layout to match what you have in the first screen shot.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/queriescnt"
        android:text="Available Queries:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center" />
    <EditText
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/queriescnt"
        android:layout_marginHorizontal="10dp"
        android:layout_marginTop="35dp"
        android:maxLines="1" />
    <Button
        android:id="@+id/submit"
        android:text="Search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/email"
        android:layout_marginVertical="20dp"
        android:layout_marginHorizontal="10dp" />
    <TextView
        android:id="@+id/dbcount"
        android:text="Current line count:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/submit"
        android:gravity="center_horizontal|center_vertical"
        android:textSize="40dp"
        android:inputType="none|textMultiLine" />
    <TextView
        android:id="@+id/textView1"
        android:text="KEY:"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"/>
    <CheckBox
        android:id="@+id/store"
        android:text="S"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_margin="10dp"
        android:layout_alignParentBottom="true" />
    <EditText
        android:id="@+id/keybox"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:password="true"
        android:inputType="none|textPassword"
        android:layout_alignBaseline="@+id/textView1"
        android:layout_toEndOf="@+id/textView1"
        android:layout_toStartOf="@+id/store"
        tools:text="abc" />
</RelativeLayout>

What you may notice here is that I use toEndOf , toStartOf , alignBaseline , alignParentStart , alignParentEnd and alignParentBottom instead of the margins you had.

Simply adding 300dp margin to a view may work in the view port of the preview of the designer while you are fiddling with it. However not all screens have equal width and height both in physical size and in pixel density. Hence, 300dp will not look the same on all screens.

Answer 2

You can try the following code. I have tested the code on Android 7.0 and Android 8.0, it works properly.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<TextView
    android:text="Available Queries:"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/queriescnt"
    android:textAlignment="center" />
<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/queriescnt"
    android:id="@+id/email"
    android:layout_marginHorizontal="10dp"
    android:layout_marginTop="35dp"
    android:layout_marginRight="326.0dp"
    android:singleLine="true" />
<Button
    android:text="Search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/email"
    android:id="@+id/submit"
    android:layout_marginVertical="20dp"
    android:layout_marginHorizontal="10dp" />

<TextView
    android:text="Current line count:"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/submit"
    android:id="@+id/dbcount"
    android:gravity="center_horizontal|center_vertical"
    android:textSize="40dp"
    android:inputType="none|textMultiLine" />

<LinearLayout
    android:layout_marginTop="200dp"
    android:gravity="center"
    android:layout_marginBottom="12dp"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/dbcount"
    android:orientation="horizontal">
    <TextView
        android:text="KEY:"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:layout_marginHorizontal="10dp" />
    <EditText
        android:hint="input"
        android:layout_width="249.0dp"
        android:layout_height="wrap_content"
        android:id="@+id/keybox"
        android:layout_toRightOf="@id/textView1"
        android:password="true"
        android:inputType="none|textPassword" />
    <CheckBox
        android:text="S"
        android:layout_width="54.5dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/keybox"
        android:id="@+id/store"/>
</LinearLayout>
</RelativeLayout>

Android 7.0 enter image description here

Android 8.0 enter image description here

Note:

1. You could include the three controls(TextView, EditText, CheckBox) into a parent layout(eg. LinearLayout), then you do not need to set the properties for each three controls.

2. The layout_below perperty you set is not right. When you add the parent layout for the below controls, you just need to add the property for the parent layout.

   android:layout_below="@id/dbcount"