中间可绘制的圆形按钮

Question

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

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

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>

感谢您的帮助

Answer 1

尝试添加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"
    />

Answer 2

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

Answer 3

你可以只使用 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>

中间可绘制的圆形按钮

Circular button with drawable in the middle

android

xml

drawable

android-button

material-components-android