Hello friends. In this article, I will talk about solutions for the problems experienced for Android while using Tabbed Page with Xamarin Forms. You know that Xamarin Forms is constantly evolving, but Tabbed Page for Android is a bit troubled. For example, your customer asked you to use a Tabbed Page page and the iOS Android side needs to be the same. After you add Tabbed Page to your project, iOS tabler appears below and Android appears above. In order to solve this problem, we need to come to the section of our project and integrate the code line below.
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
Thus, in fact, we can have Android specially listed below.
Another problem is that when Android has more than one tab page; Tabler in the text goes only the icons remain. Only Tab’s writing and icon is growing. That doesn’t actually look good on the eye. It’s called Shifting on Android. To disable this feature, we need to write Custom Renderer. If you want to learn more about Custom Renderer, please click here.
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
public CustomTabbedPageRenderer(Context context) : base(context) { }
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
if (ViewGroup != null && ViewGroup.ChildCount > 0)
{
BottomNavigationMenuView bottomNavigationMenuView = FindChildOfType<BottomNavigationMenuView>(ViewGroup);
if (bottomNavigationMenuView != null)
{
var shiftMode = bottomNavigationMenuView.Class.GetDeclaredField("mShiftingMode");
shiftMode.Accessible = true;
shiftMode.SetBoolean(bottomNavigationMenuView, false);
shiftMode.Accessible = false;
shiftMode.Dispose();
for (var i = 0; i < bottomNavigationMenuView.ChildCount; i++)
{
var item = bottomNavigationMenuView.GetChildAt(i) as BottomNavigationItemView;
if (item == null) continue;
item.SetShiftingMode(false);
item.SetChecked(item.ItemData.IsChecked);
}
if (bottomNavigationMenuView.ChildCount > 0) bottomNavigationMenuView.UpdateMenuView();
}
}
}
private T FindChildOfType<T>(ViewGroup viewGroup) where T : Android.Views.View
{
if (viewGroup == null || viewGroup.ChildCount == 0) return null;
for (var i = 0; i < viewGroup.ChildCount; i++)
{
var child = viewGroup.GetChildAt(i);
var typedChild = child as T;
if (typedChild != null) return typedChild;
if (!(child is ViewGroup)) continue;
var result = FindChildOfType<T>(child as ViewGroup);
if (result != null) return result;
}
return null;
}
}
This will no longer allow shifting between tabs.
If you have questions, you can reach us by e-mail or comment. Good work.
Leave a Reply