CODEWITHSUNDEEP
androidimagesizescreen
Deepanshu Batra
Deepanshu Batra

Reputation: 71

How to make an image support different screens sizes or densities in Android?

I have made an XML file which has 3 images . Firstly I am not clear about why the image size is different on different screen sizes even when i am using "dp" for the dimensions of the image . So Next what i did is ,I made different layout files for different screen sizes . There also the problem i see is that most of the screens from 3.5inches to 5 inches are handled by the normal\something.xml. And the image size that appears in 3.5" screen is different from 5" screen.

Here Is the XML file normal\something.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#add8e6"
android:orientation="vertical"
android:id="@+id/mood">

<TextView
    android:layout_width="match_parent"
    android:layout_height="15dp"
    />


<TextView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:textSize="33sp"
    android:text="How's your Mood ?"
    android:gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="30dp"
    />
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="15dp"
    >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:orientation="horizontal"
        android:id="@+id/happyLayout"
        android:background="#85a9b4">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:id="@+id/happyRadio"
            android:textSize="30sp"
            />
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/happy"
            android:layout_marginLeft="30dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:orientation="horizontal"
        android:id="@+id/sickLayout">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:id="@+id/sickRadio"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/sick"
            android:layout_marginLeft="30dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:orientation="horizontal"
        android:id="@+id/sadLayout">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:id="@+id/sadRadio"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/sad"
            android:layout_marginLeft="30dp"/>
    </LinearLayout>




    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#f4880d"
        android:text="ADD MOOD"
        android:textColor="#ffffff"
        android:textSize="30sp"/>

</LinearLayout>

The above file is for Normal Screen sizes. For Large and small screens am simply changing the dimensions of the image to lower or higher "dp" value (please correct me if this approach is not correct).

Would be great if you can suggest the approach i should follow to handle image sizes for different screen size and density.

Upvotes: 1

Views: 538

Answers (1)

Nikhil
Nikhil

Reputation: 3711

Use some tool like this where you can generate images for all screens. Also refer official docs for more help.

For Images put your images accordingly

res/drawable-mdpi/graphic.png         // bitmap for medium-density
res/drawable-ldpi/graphic.png         // bitmap for large-density
res/drawable-hdpi/graphic.png         // bitmap for high-density
res/drawable-xhdpi/graphic.png        // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png       // bitmap for extra-extra-high-density

Also keep in mind

xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp

Upvotes: 1

Related Questions