Button with pulse effect that is bigger than the button

140 Views Asked by At

I am trying to imitate the button ripple effect that is in Android calculator and use it in my Android app. (For anyone wondering, it's made with Java, not Kotlin.) Here's a screen recording of what I want it to look like (sorry for the bad quality): Screenshot

My question was marked as a duplicate to this one, and I looked through it and found this helpful answer. I tried the code it showed:
button_ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners
        android:radius="100dp" />
    <solid
        android:color="#1BFF1E" />
    <stroke
        android:width="10dp"
        android:color="#FF0000" />

</shape>

button_ripple_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#005DFF" android:radius="100dp">
    <item android:drawable="@drawable/button_ripple" />
</ripple>

Implementation:

    <Button
        android:id="@+id/test"
        android:background="@drawable/button_ripple_background"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_column="1"
        android:layout_row="0"
        android:text="button"/>

This made my button look like this:
Screenshot

I need the ripple to have a smaller corner radius than the button, and therefore it would need to go outside the "button boundaries". Is this possible?

How would I implement a button that looks like this?

0

There are 0 best solutions below