When opening the "WhatsApp" app, the first activity that is shown to us is that of the chats. At the top, where it says "WhatsApp", on the right side, we have the search button and the three dots. These two buttons, when kept selected, do a circular selection effect around them which I would like to replicate in my application. Could someone tell me how to do it?
I tried with a floating action button, but I don't know why the icon doesn't fit inside the floating.
I attach a photo of what happens to me
I attach the xml code of the icon
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#0277bd"
android:pathData="M10,18h4v-2h-4v2zM3,6v2h18L21,6L3,6zM6,13h12v-2L6,11v2z"/>
I hope I can fix this problem. Thank you for reading!
The effect is called "Ripple",
you can do it in the following way:
Effect contained within the view:
Effect that extends beyond the limits of the view:
In addition to this you can use a RippleDrawable
Change Ripple effect color
To change the color, go to your file
styles.xml
and locate the theme your app uses, add the propertycolorControlHighlight
and define the color you want to display.example
styles.xml
:If you want to define the color per Activity, remember that you can define a different theme per Activity in your AndroidManifest.xml and define this theme in your styles.xml file:
If you are trying to emulate the behavior of Whatsapp I advise you to use the same element, using the menu items you will get the result you expect.
Here is an example menu: