Custom rendering for Android CardView does not display form components

Question

I created a custom component that extends ContentView and a visualizer that displays CardView on Android.

The problem I am facing is that the contents of the forms are displayed below CardView. On KitKat, this does not happen, but I think the implementation of CardView is not the same as Lollipop or newer.

Setting the background color in CardView to transparent (0x00000000) shows the contents below CardView.

Component Forms:

using Xamarin.Forms; namespace CodeFest { public class NativeClientProfile : ContentView { public NativeClientProfile() { var grid = new Grid { RowDefinitions = new RowDefinitionCollection {new RowDefinition()}, ColumnDefinitions = new ColumnDefinitionCollection {new ColumnDefinition(), new ColumnDefinition()} }; grid.Children.Add(new Label {Text = "FSP No"}, 0, 0); grid.Children.Add(new Label {Text = "12345", HorizontalTextAlignment = TextAlignment.Center}, 1, 0); grid.Children.Add(new Label {Text = "Risk"}, 0, 1); grid.Children.Add( new Label {Text = "Low", TextColor = Color.Green, HorizontalTextAlignment = TextAlignment.Center}, 1, 1); var item = new Label { Text = "Foo bar", HorizontalTextAlignment = TextAlignment.Center, FontSize = 30, FontAttributes = FontAttributes.Bold }; Content = new StackLayout { Children = { item, new Label { Text = "Financial Services Provider", HorizontalTextAlignment = TextAlignment.Center }, grid } }; } } } 

User renderer:

 using Android.Support.V7.Widget; using Android.Text; using Android.Views; using CodeFest; using CodeFest.Droid.ComponentRenderers; using Xamarin.Forms; using Xamarin.Forms.Platform.Android; [assembly: ExportRenderer(typeof(NativeClientProfile), typeof(NativeClientProfileRenderer))] namespace CodeFest.Droid.ComponentRenderers { class NativeClientProfileRenderer : ViewRenderer<NativeClientProfile, CardView> { protected override void OnElementChanged(ElementChangedEventArgs<NativeClientProfile> elementChangedEventArgs) { var view = new CardView(Context); //view.SetCardBackgroundColor(0x00000000); SetNativeControl(view); } } } 

I am looking for an example of how to properly visualize form components in a CardView custom renderer.

Answer 1

You can use Frame as a base class instead of ContentView . This has the advantage that you can use the existing FrameRenderer of Xamarin.Forms.Platform.Android.AppCompat , which already uses CardView . (see FrameRenderer.cs ).

FrameRenderer Ad

 public class FrameRenderer : CardView, IVisualElementRenderer, AView.IOnClickListener, AView.IOnTouchListener 

Renderer

 class NativeClientProfileRenderer : Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Frame> e) { base.OnElementChanged(e); } } 

NativeClientProfile

 public class NativeClientProfile : Frame { public NativeClientProfile() { // your stuff... Content = new StackLayout { Children = { item, new Label { Text = "Financial Services Provider", HorizontalTextAlignment = TextAlignment.Center }, grid } }; } } 

Discussion

The visualizer shows you what you need if you really want to do it manually. Using FrameRenderer makes your code dependent on the Xamarin implementation. If they ever change the type of view displayed for Frame , it will break your application. But if you look at the implementation of FrameRenderer, I will try not to create it completely from scratch (assessing simple risk and effort).