Xamarin: Adding borders to the selected tab item - xamarin

Question

In Xamarin.Forms on Android, I'm working on a section that uses a tabbed page. I'm attempting to place a set of borders around the selected item like such:
and
Is there any way that such a goal can be achieved using custom renderers?

Answer 1

According to your description, if you want to change selected item color in TabbedPage, you can use the following code:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.TabbedPage2"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:local="clr-namespace:TabbedPageDemo"
android:TabbedPage.BarItemColor="Gray"
android:TabbedPage.BarSelectedItemColor="#3C9BDF"
android:TabbedPage.ToolbarPlacement="Bottom"
BarTextColor="Gray">
<!-- Pages can be added as references or inline -->
<ContentPage Title="Tab 1" />
<ContentPage Title="Tab 2" />
<ContentPage Title="Tab 3" />
</TabbedPage>
If you want to change selected item text size, you can use custom render to do this:
[assembly: ExportRenderer(typeof(ExtendedTabbedPage), typeof(ExtendedTabbedPageRenderer))]
namespace CustomTabbedPage.Droid
{
public class ExtendedTabbedPageRenderer : TabbedPageRenderer
{
Xamarin.Forms.TabbedPage tabbedPage;
BottomNavigationView bottomNavigationView;
Android.Views.IMenuItem lastItemSelected;
private bool firstTime = true;
int lastItemId=-1;
public ExtendedTabbedPageRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
tabbedPage = e.NewElement as ExtendedTabbedPage;
bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;
//Call to change the font
ChangeFont();
}
}
//Change Tab font
void ChangeFont()
{
var fontFace = Typeface.CreateFromAsset(Context.Assets, "gilsansultrabold.ttf");
var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;
for (int i = 0; i < bottomNavMenuView.ChildCount; i++)
{
var item = bottomNavMenuView.GetChildAt(i) as BottomNavigationItemView;
var itemTitle = item.GetChildAt(1);
var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));
lastItemId = bottomNavMenuView.SelectedItemId;
//smallTextView.SetTypeface(fontFace, TypefaceStyle.Bold);
//largeTextView.SetTypeface(fontFace, TypefaceStyle.Bold);
smallTextView.TextSize = 18;
largeTextView.TextSize = 18;
//Set text color
var textColor = (item.Id == bottomNavMenuView.SelectedItemId) ? tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid() : tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
smallTextView.SetTextColor(textColor);
largeTextView.SetTextColor(textColor);
}
}
}
}
If you want to add border line for tabbar, please take a look this thread:
Xamarin Tab Bar top(border) line