制作带边框的圆形按钮

Question

我正在尝试制作一个带有透明背景和彩色边框的圆形按钮。我怎样才能做到这一点？

我附上了我的一个iOS应用程序的屏幕截图，其中显示了我想要的内容。

Answer 1

对于您的按钮使用此

<Button
 android:id="@+id/yourbuttonname"
 android:text="Button"
 android:textColor="#FFFFFF"
 android:textSize="30sp"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:background="@drawable/buttonshape"
/>

并像这样创建一个buttonshape.xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle" >
<corners
android:topLeftRadius="100dp"
android:topRightRadius="100dp"
android:bottomLeftRadius="100dp"
android:bottomRightRadius="100dp"
/>
<solid
android:color="#"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="100dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>

只需调整颜色和所需文字的值。享受!!

Answer 2

你必须为椭圆形创建drawable。   喜欢这个

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
        <solid android:color="@android:color/transparent"/>
        <stroke android:color="#fff" android:width="3px"/>
    </shape>

然后在你的xml布局中设置背景为那个drawable

android:background="@drawable/your_drawable"

Answer 3

您可以使用MaterialButton

        <com.google.android.material.button.MaterialButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            style="@style/Widget.App.Button.OutlinedButton.Icon"
            app:icon="@drawable/...."
            app:strokeColor="@color/..."
            app:iconSize="24dp"
            app:iconGravity="textStart"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
            />

具有这种样式：

<style name="Widget.App.Button.OutlinedButton.Icon" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
    <item name="android:padding">0dp</item>
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetRight">0dp</item>
</style>

和此shapeAppearanceOverlay：

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