在安卓中创建带有圆角的按钮

12

在此输入图片描述

我正在尝试创建一个看起来像上面图片的按钮。最初我的想法是创建一个9 patch图并将其设置为按钮背景。但由于这只是一个普通按钮,我认为我们可以在不使用任何图像的情况下绘制它。

该按钮的背景颜色为#0c0c0c; 边框颜色为#1a1a1a; 文本颜色为#cccccc。

我在SO上找到了一个类似的问题,但那个回答是创建了一个渐变效果-
Android - button的边框


1
按钮背景颜色为#0c0c0c,边框颜色为#1a1a1a。这可能是一组颜色,但您需要更多的颜色来定义不同状态下的按钮外观,比如按下、禁用和获取焦点等状态。默认按钮背景可能还有其他状态,但您可以从这些状态开始定义。 - CommonsWare
Google推出了新的框架,其中最新的技术是更好的Jetpack Compose - Ucdemir
4个回答

23

Android开发者指南中对此有详细说明:形状Drawable

您也可以简单地从提供的链接中删除gradient元素:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="3dp" />
    <stroke android:width="5px" android:color="#1a1a1a" />
</shape>

1
感谢您的支持,以下是翻译内容:添加此代码以获得纯色背景 <solid android:color="#0c0c0c" />。 - coderplus

16
   <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/textView1"
    android:layout_alignLeft="@+id/textView1"
    android:layout_marginBottom="56dp"
    android:text="Button" 
    android:textColor="#FF0F13"
    android:background="@drawable/bbkg"/>//create bbkg.xml in drawable folder

bbkg.xml//按钮背景

   <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" 
    android:drawable="@drawable/pressed" />
  <item  android:state_focused="false" 
    android:drawable="@drawable/normal" />
  </selector>

normal.xml //按钮正常状态的背景

  <?xml version="1.0" encoding="UTF-8"?> 
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"> 
  <solid android:color="#10EB0A"/>    
  <stroke android:width="3dp"
        android:color="#0FECFF" /> 
  <padding android:left="5dp"
         android:top="5dp"
         android:right="5dp"
         android:bottom="5dp"/> 
  <corners android:bottomRightRadius="7dp"
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp"
         android:topRightRadius="7dp"/> 
  </shape>   

pressed.xml //按钮按下状态的背景

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle"> 
<solid android:color="#FF1A47"/>    
<stroke android:width="3dp"
        android:color="#0FECFF"/>

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

1
您可以在普通状态和按下状态下更改按钮的边框以及按钮的背景颜色。只需适当使用颜色代码即可。 - Raghunandan

3
如果您需要这样的东西
按钮预览
这里是代码。
1.在drawable文件夹中创建一个xml文件,如mybutton.xml,并粘贴以下标记:
<?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="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
     </shape>
 </item>
<item android:state_focused="true">
     <shape android:shape="rectangle"  >
         <corners android:radius="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <solid android:color="#58857e"/>       
     </shape>
 </item>  
<item >
    <shape android:shape="rectangle"  >
         <corners android:radius="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
     </shape>
 </item>
</selector>

2.现在将此可绘制对象用作视图的背景。如果该视图是按钮,则可以这样做:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />

0

只需使用MaterialButton

       <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:backgroundTint="..."
            app:strokeColor="..."
            android:textColor="..."
            app:cornerRadius="xxdp"
            android:text="BUTTON"
            />

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接