CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.android
Saftpresse99
Saftpresse99

Reputation: 979

TabbedPage with separator line on android

it is possible to create a separator between a TabbedPage and the child pages? iOS has one by default, but not android.
iOS:
enter image description here

Android:
enter image description here

Upvotes: 0

Views: 863

Answers (2)

Saftpresse99
Saftpresse99

Reputation: 979

This following works for me. BottomNavigationView.Height is 0 in OnElementChanged, so we need to override OnLayout:

public class CustomTabbedPageRenderer : TabbedPageRenderer {
    private BottomNavigationView _bottomNavigationView;

    public CustomTabbedPageRenderer(Context context) : base(context) {
    }
    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e) {
        base.OnElementChanged(e);
        if(e.NewElement != null) {
            _bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).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);
        ShapeDrawable line = new ShapeDrawable() {
            Alpha = 255
        };
        line.Paint.Color = Color.Red.ToAndroid();
        line.Paint.SetStyle(Paint.Style.Fill);
        var layerDrawable = new LayerDrawable(new Drawable[] { line });
        layerDrawable.SetLayerInset(0, 0, 0, 0, _bottomNavigationView.Height - 5);
        _bottomNavigationView.SetBackground(layerDrawable);
    }
}

5 is the lineheight.

Upvotes: 0

Lucas Zhang
Lucas Zhang

Reputation: 18861

You could implement it by using custom renderer

public class ExtendedTabbedPageRenderer : TabbedPageRenderer
    {
        Xamarin.Forms.TabbedPage tabbedPage;
        BottomNavigationView bottomNavigationView;
        private bool firstTime = true;

        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;
                bottomNavigationView.NavigationItemSelected += BottomNavigationView_NavigationItemSelected;


                //add the line manualy here
            }

        }
       
        

        void BottomNavigationView_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
        {       
            this.OnNavigationItemSelected(e.Item);
        }

       
}

Upvotes: 1

Related Questions