Как создать фоновую кнопку Android с высотой над уровнем моря?

Question

Я пытался добиться кнопки, как на прикрепленном изображении, и для этого я создал градиент 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 для создания градиента фона с закругленной границей. Любая помощь будет оценена.

Answer 1

У меня есть решение для вас.

Добавьте это в вашу зависимость 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>

Создание файла градиента.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>

Answer 2

Добавьте эти атрибуты, если они все еще не работают, используйте cardview

android:clipChildren="false"
        android:clipToPadding="false"

и вот ваш код

    <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:clipChildren="false"
                android:clipToPadding="false"
                android:background="@drawable/bg_gradient"
                android:text="@string/btn_txt_login"
                android:textColor="@android:color/white"
                android:textSize="18sp" />

Answer 3

Пожалуйста, попробуйте использовать следующий контент для рисования.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorDefaultButtonRipple">
    <item>
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@android:color/darker_gray" />
                    <corners android:radius="15dp" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="2dp">
                <shape>
                    <gradient android:angle="0" android:endColor="#5789bc" android:startColor="#8e6fa6" />
                    <corners android:radius="15dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</ripple>