How do I support same screen size but different dpi?

Question

So I have an image here and I have created multiple copies of the image by putting them into different drawable folders.

<ImageView
    android:id="@+id/Profile_Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:contentDescription="@string/profile_button"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/profile_bar"
    android:focusable="true" />

Now my problem is the design of my app looks perfect on some screen sizes, but for others, it does not look good.

For example, the design of my app looks perfect on the Nexus 5, but when I change to the Pixel, it messes up even though the screen size is the same. I have learned the dpi is different which is why it's messing up.

So, how do I support the same screen size with different dpi?

Edit: Link to what screen looks like on Nexus 5 and Pixel - https://i.stack.imgur.com/w2okl.jpg

Edit 2: XML code for how I have decided to design my three images. The design is correct now, except for one thing. Instead of appearing at the top of the screen, the three images appear in the center of the screen. If I can move these images to the top, my problem would be fixed.

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

    <ImageView
        android:id="@+id/Profile_Button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:contentDescription="@string/profile_button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/profile_bar"
        android:focusable="true" />

    <ImageView
        android:id="@+id/Game_Button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:contentDescription="@string/game_button"
        app:layout_constraintEnd_toStartOf="@+id/Messages_Button"
        app:layout_constraintStart_toEndOf="@+id/Profile_Button"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/podium_bar"
        android:focusable="true" />

    <ImageView
        android:id="@+id/Messages_Button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:contentDescription="@string/messages_button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/messages_bar"
        android:focusable="true" />
</LinearLayout>

Try giving this a read: https://developer.android.com/training/multiscreen/screendensities — Dan Harms, Jan 04 '19 at 18:15
Related: [Different resolution support android](https://stackoverflow.com/questions/16706076/different-resolution-support-android) — Bö macht Blau, Jan 04 '19 at 18:17
@0X0nosugar Like I said, I already have drawable folders set up. I don't need to worry about font sizes, nor do I need to worry about Tablet. I'm only worrying about images and mobile. That link shows a solution that I have implemented that does not solve my problem. — Bert Hanz, Jan 04 '19 at 18:30
Its really difficult to help you when you don't tell us what the actual problem is, and don't have images so we can see ourselves. "does not look good" isn't solvable without knowing what about it doesn't look good. — Gabe Sechan, Jan 04 '19 at 18:37
@GabeSechan I have included a link at the bottom of my post to show what the Nexus 5 and Pixel screen looks like. — Bert Hanz, Jan 04 '19 at 19:26

score 0 · Answer 1 · answered Jan 04 '19 at 20:00

first of all it would be appreciated if you provide more information like activity XML code and what you really expect it to be. but i give some tips which may be helpful.

First, putting different images with different resolutions in drawable folder cause your images that match phone's resolution get loaded. for higher resolution, higher quality images and for lower resolution, images with lower size and resolution. if you put 1 image in folder ,android has auto resizing feature which will resize image for phone. so it may be blurry in high resolutions if it doesnt have good quality.

in your question both phones are loading same images because they have same resolutions. so problem is not caused by those images.

Second, most important thing to make your app look just the same in all aspect ratios and resolutions is how you made your layout. i love LinearLayout because it just fits in every situation. putting some LinearLayout inside each other and spending some time to make them look ok worth because you will be assured it will be nice in every situation.

for your case: try 1 horizontal LinearLayout with 3 children(imageview). put all weights to 1. then no matter each screen size, they will fill top of the screen with same size.

I have updated my post with the code. I took what you said into consideration. My only problem now is the images appear in the center of the screen instead of the very top of the screen. Can you look at my code and tell me what I should change? — Bert Hanz, Jan 04 '19 at 21:35
happy to hear that, but i dont get that why adjustViewBound was needed — Amir Hedieh, Jan 05 '19 at 17:21

How do I support same screen size but different dpi?

1 Answers1