How to make a flexible UI for all screen sizes?

Question

How can I make my ui look the same in different screens?

I made an app and tested it to run on 2 different phones with different screen sizes and it appeared very differently.

Here are some screenshots:

Phone 1: Huawei P20 lite (5.83"):

https://drive.google.com/file/d/1_wa9bcEa46Ygduo47Q8DNTu9-DIhOv5h/view?usp=drivesdk

Phone 2: Samsung Galaxy J1 (4.31"):

https://drive.google.com/file/d/1fNDLea4Vv6LcX-vy-T1S4-XyhHN59pKD/view?usp=drivesdk

How can I make them look the same?

Answer 1

You can achieve this by below Options

Option 1: Make separate layouts file for each device resolution

Option 2: Use Below Library it will automatically support multiple screens.

SDP : https://github.com/intuit/sdp SSP : https://github.com/intuit/ssp

Answer 2

I think you need to spend some more time going through the android documentation specifically focusing on :

1. DP vs SP - for font size. Understand which one you should use and how font settings (either OS defaults or user overrides) impacts the sizes set for each. Go through this SO discussion - What is the difference between "px", "dip", "dp" and "sp"?

2. Understand the different layouts available on android and when and how to use them. Spend some time understanding unique attributes for each of them. Have a look at this https://developer.android.com/training/constraint-layout

3. Understand how padding and margins work and what the difference is. If you are using a recyclerview understand how these behave when you apply them to a the recyclerview vs the child. Trying different combinations and visually seeing the output is the best way to learn.
4. Enable “Show Layout Bounds” to help you debug layout issues. Look at: https://developer.android.com/studio/debug/dev-options

You should not need any libraries for what you are trying to achieve. The layout seems very straight forward.

Answer 3

Add below into your project level Gradle file:

compile 'com.intuit.sdp:sdp-android:1.0.5'

Usage : In code wherever you are specifying dimensions like 10dp change it to @dimen/_10sdp . Like I have specified in this example ImageView.

        <ImageView
            android:id="@+id/your_image"
            android:layout_marginTop="@dimen/_10sdp"
            android:layout_marginBottom="@dimen/_10sdp"
            android:layout_width="@dimen/_100sdp"
            android:layout_height="@dimen/_100sdp"
            android:src="@drawable/logo"/>

This will make your application look same on different devices.