Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!