question

njsokalski avatar image
0 Votes"
njsokalski asked JarvanZhang-MSFT commented

Scaling the drawableLeft of a Button

I have a Button in which I want to include an image, which I am doing using drawableLeft and a png in my drawable folder. However, because the image is larger than I need it to be, it does not appear the way I want in the Button. I could, of course, just edit the png, but doing that for every place I use the image would be a lot of work & inefficient. I have seen several suggestions on using xml drawables, but I could not seem to get any of them to work. What can I do to scale the image to match the Button? Thanks.

dotnet-android
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

To scale the drawable of the button, try creating a drawable xml to customize the style.

<androidx.appcompat.widget.AppCompatButton
        android:id="@id/btn"
        android:text="button"
        android:drawableLeft="@drawable/button_drawable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

<!--drawable/button_drawable.xml-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
      android:drawable="@drawable/versailles_fountains"
      android:width="48dp"
      android:height="48dp"/>
</layer-list >


Best Regards,

Jarvan Zhang


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

That would require me to manually calculate the width of the image. I want the width to be automatically calculated when I specify the height. Is there any other xml drawable thing (such as scale or bitmap) that would allow me to specify only the height?

0 Votes 0 ·

Is there any other xml drawable thing (such as scale or bitmap) that would allow me to specify only the height

For this function, try setting the drawable in code. However, we still need to get the aspect ratio of the image to specify the value of the drawable.

var btn = FindViewById<Button>(Resource.Id.btn);
Drawable img = Resources.GetDrawable(Resource.Drawable.versailles_fountains);

var orignalWidth = img.IntrinsicWidth;
var orignalHeight = img.IntrinsicHeight;
int heightValue = 60;

img.SetBounds(0, 0, heightValue * orignalWidth / orignalHeight, heightValue);
btn.SetCompoundDrawables(img, null, null, null);

You can also use a layout to wraps an imageView and a textView customize the 'button';

<LinearLayout
    style="?android:attr/buttonBarButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#0000"
    android:orientation="horizontal" >
    <ImageView 
        style="?android:attr/buttonBarButtonStyle"
        android:paddingLeft="5dp"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:adjustViewBounds="true"
        android:background="#0000"
        android:src="@drawable/grid_"/>
    <TextView
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:clickable="false"
        android:text="Done" />
</LinearLayout>
0 Votes 0 ·

Hi, njsokalski
I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·