Best way to make a 3x3 image button layout for android studio

Question

I am looking to make an Android version (I just started learning how to use Android studio). I have difficulties with the layout. I want to make a 3x3 image button on my main activity but I don't know how to fix their sizes so they fit all screens. In Xcode (iOS), I could easily drag and resize and set constraints but I'm having trouble doing that in Android studio.

Can anyone tell me how to do it? Or at least redirect me to another post or a video that could help me?

You can also try to use the new Android ConstraintLayout available in Android Studio 2.2 beta. It is more similar to your iPhone style. See http://tools.android.com/tech-docs/layout-editor for details. — lionscribe, Aug 29 '16 at 04:15

score -1 · Answer 1 · answered Aug 29 '16 at 03:49

You can use GridView or you can implement it using LinearLayout like this. Check out this xml layout it will work for you.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="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:orientation="vertical"
android:background="#d3d3d3"
tools:context=".ui.MainActivity">

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="3">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="2.5dp"
        android:orientation="horizontal"
        android:weightSum="3">

        <LinearLayout
            android:id="@+id/l1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="@android:color/white"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/l2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/white"
            android:layout_margin="5dp"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/l3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="@android:color/white"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="2.5dp"
        android:weightSum="3">

        <LinearLayout
            android:id="@+id/l4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="@android:color/white"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/l5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/white"
            android:layout_margin="5dp"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/l6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="@android:color/white"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="2.5dp"
        android:weightSum="3">

        <LinearLayout
            android:id="@+id/l7"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="@android:color/white"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/l8"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/white"
            android:layout_margin="5dp"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/l9"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="@android:color/white"
            android:orientation="vertical"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                android:src="@drawable/hath_back_icon" />
        </LinearLayout>
    </LinearLayout>


</LinearLayout>

Why you are using LinearLayout(LL) inside another LL and again One more LL, this is not optimised way... please checkout with this link https://developer.android.com/training/improving-layouts/optimizing-layout.html — kgsharathkumar, Aug 29 '16 at 06:06

Best way to make a 3x3 image button layout for android studio

1 Answers1