xamarin/Xamarin.Forms

[Bug] Adding NavigationPage as Child of TabbedPage changes Button text alignment

Open

#8,304 opened on Oct 30, 2019

 (2 comments) (0 reactions) (0 assignees)C# (1,926 forks)batch import
e/3 :clock3:help wantedinactivep/Androidt/bug :bug:up-for-grabs

Repository metrics

Stars
 (5,644 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Description

Making NavigationPage children to be of TabbedPage works fine on iOS but on Android, it shifts the button text . Its pretty weird UX

When you see the Button's text it aligns to left sometimes

How to fix this?

Steps to Reproduce

Screen Shot 2019-10-29 at 2 20 13 PM

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.IsSwipePagingEnabled="False"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="ButtonTextAlignmentIssue.BaseTabbedPage"
            BarBackgroundColor="Navy"
            SelectedTabColor="Red"
            UnselectedTabColor="White"
            BarTextColor="Red">

</TabbedPage>

 public partial class BaseTabbedPage : TabbedPage
    {
        public BaseTabbedPage()
        {

            InitializeComponent();
            var page1 = new NavigationPage(new ContentPage() { Title = "Tab 1", Content = new Label { Text = "page 1" } }) { Title = "Tab1" };
            var page2 = new NavigationPage(new MainPage() { Title = "Tab 2" }) { Title = "Tab 2" };
            var page3 = new NavigationPage(new ContentPage() { Title = "Tab 3", Content = new Label { Text = "page 3" } }) { Title = "Tab 3" };
            var page4 = new NavigationPage(new MainPage() { Title = "Tab 4" }) { Title = "Tab 4" };
            var page5 = new NavigationPage(new ContentPage() { Title = "Tab 5", Content = new Label { Text = "page 5" } }) { Title = " Tab 5" };
            this.Children.Add(page1);
            this.Children.Add(page2); 
           
            this.Children.Add(page3);
            this.Children.Add(page4);

            this.Children.Add(page5);

        }

However if only NavigationPage is used for a page then this issue does not appear.

MainPage = new NavigationPage(new MainPage());

image

Expected Behavior

Should not change the text alignment

Actual Behavior

Button text alignment to left

Basic Information

  • Version with issue: 4.3
  • Last known good version: Not sure
  • IDE: Visual Studio (Windows and Mac both)
  • Platform Target Frameworks:
    • iOS: NA
    • Android: Yes 28.0.3 /29.0.2
    • UWP: NA
  • Android Support Library Version:
  • Nuget Packages:
  • Affected Devices:

Screenshots

Reproduction Link

Github

Will upload in few minutes

Contributor guide