Custom Bottom Bar in Shell Application

Andrew Quesnel 1 Reputation point
2021-11-15T02:24:30.583+00:00

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?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,825 questions
No comments
{count} votes

1 answer

Sort by: Most helpful
  1. JarvanZhang 23,851 Reputation points
    2021-11-16T08:54:59.383+00:00

    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.

    No comments