Question 128555 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – How to give ripple effect above Src image in FAB

I am working with FAB in android and I have increased the Src image size to cover the FAB but now whenever I click on FAB the ripple effect is shown behind the image instead of above it, which doesn’t give a feel that FAB is clicked

enter image description here

My FAB code

    <com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:maxImageSize="@dimen/_130sdp"
    android:layout_gravity="center|bottom"
    android:contentDescription="@string/app_name"
    app:srcCompat="@drawable/ic_radial_gradient"
    app:backgroundTint="@color/white"
    app:elevation="0dp"
    app:layout_anchor="@id/bottomAppBar"
    app:tint="@null"/>
Tags:

2

Answers


  1. 0

    You can simply use foreground for your View to achieve clickable effect:
    It should be like this:

    <com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:maxImageSize="@dimen/_130sdp"
    android:layout_gravity="center|bottom"
    android:contentDescription="@string/app_name"
    app:srcCompat="@drawable/ic_radial_gradient"
    app:backgroundTint="@color/white"
    app:elevation="0dp"
    app:layout_anchor="@id/bottomAppBar"
    app:tint="@null"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>

    We just have to add this line to the View to show ripple effect when it is clicked.

    android:foreground="?android:attr/selectableItemBackgroundBorderless"

    Login or Signup to reply.
  2. 0

    try add this line to your XML

    android:foreground="?android:attr/selectableItemBackgroundBorderless"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search