Android: Image Button icon and text

Question

I'm having trouble with the layout of my navigation bar. I was hoping to have an icon with text underneath it all centered in the button. Currently when the icon is drawn in it pushes the text off the page. The only way to get it back is by using android:drawablePadding="" (from here) using a negative value but it looks like this:

enter image description here

My xml looks like this:

<LinearLayout android:id="@+id/navbar"
    android:layout_alignParentBottom="true" android:gravity="center"
    android:layout_width="fill_parent" android:background="#001"
    android:layout_height="60dip" android:layout_weight="1"
    android:orientation="horizontal">

    <Button android:layout_height="fill_parent" android:id="@+id/navhomebtn" android:enabled="false" 
        android:textColor="#FFF" android:background="@drawable/navbuttonselected"   android:drawableTop="@drawable/homeicon" 
         android:drawablePadding="-40dip"
        android:text="Home" android:layout_weight=".25" android:layout_width="0dip" />

    <Button android:layout_height="fill_parent" android:id="@+id/navsearchbtn"
        android:textColor="#FFF" android:background="@drawable/navbuttons" 
        android:text="Search" android:layout_weight=".25"
        android:layout_width="0dip" />

    <Button android:layout_height="fill_parent" android:id="@+id/navfavbtn"
        android:textColor="#FFF" android:background="@drawable/navbuttons"
        android:text="Favorites" android:layout_weight=".25"
        android:layout_width="0dip" />
    <Button android:layout_height="fill_parent" android:id="@+id/navlistbtn"
        android:textColor="#FFF" android:background="@drawable/navbuttons"
        android:text="Loans" android:layout_weight=".25"
        android:layout_width="0dip" />

</LinearLayout>

Just lose all the extra parameters (layout_weight, paddings, background) untill everything shows up correctly. Then start adding your parameters bacy step by step and you will find the problem. Just tested out that Button with text and background centers the image correctly, so the problem must be hidding in your extra parameters somewhere. — Indrek Kõue, Aug 01 '11 at 14:48

score 3 · Accepted Answer · answered Aug 01 '11 at 14:51

The way your buttons look you might as well use a relativelayout containing a textview and an imageview. Then set the relativelayouts clickable attribute to true and the background attribute to your navbuttons drawable.

Another way is to use the drawableLeft/Right/Top/Bottom attributes like this:

<Button 
    android:id="@+id/home_button" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/home_icon"
    android:background="@drawable/nav_background"
    android:text="Home"/>

thank you, I didn't think about that but its a nice work around :) — Nick, Aug 01 '11 at 15:02

score 2 · Answer 2 · answered Aug 01 '11 at 14:47

To set text and image for button you may do like this:

   <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:text="Button"
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/icon"></Button>
    </LinearLayout>

Hope, it helps you!

Android: Image Button icon and text

2 Answers2