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

Sehen Sie die Vergangenheit, Gegenwart und Zukunft der Technologie mit den Augen eines erfahrenen rumänischen Unternehmens für kundenspezifische Software. Der ASSIST Insider-Newsletter beleuchtet Ihren Weg zur digitalen Transformation.

* Ich habe die Nutzungsbedingungen und Datenschutzrichtlinien der ASSIST Software-Website gelesen und verstanden.

Folgen Sie uns

© 2025 ASSIST-Software. Alle Rechte vorbehalten. Mit Liebe entworfen.