Home » Android » android – Changing the drawable size inside a button

android – Changing the drawable size inside a button

Posted by: admin June 15, 2020 Leave a comment

Questions:

I want to create a Button like this:

Button Example

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?

How to&Answers:

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>

Answer:

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

Answer:

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>
[]

Answer:

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>

Answer:

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;
            }
        });