Image and text grouped in a button

Question

I'd like to know, how to insert image and text into button, and center it with, for example 20dp margin between them. Please take a look at this screenshot:

That's how it looks now

As you can see, the image is aligned to the left, and the text has moved to the right (now it's not centered like texts from other buttons). Here's a code for that:

 <Button
    android:id="@+id/button_trombocyty"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/button_erytrocyty"
    android:layout_marginTop="46dp"
    android:background="@drawable/button_normal"
    android:text="@string/button_trombocyty"
    android:textColor="#FFFFFF"
    android:textSize="14sp" 
    android:drawableLeft="@drawable/krew"
    android:drawablePadding="10dp" />

I'd like to do something like this:

enter image description here

Could you tell me please, what should I change? Thank you!

just add image and text view in linear layout.And add gradient on linearlayout , I think ,it exactly look like button — Mayur Raval, Aug 14 '14 at 12:09
try adding `android:gravity` or `android:layout_gravity` with `center` value to `Button` — Akhil Jain, Aug 14 '14 at 12:50

score 0 · Answer 1 · answered Aug 14 '14 at 12:17

I think You should add something like this

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_gravity="center_vertical"
    android:background="@drawable/hover" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/krew" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

Apply gradian in background

hover.xml

< ?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <gradient
  android:startColor="#f1f1f2"// color you want
  android:centerColor="#e7e7e8"
  android:endColor="#cfcfcf"
  android:angle="270" />
 </shape>

Thank you, but even if it looks like a button, it doesn't have possibilities of doing some actions, for example on long press etc. :( — Macieg, Aug 14 '14 at 12:23
@Macieg, You can use http://developer.android.com/reference/android/view/View.OnLongClickListener.html onlong click listener on Linearlayout, and also you can apply click event on image and textview separately — Mayur Raval, Aug 14 '14 at 12:27
Still you find some issue than check here,http://stackoverflow.com/questions/5546514/making-a-linearlayout-act-like-an-button — Mayur Raval, Aug 14 '14 at 12:30

score 0 · Answer 2 · answered Aug 14 '14 at 12:19

0

Try this way,hope this will help you to solve your problem.

<LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   style="@android:style/Widget.Button"
   android:gravity="center">
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/ic_launcher"
      android:adjustViewBounds="true"/>

   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Image caption"
      android:textColor="@android:color/black"
      android:layout_marginLeft="20dp"/>
</LinearLayout>

answered Aug 14 '14 at 12:19

Haresh Chhelana

24,720
5
57
67

Thank you, but even if it looks like a button, it doesn't have possibilities of doing some actions, for example on long press etc. :( – Macieg Aug 14 '14 at 12:24
have you try to handle Linearlayout Long click listener ? – Haresh Chhelana Aug 14 '14 at 12:37

score 0 · Accepted Answer · answered Aug 14 '14 at 14:29

You can keep using Button and use HTML <img> tag.

First create new string

<string name="button_with_img">&lt;img src=\'%1$d\'>%2$s</string>

Then in your code

final Button button = (Button) findViewById(R.id.button);
//load formatted string from resources
//it requires 2 parameters in exact order: drawable id, button's text
String text = getString(R.string.button_with_img, R.drawable.ic_launcher, "Button text");
Spanned spannedText = Html.fromHtml(text, new Html.ImageGetter() {
    @Override
    public Drawable getDrawable(String source) {
        int id = Integer.parseInt(source);
        Drawable drawable = getResources().getDrawable(id);
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        return drawable;
    }
}, null);

button.setText(spannedText);

It may be needed to adjust setting bounds for drawable.

Image and text grouped in a button

3 Answers3