时间戳

首页 > 解决方案 > 如何创建具有高度的android按钮背景svg？

android - 如何创建具有高度的android按钮背景svg？

问题描述

我一直在尝试实现像附加图像中的按钮，为此我创建了带有阴影的渐变 SVG，使其看起来像高程，但是当这个 svg 应用于按钮作为背景可绘制时，它看起来很平坦，波纹效果也消失了。

我想实现与下图相同的按钮： 在此处输入图像描述

这是我的代码：

<Button
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="35dp"
            android:enabled="false"
            android:elevation="10dp"
            android:translationZ="10dp"
            android:stateListAnimator="@null"
            android:background="@drawable/bg_gradient"
            android:text="@string/btn_txt_login"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

我正在使用 SVG 文件创建带有圆角边框的背景渐变。任何帮助，将不胜感激。

标签： androidandroid-layoutsvgmaterial-designlinear-gradients

解决方案

我有一个解决方案给你。

将此添加到您的 build.gradle(Module:app) 依赖项中：

implementation 'com.android.support:cardview-v7:27.1.1'

现在使用 CardView 布局而不是 Button：

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="4dp">

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:gravity="center_vertical|center_horizontal"
    android:textSize="18sp"
    android:text="LOGIN"
    android:textColor="@android:color/white"
    android:textStyle="bold"
    android:background="@drawable/gradient"/>

</android.support.v7.widget.CardView>

在 drawable 文件夹中创建 gradient.xml 文件：

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

    <gradient
        android:startColor="#8b0ab7"
        android:endColor="#0b85d0"
        android:angle="0"/>

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

</shape>

推荐阅读