How to implement correct UI for several screens in android

Question

Here i am trying to handle different screens ,These are several screens i am trying to handle ,Here if i adjust for one screen remaining screens getting error ,not getting what is problem here is screenshot Here is my code

  <?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/transactionpagebg" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="160dp"
        android:gravity="center"
        android:paddingLeft="50dp"
        android:text="Current Meter Reading"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="@android:color/white" />

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/editText1"
            android:layout_width="130dp"
            android:layout_height="wrap_content"
            android:inputType="number" />

        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="150dp"
            android:layout_height="50dp" />
    </LinearLayout>

    <AbsoluteLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <Button
            android:id="@+id/saveButton"
            android:layout_width="113px"
            android:layout_height="wrap_content"
            android:layout_x="61dp"
            android:layout_y="330dp"
            android:background="@drawable/savebutton" />

        <Button
            android:id="@+id/settingsButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="208dp"
            android:layout_y="330dp"
            android:background="@drawable/settingbutton" />
    </AbsoluteLayout>

</RelativeLayout>

score 1 · Answer 1 · edited May 23 '17 at 12:19

1

to do as it need to be, you need to have support for different screen sizes you need to have different layouts, and also some changes in your manifest file...

check this question How to support different screen size in android

and this link http://developer.android.com/guide/practices/screens_support.html

edited May 23 '17 at 12:19

Community

1
1

answered Jan 20 '14 at 23:35

Android

427
5
14

Rick Falck · Answer 2 · 2014-01-21T00:36:00.337

There are many ways to make each view look right on various screens. However, I have found two methods are working best for me (at the moment):

To get the views to dynamically set their screen positions, wrap the widgets in a LinearLayout (LL), and put those LLs in a single LL. Set the weight of the inner LL to 1, and they will space themselves equally within the parent LL. This works for horizontal and vertical layouts. The distance between the widgets gets adjusted automatically by the OS.
create different dimens.xml folders/files for the different screen sizes (small, medium, large) and further differentiate them by density of needed (mdpi, hdpi, xhdpi, etc.). This way you can set margins, paddings, font sizes, for each size/density to get what you want.

EDIT: I see you put "TRANSACTION" in the background drawable? You can't do that! You need to create an image with just the text, and put it in an ImageView at the top of the layout. That way, you can set its position and size as needed for different screens, and make the other widgets adjust their positions relative to that image.

Even better would be to find a free font (ttf file) you can use that matches what you want, and put it in a TextView.

Here is a quick example of your layout with the ideas I mentioned. You would put the margins and font sizes in a dimens.xml file, so that you can adjust them.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0000ee"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/hh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="36dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="36dp"
            android:text="TRANSACTION"
            android:textColor="#ffffff"
            android:textSize="28sp" />

        <TextView
            android:id="@+id/test_textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Current Meter Reading"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="@android:color/white" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/test_linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/test_editText1"
            android:layout_width="130dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="24dp"
            android:background="#ffffff"
            android:inputType="number" />

        <Spinner
            android:id="@+id/test_spinner1"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:background="#999999" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1" >

        <Button
            android:id="@+id/test_saveButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="24dp"
            android:text="Save" />

        <Button
            android:id="@+id/test_settingsButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

How to implement correct UI for several screens in android

2 Answers2