如何更改按钮上的 drawableLeft 图标大小？

Question

我在 4 个按钮上添加了一些图标，它们在按钮旁边看起来很大。那么我该如何调整它们的大小呢？我在按钮上使用 drawableLeft 来添加图标。

可绘制的物品分别称为交易、奖杯、拼图和扩音器。图标太大。 content_main.xml 文件：

<?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>

Answer 1

尝试以下操作。将可绘制对象声明为您要使用的图标

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

Answer 2

您可以通过编程方式设置边界 (here)，这看起来像这样

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

Answer 3

将您的资源包装在定义所需大小的可绘制对象中，类似于：

<?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 >

之后，在您的 android:drawableLeft 标签中使用此可绘制对象

Answer 4

添加到 DroidBender 的出色答案中。他的解决方案不会在 API 21 上崩溃，因此它仍然可以使用，即使不添加 Build.VERSION.SDK_INT 代码。这是使用标准图像资产的解决方案在 API 21（使用文本高度作为尺寸设置）上的外观。

这就是它在 API 23+

上的样子

它仍然是一个非常好的选择，即使最小 API < 23。

Answer 5

只要图标是矢量资源，进入矢量文件并将 android:width 和 android:height 修改为类似 @dimen/icon_size 的内容。然后在您的 dimens.xml 文件中为多种屏幕尺寸定义此资源。很有魅力

Answer 6

使用 Kotlin 扩展：

添加这个可以让您的代码保持整洁和可重用。如果您不传递任何内容或为 id 传递 0，它将清除可绘制对象。（按钮扩展了 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)
}

Answer 7

只需使用 Google 的 MaterialButtons： https://material.io/develop/android/components/buttons/

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

Answer 8

此解决方案适用于所有使用矢量图形图标的用例，并且还兼容 23 个以下版本。

打开 xml

中的可绘制图标

可绘制的原始图标：

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

现在用组标签包裹路径标签，并在组标签中添加属性 scaleX、scaleY、pivotX 和 pivotY 以缩小图标大小，如下所示：

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

您可以通过改变scaleX和scaleY来控制图标的大小。

这不仅在可绘制对象的情况下有用，而且在任何使用图标的地方以及不容易找到样式解决方案来减小图标大小的地方都很有用，比如 AlertDialogue。

Answer 9

更新：

只需使用 MaterialButton 它有图标属性，例如：

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"/>

Answer 10

使用 ImageView 的最佳方式。这是管理文本视图左右两张图像的示例。

<ImageView
        android:id="@+id/manage_icon_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="10dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:foregroundGravity="center"
        android:src="@drawable/manage_store_icon"
      />
    <TextView
        android:id="@+id/manage_store_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:textColor="@color/black"
        android:text="@string/manage_store"
        android:layout_toRightOf="@+id/manage_icon_image"
        android:textSize="15sp"/>
    <ImageView
        android:id="@+id/ManageStoresLink"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="5dp"
        android:padding="5dp"
        android:onClick="onManageStoresLink"
        android:src="@drawable/manage_arrow_icon"
        app:layout_constraintTop_toBottomOf="@+id/my_ic_cards"
        />

如何更改按钮上的 drawableLeft 图标大小？

how to change a drawableLeft icon size on a button?

android

android-drawable

使用 Kotlin 扩展：