Android Button: Place Image in center and text at bottom | ASSIST Software Romania
get in touch

LIKE

SHARE

FOLLOW

Lucian Neghina

at ASSIST

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

Do you want to get in touch with us? 

If you are interested in our software development services, you would like to join our team, or you simply want to find out more about us, we’d love to hear from you! Drop us a line and a member of the ASSIST team will get back to you as soon as possible. We are sure we can ASSIST you.

GET IN TOUCH