在 Android Studio 中为堆叠视图添加波纹效果

Question

我正在尝试对 "Vegetarian" 和 "Non Vegetarian" 按钮实现涟漪效应，但在这两种情况下它都被用于按钮标签的 TextView 阻止。下面是我的 XML 文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:clipToPadding="false"
    android:clipChildren="false"
    tools:context="com.techpappy.whattoeat.MainActivity"
    android:background="@color/cherryRed">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="What would you prefer ?"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"
        android:background="@color/cherryRed"
        android:layout_marginTop="30dp"
        android:padding="10dp"
        android:elevation="4dp"
        android:textColor="@color/wineBrown"
        android:id="@+id/textView" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:id="@+id/linearLayout">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageButton
                android:id="@+id/vegButton"
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:src="@drawable/button_red"
                android:clickable="true"
                android:background="?attr/selectableItemBackgroundBorderless"/>

            <TextView
                android:layout_width="200dp"
                android:layout_height="50dp"
                android:text="Vegetarian"
                android:textSize="30sp"
                android:layout_gravity="center"
                android:gravity="center"
                android:textColor="#6B2737"
                android:fontFamily="monospace"
                android:textStyle="bold"/>

        </FrameLayout>

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp">

            <ImageButton
                android:id="@+id/nonvegbutton"
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:src="@drawable/button_red"
                android:clickable="true"
                android:background="?attr/selectableItemBackgroundBorderless"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Non Vegetarian"
                android:textSize="30sp"
                android:layout_gravity="center"
                android:textColor="#6B2737"
                android:fontFamily="monospace"
                android:textStyle="bold"/>

        </FrameLayout>
    </LinearLayout>



</RelativeLayout>

Answer 1

我发现问题不在于 TextView，而在于 ImageButton。我删除了 ImageButtons 并使用了 Button（保持 TextViews 不变）。我使用 android:backgruond = "?attr/selectableItemBackgroundBorderless" 将波纹效果应用于按钮并为它们提供我想要的颜色我使用 android:tint 属性。

在 Android Studio 中为堆叠视图添加波纹效果

Adding ripple effect to stacked views in Android Studio

xml

android

rippledrawable