Johan
Johan

Reputation: 65

Android XML resize / fit ImageButton different screens

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>

Upvotes: 1

Views: 89

Answers (1)

Mohit Trivedi
Mohit Trivedi

Reputation: 729

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 enter image description here

enter image description here

<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>

Upvotes: 1

Related Questions