Question

我在 Android 应用程序中为按钮创建自定义阴影时遇到了问题。我尝试了很多方法来解决这个问题，但我没有设法做到这一点。我想this documentation here包含解决方案，但我没有设法做到这一点。我的目标是制作像 these buttons have这样的阴影。

这是我的活动的XML，我有我的按钮

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/fragment_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.egoregorov.payme1.LoginActivityFragment"
tools:showIn="@layout/activity_login">

<android.support.constraint.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.36">

    <ImageView
        android:id="@+id/login_app_icon"
        android:layout_width="126dp"
        android:layout_height="118dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher_round"/>

    <ImageView
        android:id="@+id/login_email_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/login_email_inputLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/email_icon"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/login_email_inputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="24dp"
        app:layout_constraintLeft_toRightOf="@+id/login_email_icon"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_app_icon">

        <EditText
            android:id="@+id/login_email_textbox"
            style="@style/Widget.AppCompat.EditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:hint="@string/email_hint"
            android:inputType="textEmailAddress"
            android:singleLine="true"
            android:textColorLink="@color/colorPrimaryDark"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="-36dp"/>
    </android.support.design.widget.TextInputLayout>

    <ImageView
        android:id="@+id/login_password_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/login_password_inputLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/password_icon"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/login_password_inputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toRightOf="@+id/login_password_icon"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_email_inputLayout">

        <EditText
            android:id="@+id/login_password_textbox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:hint="@string/password_hint"
            android:inputType="textPassword"
            tools:layout_editor_absoluteX="30dp"
            tools:layout_editor_absoluteY="300dp"/>

    </android.support.design.widget.TextInputLayout>


    <Button
        android:id="@+id/login_logIn_button"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="55dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_weight="1"
        android:elevation="24dp"
        android:lineSpacingExtra="17sp"
        android:text="@string/button_login"
        android:textSize="17sp"
        android:translationZ="@dimen/fab_margin"
        app:backgroundTint="@color/logIn_button_color"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_password_inputLayout"/>


    <Button
        android:id="@+id/login_signUp_button"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="55dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:elevation="24dp"
        android:text="@string/login_signUp_button"
        android:textSize="16sp"
        app:backgroundTint="@color/signUp_button_color"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_logIn_button"/>

    <TextView
        android:id="@+id/login_forgotYourPassword_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/login_forgotYourPassword_text"
        android:textColor="@color/colorPrimaryDark"
        app:layout_constraintHorizontal_bias="0.502"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_signUp_button"/>

</android.support.constraint.ConstraintLayout>

此致

叶戈尔

Answer 1

选项1：正如有人提到的，在drawable文件夹中创建一个自定义可绘制的xml，该文件夹应该有一个图层列表作为根项，应该包含一个项目作为具有透明度的矩形形状，其他项目的阴影大小填充为矩形形状。

选项2：使用带阴影的透明背景创建9补丁图像。

选项3：使用带高程的CardView

Answer 2

不是完美的解决方案，但你可以尝试一下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp"
                android:topLeftRadius="3dp"
                />
            <solid android:color="#50000000"/>
        </shape>
    </item>

    <item android:bottom="3dp" android:right="2dp">

        <shape android:shape="rectangle" >


            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

现在将其设置为按钮背景

Answer 3

创建9补丁阴影图像的最佳网站

http://inloop.github.io/shadow4android/

Answer 4

这是用于以xml格式创建不同视图元素的非常有用的站点。只需使用一些复选框，您就可以轻松配置按钮和其他元素

http://angrytools.com/android/button/

在这个“设置块”下方，您将看到如何在项目中包含此示例的示例。

如何在Android中为按钮创建自定义阴影

4 个答案: