Custom Bottom Bar in Shell Application

Question

I want to build a simple music player app using XF that has a couple simple views (Song List View, Album List View, etc) with a bottom bar that shows the current song being played and some basic controls (play/pause, forward, back, etc). I want this bottom bar to be visible across all views. I can't find any way of doing this outside of recreating the bottom bar in each view. Recreating this bottom bar in each view would be difficult to maintain and would be weird from a user perspective is it would animate in and out when the user navigates.

Is there a way to create a custom bottom bar in a Shall application?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Is there a way to create a custom bottom bar in a Shall application

To create the custom bottom bar, try creating a custom Shell renderer to add the view. You could search with the keyword as Xamarin.Forms.Shell Customizing the TabBar (Android) to check the related documentation.

Here is the sample code, you could refer to it.

   public class CustomShellRenderer : ShellRenderer  
   {  
       public CustomShellRenderer(Context context) : base(context)  
       {  
       }  
     
       protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)  
       {  
           return new TodoShellItemRenderer(this);  
       }  
   }  
     
   public class TodoShellItemRenderer : ShellItemRenderer  
   {  
       FrameLayout _shellOverlay;  
       BottomNavigationView _bottomView;  
     
       public TodoShellItemRenderer(IShellContext shellContext) : base(shellContext)  
       {  
       }  
     
     
       public override Android.Views.View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
       {  
           var outerlayout = base.OnCreateView(inflater, container, savedInstanceState);  
           _bottomView = outerlayout.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);  
           _shellOverlay = outerlayout.FindViewById<FrameLayout>(Resource.Id.bottomtab_tabbar_container);  
     
           var layout = new LinearLayout(Context);  
     
           //create the view to controller the audio play  
           var textView = new TextView(Context);  
             
           var lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.WrapContent);  
           _bottomView.Measure((int)MeasureSpecMode.Unspecified, (int)MeasureSpecMode.Unspecified);  
           lp.BottomMargin = _bottomView.MeasuredHeight;  
     
           layout.LayoutParameters = lp;  
           layout.AddView(textView);  
     
           _shellOverlay.RemoveAllViews();  
           _shellOverlay.AddView(layout);  
           return outerlayout;  
       }  
   }  

Similar issue thread you could refer to:
https://learn.microsoft.com/en-us/answers/questions/170862/xamarin-bottom-custom-tab-bar.html?childToView=183398#comment-183398

Best Regards,

Jarvan Zhang

---

If the response is helpful, 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.