CODEWITHSUNDEEP
androidandroid-layoutandroid-widget
James Fletcher
James Fletcher

Reputation: 920

Android Adapting ImageView Size to Screen Size

I have a specific layout that I want to achieve, but I can't figure out how to make it work robustly across multiple screen sizes.

The key idea is that the information in the TextViews is important, and the ImageView is decorative. I want the ImageView to be resized according to the users screen size (up to a maximum size). Also, I want all elements to stay grouped together so that they don't appear sparse on large screens. I would prefer to find a solution in xml, but am open to anything that will do the job.

Here's what I'm after (I can't post images here yet):

On small screens the imageview shrinks:

https://dl.dropbox.com/u/29549935/small_screen.png

On large screens imageview meets a max value (should be handled by scaling automatically), and the content is kept together in the screen's center:

https://dl.dropbox.com/u/29549935/large_screen.png

I have tried a lot of options that I thought should have worked, for instance, the code below positions the textviews relative to the imageview, all grouped together in a relativelayout. This works well on large screens, however on small screens the textviews are pushed out of the way by the imageview:

<RelativeLayout
    android:id="@+id/container1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/container2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textview1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_above="@+id/imageview1"
            android:gravity="center_horizontal"
            android:text="@string/textview1" />

        <ImageView
            android:id="@+id/imageview1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerInParent="true"
            android:gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:maxHeight="256dp"
            android:maxWidth="256dp"
            android:minHeight="100dp"
            android:minWidth="100dp"
            android:scaleType="centerInside"
            android:src="@drawable/mydrawable" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageview1"

            android:gravity="center_horizontal"
            android:text="@string/textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview2"
            android:gravity="center_horizontal"
            android:text="@string/textview3"/>
    </RelativeLayout>
</RelativeLayout>

It seems like this way could work if it is stipulated that the imageview can take up a proportion of the relativelayout.

Any help very welcome. Thanks in advance.

Upvotes: 3

Views: 3979

Answers (1)

RajeshVijayakumar
RajeshVijayakumar

Reputation: 10650

For that you have to create images for separate screen resolution and put it in drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi folders....`, such as 

drawable-ldpi  - Low dpi  (Low size screen Resolution)

drawable-mdpi  - Medium dpi (Medium size screen Resolution)

drawable-hdpi  - High dpi,  (large size screen Resolution)

drawable-xhdpi - Extended High dpi (For tablest and wide screen)

And also you should take care of density of the image

multiple screen support

Sample App and ABout density etc ...

Multiple screen support design

Upvotes: 1

Related Questions