12

I am trying to create a main entry interface. I will create a six buttons, and each button will open another activity. For each button, I want it have an big icon with text below the button. Currently, I can have image on the button, but I do not know how to make the text to display below the button. I tried to place the text directly on the image, but it doesn't look good. Here is the portion for the first row (two buttons) of button

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="2" >

    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/ic_my_icon" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/ic_my_icon2" />
</LinearLayout>

This is what I am talking about. Other than that I want the icon to be an oval button. The result I want kind of look like the image in this post, except I would like six oval button with images and text. Round buttons with icon in center and text under icon

Thank you very much for your help.

Community
  • 1
  • 1
user3550749
  • 123
  • 1
  • 1
  • 4

1 Answers1

22

Use drawableTop attribute as follows: 

<Button
    android:id="@+id/btn2"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:text="This text is below the image"
    android:drawableTop="@drawable/ic_my_icon2" />

See the reference android:drawableTop and this simple example on Button documentation with drawableLeft.

Blo
  • 11,903
  • 5
  • 45
  • 99
  • Thank you very much for your help. Yes, this does make the icon appear on top and the text appear below. Though the icon size is significantly reduced. I am trying to find a way to increase the icon size now. – user3550749 Apr 19 '14 at 11:38
  • I think it will be difficult to manage its size. Maybe you should create [an ImageView and TextView inside a RelativeLayout](http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx). It will be easier to manage this. See [constrain drawableLeft/ drawableRight's height to TextView's height](http://stackoverflow.com/questions/12767726/constrain-drawableleft-drawablerights-height-to-textviews-height) or [use an ImageButton](http://stackoverflow.com/a/7538641/2668136). HTH @user3550749 – Blo Apr 19 '14 at 14:40
  • Curious, is there a way to do this programatically? – Lucas Blancas Oct 07 '15 at 06:28
  • Yes @LucasBlancas, you have to use `setCompoundDrawablesWithIntrinsicBounds(int left, int top, int right, int bottom)` - see this SO question : [How to programatically set drawableLeft on Android button?](http://stackoverflow.com/questions/4502605/how-to-programatically-set-drawableleft-on-android-button) – Blo Oct 07 '15 at 07:17