Search code examples
androiduser-interfaceandroid-linearlayoutandroid-relativelayout

How to keep Android Layout consistent across various devices?


I am new to Android Programming, I just published an app on playstore and found out that few buttons that I put in my layout doesn't show up on some of the devices. How do I make sure it is consistent across various devices? Should I avoid using relative layout. Here is the layout where Create Account Button shows up on Galaxy Tab, Nexus 4, and 5 but not on Galaxy Grand.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@drawable/background">

    <RelativeLayout android:id="@+id/container" android:layout_width="match_parent"
        android:paddingBottom="20dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="20dp"
        android:layout_height="match_parent"
        android:background="#85000000">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:orientation="vertical"
            android:layout_centerHorizontal="true"
            android:id="@+id/linearLayout">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="95dp"
                android:layout_marginBottom="10dp"
                android:hint="@string/email"
                android:textColor="#fd9a22"
                android:textCursorDrawable="@drawable/cursor_color"
                android:textColorHint="#ffffff"
                android:id="@+id/txtUser"
                android:background="@drawable/edit_text"
                android:drawableLeft="@drawable/dr_email"
                android:drawablePadding="10dp"
                android:paddingLeft="-3dp"
                android:singleLine="true"
                android:layout_gravity="center_horizontal" />

            <EditText
                android:layout_width="match_parent"
                android:inputType="textPassword"
                android:layout_height="wrap_content"
                android:id="@+id/txtPwd"
                android:hint="@string/pwd"
                android:textColor="#fd9a22"
                android:textCursorDrawable="@drawable/cursor_color"
                android:textColorHint="#ffffff"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginBottom="10dp"
                android:background="@drawable/edit_text"
                android:drawableLeft="@drawable/dr_pwd"
                android:drawablePadding="10dp"
                android:layout_gravity="center_horizontal" />

            <Button
                android:layout_width="match_parent"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginBottom="10dp"
                android:layout_height="wrap_content"
                android:text="@string/sign_in"
                android:id="@+id/btnSignIn"
                android:background="@drawable/ainovatheme_btn_default_holo_light"
                android:onClick="login"
                android:layout_gravity="center_horizontal" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#fd9a22"
                android:background="#85000000"
                android:id="@+id/txtLoginErr"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/forgot_pwd"
                android:textColor="#ffffff"
                android:id="@+id/btnForgotPwd"
                android:layout_gravity="center_horizontal"
                android:onClick="forgotPassword"
                style="?android:attr/borderlessButtonStyle"/>

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="2dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="3dp"
                android:background="#d4dce9" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginBottom="10dp"
                android:text="@string/create_account"
                android:textColor="#fd9a22"
                android:id="@+id/btnCreateAccountActivity"
                android:onClick="createAccount"
                style="?android:attr/borderlessButtonStyle"
                android:layout_gravity="center_horizontal" />


        </LinearLayout>


    </RelativeLayout>

</RelativeLayout>

Solution

  • Rethink your design and provide a delightful experience for your users.

    You need to focus on some areas of variability in Android devices and how those variations affect the development and design of Android applications.

    1. Layout Position
    2. Size, Padding and Margins
    3. Common Layouts
    4. Resource Qualifiers
    5. Split Views

    Conclusion:

    if Your Are Concerning with one screen layout than use linear layout with weights. OFFICIAL Example:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/send" />
    

    else use scroll-able layouts like listview card view with realitivelayout for each row because it is more efficiently.

    P.S. You have a lot of unnecessary atributes set in xml.. I just did this in a few sec to help you. You should read how RelativeLayout and LinearLayout work. For More knowledge read official documents