How to keep Android Layout consistent across various devices?

Question

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>

refer this http://stackoverflow.com/questions/28821850/my-layout-gets-messy-whenever-i-open-it-in-the-emulator-its-a-background-image/28846829#28846829 — Pankaj Nimgade, Mar 30 '15 at 04:14
or this http://stackoverflow.com/questions/29025843/android-devices-with-different-height-takes-same-layout-folder — Pankaj Nimgade, Mar 30 '15 at 04:17
On the one hand, there's nothing bad about using relative layouts if you are unable to accomplish something using just a linear layout. On the other hand, you should try to reduce the depth of your layouts as much as possible. In this case two upper level relative layouts are unnecessary, complete waste of the layout drawing time. — AndroidEx, Mar 30 '15 at 04:36
possible duplicate of [Application Skeleton to support multiple screen](http://stackoverflow.com/questions/12242111/application-skeleton-to-support-multiple-screen) — SilentKiller, Mar 30 '15 at 08:42

score 0 · Accepted Answer · answered Mar 30 '15 at 06:51

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.

Layout Position
Size, Padding and Margins
Common Layouts
Resource Qualifiers
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

score 0 · Answer 2 · answered Mar 31 '15 at 04:06

I recommend you that read this pages: http://www.google.com/design/spec/layout/metrics-keylines.html

There you have a design guidelines to create apps for desktop, tablet and phone.

About code, you only need to create layouts for each device (usually tablet and phone, or add too TV and wear).

score 0 · Answer 3 · answered Dec 14 '15 at 19:12

0

You can use PercentRelativeLayout in which you can set positions, sizes and margins using percentages. Check the link below.

http://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

answered Dec 14 '15 at 19:12

Oguz Ozcan

1,694
19
26

How to keep Android Layout consistent across various devices?

3 Answers3

Linked