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

Ready to make it happen?

Drop us a line. We’d love to hear from you and see how we can help in solving your digital challenges. As one of the best software outsourcing companies in Romania, Eastern Europe, Europe and the world really, we are sure we can ASSIST.

GET IN TOUCH