Adjust imagebutton size based on the screen device size

Question

I want to dynamically adjust my imagebutton size based on the screen device size of the user.

I already know about the LinearLayout and putting a weight on each image button. but then my design is kinda different

Here is my design: https://ibb.co/cudSCa

*There's an animation on this, the middle button will fade in then the other buttons will come out in the middle button *

Here is the xml code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/bgf"
    tools:context="com.example.kixkikx.basewalk.AdminMenu">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_marginTop="180dp"

        android:layout_marginLeft="70dp"
        app:srcCompat="@drawable/finalogo" />

    <ImageButton
        android:id="@+id/button19"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginLeft="130dp"
        android:layout_marginTop="450dp"
        android:onClick="Timeline"

        android:background="@drawable/timeline1" />

    <ImageButton
        android:id="@+id/button7"
        android:layout_width="60dp"

        android:layout_height="60dp"
        android:layout_marginLeft="140dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/create1"
        android:onClick="CreateDF" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="135dp"
        android:layout_marginTop="80dp"

        android:text="Add forum"
        android:textColor="#F3D42C" />

    <ImageButton
        android:id="@+id/button5"

        android:layout_width="50dp"
        android:layout_height="60dp"
        android:layout_marginLeft="253dp"
        android:layout_marginTop="90dp"
        android:onClick="AssignTask"
        android:background="@drawable/assign1" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="230dp"
        android:layout_marginTop="150dp"

        android:text="   Assign Task"
        android:textColor="#F3D42C" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEST"
        android:textSize="16sp"
        android:textColor="#984491"
        android:visibility="invisible"
        android:id="@+id/textView4"
        android:layout_marginBottom="30dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="150dp"
        android:layout_marginLeft="50dp" />

    <ImageButton
        android:id="@+id/button8"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="90dp"
        android:background="@drawable/forum1"
        android:onClick="ViewManager"
        android:text="Log History" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="150dp"
        android:text="View  Forum"
        android:textColor="#F3D42C"
        />

    <TextView
        android:id="@+id/textView99"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="120dp"
        android:layout_marginTop="495dp"

        android:text="View timeline"
        android:textColor="#F3D42C" />

    <ImageButton
        android:id="@+id/button6"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:onClick="ViewTask"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="350dp"
        android:background="@drawable/report1"
   />

    <TextView
        android:id="@+id/textView22"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="410dp"
        android:layout_marginLeft="13dp"

        android:textColor="#F3D42C"
        android:text="View Task Reports" />


    <ImageButton
        android:id="@+id/button10"
        android:layout_width="60dp"
        android:layout_height="60dp"

        android:layout_marginTop="350dp"
        android:layout_marginLeft="230dp"
        android:background="@drawable/logout1" />

    <TextView
        android:id="@+id/textView23"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="410dp"
        android:layout_marginLeft="240dp"

        android:textColor="#F3D42C"
        android:text="Log out" />

</RelativeLayout>
</RelativeLayout>

My problem is: I don't know how to make those imagebutton to become a dynamic where it will adjust it's size based on the screensize of the device/phone while maintaining the design that i created. All images in the imagebutton has hdpi/xhdpi/xxhdpi. i generated those icon using image asset.

I also want to include the textView to be alligned for each of the imagebuttons.

Check my answer. I hope it will help you. – Vidhi Dave Jun 03 '17 at 08:42 — Vidhi Dave, Jun 03 '17 at 08:42

Vishal kumar singhvi · Answer 1 · 2020-01-20T05:53:21.217

4

The problem is that you giving hard code dimen in width and height in this case image take from hdpi xhdpi anything else but you need to define each and every dimen value in dimen value folder value 21, value small ,value large once you setup i think you can see your best result

edited Jan 20 '20 at 05:53

answered Jun 03 '17 at 07:15

Vishal kumar singhvi

936
8
17

As far as i understand on your comment, the height and the width will be taken from the source image for each image button? how can i define each and every dimen value? – Jun 03 '17 at 07:23
visit this:- https://stackoverflow.com/questions/32860815/how-to-define-dimens-xml-for-every-different-screen-size-in-android – Vishal kumar singhvi Jun 03 '17 at 07:55
if any problem then comment – Vishal kumar singhvi Jun 03 '17 at 10:33

score 0 · Answer 2 · answered Jun 03 '17 at 07:12

0

Kindly use LinearLayout with weightsum.

answered Jun 03 '17 at 07:12

Vishal Vaishnav

3,346
3
26
57

1

try explaining more. – jagapathi Jun 03 '17 at 07:14

Vidhi Dave · Accepted Answer · 2017-06-03T08:35:41.060

Try this layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_signup"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">


    <RelativeLayout
        android:id="@+id/main_layout_signup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center_vertical">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:orientation="vertical">

                <ImageButton
                    android:id="@+id/button7"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_marginTop="10dp"
                    android:onClick="CreateDF" />


                <TextView
                    android:id="@+id/textView7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Add forum"
                    android:textColor="#F3D42C" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="30dp"
                    android:gravity="left"
                    android:orientation="vertical">

                    <ImageButton
                        android:id="@+id/button6"
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:onClick="CreateDF" />


                    <TextView
                        android:id="@+id/textView6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Add forum"
                        android:textColor="#F3D42C" />


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="30dp"
                    android:gravity="right"
                    android:orientation="vertical">

                    <ImageButton
                        android:id="@+id/button5"
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:onClick="CreateDF" />


                    <TextView
                        android:id="@+id/textView5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Add forum"
                        android:textColor="#F3D42C" />


                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical"
                android:layout_marginTop="10dp">

                <ImageView
                    android:id="@+id/imageView6"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:foregroundGravity="center_horizontal"
                    android:scaleType="centerCrop"
                    android:src="@drawable/brushed_radiant_blue" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="30dp"
                    android:gravity="left"
                    android:orientation="vertical">

                    <ImageButton
                        android:id="@+id/button4"
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:layout_marginTop="10dp"
                        android:onClick="CreateDF" />


                    <TextView
                        android:id="@+id/textView4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Add forum"
                        android:textColor="#F3D42C" />


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="30dp"
                    android:gravity="right"
                    android:orientation="vertical">

                    <ImageButton
                        android:id="@+id/button3"
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:layout_marginTop="10dp"
                        android:onClick="CreateDF" />


                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Add forum"
                        android:textColor="#F3D42C" />


                </LinearLayout>
            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:orientation="vertical">

                <ImageButton
                    android:id="@+id/button1"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_marginTop="10dp"
                    android:onClick="CreateDF" />


                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Add forum"
                    android:textColor="#F3D42C" />


            </LinearLayout>

        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

screen 1- nexus One https://i.stack.imgur.com/u1dDT.png screen 2 - nexus 7 https://i.stack.imgur.com/nkM1J.png — Vidhi Dave, Jun 03 '17 at 08:40
Based on the links that you given, is the image inside of the imagebutton will adjust? — , Jun 03 '17 at 10:58
yeah this code will work perfect. Just copy paste this and add your images in imageButton. — Vidhi Dave, Jun 03 '17 at 11:00
I haven't tried it yet. I will let you know if i have any problem but then if i don't have problem i will make this as my answer. — , Jun 03 '17 at 11:07
can you help me with this? https://stackoverflow.com/questions/44350892/adjust-layout-based-on-the-screen-size — , Jun 04 '17 at 06:22

Adjust imagebutton size based on the screen device size

3 Answers3