Can the bottom animation be achived in xamarin.forms android tabbedpage?

Question

In Xamarin.forms not shell template how to achive that in the gif?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

To change the navigation style of the bottom bar in TabbedPage, try creating a custom tabbedPage renderer to achieve the function on native. I get a related document, you could search with the keyword as Extending TabbedPag to view that.

Here is the sample code, please check it.

   [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]  
   namespace TestApplication_5.Droid  
   {  
       public class CustomTabbedPageRenderer : TabbedPageRenderer  
       {  
           Xamarin.Forms.TabbedPage tabbedPage;  
           BottomNavigationView bottomNavigationView;  
           Android.Views.IMenuItem lastItemSelected;  
           private bool firstTime = true;  
           int lastItemId = -1;  
           public CustomTabbedPageRenderer(Context context) : base(context)  
           {  
           }  
           protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)  
           {  
               base.OnElementChanged(e);  
     
               if (e.NewElement != null)  
               {  
                   tabbedPage = e.NewElement as CustomTabbedPage;  
                   bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;  
                   bottomNavigationView.NavigationItemSelected += BottomNavigationView_NavigationItemSelected;  
                   bottomNavigationView.SelectedItemId = 0;  
               }  
               if (e.OldElement != null)  
               {  
                   bottomNavigationView.NavigationItemSelected -= BottomNavigationView_NavigationItemSelected;  
               }  
           }  
     
           protected override void OnLayout(bool changed, int l, int t, int r, int b)  
           {  
               base.OnLayout(changed, l, t, r, b);  
     
               if (firstTime && bottomNavigationView != null)  
               {  
                   for (int i = 0; i < Element.Children.Count; i++)  
                   {  
                       var item = bottomNavigationView.Menu.GetItem(i);  
                       if (bottomNavigationView.SelectedItemId == item.ItemId)  
                       {  
                           SetupBottomNavigationView(item);  
                           break;  
                       }  
                   }  
                   firstTime = false;  
               }  
           }  
     
           void BottomNavigationView_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)  
           {  
               var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;  
               var normalColor = tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();  
               var selectedColor = tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid();  
     
               if (lastItemSelected != null)  
               {  
                   lastItemSelected.Icon.SetColorFilter(BlendModeColorFilterCompat.CreateBlendModeColorFilterCompat(normalColor, BlendModeCompat.SrcIn));  
     
               }  
               e.Item.Icon.SetColorFilter(BlendModeColorFilterCompat.CreateBlendModeColorFilterCompat(selectedColor, BlendModeCompat.SrcIn));  
               lastItemSelected = e.Item;  
     
               if (lastItemId != -1)  
               {  
                   SetTabItemTextColor(bottomNavMenuView.GetChildAt(lastItemId) as BottomNavigationItemView, normalColor);  
               }  
     
               SetTabItemTextColor(bottomNavMenuView.GetChildAt(e.Item.ItemId) as BottomNavigationItemView, selectedColor);  
               SetupBottomNavigationView(e.Item);  
               this.OnNavigationItemSelected(e.Item);  
               lastItemId = e.Item.ItemId;  
     
           }  
     
           void SetTabItemTextColor(BottomNavigationItemView bottomNavigationItemView, Android.Graphics.Color textColor)  
           {  
               var itemTitle = bottomNavigationItemView.GetChildAt(1);  
               var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));  
               var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));  
     
               smallTextView.SetTextColor(textColor);  
               largeTextView.SetTextColor(textColor);  
           }  
     
     
           //Adding line view  
           void SetupBottomNavigationView(IMenuItem item)  
           {  
               int lineBottomOffset = 8;  
               int lineWidth = 4;  
               int itemHeight = bottomNavigationView.Height - lineBottomOffset;  
               int itemWidth = (bottomNavigationView.Width / Element.Children.Count);  
               int leftOffset = item.ItemId * itemWidth;  
               int rightOffset = itemWidth * (Element.Children.Count - (item.ItemId + 1));  
               GradientDrawable bottomLine = new GradientDrawable();  
               bottomLine.SetShape(ShapeType.Line);  
               bottomLine.SetStroke(lineWidth, Xamarin.Forms.Color.DarkGray.ToAndroid());  
     
               var layerDrawable = new LayerDrawable(new Drawable[] { bottomLine });  
               layerDrawable.SetLayerInset(0, leftOffset, itemHeight, rightOffset, 0);  
               bottomNavigationView.SetBackground(layerDrawable);  
           }  
       }  
   }  

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.