CODEWITHSUNDEEP
androidandroid-buttonandroid-drawable
Isaías
Isaías

Reputation: 491

Set drawable position inside button

I've got a button and a drawable on the left of the text, but I want the drawable to be closer to the text. So I need to move the drawable.

I've defined android:drawableLeft but the content of the button is not centered.

Here is my code:

<Button
    android:id="@+id/addsubject"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_action_add"
    android:layout_centerHorizontal="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="20dp"
    android:text="@string/addsubject"
    android:textColor="@color/white"
    android:background="@drawable/custombutton1" />

Here is how it looks now:

enter image description here

And here is how I'd like it to be:

enter image description here

Thank you!

Upvotes: 28

Views: 34710

Answers (8)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364988

Use the app:iconGravity="textStart" attribute in the MaterialButton

    <com.google.android.material.button.MaterialButton
        app:icon="@drawable/ic_add_24px"
        app:iconGravity="textStart"
        ../>

enter image description here

If you want to reduce the padding between the icon and the text just use the app:iconPadding attribute:

    <com.google.android.material.button.MaterialButton
        app:icon="@drawable/ic_add_24px"
        app:iconGravity="textStart"
        app:iconPadding="0dp"/>

enter image description here

Upvotes: 20

Amin Keshavarzian
Amin Keshavarzian

Reputation: 3963

for Materialbutton, you have to use the icon attribute and you can also change its tint with iconTint like this example:

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_cancel"
    app:iconTint="@color/black"
    android:text="text" />

Upvotes: 0

mochadwi
mochadwi

Reputation: 1268

There's also other possibilities that you want to inflate the drawable/icon programatically, after reading a while and using a lot of combination using XMLs, but still doesn't works,

You might want to fork below library instead, to suits your use-cases, such as, customizing the view, position, etc programatically, see below reference:

  1. Drawable/icon aligned with text, see sample here
  2. Button like facebook sign-in, see sample here
  3. For RadioButton, see full gist code here

P.S: Copyrighted and regards to the author

Upvotes: 0

seven star
seven star

Reputation: 31

I done this simply using paddingLeft and paddingRight. Its works! ... android:paddingLeft="25dp" android:paddingRight="25dp"/>

Upvotes: 3

Imtiaz Abir
Imtiaz Abir

Reputation: 741

I got this result by simply putting these properties to the button specifically 

<Button
    ...
    android:paddingLeft="60dp"
    android:drawablePadding="-50dp"
    android:gravity="center"
    android:drawableLeft="@drawable/your_button_icon"
    />

You can tune in with your own values for your desired results.

Cheers :-)

Upvotes: 6

sergej shafarenka
sergej shafarenka

Reputation: 20426

The padding between the left border of button and right border of the icon is controlled by android:paddingLeft property. The padding between the icon and the text is defined by android:drawablePadding property.

Add these two properties to you button and set the values you are happy with.

<Button
    ...
    android:paddingLeft="24dp"
    android:drawablePadding="8dp"
    />

Upvotes: 1

Pamir Cevikogullari
Pamir Cevikogullari

Reputation: 482

You can use LinearLayout as your button by adding OnClickListener and customize however you want. 

<LinearLayout          
    android:layout_width="160dip"
    android:layout_height="60dip"
    android:orientation="horizontal" 
    android:background="@drawable/custombutton1">

    <ImageView android:layout_height="wrap_content"
               android:layout_width="wrap_content"
               android:src="@drawable/ic_action_add"
               android:layout_gravity="center"
               android:layout_weight="1"
               android:scaleType="center">

    </ImageView>

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/addsubject"
              android:layout_gravity="center"
              android:layout_weight="1"/>

</LinearLayout>

Upvotes: 1

Rakesh Rangani
Rakesh Rangani

Reputation: 1049

try this

 <Button
    android:id="@+id/addsubject"
    android:layout_width="160dip"
    android:layout_height="60dip"
    android:layout_gravity="center"
    android:drawableLeft="@drawable/ic_action_add"
    android:drawablePadding="2dip"
    android:gravity="center"
    android:paddingLeft="30dip"
    android:paddingRight="26dip"
    android:singleLine="true"
    android:text="@string/addsubject"
    android:textSize="13dip" />

Upvotes: 19

Related Questions