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>
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>