如何制作圆形按钮?


Answers:


265

创建一个roundedbutton.xml在drawable文件夹中命名的xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

最后设置为背景,以您Buttonandroid:background = "@drawable/roundedbutton"

如果要使其完全变圆,请更改半径并确定适合您的范围。


您是否需要.xml后缀?我看过没有一个例子
Neil 2012年

@Neil您不需要添加xml后缀,我这样做是出于演示和清楚理解概念的目的,以便读者不要误解该示例,eclipse自动协助应帮助您查找是否需要.xml。不管是否,我都有使用Windows计算机上的ctrl + space自动完成xml命令的习惯。
阿里夫·纳德姆

2
您在可绘制单词之前不需要'@'符号吗?
shim 2012年

与仅使用圆形图像作为背景相比,此解决方案的结果是否有所不同?
Siavash13年

6
此外,为什么不使用android:shape =“ oval”
Siavash 2013年

38

如果使用Android Studio,则可以使用:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
        <solid android:color="#FFFFFF"/>

    </shape>

这对我来说效果很好,希望对您有所帮助。


2
那应该是公认的答案,使用角值不会超出圆角,而这个问题是关于一个圆的。感谢Shaun的回答
Don

12
使用ring不会显示任何内容。更好地使用oval
CopsOnRoad

31
  1. 创建一个drawable / button_states.xml文件,其中包含:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#41ba7a" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
  2. 在任何布局文件的按钮标签中使用它

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />

很好,谢谢。你可以帮我从中心绘制矩形,圆形的外观之外像一个“Q”
CLIFFORD PY

工作正常,但是为什么我们将半径设置为1000dp?你能解释一下吗?
Jamshaid Kamran

@JamshaidKamran 1000dp是任意大小,足够使按钮变成圆形。
rraallvv

是否可以使用Android尺寸资源代替1000dp?
rraallvv


6

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

并将其添加到按钮代码

    android:layout_width="50dp"
    android:layout_height="50dp"

5

使用椭圆形的形状。这会使按钮呈椭圆形

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

        <solid android:color="#ffee82ee" />

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>


5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
    android:color="#ffffff"
    />
</shape>

使用您的可绘制背景作为背景,在XML可绘制资源上设置该值,并在圆形图像上使用简单使用和图像按钮。



3

使用ImageButton代替Button...。

并制作具有透明背景的圆形图像


3

如果您想使用FAB外观的圆形按钮,并且使用的是官方的材料组件库,则可以像这样轻松地进行操作:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

结果:

在此处输入图片说明

如果您更改按钮的大小,请小心使用按钮大小的一半作为app:cornerRadius


2

对于圆形按钮,创建形状:

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

<solid android:color="#ffee82ee" />


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

将其用作按钮链接的背景




0

您可以使用Google的FloatingActionButton

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

摇篮:

    compile 'com.android.support:design:23.4.0'

0
  1. 使用图像按钮,将背景设为所需的图像。
  2. 通过android asset studio链接创建图像-

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142% 2C%200)&backColor = rgb(96%2C%20125%2C%20139)&crop = 1&backgroundShape = circle&effects = none&name = ic_home

并下载该文件,在里面找到mipmap-hdpi文件夹。

  1. 从mipmap-hdpi文件夹复制图像,然后将其粘贴到android项目的drwable文件夹中。

  2. 现在将背景设置为该图像。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.