Android Button: Place Image in center and text at bottom

June 11, 2014
1 min read

To align multiple symmetric buttons in Android View, each button having an image in the center and text at bottom, use the following code: 


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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:weightSum="1"
            android:layout_weight="0.5">
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button1"
                    android:background="@drawable/right_buttom_btn_line"
                    android:text="Botton 1"
                    android:textSize="18sp"
                    android:gravity="center|bottom"
                    android:singleLine="false"
                    android:paddingBottom="10dp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/location"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button2"
                    android:background="@drawable/right_buttom_btn_line"
                    android:text="Botton 2"
                    android:textSize="18sp"
                    android:gravity="center|bottom"
                    android:singleLine="false"
                    android:paddingBottom="10dp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/settings"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:weightSum="1"
            android:layout_weight="0.5">
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button3"
                    android:background="@drawable/right_buttom_btn_line"
                    android:text="Button 3"
                    android:textSize="18sp"
                    android:gravity="center|bottom"
                    android:paddingBottom="10dp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/location"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button4"
                    android:background="@drawable/right_buttom_btn_line"
                    android:text="Button 4"
                    android:textSize="18sp"
                    android:gravity="center|bottom"
                    android:paddingBottom="10dp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/settings"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:weightSum="1"
            android:layout_weight="0.5">
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button5"
                    android:background="@drawable/right_buttom_btn_line"
                    android:text="Button 5"
                    android:textSize="18sp"
                    android:gravity="center|bottom"
                    android:paddingBottom="10dp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/location"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button6"
                    android:background="@drawable/right_buttom_btn_line"
                    android:text="Button 6"
                    android:textSize="18sp"
                    android:gravity="center|bottom"
                    android:paddingBottom="10dp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/settings"
                    android:layout_centerInParent="true"/>
            </RelativeLayout>
        </TableRow>

    </TableLayout>

</LinearLayout>

You can find the result in the screenshot below.

Android buttons

Share on:

Want to stay on top of everything?

Get updates on industry developments and the software solutions we can now create for a smooth digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Frequently Asked Questions

ASSIST Software Team Members

See the past, present and future of tech through the eyes of an experienced Romanian custom software company. The ASSIST Insider newsletter highlights your path to digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Follow us

© 2024 ASSIST Software. All rights reserved. Designed with love.