Android, setting background color of button loses ripple effect

Question

After adding color to an android button, it loses its ripple effect that makes the user feel like there is a responsive click. How do I fix this? I've searched through many solutions but I couldn't find a definite one that wasn't ambiguous.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                 xmlns:tools="http://schemas.android.com/tools"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 tools:context=".ClockInOutFragment">       <AnalogClock         android:id="@+id/clock"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentEnd="true"         android:layout_alignParentRight="true"         android:layout_alignParentTop="true"         android:layout_toRightOf="@+id/date_and_time"/>       <RelativeLayout         android:id="@+id/date_and_time"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_margin="10dp">          <TextView             android:id="@+id/time_digits"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="12:10"             android:textSize="45sp"/>          <TextView             android:id="@+id/am_pm"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignBaseline="@+id/time_digits"             android:layout_toRightOf="@+id/time_digits"             android:paddingLeft="3dp"             android:text="PM"             android:textSize="20sp"/>          <TextView             android:id="@+id/date"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_below="@+id/time_digits"             android:text="Mon, July 11"             android:textSize="22sp"/>     </RelativeLayout>      <!--Clock in and out buttons-->     <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:layout_centerHorizontal="true"         android:orientation="horizontal">          <Button             android:id="@+id/textView3"             android:layout_width="0dp"             android:layout_height="56dp"             android:layout_weight="1"             android:background="#4CAF50"             android:gravity="center"             android:text="Clock In"             android:textAppearance="?android:attr/textAppearanceLarge"             android:textColor="#FFFFFF"/>          <!--Divider between the clock in and out button-->         <View             android:layout_width="1dp"             android:layout_height="match_parent"             android:background="#B6B6B6"/>          <Button             android:id="@+id/textView4"             android:layout_width="0dp"             android:layout_height="56dp"             android:layout_weight="1"             android:background="#FF5252"             android:gravity="center"             android:text="Clock Out"             android:textAppearance="?android:attr/textAppearanceLarge"             android:textColor="#FFFFFF"/>     </LinearLayout>   </RelativeLayout> 

Answer 1

You can add the ripple effect & background color with an additionnal ripple drawable:

your layout :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical" android:layout_width="match_parent"     android:layout_height="match_parent">      <Button         android:id="@+id/button_connect"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_marginTop="20dip"         android:fontFamily="sans-serif"         android:text="Connect"         android:background="@drawable/ripple"         android:textColor="#FFFFFF"         android:textSize="18sp" />  </LinearLayout> 

ripple.xml (this is where you can add background color in addition to the ripple effect) :

<?xml version="1.0" encoding="utf-8"?> <!-- in drawable folder--> <ripple     xmlns:android="http://schemas.android.com/apk/res/android"     android:color="?android:colorControlHighlight">      <item android:id="@android:id/mask">         <shape android:shape="rectangle">             <solid android:color="?android:colorAccent" />         </shape>     </item>      <item>         <shape android:shape="rectangle">             <!-- put your background color here-->             <solid android:color="@color/default_color" />         </shape>     </item>  </ripple>