Net Maui Custom shell renderer custom button and shell bottom navigation is not working ?

Question

Net Maui Custom shell renderer custom button and shell bottom navigation is not working ?

Sami 966

I have custom renderer for bottom shell navigation on the middle button like that but is not working shell navigation like this.. how can I access it sa ys null referance

customshellrenderer ....




 internal class CustomShellItemRenderer : ShellItemRenderer
 {
     public CustomShellItemRenderer(IShellContext context) : base(context)
     {
     }

 public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
 {
     var view = base.OnCreateView(inflater, container, savedInstanceState);


 if (Context is not null && ShellItem is CustomTabBar { CenterViewVisible: true } tabbar)
 {
     var rootLayout = new FrameLayout(Context)
     {
         LayoutParameters = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent)
     };

  var middleView = new Button(Context)   {       LayoutParameters = middleViewLayoutParams          };            middleView.Click += delegate   {       tabbar.CenterViewCommand?.Execute(null);   };

   rootLayout.AddView(middleView);        
   return rootLayout;   

 }     
return view;

 }

 }

custom tabbar

  public partial class CustomTabBar : TabBar
{

  [AutoBindable]
  private ICommand? centerViewCommand;

  [AutoBindable]
  private ImageSource? centerViewImageSource;

  [AutoBindable]
  private string? centerViewText;

  [AutoBindable]
  private bool centerViewVisible;

  [AutoBindable]
  public Color? centerViewBackgroundColor;

  }

appshell.cs

  public AppShell()
  {

  InitializeComponent();
  BindingContext = this;

  Routing.RegisterRoute("plus", typeof(Plus));

}


   public ICommand CViewCommand { get; } = new Command(async () => await Shell.Current.GoToAsync($"//plus"));

appshell.xml

    <c:CustomTabBar  CenterViewVisible="True" CenterViewCommand="{Binding CViewCommand}">

        <Tab Title="Tab1">
            <Tab.Icon>
                <FontImageSource FontFamily="Fontello" Glyph="{StaticResource icon-explore}"/>
            </Tab.Icon>
            <ShellContent Shell.TabBarBackgroundColor="{StaticResource DarkBack}" Shell.TabBarTitleColor="{StaticResource White}" Shell.TabBarUnselectedColor="{StaticResource Gray300}"
		Title="Page1"
		ContentTemplate="{DataTemplate vw:Explore}"
		Route="explore" />
        </Tab>
        <Tab Title="Tab2">
            <Tab.Icon>
                <FontImageSource FontFamily="Fontello" Glyph="{StaticResource icon-category}"/>
            </Tab.Icon>
                <ShellContent Shell.TabBarBackgroundColor="{DynamicResource BackColor}" Shell.TabBarTitleColor="{DynamicResource MainTextColor}" Shell.TabBarUnselectedColor="{StaticResource Gray300}"
		Title="Page2"
		ContentTemplate="{DataTemplate vw:Categories}"
		Route="categories" />
        </Tab>
        <Tab Title="Tab3">
            <ShellContent Shell.TabBarBackgroundColor="{DynamicResource BackColor}" Shell.TabBarTitleColor="{DynamicResource MainTextColor}" Shell.TabBarUnselectedColor="{StaticResource Gray300}"
	Title="Page1"
	ContentTemplate="{DataTemplate vw:Plus}"
    Route="plus"/>
        </Tab>
        <Tab Title="Tab4">
            <Tab.Icon>
                <FontImageSource FontFamily="Fontello" Glyph="{StaticResource icon-favorites}"/>
            </Tab.Icon>
            <ShellContent Shell.TabBarBackgroundColor="{DynamicResource BackColor}" Shell.TabBarTitleColor="{DynamicResource MainTextColor}" Shell.TabBarUnselectedColor="{StaticResource Gray300}"
	Title="Page1"
	ContentTemplate="{DataTemplate vw:Favorites}"
	Route="favorites" />
        </Tab>
        <Tab Title="Tab5">
            <Tab.Icon>
                <FontImageSource FontFamily="Fontello" Glyph="{StaticResource icon-user}"/>
            </Tab.Icon>
            <ShellContent Shell.TabBarBackgroundColor="{DynamicResource BackColor}" Shell.TabBarTitleColor="{DynamicResource MainTextColor}" Shell.TabBarUnselectedColor="{StaticResource Gray300}"
	Title="Page2"
	ContentTemplate="{DataTemplate vw:Account}"
	Route="account" />
        </Tab>

Accepted answer

0 additional answers

Your answer

Answer 1

Anonymous

Hello,

You do not add the view to the rootLayout by rootLayout.AddView(view);, please add it.

Here is my tested code in OnCreateView method.

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
     var view = base. OnCreateView(inflater, container, savedInstanceState);

    if (Context is not null && ShellItem is CustomTabBar { CenterViewVisible: true } tabbar)
     {
         var rootLayout = new FrameLayout(Context)
         {
             LayoutParameters = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent)
         };
         rootLayout.AddView(view);
         const int middleViewSize = 150;
         var middleViewLayoutParams = new FrameLayout.LayoutParams(
             ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent,
             GravityFlags.CenterHorizontal | GravityFlags.Bottom)
         {
             BottomMargin = 100,
             Width = middleViewSize,
             Height = middleViewSize
         };
         var middleView = new Button(Context) { LayoutParameters = middleViewLayoutParams }; middleView.Click += delegate { tabbar. CenterViewCommand?. Execute(null); };

        rootLayout.AddView(middleView);
         return rootLayout;

    }
     return view;
}

By the way, please do not forget to register this custom renderer in the CreateMauiApp method of MauiProgram.cs

   
builder
 .ConfigureMauiHandlers(handlers =>

                 {
#if ANDROID
                     handlers.AddHandler(typeof(Shell), typeof(yourProject.Platforms.Android.CustomShellRenderer));
#endif
                 });

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.

Sami 966 Reputation points

2023-10-23T10:51:16.0966667+00:00
same as like my codes but still not working

public ICommand CViewCommand { get; } = new Command(async () => await Shell.Current.GoToAsync($"//plus"));

System.NullReferenceException: 'Object reference not set to an instance of an object.'
Anonymous

2023-10-24T07:43:44.38+00:00

Please use public ICommand CViewCommand { get; } = new Command( () => Console.WriteLine("test")); to replace about command, is that working? If not, can you share a mini demo that could reproduce this issue with us?
Sami 966 Reputation points

2023-10-24T08:05:47.0133333+00:00

l is not working test code Also l shared all codes with you

Only this code is working but outside of shell

public ICommand CViewCommand { get; } = new Command(async () => await App.Current.MainPage.Navigation.PushAsync(new Plus()));
Anonymous

2023-10-24T08:22:19.6033333+00:00

Please use await Shell.Current.GoToAsync($"plus") to make a test, if it is still not working, please share a demo with us.

Sami 966

It is not working ...I have aready shared all codes

  public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
      var view = base.OnCreateView(inflater, container, savedInstanceState);

      if (Context is not null && ShellItem is CustomTabBar { CenterViewVisible: true } tabbar)
      {
          var rootLayout = new FrameLayout(Context)
          {
              LayoutParameters = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent)
          };

          rootLayout.AddView(view);
          const int middleViewSize = 60;
          var middleViewLayoutParams = new FrameLayout.LayoutParams(
              ViewGroup.LayoutParams.WrapContent,
              ViewGroup.LayoutParams.WrapContent,
              GravityFlags.CenterHorizontal |
              GravityFlags.Bottom)
          {
              BottomMargin = 30,   
              Width = middleViewSize,
              Height = middleViewSize
          
          };
          var middleView = new Button(Context)
          {
              LayoutParameters = middleViewLayoutParams
              
          };
          middleView.Click += delegate
          {
              tabbar.CenterViewCommand?.Execute(null);
          };
          middleView.SetText(tabbar.CenterViewText, TextView.BufferType.Normal);

          middleView.SetPadding(0, 0, 0, 0);

          if (tabbar.CenterViewBackgroundColor is not null)
          {
              var backgroundView = new View(Context)
              {
                  LayoutParameters = middleViewLayoutParams
              };
              var backgroundDrawable = new GradientDrawable();
              backgroundDrawable.SetShape(ShapeType.Rectangle);
              backgroundDrawable.SetCornerRadius(middleViewSize / 2f);
              backgroundDrawable.SetColor(tabbar.CenterViewBackgroundColor.ToPlatform(Colors.Transparent));
              backgroundView.SetBackground(backgroundDrawable);
              rootLayout.AddView(backgroundView);
          }

          tabbar.CenterViewImageSource?.LoadImage(Application.Current!.MainPage!.Handler!.MauiContext!, result =>
          {
              if (result?.Value is not BitmapDrawable drawable || drawable.Bitmap is null)
              {
                  return;
              }

              const int padding = 0;
              middleView.LayoutParameters = new FrameLayout.LayoutParams(
                  drawable.Bitmap.Width - padding, drawable.Bitmap.Height - padding,
                  GravityFlags.CenterHorizontal | GravityFlags.Bottom)
              {
                  BottomMargin = middleViewLayoutParams.BottomMargin + (int)(1.5 * padding)
              };
              middleView.SetBackground(drawable);
  
              middleView.SetMinimumHeight(0);
              middleView.SetMinimumWidth(0);
          });

          rootLayout.AddView(middleView);
          return rootLayout;
      }

      return view;
  }

Anonymous

2023-10-24T08:47:01.5266667+00:00
What is your Mainpage in the App.xaml.cs? Based on your error, it looks like Shell.Current is null, can you add a break point to check it?

public App() { InitializeComponent(); MainPage = new AppShell(); }

Sami 966

you are right it was like that when i have changed it is working now ... thnaks for help sorry about waste of your time..
            //var navigationPage = new NavigationPage(new AppShell());
            //App.Current.MainPage = navigationPage;

Sami 966 Reputation points

2023-10-24T09:13:38.8733333+00:00
you are right... sorry about wasting time.. is working now...thanks ...

//var navigationPage = new NavigationPage(new AppShell()); //App.Current.MainPage = navigationPage;
Anonymous

2023-10-24T09:29:01.8766667+00:00

Great! You are welcome, please do not forget to accept answer, it will help others who have similar issue.

Share via

Net Maui Custom shell renderer custom button and shell bottom navigation is not working ?

0 additional answers

Your answer