Stop imageview from stretching on certain devices

Issue

I have an activity xml that looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:orientation="vertical"
    android:baselineAligned="false">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:background="@drawable/top"
        />

    <ScrollView
                ....

This basically shows a banner on top of the linearlayout with a scrollview below. The problem I'm having is that the image is stretched on certain devices. The source image width is 1080px (in the drawable and drawable-xxhdpi folder), 720px in drawable-xhdpi, 540px in drawable-hdpi and 480 in drawable-mdpi.

Am I forgetting something or giving them the wrong width? The image is stretched out vertically btw.

Thanks for the help!

Solution

Your image sizes are wrong. The correct scales for image sized 480dp are

• mdpi 480px (x1)
• hdpi 720px (x1.5)
• xhdpi 960px (x2)
• xxhdpi 1440px (x3)

Also there's no need to have the image in drawable folder, Android will pick the best one from the listed. See this documentation for more info

Answered By - Lamorak