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

LIKE

SHARE

Facebook Share Tweet LinkedIn Share

FOLLOW

LinkedIn Follow Xing Follow
Lucian Neghina

Software Developer 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

Möchten Sie mit uns in Kontakt treten?

Wenn Sie an unseren Softwareentwicklungsdienstleistungen interessiert sind, sich unserem Team anschließen möchten oder einfach mehr über uns erfahren möchten, würden wir uns freuen, von Ihnen zu hören! Schreiben Sie uns ein paar Zeilen und ein Mitglied des ASSIST-Teams wird sich so schnell wie möglich bei Ihnen melden. Wir sind sicher, dass wir Ihnen helfen können.

SETZEN SIE SICH MIT UNS IN VEBINDUNG!