中间有drawable的圆形按钮答案

【问题标题】：Circular button with drawable in the middle中间有drawable的圆形按钮
【发布时间】：2021-04-29 01:06:18
【问题描述】：

我目前正在为我正在开发的应用程序进行布局，但我无法在 xml 中创建此按钮。

里面的箭头是一个.png图片（我也可以把它导出为矢量），背景只是一个可绘制的。我无法混合这两种资产来制作这个按钮。我目前的结果是这样的：

xml 是：

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/onboardingStep2NextButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:layout_constraintTop_toBottomOf="@id/onboardingStep2SubTitle"
    android:src="@drawable/long_left"
    android:background="@drawable/purple_round_background"
    app:layout_constraintEnd_toEndOf="parent"/>

purple_round_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <corners  android:radius="50dp"/>
    <solid android:color="@color/purple" />
</shape>

感谢您的帮助

【问题讨论】：

请注意，使用 AppCompatImageView 不会像 Button 那样产生波纹。
好的！谢谢。我不知道我的客户是否希望这个按钮产生涟漪，但如果我需要它，我会将其更改为您的解决方案！

标签： android xml drawable android-button material-components-android

【解决方案1】：

您可以只使用 MaterialButton：

   <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        style="@style/Widget.MaterialComponents.Button.IconOnly"
        app:icon="@drawable/ic_add_24px"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
        />

采用这种风格：

<style name="Widget.MaterialComponents.Button.IconOnly" >
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:minWidth">12dp</item>
    <item name="android:minHeight">12dp</item>
    <item name="iconGravity">textStart</item>
</style>

还有这个shapeAppearanceOverlay:

<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

【讨论】：

【解决方案2】：

尝试添加android:padding可能对您有帮助：

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/onboardingStep2NextButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:layout_constraintTop_toBottomOf="@id/onboardingStep2SubTitle"
    android:src="@drawable/long_left"
    android:background="@drawable/purple_round_background"
    app:layout_constraintEnd_toEndOf="parent"
    android:padding="10dp"
    />

【讨论】：

【解决方案3】：

将 android:padding="" 添加到您的 AppCompatImageView

【讨论】：