Alexiz Hernandez Alexiz Hernandez - 5 months ago 10
Android Question

How to align ImageButtons in a layout evenly

I currently have 4

ImageButton
s in a layout that takes only half of the screen height. I would like the
ImageButton
s to be placed evenly in the layout. Here is what I have:

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="horizontal">

<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />

<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />

</LinearLayout>

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

<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />

<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@mipmap/feed_button"
android:background="@android:color/transparent"
android:layout_weight="1" />

</LinearLayout>

</LinearLayout>


This works, since here is the result:

enter image description here

The issue is, 1: I would like to add text under each button and I am not sure how that is going to work and 2: the white spots to the right and left of the
ImageButton
s are active, as if they were parts of the button. Is there a better way to do this?

Answer

You can do something like this

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

    <RelativeLayout
        android:id="@+id/section1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/transparent">

        <ImageButton
            android:id="@+id/img1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="info 1"
            android:textColor="#fff"
            android:textSize="25sp" />
    </RelativeLayout>


    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/transparent">

        <ImageButton
            android:id="@+id/img2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img2"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="info 2"
            android:textColor="#fff"
            android:textSize="25sp" />
    </RelativeLayout>


</LinearLayout>

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

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/transparent">

        <ImageButton
            android:id="@+id/img3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img3"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="info 3"
            android:textColor="#fff"
            android:textSize="25sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/transparent">

        <ImageButton
            android:id="@+id/img4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img4"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="info 4"
            android:textColor="#fff"
            android:textSize="25sp" />
    </RelativeLayout>

</LinearLayout>

Result

enter image description here

and for second part of question you should set click listener on entire relative layout. for example for tap on first cell :-

xml

 android:id="@+id/section1"

JAVA

findviewbyid(R.id.section1).setOnClickListener(...)