Search code examples
androidtextviewselectorripple

Android how to make the ripple effect with custom selector


I'm creating a custom view that represent a key pad, the layout is pretty simple it is just 9 textView placed in a table layout. I would like that when I press on one of the key there is that nice round ripple effect tat appears.

This is what I have done so far

drawable/button_selector.xml (color/selected is a light blue)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/selected" android:state_pressed="true" android:state_selected="false"/>
</selector>

style.xml (I have put selectable_bg_borderless in attrs.xml)

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    [....]
    <item name="selectable_bg_borderless">@drawable/btn_selector</item>
</style>

<style name="AppTheme.Text.KeypadKey" parent="@style/AppTheme.Text">
        [..]
        <item name="android:background">?selectable_bg_borderless</item>
        [..]
</style>

layout/view_keypad.xml

<TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:gravity="center">

        <TextView
            android:id="@+id/key_1"
            style="@style/AppTheme.Text.KeypadKey"
            android:text="1"/>

        [....]
    </TableRow>

However when I press on the "1" I do have a blue background coming up but it is a raw and simple square.. How to I archieve something like this ?

enter image description here


Solution

  • make sure the theme is appcompat and just change the background property of your view to

    android:background="?selectableItemBackgroundBorderless