How to build UI that support all screen sizes and devices in android

Question

I'm currently trying to develop an android application but I've been stuck for a while now trying to scale the views in an activity.

In the picture you can see that the resolution-width is 10px(It's only to make it more understandable for you guys) at both devices. The size of the screens differentiate from 5 inch to 10 inch. The blue rectangle is just an EditText which is what I want to scale on different devices.

So as you can see, the EditText in both devices have same sizes but different amount of pixels. I want both devices to look completely the same and I have tried everything to fix this but nothing seems to really work out for me.

(This is only an example Image that I draw to show the problem, but the second image is what I try to make and where it really goes wrong)

This is what I'm trying to get fixed:

I don't understand very well your question. What exactly are you trying to achieve? Make the edit text have the same width in px in all the devices? Or make it's width as much as possible? Could you please post your xml layout? — allo86, Jul 25 '17 at 16:16
@Al Lelopath I want the layouts to be exactly the same. As you can see, the editText are as big as each other, but the one on the bigger device should be bigger. If there is a possibility, I'd like to work with '%' instead of 'dp' but there isn't... — muyat, Jul 25 '17 at 16:19
Also check out ConstraintLayout, as it is more flexible and sort of works with percentages as requested — A. Steenbergen, Jul 25 '17 at 16:33
@allo86 You can download it from here : https://github.com/SETEDUDANT/myproject — muyat, Jul 25 '17 at 16:34
@A.Steenbergen Well, my project is build in constraintLayout and I work with 'dp' for views and for text i use 'sp'. — muyat, Jul 25 '17 at 16:38
Then you should use tutorials for ConstraintLayout, the layout is pretty complex and can be used in many different ways, so it is hard to explain this to you here in this short form. — A. Steenbergen, Jul 25 '17 at 16:39
@muyat if you want to work with percentage, you can use ConstraintLayout (new recommended way) or if you prefer, you could wrap all your content in a LinearLayout with orientation=horizontal, gravity=center and define its weight — allo86, Jul 25 '17 at 16:44
@allo86 Even if I use LinearLayout, I still have to use SP, to fix the size of the text right? And what about small detail changes I do with dp? Like margin-top, because I need to seperate different objects from each other. — muyat, Jul 25 '17 at 16:47
@muyat, the sp is for the font size. You have to define that. I don't understand very well what you mean. LinearLayout also has margin properties. — allo86, Jul 25 '17 at 16:48

score 0 · Answer 1 · answered Jul 25 '17 at 16:40

Basically something like this, should do the work for you :

<?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="wrap_content"
    android:orientation="vertical"
    android:weightSum="100">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:orientation="horizontal"
        android:weightSum="100">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="10" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="10" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="10" />

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10" />

</LinearLayout>

Combine this with a maxWidth and a scrollView for small screens and this should be good to go. — A. Steenbergen, Jul 25 '17 at 16:42
@A.Steenbergen But what if I need to use DP for seperating different views or use SP for textsize? — muyat, Jul 25 '17 at 16:51
For margin you should use DP, yes , but with linear layout it will occupy the assigned weight even with layout_margins — from56, Jul 25 '17 at 16:58
If you want a more fine control of margins and text sizes on you can create different resources values directories and define dimensions for different screen width or height — from56, Jul 25 '17 at 17:01
@Tonteria24 Well, I just did that but then I get those problems i showed in the description... — muyat, Jul 25 '17 at 17:15

nocholla · Answer 2 · 2017-07-25T16:59:41.723

Assuming that you are using Android Studio. You can import this percent library that enables you to set percentages for your respective widths and heights. This will enable you to set a different percentage width and height based on device i.e. phone, 7 inch tablet, 10 inch tablet and get the same look and feel. I used it in my current project and it worked perfectly.

And ensure that you have different XML files for each device i.e. Folders should be as follows:

layout (XML files for phone),
layout-sw600dp (XML files for 7 inch Tablet),
layout-sw720dp (XML files for 10 inch Tablet),
layout-w600dp (XML files for 7 inch Tablet),
layout-w720dp (XML files for 10 inch Tablet).

Then add the screen supported on the AndroidManifest.xml as shown below.

Simply add the following dependency to your gradle i.e.

compile 'com.android.support:percent:25.3.0'

Then use as shown below ... Notice how the percentages are used to set the layout width and height i.e.

app:layout_widthPercent="100%"
app:layout_heightPercent="35%"

(Refer to code below)

    *********************************************************************
    //** activity_main.xml
    *********************************************************************

    <android.support.percent.PercentRelativeLayout
        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"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <!-- Begin Header Section -->
        <RelativeLayout
            android:id="@+id/headerSection"
            app:layout_widthPercent="100%"
            app:layout_heightPercent="55%">

            <android.support.v4.view.ViewPager
                android:id ="@+id/spotlightViewPager"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content">
            </android.support.v4.view.ViewPager>

            <RelativeLayout
                android:id="@+id/headerRight"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true" >

                <Button
                    android:id="@+id/shareButton"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_marginRight="5dp"
                    android:layout_marginTop="5dp"
                    android:theme="@style/ShareButtonBackgroundTheme"
                    android:background="@drawable/shape"
                    android:text="@string/mainShare" />
            </RelativeLayout>

        </RelativeLayout>
        <!-- End Header Section -->

        <!-- Begin Social & Weather Section -->
        <RelativeLayout
            android:id="@+id/socialWeatherSection"
            android:layout_below="@id/headerSection"
            app:layout_widthPercent="100%"
            app:layout_heightPercent="10%">

            <RelativeLayout
                android:id="@+id/socialWeatherLeft"
                android:layout_width="140dip"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true" >

                <GridView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/socialmediaGridView"
                    android:horizontalSpacing="1dp"
                    android:stretchMode="columnWidth"
                    android:gravity="center"
                    android:background="#e5e5e5">
                </GridView>
            </RelativeLayout>

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/socialWeatherLeft"
                android:scrollbars="none"
                android:id="@+id/hsv"
                android:layout_margin="1dp"
                android:fillViewport="false">

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <GridView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/weatherGridView"
                        android:horizontalSpacing="1dp"
                        android:stretchMode="columnWidth"
                        android:gravity="center"
                        android:background="#e5e5e5">
                    </GridView>

                </LinearLayout>

            </HorizontalScrollView>

        </RelativeLayout>
        <!-- End Social & Weather Section -->

        <!-- Begin Grid Navigation Section -->
        <RelativeLayout
            android:id="@+id/gridSection"
            android:layout_below="@+id/socialWeatherSection"
            app:layout_widthPercent="100%"
            app:layout_heightPercent="35%">

            <GridView
                android:id="@+id/gridView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:verticalSpacing="2dp"
                android:horizontalSpacing="2dp"
                android:layout_alignParentLeft="true"
                android:numColumns="3"
                android:stretchMode="columnWidth"
                android:gravity="center"
                android:background="#e5e5e5">
            </GridView>

        </RelativeLayout>
        <!-- End Grid Navigation Section -->

    </android.support.percent.PercentRelativeLayout>

**************************************************************
//** AndroidManifest.xml
**************************************************************

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="foo.foo.foo">

    <!-- permission for GPS location -->
    <!--<uses-permission android:name="android.permission.INTERNET" />-->
    <!--<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />-->
    <!--<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />-->
    <!--<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />-->
    <!--<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />-->
    <!--<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />-->
    <!--<uses-permission android:name="android.permission.CALL_PHONE" />-->
    <!--<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>-->
    <!--<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />-->

    <!-- Tablet Fix -->
    <uses-feature android:name="android.permission.INTERNET" android:required="false"/>
    <uses-feature android:name="android.permission.ACCESS_FINE_LOCATION" android:required="false"/>
    <uses-feature android:name="android.permission.ACCESS_NETWORK_STATE" android:required="false"/>
    <uses-feature android:name="android.permission.ACCESS_WIFI_STATE" android:required="false"/>
    <uses-feature android:name="android.permission.CHANGE_WIFI_STATE" android:required="false"/>
    <uses-feature android:name="android.permission.CHANGE_NETWORK_STATE" android:required="false"/>
    <uses-feature android:name="android.permission.CALL_PHONE" android:required="false"/>
    <uses-feature android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:required="false"/>
    <uses-feature android:name="android.permission.READ_EXTERNAL_STORAGE" android:required="false"/>

    <application
        android:name=".TestApplication"
        android:allowBackup="true"
        android:hardwareAccelerated="false"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:largeHeap="true"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".SplashScreen" android:theme="@android:style/Theme.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name=".MAINACTIVITY" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.SEND" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="image/*" />
            </intent-filter>
        </activity>

        <activity android:name=".AgencyActivity"></activity>

    </application>

    <supports-screens
        android:resizeable="false"
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"
        android:anyDensity="true"
        android:requiresSmallestWidthDp="320"
        android:compatibleWidthLimitDp="320"
        android:largestWidthLimitDp="720"/>

    <compatible-screens>
        <!--no small size screens -->

        <!--all normal size screens -->
        <screen android:screenSize="normal" android:screenDensity="ldpi" />
        <screen android:screenSize="normal" android:screenDensity="mdpi" />
        <screen android:screenSize="normal" android:screenDensity="hdpi" />
        <screen android:screenSize="normal" android:screenDensity="xhdpi" />

        <!-- all large size screens -->
        <screen android:screenSize="large" android:screenDensity="ldpi" />
        <screen android:screenSize="large" android:screenDensity="mdpi" />
        <screen android:screenSize="large" android:screenDensity="hdpi" />
        <screen android:screenSize="large" android:screenDensity="xhdpi" />

        <!-- all xlarge size screens -->
        <screen android:screenSize="xlarge" android:screenDensity="ldpi" />
        <screen android:screenSize="xlarge" android:screenDensity="mdpi" />
        <screen android:screenSize="xlarge" android:screenDensity="hdpi" />
        <screen android:screenSize="xlarge" android:screenDensity="xhdpi" />

        <!-- Special case for Nexus 7 -->
        <screen android:screenSize="large" android:screenDensity="213" />

        <screen android:screenSize="normal" android:screenDensity="480" />
        <screen android:screenSize="large" android:screenDensity="480" />
        <screen android:screenSize="xlarge" android:screenDensity="480" />`

    </compatible-screens>

</manifest>

How to build UI that support all screen sizes and devices in android

2 Answers2