How to use different images for different screen sizes android?

Question

I have put my pictures with different sizes in mdpi, hdpi, xhdpi etc But My ImageButtons that are using the image appear to be the same size on each device.

Last time I did this it worked by placing only the images in the folders. I don't remember exactly what I did though.

I want to display different size of images on different screens. I have

• 5.7 inch phone
• 5.0 inch phone
• 7.0 inch tablet

My app displays same size of image buttons in all of them.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg"
tools:context="test.music.MainActivity">

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dip">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/nowplayingname_txtv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxLines="1"
            android:scrollbars="horizontal"
            android:text="Ek Mulaqat-www.songsfarm.ifo"
            android:textColor="@color/title"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/npduration_txtv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxLines="1"
            android:text="05:12"
            android:textColor="@android:color/darker_gray" />
    </LinearLayout>

    <ImageButton
        android:id="@+id/settings_imgbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="@color/bg"
        android:paddingLeft="20dip"
        android:paddingRight="20dip"
        app:srcCompat="@mipmap/menu" />

</LinearLayout>


<ListView
    android:id="@+id/songs_listv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_weight="1"
    android:longClickable="true"
    android:layout_below="@+id/linearLayout3"
    android:layout_above="@+id/song_seekbar" />

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:orientation="horizontal"
    android:paddingBottom="16dp">


    <ImageButton
        android:id="@+id/prev_imgbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="@color/bg"
        app:srcCompat="@mipmap/prev" />

    <Space
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/pp_imgbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="@color/bg"
        app:srcCompat="@mipmap/play" />

    <Space
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/next_imgbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:backgroundTint="@color/bg"
        app:srcCompat="@mipmap/next" />


</LinearLayout>

<SeekBar
    android:id="@+id/song_seekbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/linearLayout2"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:paddingBottom="16dip"
    android:paddingTop="16dip" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_below="@+id/linearLayout"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:id="@+id/linearLayout3">


    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#D3D3D3" />

</LinearLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignTop="@+id/song_seekbar"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">


    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#D3D3D3" />

</LinearLayout>


</RelativeLayout>

Note: It's been a long time but it turns out placing the files in the correct folder works. The names of the files should be exactly the same. You can verify the size of images by comparing them to the images already present in folders.

Answer 1

You can use dimenify plugin. It will create standart set of dimens folders for different screens, and convert dimens values, for these screens. In that way your button will have it's own size for each screen:)

Answer 2

The first thing to address is the confusion of what you mean by "screen size". Do you mean physical size (eg 4 inches wide vs 7 inches wide) or do you mean logical size (eg 360dp wide vs 600dp wide)?

In my experience, a lot of developers are concerned about physical size, not realizing that they should not be. The logical size of the display is a much bigger factor in how your app will appear to a user.

If you want to use different images for different physical sizes, there is no easy way to do this using the resources framework. You will have to compute the physical size of the screen yourself in Java using a DisplayMetrics object's widthPixels and xdpi fields, and then write code that uses eg R.drawable.my_drawable_four_inches or R.drawable.my_drawable_seven_inches .

If you want to use different images for different logical sizes, the resources framework will help you. You can set your drawable resources up like this:

res/
    drawable/
        my_drawable.png
    drawable-sw600dp/
        my_drawable.png

Now in your layouts and your Java code you can simply refer to @drawable/my_drawable or R.drawable.my_drawable , and the system will automatically pick the right one for you. Any device 600dp or wider will get the second file, and any device 559dp or narrower will get the first.

On top of all this, you might want to consider providing multiple copies of the same image for different screen resolutions. That's a little outside the scope of this answer, but you can read about it here: https://developer.android.com/guide/practices/screens_support.html#density-independence