CODEWITHSUNDEEP
androidandroid-drawable
Arda Çebi
Arda Çebi

Reputation: 1985

how to change a drawableLeft icon size on a button?

I added some icons on 4 buttons and they look so big next to the button. So how can I resize them? I used drawableLeft on the buttons to add icons.

The drawables are called deal, trophy, puzzle and megaphone. The icons are too big. The content_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="tr.k12.evrim.evrimnews.MainActivity"
    tools:showIn="@layout/activity_main">




    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frameLayout"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Giriş Yap"
                android:onClick="SignIn"
                android:textStyle="bold"
                style="@style/Widget.AppCompat.Button.Colored"/>




            </LinearLayout>


    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_below="@id/frameLayout"
        android:orientation="vertical">



    <Button
        android:text="Duyurular"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_below="@+id/frameLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="13dp"
        android:id="@+id/button2"
        android:drawableLeft="@drawable/megaphone" />

    <Button
        android:text="Kadromuz"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_below="@+id/button2"
        android:layout_alignEnd="@+id/button2"
        android:layout_marginTop="13dp"
        android:id="@+id/button3"
        android:drawableLeft="@drawable/puzzle"/>

        <Button
            android:text="Başarılarımız"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginTop="12dp"
            android:id="@+id/button5"
            android:drawableLeft="@drawable/trophy"/>


    <Button
        android:text="Ortaklarımız"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_marginTop="12dp"
        android:id="@+id/button4"
        android:drawableLeft="@drawable/deal"/>




    </LinearLayout>

</RelativeLayout>

Upvotes: 114

Views: 122317

Answers (10)

Tarun Anchala
Tarun Anchala

Reputation: 2722

create new drawable as below and use it in view. We can set width,height,margins for drawable.

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

   <item
    android:width="12dp"
    android:end="3dp"
    android:start="3dp"
    android:top="3dp"
    android:bottom="3dp"
    android:height="12dp"
    android:drawable="@drawable/your_drawable" />

</layer-list>

Upvotes: 3

Rasoul Miri
Rasoul Miri

Reputation: 12222

update:

Just use the MaterialButton it has icons property, for example:

app:icon
app:iconSize
app:iconGravity
app:iconPadding



<com.google.android.material.button.MaterialButton
    app:icon="@drawable/test"
    app:iconSize="8dp"
    app:iconGravity="end"
    app:iconPadding="8dp"/>

Upvotes: 22

Sid Shinde
Sid Shinde

Reputation: 238

This solution works for all use cases where you use a vector graphics icon and it is compatible with below 23 versions as well.

Open the drawable icon in xml

Original Icon drawable:

<vector 
    android:height="24dp"
    android:tint="?attr/colorControlNormal" 
    android:viewportHeight="24"
    android:viewportWidth="24" 
    android:width="24dp" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M11,18h2v-2h-2v2zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM12,6c-2.21,0 -4,1.79 -4,4h2c0,-1.1 0.9,-2 2,-2s2,0.9 2,2c0,2 -3,1.75 -3,5h2c0,-2.25 3,-2.5 3,-5 0,-2.21 -1.79,-4 -4,-4z"/>
</vector>

Now wrap your path tags with group tag and add attributes scaleX, scaleY, pivotX and pivotY in group tag to shrink the icon size like this :

<vector 
    android:height="24dp"
    android:tint="?attr/colorControlNormal" 
    android:viewportHeight="24"
    android:viewportWidth="24" 
    android:width="24dp" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:pivotX="12"
        android:pivotY="12">
        <path
        android:fillColor="@android:color/white"
        android:pathData="M11,18h2v-2h-2v2zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM12,6c-2.21,0 -4,1.79 -4,4h2c0,-1.1 0.9,-2 2,-2s2,0.9 2,2c0,2 -3,1.75 -3,5h2c0,-2.25 3,-2.5 3,-5 0,-2.21 -1.79,-4 -4,-4z"/>
    </group>
</vector>

You can control the size of the icon by changing scaleX and scaleY.

This is useful not only in case of drawables but any place where an icon is used and where it is not easy to find styling solutions to reduce icon size like say an AlertDialogue.

Upvotes: 4

PenguinDan
PenguinDan

Reputation: 934

Just use Google's MaterialButtons: https://material.io/develop/android/components/buttons/

app:icon
app:iconGravity
app:iconPadding
app:iconSize

Upvotes: 26

Gibolt
Gibolt

Reputation: 47137

Using a Kotlin Extension:

Add this to keep your code clean and reusable. If you pass nothing or 0 for id, it will clear the drawable. (Button extends TextView)

buttonView.leftDrawable(R.drawable.my_icon, R.dimen.icon_size)

// Button extends TextView
fun TextView.leftDrawable(@DrawableRes id: Int = 0, @DimenRes sizeRes: Int) {
    val drawable = ContextCompat.getDrawable(context, id)
    val size = resources.getDimensionPixelSize(sizeRes)
    drawable?.setBounds(0, 0, size, size)
    this.setCompoundDrawables(drawable, null, null, null)
}

Upvotes: 12

OzzyTheGiant
OzzyTheGiant

Reputation: 739

As long as the icon is a Vector asset, go inside the vector file and modify android:width and android:height to something like @dimen/icon_size. Then define this resource in your dimens.xml files for multiple screen sizes. Works like a charm

Upvotes: 7

seekingStillness
seekingStillness

Reputation: 5093

Adding to DroidBender's great answer. His solution does not crash on API 21, so it still can be used, even without adding Build.VERSION.SDK_INT code. This is how the solution using a standard image asset looks on API 21 (using text height as the dimension setting).

enter image description here

And this is how it looks on API 23+

enter image description here

It is still a really good option, even if the min API < 23.

Upvotes: 5

DroidBender
DroidBender

Reputation: 7892

Wrap your resource in a drawable that defines your desired size similar to:

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

  <item
      android:drawable="@drawable/icon"
      android:width="@dimen/icon_size"
      android:height="@dimen/icon_size"
      />

</layer-list >

After that, use this drawable in your android:drawableLeft tag

Upvotes: 274

Orbite
Orbite

Reputation: 545

You can set bounds programatically (here), this will look like this

Drawable img = ActivityName.this.getContext().getResources().getDrawable(
            R.drawable.blue_line);
img.setBounds(left, top, right, bottom);
button.setCompoundDrawables(img, null, null, null);

Upvotes: 10

moe_nyc
moe_nyc

Reputation: 307

Try the following. Declare the drawables as the icons you want to use

    Drawable drawable = getResources().getDrawable(R.mipmap.youricon);
    drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() * 0.6),
            (int) (drawable.getIntrinsicHeight() * 0.6));
    ScaleDrawable sd = new ScaleDrawable(drawable, 0, 40, 40);
    youredittext1.setCompoundDrawables(null, null, sd.getDrawable(), null);
    drawable = getResources().getDrawable(R.mipmap.yourothericon);
    drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() * 0.6),
            (int) (drawable.getIntrinsicHeight() * 0.6));
    sd = new ScaleDrawable(drawable, 0, 40, 40);
    youredittext2.setCompoundDrawables(null, null, sd.getDrawable(), null);

Upvotes: 6

Related Questions