Android中的圆形按钮

76

我想在Android程序中创建圆形按钮。我看过 如何创建带有圆角的EditText？

我要实现的是：

  1. 圆形边缘按钮
  2. 在不同状态下更改按钮背景/外观（如Onclick，Focus）
  3. 使用我自己的PNG作为背景，而不创建形状。
android  android-button  rounded-corners 
— Arnab C.
source
1
— 谢尔盖·本纳
谷歌拥有新框架，新技术更好Jetpack Compose
— Ucdemir

Answers:

128

您可以执行圆角按钮，而无需使用ImageView。

背景选择器资源button_background.xml：

<?xml version="1.0" encoding="utf-8" ?> 
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <!--  Non focused states 
      --> 
      <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_unfocused" /> 
      <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_unfocused" /> 
     <!--  Focused states 
      --> 
      <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_focus" /> 
      <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_focus" /> 
     <!--  Pressed 
      --> 
      <item android:state_pressed="true" android:drawable="@drawable/button_press" /> 
    </selector>

对于每种状态，都有一个可绘制的资源，例如button_press.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <stroke android:width="1dp" android:color="#FF404040" /> 
  <corners android:radius="6dp" /> 
  <gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" /> 
</shape>

注意 corners属性，这可以使您圆圆！

然后在按钮上设置背景可绘制：

android:background="@drawable/button_background"

编辑（9/2018）：可以使用相同的技术来创建圆形按钮。圆实际上只是一个方形按钮，半径大小设置为方形边的1/2

此外，在上面的示例中，strokeandgradient并不是必需的元素，它们只是示例，您可以看到圆角形状

— 史密斯
source
1
CSMith。我让选择器工作了。我对第二部分在哪里放置代码感到困惑。我是否创建单独的xml文件。如果是这样，我怎么称呼它？我假设使用按钮，但仍将其背景设置为@ drawable / button_background ... Thx
— Arnab C.
是的，将背景设置为button_background，然后您选择的每个“状态”都有一个xml文件，第二部分是一个示例button_press.xml。
— CSmith'2
1
CSmith。那么这个单独的xml文件在哪里被调用。在上面的示例中，您将背景设置为可绘制对象，并且可以很好地使背景在交互时发生变化。但是，除非创建png，否则按钮不会四舍五入。带有圆角，并使用九个补丁来避免变形。
— Arnab C. 2012年
2
我是android开发的新手，这个问题可能真是天真：drawable我应该将XML文件添加到哪个文件夹？我有四个不同的drawable文件夹：drawable-hdpi; drawable-mdpi; drawable-xhdpi; drawable-xxhdpi。
— ikartik90 2014年
3
@ ikartik90，使用drawable。通常，其他文件夹用于覆盖在“基本”可绘制文件夹中找到的，特定于密度的资产或设置的设置，在此示例中，不存在任何特定于密度的替代。
— CSmith 2014年
76

如果您需要在Android中使用圆形按钮，则将XML文件“ RoundShapeBtn.xml”创建为可绘制的。

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">   
  <solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
  <corners
   android:bottomRightRadius="10dp"
   android:bottomLeftRadius="10dp"
   android:topLeftRadius="10dp"
   android:topRightRadius="10dp"/>
</shape>

将此添加到您的按钮代码：

android:background="@drawable/RoundShapeBtn"
— 皮尔·法希姆·沙（Pir Fahim Shah）
source
1
如果我希望按钮文本具有特定字体，我是否也要在此处添加字体？
— 加里马·蒂瓦里
@GarimaTiwari是的，您可以在设计相关内容时做到这一点以及做更多的工作
— Pir Fahim Shah
4
实际上，如果您使用CapitalLettersInTheName ..命名文件，则会遇到构建错误：)
— tplive
17

在android的drawable文件夹中创建xml文件，例如：

rounded_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <corners android:radius="20dp"/> // if you want clear round shape then make radius size is half of your  button`s height.
    <solid android:color="#EEFFFFFF"/> // Button Colour
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"/>

</shape>

现在将此xml文件作为您的按钮背景。

 <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/rounded_button"
        android:text="@string/button_text"
        android:textColor="@color/black"/>
— 阿鲁嫩德拉
source
这是大多数人实际上正在寻找的东西。非常弯曲的光滑矩形边缘。如何在按钮上放阴影？谢谢！
— S布鲁斯
恒星！如果有人因必须制作单独的圆形按钮XML来获取不同的颜色而感到烦恼，则可以solid android:color从可绘制的XML中删除，而可以使用android:backgroundTint每种颜色来指定颜色Button
— Kartik Chugh，
@ K_7如果这样做，则会丢失高程和阴影。只需遵循此按钮，按住该按钮即可获得高程和阴影。
— Jeffrey Liu
5

ImageView像这样扩展：

public class RoundedImageView extends ImageView {
  private static final String TAG = "RoundedImageView";

  private float mRadius = 0f;

  public RoundedImageView(Context context) {
    super(context);
  }

  public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // retrieve styles attributes
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
    mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
    a.recycle();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    // only do this if we actually have a radius
    if(mRadius > 0) {
      RectF rect = new RectF(0, 0, getWidth(), getHeight());
      Path clipPath = new Path();
      clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
      canvas.clipPath(clipPath);
    }
    super.onDraw(canvas);
  }
}

并对其应用常规的背景资源，并且应将其修剪成圆角。

— 科迪·考兰
source
默认情况下有R.styleable.RoundedView_radius和R.styleable.RoundedView吗？
— 谢尔盖·本纳
科迪，我如何查看android.widget.imageview.class的源代码。我一直在想让您附加一个源文件，因为在eclipse中找不到该文件。
— Arnab C. 2012年
@Jib，您可以在以下位置
— Cody Caughlan，
感谢Cody，这个程序化解决方案正是我所需要的。
— DwarDoh 2014年
5

Google建议您不要模仿其他平台的UI元素。我不会在Android应用程序中放入圆形的iOS样式按钮。

— 克里斯托弗·佩里（Christopher Perry）
source
61
开发人员决定以丑陋的UI作为标准并不是我们的错。
— Yehonatan 2014年
这有点老了，但我想我想补充一下，我读到的任何人都说，由于很多iOS UI样式，我以前公司的应用几乎没有出现在应用商店中。我们必须修改并提出适当的材料设计注意事项。务必遵循准则！
— lase
1
@lase完全不同意准则只是，它们不是硬性规定
— martinseal1987 '19
@ martinseal1987很好，尽管规则可能很松散，但我只是向未来的读者提供轶事证据，证明平台持有人确实关心样式的一致性，这可能是通过答案与样式指南的链接以及跨平台实现的大部分内容而显而易见的。随意掷骰子！
— lase
@lase Playstore永远不会因为不遵守准则而拒绝您的应用程序，它们在任何意义上都不是规则
— martinseal1987 '19
3

可以使用corner属性完成此操作。查看下面的xml。

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

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

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

— 罗希特·戈亚尔（Rohit Goyal）
source
3

最好将按钮状态和形状放在1个xml选择器文件中。那应该使您的应用运行更快/更好。尝试一下（由Android应用程序开发简介提供）。仅在此处显示垃圾邮件不是我的代码。

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333"      android:endColor="#555555"  />            
    </shape>
    </item>
    <item android:state_focused="true">
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <solid android:color="#58857e"/>       
    </shape>
    </item>  
    <item >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />            
    </shape>
    </item>

    </selector>

PS设计提示：最好不要使用渐变色和圆角矩形，因为您很难告诉他们是否明智地使用它们。

2

也可以使用环形drawable创建圆形按钮，请参见 http://www.zoftino.com/android-shape-drawable-examples

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="40dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
    <padding android:bottom="50dp"
        android:left="16dp"
        android:right="16dp"
        android:top="50dp"/>
</shape>
— 阿尔纳夫·饶
source
1

创建名为btnOval的Drawable资源->然后是过去的代码；

 <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"  
android:padding="10dp">   
      <solid android:color="#6E6E6E"/> 
    </shape>

和用户内部的按钮标签，例如

<Button
andorid:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>
— 阿西克·阿泽兹（Ashik Azeez）
source
0

试试下面的代码创建一个可绘制文件调用circular_button.xml并插入下方

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

然后将按钮的背景更改为此可绘制文件

 <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/circle_button"
                android:text="Button"/>

如果您想要一个完整的圆形按钮，则可以使用以下drawable

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

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

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>
— 乌达拉·阿拜西拉克
source
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.