Android XML resize / fit ImageButton different screens

Question

I made ImageButton menu design in the hopes that its size can adjust the screen: but after I test using with smartphone 3-inch 320x480 , 4-inch 480x800, 5-inch 720x1280, view ImageButton is mess.

I've tried using TableLayout, LinearLayout, GridLayout, and FrameLayout, but the result is the same.

Thank you in advance.This picture my trial results

This my XML code :

<RelativeLayout 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:background="@drawable/bg"
    android:orientation="vertical"
    tools:context=".MainActivity" >

     <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/linear1">
            <ImageView 
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter" 
                android:layout_gravity="center"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:src="@drawable/title"
                android:contentDescription="title"/>
    </LinearLayout>


      <ImageButton
        android:id="@+id/imagebutton0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linear1"
        android:layout_centerHorizontal="true" 
        android:scaleType="fitXY"              
        android:background="@drawable/image"
        android:tag="0"
        tools:ignore="contentDescription" />

    <ImageButton
        android:id="@+id/imagebutton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imagebutton0"
        android:layout_toLeftOf="@+id/imagebutton4"
        android:scaleType="fitXY"            
        android:background="@drawable/image" 
        android:tag="2"
        tools:ignore="contentDescription" />

    <ImageButton
        android:id="@+id/imagebutton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imagebutton0"
        android:layout_centerHorizontal="true" 
        android:scaleType="fitXY"            
        android:background="@drawable/image"
        android:tag="4"
        tools:ignore="contentDescription" />

    <ImageButton
        android:id="@+id/imagebutton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imagebutton0"
        android:layout_toRightOf="@+id/imagebutton4"
        android:scaleType="fitXY"            
        android:background="@drawable/image"
        android:tag="3"
        tools:ignore="contentDescription" />

   <ImageButton
        android:id="@+id/imagebutton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imagebutton4"
        android:layout_centerHorizontal="true" 
        android:scaleType="fitXY" 
        android:background="@drawable/image"   
        android:tag="1"
        tools:ignore="contentDescription" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center_vertical"
        android:orientation="horizontal" 
        android:layout_alignParentBottom="true"
        android:id="@+id/linear2"
         android:layout_below="@+id/imagebutton1">

        <TextView
            android:id="@+id/ib1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/ib1"
            android:gravity="center"
            android:text="" 
            android:scaleType="fitXY"/>

        <TextView
            android:id="@+id/ib2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/ib2"
            android:gravity="center"
            android:text="" 
            android:scaleType="fitXY"/>

        <TextView
            android:id="@+id/ib3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/ib3"
            android:gravity="center"
            android:text="" 
            android:scaleType="fitXY"/>

         <TextView
            android:id="@+id/ib4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/ib4"
            android:gravity="center"
            android:text="" 
            android:scaleType="fitXY"/>
    </LinearLayout>
</RelativeLayout>

You need to make images of different sizes: https://developer.android.com/guide/practices/screens_support.html — Al Lelopath, Sep 28 '16 at 16:23
You need to do some math on that specifically using the percentage approach/ — Enzokie, Sep 28 '16 at 16:27
You need to add images for different resolutions in order to show images of appropriate sizes on screen. If you are using android studio, then you can try plugins like **Batch drawable import** to add images of different densities in your app. Other option is to add svg and give width and height to image button. — Deepak Singh, Sep 28 '16 at 16:35
@ Mohit Trivedi Thanks for comment . I use RelativeLayout , this my xml code already post. please correct — Johan, Sep 29 '16 at 02:28
@Deepak Singh , i use eclipse and i add button image in drawable-hdpi 108x108 , drawable-ldpi 48x48, drawable-mdpi 108x108, drawable-xhdpi 108x108, drawable-xxhdpi 108x108 , and i use RelativeLayout — Johan, Sep 29 '16 at 02:33
@Enzokie What kind of example ? on top of the existing my xml code — Johan, Sep 29 '16 at 02:37
@Ai Lelopath , i use eclipse and i add button image in drawable-hdpi 108x108 , drawable-ldpi 48x48, drawable-mdpi 108x108, drawable-xhdpi 108x108, drawable-xxhdpi 108x108 , and i use RelativeLayout — Johan, Sep 29 '16 at 02:37

Mohit Trivedi · Answer 1 · 2016-09-29T07:21:44.543

I created a scratch which will define layout with linear and weight

I hope it will help you out

Also attached code with screen shots

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.4"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitCenter"
            android:src="@mipmap/ic_launcher" />

    </LinearLayout>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher" />

            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher" />

            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1"
        android:gravity="center"
        android:orientation="horizontal">


        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher" />


    </LinearLayout>


</LinearLayout>

HI, thanks for the answer, I will try. please see my xml code screenshot — Johan, Sep 28 '16 at 17:22
@Johan here i make a layout refer it and told me if you require any problem & it will work on any device even in landscape also — Mohit Trivedi, Sep 29 '16 at 07:22
@MohitTrivedi Thank you so much for your help , I've tried xml code from your in smarthpone 3inch, 4inch, 5 inch, in the emulator with some the size and the results are very satisfying. -Sorry I want to ask again: should I place the image size to ImageButton src with different sizes in drawable-hdpi, drawable-ldpi, drawable-mdpi, drawable-xdpi, drawable-xxdpi or simply in drawable-hdpi only. - and how sizes ideally ,like this or what? drawable-hdpi (72 x 72) drawable-ldpi (36 x 36) drawable-mdpi (48 x 48) drawable-xhdpi (96 x 96) drawable-xxhdpi (144 x 144) — Johan, Sep 29 '16 at 15:33
@MohitTrivedi -and for xml file, enough in layout or be added as well in layout-large, small layout, layout-sw600dp, layout-sw720dp. Previous thank you very much for the answer, and ask sorry a lot to ask. — Johan, Sep 29 '16 at 15:33
@johan I m very glad to help you out. Yes you can put images in all drawable folders because whole layout is dynamic now so don't worry about this and if I talk with layout I don't think to make different layouts use this it will run almost all devices if in future you find a device in that layout should not look proper than you should go for that device specific layout otherwise for now it is prefect. Still if you face any issue feel free to ask. And please accept answer if you satisfied — Mohit Trivedi, Sep 29 '16 at 16:11
@MohitTrivedi Thanks for your help, may god avenge your kindness — Johan, Sep 30 '16 at 01:04

Android XML resize / fit ImageButton different screens

This my XML code :

1 Answers1