Radio Button ripple cuts off

Question

In the above image the Radio Button delivery ripple cuts off when clicking. I tried padding. But padding only applies for text not the button. I can able to get full ripple in the upper and lower sides by setting height to radio button but I'm unable to fix the ripple cuts in left side.

My XML:

<RelativeLayout
    android:id="@+id/rl_menu"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/primary">

    <ImageView
        android:id="@+id/goBackBtn"
        style="@style/BackArrayStyle" />

    <TextView
        android:id="@+id/actionBarTitle"
        style="@style/ActionBarTextStyle"
        android:layout_width="wrap_content"
        android:layout_toEndOf="@+id/goBackBtn"
        android:lines="1"
        android:maxLines="1"
        android:text="Filter" />

    <ImageView
        android:id="@+id/imgReset"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="10dp"
        android:background="@drawable/image_primary_ripple"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:src="@drawable/ic_reset_black" />
</RelativeLayout>

<RadioGroup
    android:id="@+id/radio_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/rl_menu"
    android:layout_margin="40dp"
    android:gravity="center"
    android:layout_centerHorizontal="true"
    android:orientation="horizontal">

    <RadioButton
        android:gravity="center"
        android:id="@+id/radioDelivery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Delivery" />

    <RadioButton
        android:id="@+id/radioPickUp"
        android:layout_marginStart="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pick Up" />

</RadioGroup>

<RelativeLayout
    android:id="@+id/rlSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/radio_group">

    <TextView
        android:id="@+id/tvRadiusLabel"
        android:layout_width="170dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:text="Pick Up Radius"
        android:textSize="17sp"
        android:textStyle="bold" />

    <View
        android:id="@+id/div_radius"
        android:layout_width="match_parent"
        android:layout_height=".3dp"
        android:layout_below="@id/tvRadiusLabel"
        android:layout_marginBottom="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent" />

    <SeekBar
        android:padding="10dp"
        android:id="@+id/seekBarDistance"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/div_radius"
        android:layout_centerHorizontal="true"
        android:max="20"
        android:thumb="@drawable/ic_seek_bar_thumb"
        android:maxHeight="15dp"
        android:minHeight="10dp"
        android:progress="1" />

    <TextView
        android:id="@+id/tvRadius"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/seekBarDistance"
        android:layout_marginEnd="30dp"
        android:text="1 Km" />
</RelativeLayout>

<TextView
    android:id="@+id/tvSortBy"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/rlSeekBar"
    android:layout_marginStart="30dp"
    android:layout_marginTop="20dp"
    android:text="Sort By"
    android:textSize="17sp"
    android:textStyle="bold" />

<View
    android:id="@+id/div_seek_bar"
    android:layout_width="match_parent"
    android:layout_height=".3dp"
    android:layout_below="@id/tvSortBy"
    android:layout_marginBottom="20dp"
    android:layout_marginEnd="30dp"
    android:layout_marginStart="30dp"
    android:layout_marginTop="10dp"
    android:background="@color/colorAccent" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/div_seek_bar"
    android:layout_centerHorizontal="true"
    android:orientation="vertical"
    android:visibility="gone">

    <TextView
        android:id="@+id/btnRating"
        android:layout_width="170dp"
        android:layout_height="40dp"
        android:layout_marginBottom="20dp"
        android:background="@color/primary"
        android:drawableStart="@drawable/ic_star_half_white"
        android:gravity="center_vertical"
        android:paddingStart="7dp"
        android:text="     Rating"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/btnDistance"
        android:layout_width="170dp"
        android:layout_height="40dp"
        android:layout_marginBottom="20dp"
        android:background="@color/primary"
        android:drawableStart="@drawable/ic_near_me_white"
        android:gravity="center_vertical"
        android:paddingStart="7dp"
        android:text="     Distance"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold" />
</LinearLayout>

<RadioGroup
    android:padding="20dp"
    android:id="@+id/radio_group1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/div_seek_bar"
    android:layout_marginEnd="40dp"
    android:layout_marginStart="40dp"
    android:gravity="center"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/radioRating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rating" />

    <RadioButton
        android:id="@+id/radioDistance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:text="Distance" />

</RadioGroup>

<Button
    android:id="@+id/btnApply"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:background="@color/primary"
    android:text="Apply Filter"
    android:textColor="@color/white"
    android:textStyle="bold" />

How to fix this Ripple issue? Any help would be appreciated...

Answer 1

Here I made some changes in your code and it's working fine on my devices. Check it if it works for you:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">

<RelativeLayout
    android:id="@+id/rl_menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/Primary">


    <ImageView
        android:id="@+id/goBackBtn"
        style="@style/BackArrayStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/actionBarTitle"
        style="@style/ActionBarTextStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/goBackBtn"
        android:layout_toRightOf="@+id/goBackBtn"
        android:lines="1"
        android:maxLines="1"
        android:text="Filter" />

    <ImageView
        android:id="@+id/imgReset"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:background="@drawable/image_primary_ripple"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:src="@drawable/ic_reset_black" />


    <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="40dp"
        android:gravity="center"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioDelivery"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Delivery" />

        <RadioButton
            android:id="@+id/radioPickUp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginStart="30dp"
            android:text="Pick Up" />

    </RadioGroup>

    <RelativeLayout
        android:id="@+id/rlSeekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/radio_group">

        <TextView
            android:id="@+id/tvRadiusLabel"
            android:layout_width="170dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginStart="30dp"

            android:text="Pick Up Radius"
            android:textSize="17sp"
            android:textStyle="bold" />

        <View
            android:id="@+id/div_radius"
            android:layout_width="match_parent"
            android:layout_height=".3dp"
            android:layout_below="@id/tvRadiusLabel"
            android:layout_marginBottom="30dp"
            android:layout_marginEnd="30dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="10dp"
            android:background="@color/colorAccent" />

        <SeekBar
            android:id="@+id/seekBarDistance"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/div_radius"
            android:layout_centerHorizontal="true"
            android:max="20"
            android:thumb="@drawable/ic_seek_bar_thumb"
            android:maxHeight="15dp"
            android:minHeight="10dp"
            android:padding="10dp"
            android:progress="1" />

        <TextView
            android:id="@+id/tvRadius"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_below="@id/seekBarDistance"
            android:layout_marginEnd="30dp"
            android:layout_marginRight="30dp"
            android:text="1 Km" />
    </RelativeLayout>

    <TextView
        android:id="@+id/tvSortBy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rlSeekBar"
        android:layout_marginLeft="30dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="20dp"
        android:text="Sort By"
        android:textSize="17sp"
        android:textStyle="bold" />

    <View
        android:id="@+id/div_seek_bar"
        android:layout_width="match_parent"
        android:layout_height=".3dp"
        android:layout_below="@id/tvSortBy"
        android:layout_marginBottom="20dp"
        android:layout_marginEnd="30dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/div_seek_bar"
        android:layout_centerHorizontal="true"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:id="@+id/btnRating"
            android:layout_width="170dp"
            android:layout_height="40dp"
            android:layout_marginBottom="20dp"
            android:background="@color/primary"
            android:drawableStart="@drawable/ic_star_half_white"
            android:drawableLeft="@drawable/ic_star_half_white"
            android:gravity="center_vertical"
            android:paddingLeft="7dp"
            android:paddingStart="7dp"
            android:text="     Rating"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/btnDistance"
            android:layout_width="170dp"
            android:layout_height="40dp"
            android:layout_marginBottom="20dp"
            android:background="@color/primary"
            android:drawableStart="@drawable/ic_near_me_white"
            android:drawableLeft="@drawable/ic_near_me_white"
            android:gravity="center_vertical"
            android:paddingEnd="7dp"
            android:paddingStart="7dp"
            android:text="     Distance"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:textStyle="bold" />
    </LinearLayout>

    <RadioGroup
        android:id="@+id/radio_group1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/div_seek_bar"
        android:layout_marginEnd="40dp"
        android:layout_marginStart="40dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="20dp">

        <RadioButton
            android:id="@+id/radioRating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rating" />

        <RadioButton
            android:id="@+id/radioDistance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginStart="30dp"
            android:text="Distance" />

    </RadioGroup>

    <Button
        android:id="@+id/btnApply"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@color/primary_text"
        android:text="Apply Filter"
        android:textColor="@color/white"
        android:textStyle="bold" />
</RelativeLayout>

Hope it helps.