1

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?

double-beep
  • 5,031
  • 17
  • 33
  • 41
Dan
  • 28
  • 3
  • 2
    Please do not provide URLs that link to your screen shots. Instead, embed the screen shots as images within your question so that readers do not need to click links. – skomisa Mar 31 '19 at 04:24
  • OK, fair enough. But can you clarify why you weren't allowed to embed your images, since that approach is strongly encouraged here. If you post your screen shots to an image hosting site such as imgur you should be able to embed the images in your question. Or you can just upload them from your computer. – skomisa Mar 31 '19 at 05:21

3 Answers3

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

VIISHRUT MAVANII
  • 11,410
  • 7
  • 34
  • 49
0

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.

tired_overlord
  • 11
  • 2
0

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.

Surabhi Choudhary
  • 538
  • 8
  • 14