Android Imageview is getting small

Question

I am making an android application in which I am using an ImageView.My image is displaying perfectly on Normal phone screen, but on big screen devices like Tabs, it is getting smaller and on the left side of the screen.So what is the most appropriate solution for the same?

Here is my xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#550e8c" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#550e8c"
            android:text=""
            android:textColor="#e2ffff" />

        <Button
            android:id="@+id/help"
            android:layout_width="52dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView2"
            android:layout_alignParentTop="true"
            android:layout_alignRight="@+id/textView2"
            android:background="#550e8c"
            android:drawableLeft="@drawable/help1" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rl"
        android:background="#E5E3E4"
        android:orientation="horizontal"
         >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/home"
            android:adjustViewBounds="true"

 />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="5dp"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="52dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="#781a8f"
            android:drawableLeft="@drawable/earthnew1"
            android:drawablePadding="30dp"
            android:gravity="left|center_vertical"
            android:paddingLeft="10dp"
            android:text="@string/aware_patient"
            android:textColor="#e2ffff"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btnCardiology_updates"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="6dp"
            android:background="#781a8f"
            android:drawableLeft="@drawable/updates1"
            android:drawablePadding="30dp"
            android:gravity="left|center_vertical"
            android:paddingLeft="10dp"
            android:text="@string/Cardiology_updates"
            android:textColor="#e2ffff"
            android:textStyle="bold" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="6dp"
            android:background="#781a8f"
            android:drawableLeft="@drawable/linknew1"
            android:drawablePadding="30dp"
            android:gravity="left|center_vertical"
            android:paddingLeft="10dp"
            android:text="@string/useful_links"
            android:textColor="#e2ffff"
            android:textStyle="bold" />

        <Button
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="6dp"
            android:background="#781a8f"
            android:drawableLeft="@drawable/linknew1"
            android:drawablePadding="30dp"
            android:gravity="left|center_vertical"
            android:paddingLeft="10dp"
            android:text="@string/Useful_journlas"
            android:textColor="#e2ffff"
            android:textStyle="bold" >
        </Button>
    </LinearLayout>

</RelativeLayout>

u r using image hight and width wrap_content so thia resion use hight and width fix like 50dp 50dp — Naveen Tamrakar, Oct 28 '14 at 05:36
I think you have to make image for 7 and 10 tab and put on respective drawable folder like sw600 and sw720. — Haresh Chhelana, Oct 28 '14 at 05:37
the problem might be with resolution. Use a high resolution images and place in your xhdpi and xxhdpi drawable folder. — Akhil, Oct 28 '14 at 05:38
what resolution should i set for image to put it in xhdpi and xxhdpi folder — vvv12, Oct 28 '14 at 05:41
you need to create same image with different size and put all images in different folders as per its size. — , Oct 28 '14 at 05:47
which folder do you put your image file in? or you put the same size image in all drawable folders? — bladefury, Oct 28 '14 at 05:51
@vvv12 : create *home.png* for different resolution and placed those images in different `drawable` folder like [this](http://stackoverflow.com/questions/26484020/drawable-sw720dp-vs-drawable-hdpi-drawable-xhdpi-and-others/26484473#26484473) — Kaushik, Oct 28 '14 at 05:54
changed the resolution of image on nexus 7 image is getting displayed pefectly now the issue is with only one screen that is 10.1" WXGA tablet.. — vvv12, Oct 28 '14 at 06:38

score 0 · Answer 1 · answered Oct 28 '14 at 05:42

You are using the Image view inside the Linear Layout, evethough the imageview width is wrap_content the layout width is fill_parent. Change this as wrap_content...

Like This

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rl"
        android:background="#E5E3E4"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/home"
            android:adjustViewBounds="true"/>
    </LinearLayout>

score 0 · Answer 2 · answered Oct 28 '14 at 06:00

0

issue is that you are putting same image in each folder. As Tablet and phone has different resolution you need different resolution image for them. If you using same image then you will face issue in one of the device.

answered Oct 28 '14 at 06:00

TheGraduateGuy

1,450
1
13
35

right now my image resolution is 642*305..can u give me some idea what resolution is good to set it for tablet.. nd in which folder of drwabvle should i put it.? – vvv12 Oct 28 '14 at 06:04
you should have folders like drawable-xhdpi,drawable-xxhdpi,drawable-xxxhdpi. http://stackoverflow.com/questions/16079588/setting-drawable-folder-to-use-for-different-resolutions – TheGraduateGuy Oct 31 '14 at 01:51

Piyush Vish · Answer 3 · 2014-10-28T06:14:03.210

0

You need to use Linear layout and Image view with fill_parent or weight option , and use margin from left , right , bottom and top . so your image view and linear layout will expand according to your screen resolution .

edited Oct 28 '14 at 06:14

answered Oct 28 '14 at 06:06

Piyush Vish

1
1

480*800 is the resolution for 7 in ch tablet.. and you can put your image in any drawable folder , for better understanding user drwable_xhdpi folder – Piyush Vish Oct 28 '14 at 06:20
changed the resolution of image on nexus 7 image is getting displayed pefectly now the issue is with only one screen that is 10.1" WXGA tablet.. – vvv12 Oct 28 '14 at 06:30

score 0 · Accepted Answer · answered Oct 28 '14 at 06:40

You have used an image named home in same resolution for different drawable folder.

For supporting tablets also, use large, xlarge qualifiers. Nexus 7 is a large-hdpi tablet(technically it's tvdpi, but takes images from hdpi). So if you want to put images for Nexus 7, make a folder named drawable-large-hdpi and put the images there.

Now regarding the 10 inch tablets case, they are xlarge devices and their densities can change from mdpi to xhdpi(Nexus 10). But many have resolution of 1280 * 800 and they are mdpi devices.

Create drawable folder like this

// for Phones

drawable-mdpi

drawable-hdpi

drawable-xhdpi

drawable-xxhdpi

//for 7 inch tablets

drawable-large-ldpi

drawable-large-mdpi

drawable-large-hdpi(for Nexus 7)

// for 10 inch tablets

drawable-xlarge-mdpi

drawable-xlarge-xhdpi(for nexus 10)

Create home.png for different resolution. Here is the list of resolution for whole screen slice your image according to your requirement

320 X 480 for mdpi

480 X 800 for hdpi, large-ldpi

600 X 1024 for large-mdpi (7 inch tablet)

720 X 1280 for xhdpi (s3, nexus 4)

800 X 1280 for large-hdpi, xlarge-mdpi (nexus 7, other 10 inch tablet)

1080 X 1920 for xxhdpi (s4, s5, nexus 5)

2560 X 1600 for xlarge-xhdpi (nexus 10)

i tried ur solution but problem is still on the 10.1" WXGA screen devices — vvv12, Oct 28 '14 at 07:00
have u create `drawable-xlarge-mdpi` folder and place an image respect to `800 X 1280` screen size. — Kaushik, Oct 28 '14 at 07:03

Android Imageview is getting small

4 Answers4