Home > Blockchain >  How to make a transparent button with borders and ripple effect?
How to make a transparent button with borders and ripple effect?

Time:05-19

There are a few answers on stackoverflow, but none of them seem to help. What I'm trying to achieve is not only the transparent background but also the glowing that happens when the button is clicked and the borders as well.

What I tried so far:

 android:background="?android:attr/selectableItemBackground"

The results (when the button is not clicked):

enter image description here

The results (when the button is clicked):

enter image description here

This is basically what I want to achieve, except that the button have no borders.

I tried to set strokeColor and strokeWidth but that didn't do anything. I still get the same results as above.

I also tried to use the Material Outlined Button style which worked fine however, I couldn't get the glowing effect when the button is tapped to work. It was basically like clicking in a textView.

The closest I could find to my problem is this answer: Shaped drawable with selectableItemBackground as background

It works perfectly, except for the border color. For some reason, it's showing PURPLE (which is my primary color) instead of black as it should.

CodePudding user response:

If you use a Material Components theme, and apply the Material outlined button style to a button, it will appear as I think you're describing.

<Button
    android:id="@ id/button"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button" />
  • Related