Why is Android picking wrong density images?

Issue

I have a Coordinator layout and a an ImageView for profile pic that is supposed to "hang" from the ActionBar. The problem is that Android is picking the wrong image from the different density drawable folders. Here is how the layout looks:

You can see here that the image is covering almost the entire screen(it isn't supposed to). Here are the various drawable dimensions I have provided in the respective folders:

• drawable-mdpi/avatar.png | 310x310px
• drawable-hdpi/avatar.png | 465x465px
• drawable-xhdpi/avatar.png | 621x621px
• drawable-xxhdpi/avatar.png | 931x931px

Now, why isn't Android showing the image like covering a small area(as it would do as per mdpi)?

(The above test screen is xxhdpi)

Note: The image has been created in Photoshop Artboard where we assume that density of desktop is mdpi and scale up/down for other densities in mobile.

---

Code for reference:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/main.appbar"
        app:layout_anchorGravity="bottom|center"
        android:src="@drawable/avatar"/>



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

Solution

Why do you think that the profile picture should be small? Your standard modern phone has somewhere around 360-400 horizontal dp; if your mdpi image is 310x310 (and the rest of your images scale accordingly), then I would expect the image to be nearly as wide as a normal phone.

Everything appears to be working correctly given the dimensions you've posted.

Answered By - Ben P.