Add Ripple Effect To Frame Using Custom Render RippleDrawable Xamarin.Froms

Question

Hello Im Using Xamarin.Forms and I Want to Add Ripple Effect For Frame Control but how to do that using custom render by using RippleDrawable and how to Change Shadow Elevation and Thanks :)
and i try to use this code but its need some arguments like mask and Drawable Content and ColorStateList

RippleDrawable Ripple = new RippleDrawable();

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

How to Change Shadow Elevation?

You can set ViewGroup.Elevation = 160f; In the FrameCustomRenderer, but I test it, it will not work normally. If I add ViewGroup.SetBackgroundResource(Resource.Drawable.shadow); it worked.

   [assembly: ExportRenderer(typeof(Frame), typeof(MyCustomFrame))]  
   namespace CollectionViewDemo.Droid  
   {  
       public class MyCustomFrame : FrameRenderer  
       {  
           public MyCustomFrame(Context context) : base(context)  
           {  
     
                 
           }  
     
           protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)  
           {  
               base.OnElementChanged(e);  
               if (e.NewElement != null && e.OldElement == null)  
               {  
                   ViewGroup.SetBackgroundResource(Resource.Drawable.shadow);  
                   ViewGroup.Elevation = 160f;  
                     
               }  
           }  
   }  

Here is my shadow.xml

   <?xml version="1.0" encoding="utf-8" ?>  
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
     <item>  
       <shape android:shape="rectangle">  
         <solid android:color="#CABBBBBB" />  
         <corners android:radius="2dp" />  
       </shape>  
     </item>  
     
     <item  
         android:left="0dp"  
         android:right="0dp"  
         android:top="0dp"  
         android:bottom="0dp">  
       <shape android:shape="rectangle">  
         <solid android:color="@android:color/white" />  
         <corners android:radius="2dp" />  
       </shape>  
     </item>  
   </layer-list>  

Here is running screenshot.

i try to use this code but its need some arguments like mask and Drawable Content and ColorStateList

ColorStateList: The ripple color This value cannot be null.
content Drawable: The content drawable, may be null This value may be null.
mask Drawable: The mask drawable, may be null This value may be null.

Here is simple code about ColorStateList

   static  int[][] stateList = new int[][]{  
                   new int[]{Android.Resource.Attribute.StatePressed},  
                   new int[]{ Android.Resource.Attribute.StateFocused },  
                   new int[]{ Android.Resource.Attribute.StateActivated },  
                   new int[]{}  
           };  
     
           //deep blue  
         static int normalColor = Android.Graphics.Color.ParseColor("#303F9F");  
           //red  
           static int pressedColor = Android.Graphics.Color.ParseColor("#FF4081");  
         static  int[] stateColorList = new int[]{  
                   pressedColor,  
                   pressedColor,  
                   pressedColor,  
                   normalColor  
           };  
     
          static  ColorStateList colorStateList = new ColorStateList(stateList, stateColorList);  
     
          RippleDrawable Ripple = new RippleDrawable(colorStateList,null,null);  

You can refer to the Google Api.

https://developer.android.com/reference/android/graphics/drawable/RippleDrawable

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.