1

How can I realize the orange line above Tab bar on Android and iOS?

enter image description here

Ks.P
  • 212
  • 1
  • 5
  • 16
  • What tab bar you used for? On Android, for the top border line of default tabbar, you could set the tab layout background of tabbar.xml, and then when you load the tabbed page in xamarin.forms, it would show the top border line. https://stackoverflow.com/a/41646955/11850033 – Wendy Zang - MSFT Apr 02 '20 at 09:42

2 Answers2

5

To achieve this effect, you need to create a custom TabbedPageRenderer.

On Android:

    public class EnhancedTabbedPageRenderer : TabbedPageRenderer
    {
        private BottomNavigationView _bottomNavigationView;

        public EnhancedTabbedPageRenderer(Context context) : base(context)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                _bottomNavigationView = ((RelativeLayout)GetChildAt(0)).GetChildAt(1) as BottomNavigationView;
            }
        }

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
            // Create a Gradient Stroke as the new top border. (Set alpha if needed.)
            GradientStrokeDrawable topBorderLine = new GradientStrokeDrawable { Alpha = 0x33 };
            // Change it to the color you want.
            topBorderLine.SetStroke(1, Color.FromRgb(0x00, 0x00, 0x00).ToAndroid());
            LayerDrawable layerDrawable = new LayerDrawable(new Drawable[] { topBorderLine });
            layerDrawable.SetLayerInset(0, 0, 0, 0, _bottomNavigationView.Height - 2);
            _bottomNavigationView.SetBackground(layerDrawable);
        }
    }

On iOS:

    public class EnhancedTabbedPageRenderer : TabbedRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                // Hide the origin top border.
                UITabBar.Appearance.BackgroundImage = new UIImage();
                UITabBar.Appearance.ShadowImage = new UIImage();
                // Create a view as the new top border. Change it to the color you want. (Set alpha if needed.)
                UIView view = new UIView(new CGRect(0, 0, TabBar.Frame.Width, 1)) { BackgroundColor = Color.FromRgb(0x00, 0x00, 0x00).ToUIColor(), Alpha = (System.nfloat)0.2 };
                // Add the view to the TabBar.
                TabBar.AddSubview(view);
            }
        }
    }
HCH
  • 78
  • 1
  • 9
  • Could you tell me how to change the color on android? I tried `topBorderLine.SetStroke(1, Color.Red.ToAndroid());` and play with alpha, but the line color changes only from fully transparent to black. – Saftpresse99 Feb 26 '21 at 07:40
0

GradientStrokeDrawable doesn't work for me on android. Here is my solution: https://stackoverflow.com/a/66390258/4506984

Saftpresse99
  • 849
  • 7
  • 16