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://imgur.com/a/iMeSwV8

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>

Answer 1

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.