How to scale UI according to device screen

Question

I am working on a project and I am trying to make the layout of the login screen. Layout Image

and here's my xml code

<LinearLayout 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:orientation="vertical"
tools:context="com.ngo.ravi.idi.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="30dp"
    android:background="@color/colorPrimaryDark">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="35sp"
        android:textColor="#FFF"
        android:text="@string/welcome"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:fontFamily="@font/autour_one"
        android:text="@string/descrip"
        android:textColor="#fff"
        android:textSize="15sp"/>
    <Button
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="@string/learnMore"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:textColor="#fff"
        android:background="@drawable/buttonstyle2"/>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="@string/email" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp">

        <EditText
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="@string/password" />

    </android.support.design.widget.TextInputLayout>

    <Button
        android:layout_marginTop="20dp"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="@string/login"
        android:background="@drawable/buttonstyle"/>

</LinearLayout>

I am facing a problem with its display. I am using emulator to check this app and I tried this in 4", 4.7", 5", 5.2", 6" display and it works fine with 5" and above but when I tried this with 4" and 4.7" I found that the text of this wouldn't scaling down. Is there any way to make this app to automatic scaling as per the device.

Thank in Advance

refer : https://stackoverflow.com/questions/48719449/scale-imageview-to-look-the-same-on-phone-and-tablet/48719554#48719554 — Ali, Feb 15 '18 at 10:08
Use dimens ..to create different sizes for different screens — Santanu Sur, Feb 15 '18 at 10:11

score 1 · Accepted Answer · answered Dec 15 '18 at 08:06

An android SDK that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size. It can help Android developers with supporting multiple screens.

in gradle past this library :

dependencies {
  implementation 'com.intuit.sdp:sdp-android:1.0.5'
  implementation 'com.intuit.ssp:ssp-android:1.0.5'
}

If you want to use height, width, margin, padding etc then you use @dimen/_20sdp. (Take Size as per your requirement).

If you want to use TextSize then use @diment/_12ssp. (Take Size as per your requirement).

Please have a look below sample code:

<ImageView
        android:id="@+id/img_companies"
        android:layout_width="@dimen/_20sdp"
        android:layout_height="@dimen/_20sdp"
        android:src="@drawable/ic_companies"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"/>

this way u can use fix size of height and width both side

UPDATE sdp is used for same UI in Tablet and Mobile devices. ssp is used for same TextSize for Tablet and Mobile devices. also u can see this link for another example: https://github.com/intuit/sdp

hope it's useful for u

score 0 · Answer 2 · answered Feb 15 '18 at 10:11

You have to create multiple Screen layout.

Reference :

you should create layout layout like, for supporting all screens.

res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge

score 0 · Answer 3 · answered Feb 15 '18 at 10:55

You can create multiple dimen files in diffrent size folders like this:

res/values-sw400p

res/values-sw600p

res/values-sw800p

and create dimen.xml in each folder.

and then make dimen item name same in each file but you can assign its values diffrent as per your requirment

example:

sw400p/ dimen.xml

 textview_margin=10dp

sw600p/ dimen.xml

 textview_margin=16dp

sw800p/ dimen.xml

 textview_margin=20dp

How to scale UI according to device screen

3 Answers3