center only icons (not text also) horizontally and vertically on a button

Question

I have 3 buttons at the bottom of an app im creating, and I'm just trying to use some stock android icons instead of text or a combination of both. There is the andoid:drawableStart / top / bottom / etc commands but I just would like these icons to appear smack dab in the middle. There seems to be no easy solution for this? Here is what I am working with:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/calm"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".PiktuurMain" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" >

        <Button
            android:id="@+id/takepic"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/round" />

        <Button
            android:id="@+id/editpic"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_weight="1"
            android:background="@drawable/round" />

        <Button
            android:id="@+id/sharepic"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/round"
            android:drawableStart="@android:drawable/ic_dialog_email" />
    </LinearLayout>
</RelativeLayout>

Use `CTRL+SHIFT+F` in `XML` for formatting ;) – Pratik Butani Feb 11 '14 at 05:11 — Pratik Butani, Feb 11 '14 at 05:11

score 28 · Accepted Answer · answered Feb 11 '14 at 04:17

Use an ImageButton:

<ImageButton
        android:id="@+id/sharepic"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="@drawable/round"
        android:src="@android:drawable/ic_dialog_email"
        />

score 5 · Answer 2 · answered Mar 23 '21 at 13:41

You can use MaterialButton. It has more advantages than something else. like the ripple effect, theme, icon tint, shape appearance, and so on.

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    app:icon="@drawable/ic_baseline_sports_soccer_24"
    app:iconPadding="0dp" />

<androidx.appcompat.widget.AppCompatImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_baseline_sports_soccer_24" />

Also, you should set android:padding="Xdp" to get suit width.

Best answer to get a simple icon only material button. Thanks! :) — Damercy, May 06 '21 at 16:42

score 1 · Answer 3 · answered Feb 11 '14 at 04:27

You can used ImageButton instead Button. below i show you footer layout

<LinearLayout
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="0dp"
        android:background="@drawable/trans_bg"
        android:gravity="center"
        android:padding="5dp" >

        <LinearLayout
            android:id="@+id/ib_add_ed_lay"
            style="@style/Bottombar2LinearLayout" >

            <ImageButton
                android:id="@+id/ib_add"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/add_event_button_back" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ib_map_ed_lay"
            style="@style/Bottombar2LinearLayout" >

            <ImageButton
                android:id="@+id/ib_map"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/map_button_back" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ib_call_cd_lay"
            style="@style/Bottombar2LinearLayout" >

            <ImageButton
                android:id="@+id/ib_get_route"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/route_button_back" />
        </LinearLayout>
    </LinearLayout>

Add style in values\styles.xml

 <style name="Bottombar2LinearLayout">
    <item name="android:layout_width">30dp</item>
    <item name="android:layout_height">30dp</item>
    <item name="android:layout_marginLeft">40dp</item>
    <item name="android:layout_marginRight">40dp</item>
    <item name="android:layout_marginBottom">1dp</item>
    <item name="android:layout_marginTop">1dp</item>
</style>

Output: enter image description here

center only icons (not text also) horizontally and vertically on a button

3 Answers3