locked
Navigation Title not centering on Android RRS feed

  • Question

  • User351456 posted

    I’ve set the navigation title in my Xamarin forms application as below:

        <NavigationPage.TitleView>
            <Grid>
                <Label Text="Settings" Style="{StaticResource NavTitle}"/>
                <Button Text="&#xf060;" Style="{StaticResource LeftNavButton}" Clicked="BackButtonClicked"/>
            </Grid>
        </NavigationPage.TitleView>
    

    The Label has been centered, on iOS the positioning is fine but on Android it is shifted over to the right. I've set the navigation back button to be hidden with NavigationPage.SetHasBackButton(this, false) but it seems to still be pushing it over, does anybody have any insight to why it's shifted over on Android and not iOS?

    Images attached, Thanks in advance!

    Below is the styles for reference:

             <Style x:Key="LeftNavButton" TargetType="Button">
                <Setter Property="BackgroundColor" Value="Transparent"/>
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="HeightRequest" Value="20"/>
                <Setter Property="FontSize" Value="20"/>
                <Setter Property="FontFamily" Value="{StaticResource FontAwesomeSolid}"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="HorizontalOptions" Value="Start"/>
                <Setter Property="WidthRequest" Value="30"/>
                <Setter Property="Margin" Value="{StaticResource LeftButtonMargin}"/>
            </Style>
    
            <Style x:Key="NavTitle" TargetType="Label">
                <Setter Property="FontAttributes" Value="Bold"/>
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="HeightRequest" Value="20"/>
                <Setter Property="FontSize" Value="17"/>
                <Setter Property="VerticalTextAlignment" Value="Center"/>
                <Setter Property="HorizontalTextAlignment" Value="Center"/>
                <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>
            </Style>
    
    Friday, October 4, 2019 10:41 PM

Answers

  • User369979 posted

    This is because there's a left margin between the toolbar and the border. You can remove it like:

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
    
        android:contentInsetLeft="0dp"
        android:contentInsetStart="0dp"   
        android:contentInsetRight="0dp"
        android:contentInsetEnd="0dp"
    
        app:contentInsetLeft="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetEnd="0dp" />
    

    Modify the Toolbar.xml file in the Android project.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, October 7, 2019 8:11 AM

All replies

  • User351456 posted

    Images attached



    Saturday, October 5, 2019 12:32 AM
  • User369979 posted

    This is because there's a left margin between the toolbar and the border. You can remove it like:

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
    
        android:contentInsetLeft="0dp"
        android:contentInsetStart="0dp"   
        android:contentInsetRight="0dp"
        android:contentInsetEnd="0dp"
    
        app:contentInsetLeft="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetEnd="0dp" />
    

    Modify the Toolbar.xml file in the Android project.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, October 7, 2019 8:11 AM
  • User389528 posted

    it is not working , something wrong?

    Wednesday, April 22, 2020 11:29 AM
  • User381433 posted

    @ssamix said: it is not working , something wrong?

    Same problem for me. This workaround does not seem to work anymore. Ideas anyone?

    Monday, August 17, 2020 2:34 PM