Changing the drawable size inside a button

Question

I want to create a Button like this:

Here is my code:

<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:drawablePadding="10dp"
android:id="@+id/button"
android:text="Play Game"
android:background="@drawable/ronaldo"
android:drawableRight="@drawable/messi" />

But the messi.jpeg is too large, and it doesn't show the text in this situation. How to decrease the image size to fit the button?

May anyone help me to solve this problem?

Yah, already, but the image is not fit as the way I want to. — Khuong, Sep 18 '15 at 16:31
Look at this one: http://stackoverflow.com/questions/7538021/how-can-i-shrink-the-drawable-on-a-button — Udi Idan, Sep 18 '15 at 16:32

score 24 · Answer 1 · answered Jan 10 '20 at 09:01

If you are using API >= 23, you can put the drawable resource within a XML file like this messi_smaller.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/messi"
        android:width="smaller_width_in_dp"
        android:height="smaller_height_in_dp">
    </item>
</layer-list>

You must make sure to keep the drawable ratio when you set the width and the height. And just use this drawable in your button:

<Button
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:drawablePadding="10dp"
    android:id="@+id/button"
    android:text="Play Game"
    android:background="@drawable/ronaldo"
    android:drawableRight="@drawable/messi_smaller" />

By this way, you can change the drawable size just in xml code

finest and smart, this is the correct solution! Thanks – Luca Biasotto Jun 29 '20 at 10:26 — Luca Biasotto, Jun 29 '20 at 10:26
Excellent solution. Thank you – Smitty-Werben-Jager-Manjenson Jun 15 '21 at 16:35 — Smitty-Werben-Jager-Manjenson, Jun 15 '21 at 16:35

Hussein El Feky · Accepted Answer · 2015-09-18T17:58:27.003

21

Solution 1:

Adding a drawable to a button has very limited functions. You can't change the drawable size, so the best way to fix it is to add a button with an image view beside it in a linear layout like this:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/ronaldo"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:background="@null"
        android:text="Play Game"
        android:textColor="#ff0000"
        android:textStyle="italic" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:src="@drawable/messi" />

</LinearLayout>

Solution 2:

You can also do the following if you prefer this one, but you will have to add onClickListener() for each one of them:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/ronaldo"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:background="@null"
        android:text="Play Game"
        android:textColor="#ff0000"
        android:textStyle="italic" />

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:src="@drawable/messi" />

</LinearLayout>

Solution 3:

As you have suggested in the comments, you would do something like this:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:background="@drawable/ronaldo">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_alignLeft="@+id/buttonLayout"
        android:layout_alignRight="@+id/buttonLayout"
        android:background="@null" />

    <LinearLayout
        android:id="@+id/buttonLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:gravity="center"
            android:text="Play Game"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#ff0000"
            android:textStyle="italic" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:src="@drawable/messi" />

    </LinearLayout>

</RelativeLayout>

edited Sep 18 '15 at 17:58

answered Sep 18 '15 at 16:48

Hussein El Feky

6,467
5
48
57

I have already done like this way, but is look not very nice and whenever to process something, we must have to process this "small button". That's not very good way – Khuong Sep 18 '15 at 16:54
1

This is the only way to do it. If you want a better but harder approach, you can use 9-patch images. Google it for more help. Hope that helps. – Hussein El Feky Sep 18 '15 at 16:56
@khuong291 Please also check my updated answer. It might be what you exactly need. – Hussein El Feky Sep 18 '15 at 17:20
1

How about this way: http://stackoverflow.com/questions/7538021/how-can-i-shrink-the-drawable-on-a-button – Khuong Sep 18 '15 at 17:27
@khuong291 This is what I exactly did. No difference. – Hussein El Feky Sep 18 '15 at 17:30
What's the problem with the second solution? Did you try it? – Hussein El Feky Sep 18 '15 at 17:31
The issue here is: I want to create a button that cover the text and the image (easily to control) , but the image is not fit the size as I want to, how about create a TextView, an ImageView in the under layout (must blure them) and a Button in the upper layout. – Khuong Sep 18 '15 at 17:36
@khuong291 Nice idea. Please check solution 3 in my updated answer. – Hussein El Feky Sep 18 '15 at 17:52
Nice, you are the wonderkid :P. Can I add friend with you on Skype? – Khuong Sep 19 '15 at 02:58
Glad it solved your problem! Can you please accept my answer if it helped you? Unfortunately, I don't have skype, but you can always email me if you need any help from my stackoverflow profile. :) – Hussein El Feky Sep 19 '15 at 10:17
Can you help me with this: http://stackoverflow.com/questions/32656588/quiz-game-set-the-correct-answer-onto-random-button – Khuong Sep 19 '15 at 13:14
You removed the question? – Hussein El Feky Sep 19 '15 at 21:11
Btw, how to play a lot song in 1 activity, If the 1st Song ends, the 2nd Song begin, and so on. How to do it? – Khuong Sep 20 '15 at 11:26
You should better ask another question because this will be another question. You can link me to it here. – Hussein El Feky Sep 20 '15 at 11:28
already open a new topic, you can visit here http://stackoverflow.com/questions/32678910/how-to-play-a-lot-of-sound-in-background-of-activity – Khuong Sep 20 '15 at 11:33

score 1 · Answer 3 · edited Feb 14 '20 at 11:14

I deleted the button and made a layer like a button

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/background_light"
    android:gravity="center"
    android:orientation="horizontal">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:onClick="go_map"
        android:clickable="true"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/img_m0"
            style="@style/menu2img"
            app:srcCompat="@drawable/ico_m0" />
       <TextView
            android:id="@+id/textView2"
            style="@style/menu2text"
            android:text="@string/men_map" />
    </LinearLayout>

[]

score 0 · Answer 4 · answered Sep 18 '15 at 16:40

0

you can use a RelativeLayout like this:

<RelativeLayout
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@drawable/ronaldo">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="play game"
        />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@drawable/messi"
        android:scaleType="fitXY"
        />
</RelativeLayout>

answered Sep 18 '15 at 16:40

saleh sereshki

2,161
3
15
18

No, I want only 1 Button that have the Text and the Image Inside it. – Khuong Sep 18 '15 at 16:41
whats the problem of using this way? – saleh sereshki Sep 18 '15 at 16:55
Not Problem here, but whenever to process something, we must have to process this "small button". That's not very a good way. – Khuong Sep 18 '15 at 16:56

score 0 · Answer 5 · answered Sep 02 '17 at 04:55

Try this :

final Button button = (Button) findViewById(R.id.button1);
ViewTreeObserver vto = button.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            public boolean onPreDraw() {
                button.getViewTreeObserver().removeOnPreDrawListener(this);
                //scale to 90% of button height
                DroidUtils.scaleButtonDrawables(button, 0.9);
                return true;
            }
        });

score 0 · Answer 6 · answered Apr 14 '21 at 08:12

0

If you are handling multiple screen sizes, creating alternative version for given screen (drawable-mdpi folder and so on...) can be solution.

answered Apr 14 '21 at 08:12

David Vareka

216
2
6

score 0 · Answer 7 · answered Nov 19 '21 at 17:11

If you are importing a vector directly you can use the following:

<vector android:height="30dp"  android:tint="#00FF41"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="30dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M20,6h-8l-2,-2L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,8c0,-1.1 -0.9,-2 -2,-2zM20,18L4,18L4,8h16v10zM8,13.01l1.41,1.41L11,12.84L11,17h2v-4.16l1.59,1.59L16,13.01 12.01,9 8,13.01z"/>
</vector>

ngock · Answer 8 · 2022-01-02T15:55:18.710

For API >= 23 and for android.support.design.widget.FloatingActionButton(FAB) , you can put the drawable resource (SVG) within a XML file with the path: File/New/Vector Asset and save the file under the name for example: ic_water_white_24dp.xml

and add app:maxImageSize attribute to the FAB:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/btnAddProduct"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    android:clickable="true"
    android:focusable="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:maxImageSize="40dp" // add this line to increase the icon inside the fab
    app:srcCompat="@drawable/ic_water_damage_white_24dp" />

score 0 · Answer 9 · answered May 19 '22 at 00:32

Try using vector files instead of JPEG. Also, you can even convert jpeg to svg format too. Once you import svg file into Android Studio project, you are going to see <vector> resource then just change the size as you want by width, height attributes. viewportWidth and viewportHeight is to set size for drawing on virtual canvas.

 <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp" <!-- fix the size here -->
    android:height="20dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
  <path .../> <!-- your shapes are here -->
  <path .../> 
</vector>

Changing the drawable size inside a button

9 Answers9

Solution 1:

Solution 2:

Solution 3: