12

I can't center my drawableLeft icon.
I can easily put icon on the left of text, but if I set gravity to center, then only text is centered, but no icon.

<Button
    android:id="@+id/patient_list_button"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/patientList"
    android:drawableLeft="@drawable/ic_icon_two_heads"
    android:layout_marginBottom="15dp"
    style="@style/darkBlueButtonWithImage"/>

This is what I want:
enter image description here
This is what I have:
enter image description here

<style name="darkBlueButtonWithImage">
    <item name="android:drawablePadding">10dp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:paddingLeft">10dp</item>
    <item name="android:background">@drawable/radius_dark_blue_button</item>
    <item name="android:gravity">center_vertical|left</item>
    <item name="android:drawableTint">@color/white</item> <!-- has to be set in activity.java -->
</style>

How can I achieve this?

7
  • Use drawable padding Mar 29, 2017 at 16:22
  • @JanardhanR Using padding would make it impossible if the button's text is dynamic. Mar 29, 2017 at 16:23
  • You have in your style gravity set to center_vertical|left. Try replacing it with center
    – Ricardo
    Mar 29, 2017 at 16:24
  • make custom view instead of button!! Mar 29, 2017 at 16:25
  • 1
    @JaydeepPatel really… you're going to make a custom view just for that. Mar 29, 2017 at 16:27

6 Answers 6

13

Finally, after all these years, we have possibility to achieve such behavior in simple and intuitive way. All you have to do is use MaterialButton from Google Material library. Then use style with icon. After that you can use app:iconGravity property and set it to textStart

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Some text"
        app:iconGravity="textStart"
        app:icon="@drawable/some_icon" />
6

The easiest solution IMO:

yourButtonView.text = SpannableString(" ${getString(R.string.your_string)}").apply {
            setSpan(
                ImageSpan(requireContext(), R.drawable.your_icon),
                0,
                1,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
            )
        }

Is a bit hacky? Maybe. Does it work with every button (MaterialButton, AppCompatButton, Button, etc)? It does.

I prefer this rather than going with all the hassle of creating a custom view or something like that.

1
  • thx, in our project we had a custom button which could inherit from MaterialButton neither doing a new layout with ImageView and TextView, was an option (well, it was but very time and money consuming to mimic all our current tv button behaviour). Your solution (or hack :) ) worked well ad solved the problem -thank you a lot :) Feb 19, 2021 at 23:08
4

After giving Google's approach a try over 9000 times, I almost always ended up using a ViewGroup to put both side by side, particularly a RelativeLayout or LinearLayout and then adding an ImageView and a TextView. It's lame, but drawableStart/End have so many missing features that you'll waste a lot of time before you realize "you can't do it".

Alignments, tinting, Vectors, etc. All those things are harder or impossible with the "built in" drawable.

1
  • Ok give Google another chance, just the last one, aaand, nope.
    – Jumpa
    Mar 10, 2021 at 13:57
3

Using Button attributes android:drawableLeft and android:drawablePadding you won't be able to get your expected result. You can create a custom button using RelativeLayout or LinearLayout, TextView and ImageView. Use <selector> to define your button state(normal/pressed) behavior.

Here is an working example. Try this:

<!--- Custom Button -->
<RelativeLayout
    android:id="@+id/patient_list_button"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:clickable="true"
    android:background="@drawable/custom_button_selector">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_centerInParent="true"
        android:gravity="center_vertical">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/icon_refresh"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:textSize="16dp"
            android:text="CUSTOM BUTTON"
            android:textStyle="bold"
            android:textColor="#FFFFFF"/>

    </LinearLayout>
</RelativeLayout>

custom_button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/bg_custom_button_pressed" />
    <item
        android:state_focused="true"
        android:state_enabled="true"
        android:drawable="@drawable/bg_custom_button_pressed" />
    <item
        android:state_enabled="true"
        android:drawable="@drawable/bg_custom_button_normal" />
</selector>

bg_custom_button_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- view background color -->
    <solid
        android:color="#01A1DD" >
    </solid>

    <!-- Here is the corner radius -->
    <corners android:radius="8dp" >
    </corners>

</shape>

bg_custom_button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- view background color -->
    <solid
        android:color="#303F9F">
    </solid>

    <!-- Here is the corner radius -->
    <corners android:radius="8dp" >
    </corners>

</shape>

OUTPUT:

enter image description here Hope this will help~

2
  • @MarekCzaplicki My pleasure :). You can use Android studio "Image Asset" option to get icons. Just right click on your any project "File > New > Image Asset". Thank you~ Mar 30, 2017 at 4:46
  • @Marek: May I know the reason of rejecting this answer from Accepted Answer? Apr 9, 2021 at 12:20
2

a) Increase "paddingLeft" value and shrink or remove "drawablePadding" in your case, adjust the value to a proper one; for example:

android:paddingLeft="50dp"
android:gravity="center_vertical|left"

b) Use a custom view.

0

A bit hacky solution:

<TextView
    android:id="@+id/tv_whatsapp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/tv_call"
    app:layout_constraintTop_toBottomOf="@id/tv_completed_message_desc"
    android:layout_width="0dp"
    android:layout_height="40dp"
    android:textStyle="normal"
    android:layout_marginTop="@dimen/rs_dp_13"
    android:layout_marginRight="@dimen/rs_dp_12"
    android:background="@drawable/rs_dark_teal_rectangle_bg"
    android:textSize="14sp"
    android:textColor="@color/dark_teal"
    **android:paddingHorizontal="38dp"**
    android:includeFontPadding="false"
    **android:drawableStart="@drawable/rs_user_journey_whatsapp_icon"**
    **android:drawableLeft="@drawable/rs_user_journey_whatsapp_icon"**
    android:visibility="visible"
    android:letterSpacing="0.04"
    app:layout_constraintHorizontal_chainStyle="packed"
    **android:gravity="center_vertical|end"**
    android:text="Whatsapp"/>

Setting horizontal padding along with gravity as center_vertical|end will achieve the required behaviour. You can increase/decrease the padding as per requirement.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.