How to add a top border to Xamarin Forms App Shell Tabbar

user_888734 0
Viewed 540

Using the Xamarin Forms App Shell template, it’s obvious how to change the background colour of the Tabbar, but I can’t see a way to add a top border, or even a drop shadow, as is common in many tab bar styles.

enter image description here

enter image description here

enter image description here

xamarin.forms.shell xamarin.forms .net
1 Answers

Android:

You could use the CreateBottomNavViewAppearanceTracker to change something for the bottomview.

  [assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace ShellDemo.Droid
{
class ShellCustomRenderer : ShellRenderer
{

    public ShellCustomRenderer(Context context) : base(context)
    {
    }

    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new CustomBottomNavAppearance();
    }
}

public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
{
    public void Dispose()
    {

    }

    public void ResetAppearance(BottomNavigationView bottomView)
    {

    }

    public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        //put your code here
       
    }
}
}

  • Shadow: Create a Shadow.xml in Drawable of Android.

    <shape 
 xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
 android:startColor="@android:color/holo_orange_light"
 android:endColor="@android:color/transparent"
 android:angle="90" />
</shape>

    And then set the shadow as background of bottomview in SetAppearance.

    bottomView.SetBackgroundResource(Resource.Drawable.shadow);

  • Border line of the bottomview. Create a Border_top.xml in Drawable of Android.

     <layer-list 
 xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:top="5dip">
   <shape>
     <solid android:color="@android:color/holo_green_light"> 
     </solid>
  </shape>
 </item>
 </layer-list>

    And then set it as background.

    bottomView.SetBackgroundResource(Resource.Drawable.border_top);

iOS:

You could use the CreateTabBarAppearanceTracker to change the tabbar.

  [assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace ShellDemo.iOS
{
public class ShellCustomRenderer : ShellRenderer
{
    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new TabBarAppearance();
    }

}

public class TabBarAppearance : IShellTabBarAppearanceTracker
{
    public void Dispose()
    {

    }

    public void ResetAppearance(UITabBarController controller)
    {
        
    }

    public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
    {
    }

    public void UpdateLayout(UITabBarController controller)
    {
    }
}
}

Shadow: The iOS has a default shadow there.

user_118500330
Related