Supporting multiple screens in android in single layout

Question

I have followed the following link so that my application can support different screen sizes:

Supporting multiple screens in android

That solution works perfectly. But my concern here is, when I have an android application having 8-9 screens, then it means that I will have 8-9 different .xml layout files. Now to support all screens by folder bifurcation , it means I have manage almost above fifty xml files for layouts and for a simple change in UI, I have to go to all the folders and implement that change in xml file. So can there be a better way , I mean such a layout that can just resize the controls by itself or something like that?

Answer 1

I think this is not too complex. Create all layouts in layout folder. Use styles.xml, dimens.xml and strings.xml to save font size and strings. When your layout finalize ie no changes required, then copy all these layouts from layout folder and paste in layout-small, layout-large, layout-xlarge . So when you need to change strings, style and font size you have to make changes in only values folders.

For example-

Instead of android:text="Hello" use android:text="string/hello" and save value of hello in strings.xml. Similarly for text size android:textSize="@dimen/btxt" .

This is one of the best alternative.

Answer 2

I created a relative size unit. This size unit can be used in order to build one layout xml file for all screen. This size unit is available by linking the sdp sdk . Here is an example of a layout XML built using this sdk:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:gravity="center">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/give_us_a_review_landmine_main_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="@dimen/_27sdp"
        android:paddingLeft="@dimen/_43sdp"
        android:paddingRight="@dimen/_43sdp"
        android:paddingTop="@dimen/_50sdp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Intuit"
            android:textColor="@android:color/black"
            android:textSize="@dimen/_40sdp"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/_minus10sdp"
            android:paddingBottom="@dimen/_15sdp"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:includeFontPadding="false"
                android:text="♡"
                android:textColor="#ED6C27"
                android:textSize="@dimen/_70sdp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:includeFontPadding="false"
                android:text="U"
                android:textColor="@android:color/black"
                android:textSize="@dimen/_70sdp" />
        </LinearLayout>

        <TextView
            android:id="@+id/give_us_a_review_landmine_text_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingBottom="@dimen/_12sdp"
            android:text="Rate us so we can grow and help more people get their finances in check"
            android:textColor="@android:color/black"
            android:textSize="@dimen/_16sdp" />

        <TextView
            android:id="@+id/give_us_a_review_landmine_text_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="★★★★★"
            android:textColor="#747474"
            android:textSize="@dimen/_22sdp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/give_us_a_review_landmine_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="@dimen/_25sdp"
            android:padding="@dimen/_8sdp"
            android:text="Rate"
            android:textSize="@dimen/_15sdp"
            android:visibility="visible"
            android:textColor="@android:color/white"
            android:gravity="center"
            android:minWidth="120dp"
            android:includeFontPadding="false"
            android:background="#0ac775"
            android:singleLine="true" />

    </LinearLayout>
</LinearLayout>

And here is the result:

Note that the UI elements scales with the screen size.

Answer 3

Take a look at this question: LINK

You could then make a single XML file containing the common things in all XML layouts and then for each layout just include or merge the required common XML part, this way you only have to edit the common XML file once and all the other layouts will then include the new changes.