Search code examples
androidandroid-studioandroid-layoutandroid-relativelayout

How to make elements stable in differens emulators?

Here is the form that I made in the XML:

xml

Here the output when I run it on an emulator:

output

Does any one know how to make the emulator have the same style as the XML page?

I'm using nexus 6 emulator and the following. Is my XML code. I have added in manifest part a support element, but I still have the problem.

<?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"
    tools:context=".signupActivity"
    android:background="@color/white">

    <EditText
        android:id="@+id/input_name"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="138dp"
        android:backgroundTint="#D3D3D3"
        android:fontFamily="sans-serif"
        android:hint="Name"
        android:textColor="#7c7a7a"
        android:textColorHint="#A9A9A9" />
<!-- email text field -->

    <EditText
        android:id="@+id/input_email"
        android:layout_width="306dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="201dp"
        android:backgroundTint="#D3D3D3"
        android:fontFamily="sans-serif"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:textColor="#7c7a7a"
        android:textColorHint="#A9A9A9" />

<!-- phone text field -->
    <EditText
        android:id="@+id/phoneNO"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="141dp"
        android:backgroundTint="#D3D3D3"
        android:fontFamily="sans-serif"
        android:hint="phone number"
        android:inputType="phone"
        android:textColor="#7c7a7a"
        android:textColorHint="#A9A9A9" />


    <EditText
        android:id="@+id/input_password"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:backgroundTint="#D3D3D3"
        android:fontFamily="sans-serif"
        android:hint="Password"
        android:inputType="textPassword"
        android:textColor="#7c7a7a"
        android:textColorHint="#A9A9A9" />
<!-- login block -->
    <TextView
        android:id="@+id/link_login"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="22dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Already a member? Login"
        android:textColor="#6F73FF"
        android:textSize="16dip" />

<!-- password text field -->
    <EditText
        android:id="@+id/input_password2"
        android:layout_width="302dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="202dp"
        android:backgroundTint="#D3D3D3"
        android:fontFamily="sans-serif"
        android:hint="confirm password"
        android:inputType="textPassword"
        android:textColor="#7c7a7a"
        android:textColorHint="#A9A9A9" />


    <!-- Signup Button -->

    <Button
        android:id="@+id/btn_signup"
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="64dp"
        android:background="@drawable/edit_rouded"
        android:fontFamily="sans-serif"
        android:padding="12dp"
        android:text="Create Account" />


    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:visibility="gone" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="73dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="#6F73FF"
        android:textAlignment="center"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="19dp"
        android:text="Sign Up"
        android:textAlignment="center"
        android:textAllCaps="true"
        android:textColor="@color/white"
        android:textSize="24sp" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="38dp"

        android:layout_alignBottom="@+id/phoneNO"
        android:layout_toStartOf="@+id/input_name"
        android:adjustViewBounds="false"
        android:src="@drawable/ic_call_black_24dp"
        tools:layout_editor_absoluteX="20dp"
        tools:layout_editor_absoluteY="267dp" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="38dp"
        android:layout_alignTop="@+id/input_password2"
        android:layout_toStartOf="@+id/input_name"
        android:adjustViewBounds="false"
        android:src="@drawable/ic_lock_outline_black_24dp"
        tools:layout_editor_absoluteX="20dp"
        tools:layout_editor_absoluteY="267dp" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="38dp"

        android:layout_alignTop="@+id/input_password"
        android:layout_toStartOf="@+id/input_name"
        android:adjustViewBounds="false"
        android:src="@drawable/ic_lock_outline_black_24dp"
        tools:layout_editor_absoluteX="20dp"
        tools:layout_editor_absoluteY="267dp" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="43dp"
        android:layout_alignTop="@+id/input_email"
        android:layout_toStartOf="@+id/input_name"
        android:adjustViewBounds="false"
        android:src="@drawable/ic_mail_outline_black_24dp"
        tools:layout_editor_absoluteX="20dp"
        tools:layout_editor_absoluteY="267dp" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="38dp"
        android:layout_alignBottom="@+id/input_name"
        android:layout_toStartOf="@+id/input_name"
        android:adjustViewBounds="false"
        android:src="@drawable/ic_perm_identity_black_24dp"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="267dp" />



</RelativeLayout>

I have changed the layout from absolute to relative but I still have the problem.

Solution

  • You are setting up the elements by placing margins. this will not work perfectly on all devices. Rather please use appropriate layout and implement the design

    Ex: Create a linear layout with a vertical orientation and add the elements. This will scale with all kinds of screens. Additionally, keep the main layout inside a scroll view. this will help in very small screens