Android：图像按钮图标和文字

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:

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>

Answer 1

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"/> 

Answer 2

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!