如何创建带有渐变背景的圆角按钮?

时间:2018-08-04 10:45:04

标签: android android-button

如何创建这样的按钮:

enter image description here

创建圆角按钮或具有渐变背景按钮是一回事,但将它们放在一起是另一回事!我知道这是有可能的,因为我在少数应用程序中看到过这类按钮,但无法创建它。

有什么帮助吗? !!!

button_round_radius_test的代码:

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



    <corners
        android:radius="20dp" />

    <solid
        android:color="@android:color/transparent" />

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


    <size
        android:width="165dp"
        android:height="40dp" />

</shape>

gradient_bg的代码:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="90"
        android:endColor="#ff009f"
        android:startColor="#1a2b5d"
        android:type="linear" />

</shape>

用法:

<ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="#TestText"
                    android:padding="8dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_marginBottom="5dp"
                    android:textColor="@color/font_black"
                    android:src="@drawable/gradient_bg"
                    android:background="@drawable/button_round_radius_test"
                    />

3 个答案:

答案 0 :(得分:1)

尝试一下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="#ff009f"
                android:startColor="#1a2b5d"
                android:type="linear" />
            <stroke android:color="@android:color/transparent" android:width="2dp" />
            <corners android:radius="25dp"/>
        </shape>
    </item>
</selector>

像这样使用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">


    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="#TestText"
        android:padding="8dp"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:textStyle="bold"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/test"
        />

</LinearLayout>

输出

enter image description here

答案 1 :(得分:0)

创建Center( child: IntrinsicWidth( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ RaisedButton( child: Text("hello"), onPressed: () {}, ), RaisedButton( child: Text("another hello"), onPressed: () {}, ), RaisedButton( child: Text("DB"), onPressed: () {}, ), ], ), ), ), 并设置为drawable的背景

button

答案 2 :(得分:0)

尝试一下

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


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

<size
    android:width="165dp"
    android:height="40dp" />

<gradient
    android:angle="90"
    android:endColor="#ff009f"
    android:startColor="#1a2b5d"
    android:type="linear" />
</shape>