A button with an image/text centered in background

Question

I have seen a lot of possible answers to my problem but none of them work for me. My goal is to have a rounded button with an image, some text and a background. The image and text should be centered in the background.

I'm using the following for the background:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="rectangle">

    <corners android:radius="120sp" />

    <solid android:color="#FF5F00" />

    <size
        android:width="120sp"
        android:height="36sp" />

</shape>

The following for the image:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24sp"
    android:height="24sp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:pathData="M5,12L19,12"
      android:strokeLineJoin="round"
      android:strokeWidth="2"
      android:fillColor="#00000000"
      android:strokeColor="#FFFFFF"
      android:strokeLineCap="round"/>
  <path
      android:pathData="M12,5L12,19"
      android:strokeLineJoin="round"
      android:strokeWidth="2"
      android:fillColor="#00000000"
      android:strokeColor="#FFFFFF"
      android:strokeLineCap="round"/>
</vector>

And finally the button:

    <Button android:layout_columnSpan="6" 
android:layout_gravity="center" android:drawableStart="@drawable/ic_plus_24px" 
android:text="Evaluer" 
android:id="@+id/doEvalQOL" android:background="@drawable/roundedyakabutton" android:textColor="#FFFFFF" 
android:gravity="center" 
android:textSize="12sp" 
fontPath="fonts/Ubuntu-Medium.ttf" />

This gives me this:

As soon as I remove the background, the image and text are placed as I would like them to be with the background:

What am I missing here ? Thanks in advance.

what is your expected output ? You have any screenshots ? – Karthic Srinivasan Oct 29 '18 at 09:06 — Karthic Srinivasan, Oct 29 '18 at 09:06
I had same issue, see answer below. – Khemraj Sharma Oct 29 '18 at 09:21 — Khemraj Sharma, Oct 29 '18 at 09:21

Sanjay Bhalani · Accepted Answer · 2018-10-29T10:59:04.627

3

You can use drawablePadding, paddingLeft and paddingRight to align text and its icon in the center of the button. I have used below code and the result is attached as a screenshot. Try once hope it helps you.

    <Button
    android:id="@+id/doEvalQOL"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/roundedyakabutton"
    android:drawableLeft="@drawable/ic_plus_24px"
    android:text="Evaluer"
    android:drawablePadding="2dip"
    android:gravity="center"
    android:paddingLeft="30dip"
    android:paddingRight="26dip"
    android:singleLine="true"
    android:textColor="#FFFFFF"
    android:textSize="12sp"
     />

edited Oct 29 '18 at 10:59

answered Oct 29 '18 at 09:36

Sanjay Bhalani

2,424
18
44

Not right now... Are you sure you didn't modified something else in the code I provided? The result for me is that neither the text nor the icon are visible. – Oct 29 '18 at 10:08
Sorry, it does not work. I only see the orange button. No icon. No text. – Oct 29 '18 at 10:33
same result, sorry. – Oct 29 '18 at 10:53
2

Beware of hardcoding paddings for multiple size of screens. – Khemraj Sharma Oct 29 '18 at 11:20
You can use com.intuit.sdp:sdp-android:1.0.6 for avoiding hardcoding padding size for multiple screens. – Sanjay Bhalani Oct 29 '18 at 11:44

Khemraj Sharma · Answer 2 · 2018-10-29T09:21:20.263

0

Problem

You can not set gravity of drawableLeft in Button/ TextView. Here you have set gravity to Button, that makes text center but image keeps in left.

Solution

Use minus margin android:drawablePadding="-20sp" for drawableLeft.
Or don't use ImageView and Button wrapping with parent View (with background) instead of Button.

edited Oct 29 '18 at 09:21

answered Oct 29 '18 at 09:13

Khemraj Sharma

57,232
27
203
212

first proposed solution does not solve the problem I do not understand your second proposed solution. Please elaborate – Oct 29 '18 at 10:55
You have to adjust `android:drawablePadding` according to your need. – Khemraj Sharma Oct 29 '18 at 11:15

A button with an image/text centered in background

2 Answers2