0

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?

  • That's called the ripple effect. See https://stackoverflow.com/questions/38628607/adding-ripple-effect-for-view-in-onclick – Gabe Sechan May 26 '23 at 14:23
  • @GabeSechan No, I don't think that answers my question. I'm looking to make the button change shape and don't care about the ripple color. –  May 26 '23 at 15:32
  • the image you posted doesn't have the button changing shape. It has a ripple effect filling the image. Which gives an illusion of changing shape because the ripple goes further than the background – Gabe Sechan May 26 '23 at 15:33
  • But if the ripple isn't what you want, then you'll have to do a custom animation. – Gabe Sechan May 26 '23 at 15:34
  • Ah, I see. Sorry about that. Still not clear about how to make a ripple like that in code. –  May 26 '23 at 15:37
  • @GabeSechan I have edited the question and checked the box that sends it to the mods to be reopened. Your link helped me and got me closer to solving my problem but didn't solve it. –  May 27 '23 at 15:59

0 Answers0