Xamarin.forms doesn't show the content of ViewRenderer from Xamarin.Android

Question

On My project, I worked on Xamarin.forms and Xamarin.android. All the pages in Xamarin.forms work fine, but when I click on the button that should directs to an activity in Xamarin.forms, it shows nothing. My code is shown below, I wanted to show the content that is in NewViewRenderer in Xamarin.Forms

** Xamarin.forms:

MainPage.xaml ( it has the bellow button that shows RegionPage.xaml)

...
            <StackLayout Grid.Row="2" Grid.Column="1" Orientation="Vertical">
                <Image Source="location.png"  
                   Grid.Row="2"  
                   Grid.Column="1"  
                   BackgroundColor="White"  
                   WidthRequest="60" HeightRequest="60" 
                   >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_5"/>
                </Image.GestureRecognizers>
            </Image>
                <Label Text="Regions" HorizontalTextAlignment="Center" />
            </StackLayout>
....

NewView.cs

    using ...
    namespace miemss_xamarin
    {public class NewView : View{}}

RegionPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:miemss_xamarin;assembly=miemss_xamarin"
             mc:Ignorable="d"
             Title="Regions"
             x:Class="miemss_xamarin.RegionPage">
    <ContentPage.Content>

        <local:NewView />
    </ContentPage.Content>
</ContentPage>

In the android, I've my layout (NotificationLayout.xml)like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:text="Message Notifications for:"
        android:id="@+id/msgText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMediumInverse"
        android:padding="10dp"
        android:textColor="@android:color/black"
        />
    <Switch
        android:id="@+id/SubscribeToRegion1"
        android:text="Region 1"
        android:textAppearance="?android:attr/textAppearanceMediumInverse"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/> ... (and 4 other Switches)

NewViewRenderer.cs

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Firebase.Messaging;
using miemss_xamarin.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(miemss_xamarin.NewView), typeof(NewViewRenderer))]

namespace miemss_xamarin.Droid
{
   public class NewViewRenderer : ViewRenderer <miemss_xamarin.NewView,miemss_xamarin.Droid.NewViewRenderer>
    {
        NewViewRenderer newViewRenderer;
        Android.Widget.Switch btnRegion1; Android.Widget.Switch btnRegion2; Android.Widget.Switch btnRegion3; Android.Widget.Switch btnRegion4; Android.Widget.Switch btnRegion5;
       public NewViewRenderer (Context context):base (context)
        {

        }
        protected override void OnElementChanged(ElementChangedEventArgs<miemss_xamarin.NewView> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {
              //  var context = new NewViewRenderer(Forms.Context);
                //SetNativeControl(context);
                var context = Android.App.Application.Context;

                LayoutInflater minflater = context.GetSystemService(Context.LayoutInflaterService) as LayoutInflater;
                var view = minflater.Inflate(Resource.Layout.NotificationLayout, this, false);
                var msgText = view.FindViewById<TextView>(Resource.Id.msgText);
                 btnRegion1 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion1);
                 btnRegion2 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion2);
                 btnRegion3 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion3);
                 btnRegion4 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion4);
                 btnRegion5 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion5);


            //   base.SetNativeControl(view);
It always shows red underline under view, so I
            }



            if (e.NewElement != null)
            {
                btnRegion1.CheckedChange += (a, b) =>
                {
                    bool isChecked = b.IsChecked;
                    if (isChecked)
                        FirebaseMessaging.Instance.SubscribeToTopic("R1");
                    else
                        FirebaseMessaging.Instance.UnsubscribeFromTopic("R1");
                };

                btnRegion2.CheckedChange += (c, d) =>
                {
                    bool isChecked = d.IsChecked;
                    if (isChecked)
                        FirebaseMessaging.Instance.SubscribeToTopic("R2");
                    else
                        FirebaseMessaging.Instance.UnsubscribeFromTopic("R2");
                };

                btnRegion3.CheckedChange += (e, f) =>
                {
                    bool isChecked = f.IsChecked;
                    if (isChecked)
                        FirebaseMessaging.Instance.SubscribeToTopic("R3");
                    else
                        FirebaseMessaging.Instance.UnsubscribeFromTopic("R3");
                };

                btnRegion4.CheckedChange += (g, h) =>
                {
                    bool isChecked = h.IsChecked;
                    if (isChecked)
                        FirebaseMessaging.Instance.SubscribeToTopic("R4");
                    else
                        FirebaseMessaging.Instance.UnsubscribeFromTopic("R4");
                };

                btnRegion5.CheckedChange += (i, j) =>
                {
                    bool isChecked = j.IsChecked;
                    if (isChecked)
                        FirebaseMessaging.Instance.SubscribeToTopic("R5");
                    else
                        FirebaseMessaging.Instance.UnsubscribeFromTopic("R5");
                };
            }
        }

and no changes on the MainActivity.cs (Default code) as shown below:

 using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using Android.Util;
using Firebase.Iid;
using Android.Gms.Common;
using Firebase.Messaging;

namespace miemss_xamarin.Droid
{
    [Activity(Label = "miemss_xamarin", Icon = "@mipmap/icon", Theme = "@style/MainTheme", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        TextView msgText;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
           LoadApplication(new App());
            }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }
}

I've tried several solutions that I found on how to use ViewRenderer to show android activities on Xamarain.forms but still couldn't have it worked perfectly. I want to show the activity NewViewRenderer in Xamarin Forms? Right Now when I click on Regions Icon, it shown an empty page with back button to the main page!

Answer 1

The issue is the base type you are using for your NewViewRenderer:

public class NewViewRenderer : ViewRenderer<miemss_xamarin.NewView,miemss_xamarin.Droid.NewViewRenderer>

You want your native control to be a Android.Views.View, not your NewViewrenderer. So try this instead:

public class NewViewRenderer : Xamarin.Forms.Platform.Android.ViewRenderer<NewView, Android.Views.View>

or if you need Android.AppCompat views:

public class NewViewRenderer : Xamarin.Forms.Platform.Android.AppCompat.ViewRenderer<NewView, Android.Views.View>

Answer 2

When you set the type of NewViewRenderer , you make a mistake. You should set ViewRenderer<NewView, Android.Views.View>

[assembly: ExportRenderer(typeof(NewView), typeof(NewViewRenderer))]
namespace CustomRenderDemo.Droid
{
    public class NewViewRenderer : ViewRenderer<NewView, Android.Views.View>
    {
        NewViewRenderer newViewRenderer;
        Android.Widget.Switch btnRegion1; Android.Widget.Switch btnRegion2; Android.Widget.Switch btnRegion3; Android.Widget.Switch btnRegion4; Android.Widget.Switch btnRegion5;

        Context context;
        public NewViewRenderer(Context context) : base(context)
        {
            this.context = context;
        }
        protected override void OnElementChanged(ElementChangedEventArgs<NewView> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {
                //  var context = new NewViewRenderer(Forms.Context);
                //SetNativeControl(context);
                var context = Android.App.Application.Context;
              var  view = LayoutInflater.From(context).Inflate(Resource.Layout.NotificationLayout, null, false); 
             //   LayoutInflater minflater = context.GetSystemService(Context.LayoutInflaterService) as LayoutInflater;
              //  var view = minflater.Inflate(Resource.Layout.NotificationLayout, this, false);
                var msgText = view.FindViewById<TextView>(Resource.Id.msgText);
                btnRegion1 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion1);
                btnRegion2 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion2);
                btnRegion3 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion3);
                btnRegion4 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion4);
                btnRegion5 = view.FindViewById<Android.Widget.Switch>(Resource.Id.SubscribeToRegion5);
                SetNativeControl(view);
              //  AddView(view);
               // new NewView(context);
              //  SetNativeControl(new MyView(context));
              //  Control.AddView(view);
                //   base.SetNativeControl(view);
                //  It always shows red underline under view, so I
            }



            if (e.NewElement != null)
            {
                btnRegion1.CheckedChange += (a, b) =>
                {
                    bool isChecked = b.IsChecked;
                    //if (isChecked)
                    //    FirebaseMessaging.Instance.SubscribeToTopic("R1");
                    //else
                    //    FirebaseMessaging.Instance.UnsubscribeFromTopic("R1");
                };

                btnRegion2.CheckedChange += (c, d) =>
                {
                    bool isChecked = d.IsChecked;
                    //if (isChecked)
                    //    FirebaseMessaging.Instance.SubscribeToTopic("R2");
                    //else
                    //    FirebaseMessaging.Instance.UnsubscribeFromTopic("R2");
                };

                btnRegion3.CheckedChange += (e, f) =>
                {
                    bool isChecked = f.IsChecked;
                    //if (isChecked)
                    //    FirebaseMessaging.Instance.SubscribeToTopic("R3");
                    //else
                    //    FirebaseMessaging.Instance.UnsubscribeFromTopic("R3");
                };

                btnRegion4.CheckedChange += (g, h) =>
                {
                    bool isChecked = h.IsChecked;
                    //if (isChecked)
                    //    FirebaseMessaging.Instance.SubscribeToTopic("R4");
                    //else
                    //    FirebaseMessaging.Instance.UnsubscribeFromTopic("R4");
                };

                btnRegion5.CheckedChange += (i, j) =>
                {
                    bool isChecked = j.IsChecked;
                    //if (isChecked)
                    //    FirebaseMessaging.Instance.SubscribeToTopic("R5");
                    //else
                    //    FirebaseMessaging.Instance.UnsubscribeFromTopic("R5");
                };
            }

        }
    }

Here is running sceenshot.