dotnet / dotnet/maui

[Bug] [Android] Shell.TitleView incorrect positioning of content

Open
#3,559 24 comments 13 reactions 0 assignees View on GitHub
area-controls-shell p/2 platform/android s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 15h
Merged PRs (30d)
290

Description

### Description

Adding a Custom `Shell.TitleView` to a page results in incorrect positioning of the content. Adding a `Shell.TitleView` according to the [Xamarin.Forms documentation](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/pages#display-views-in-the-navigation-bar), the image should be displayed horizontally and vertically centered. Instead, it is positioned too far to the right and bottom. A repro is available [here](https://github.com/LarsBehl/MauiTitleViewPositioning)

#### Actual behaviour
![image](https://user-images.githubusercontent.com/26459044/143568455-29d1d1f6-5cc8-4d1b-b484-165a4205fc64.png)

#### Expected behaviour
The added image is a menu icon (same as the one for the navigation, just in black). The image should be vertically and horizontally centered in the titlebar.

### Steps to Reproduce

1. Create new Maui project
2. Add new Xaml-Page
3. Add `Shell.TitleView` to the newly created page
4. Add a `Image` to the `Shell.TitleView` and add `HorizontalOptions="Center"` `VerticalOptions="Center"`
5. Replace content of `MainPage` with a `Shell`
6. Add the xml-Namespace `xmlns:local="clr-namespace:MauiApp1"`
7. Add `FlyoutItem` to the `Shell` with `ShellContent` `ContentTemplate="{DataTemplate local:HomePage}"`

### Version with bug

Preview 10 (current)

### Last version that worked well

Unknown/Other

### Affected platforms

Android

### Affected platform versions

Android 11/API 30

### Did you find any workaround?

_No response_

### Relevant log output

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked MauiTitleViewPositioning repro and the Android handling of Shell.TitleView. Reproduce the layout with the centered Image on Android 11/API 30, then verify that the image is horizontally and vertically centered in the title bar without regressing the documented Shell.TitleView behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, csharp
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.