Adding ripple effect to stacked views in Android Studio

Question

I am trying to implement ripple effect to the "Vegetarian" and "Non Vegetarian" button but it is being blocked by the TextView used for button labels in both cases. Below is my XML file

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

I discovered that the problem wasn't with the TextView but with the ImageButton. I removed the ImageButtons and used Button (keeping TextViews as it is). I used android:backgruond = "?attr/selectableItemBackgroundBorderless" to apply the ripple effect to the buttons and to give them my desired color I used the android:tint attribute.