如何通过xml在Android按钮中添加渐变?

22

我无法弄清为什么这段代码不能工作。有人能帮忙吗?我尝试让按钮使用名为'greenstart'和'greenend'的自定义颜色。这些颜色已经在res/value/string.xml文件中创建。我查看了类似的问题,但要么没有答案,要么不够清晰,或者解决方案不起作用。提前感谢。

XML文件示例:

<Button
   android:id="@+id/mycollection"
   android:layout_width="match_parent"
   android:layout_height="fill_parent"
   android:layout_weight="1" >

   <Gradient
      android:angle="270"
      android:endColor="@color/greenstart"
      android:startColor="@color/greenend" >
   </Gradient>
</Button>
4个回答

79

创建一个新的xml文件并将其放置在drawable目录中,然后将其作为按钮的背景添加。

gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <!--  Gradient Bg for listrow -->
   <gradient
      android:startColor="#f1f1f2"
      android:centerColor="#e7e7e8"
      android:endColor="#cfcfcf"
      android:angle="270" />
</shape>

layout.xml

 <Button
    android:id="@+id/Button01"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="@drawable/gradient"
    android:text="Übernehmen" >

我该如何将其称为按钮背景?“android:background="@?"” - Jeremy
请注意,<shape> 不是必需的。我只需创建 <gradient> 即可获得相同的结果,而不需要任何 <shape> 包围它。 - BrettFromLA

19

试试这个:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#70c656" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#70c656"
                android:endColor="#53933f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

9

所以我们来谈谈渐变。如上所述@Dusean Singh。如果您使用270度角,则渐变将从上到下开始:顶部 ->中心 ->底部

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FF0000"
        android:centerColor="#00FF00"
        android:endColor="#0000FF"
        android:angle="270" />
</shape>

enter image description here

如果您使用360度的角度,则渐变将从左到右开始:从左到中间,再到右边。
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--  Gradient Bg for listrow -->
    <gradient
        android:startColor="#FF0000"
        android:centerColor="#00FF00"
        android:endColor="#0000FF"
        android:angle="360" />
</shape>

enter image description here

接下来我们来看效果,以及如何将其应用于按钮上。

<LinearLayout
    android:id="@+id/design_bottom_sheet"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2">
    <Button
        android:drawableLeft="@drawable/ic_grid"
        android:layout_width="match_parent"
        android:text="Find"
        android:background="@drawable/gradient_button"
        android:textColor="@color/white"
        android:textAllCaps="false"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
    <Button
        android:drawableLeft="@drawable/ic_card"
        android:layout_width="match_parent"
        android:textColor="@color/white"
        android:text="Match"
        android:background="@drawable/gradient_button"
        android:textAllCaps="false"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</LinearLayout>

enter image description here


SufiyanAnsari 我在 AndroidX 中尝试了这种方法,但是在 androidx 中无法工作。是否有其他方法可以为按钮添加渐变背景? - M DEV

4
创建 gradient.xml 文件。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
      android:angle="270"
      android:endColor="@color/greenstart"
      android:startColor="@color/greenend" />

</shape>

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