material-components / material-components/material-components-android

Status Bar color not consistent between Fragments with CollapsingToolbar and only MaterialToolbar

Open
#4,324 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Widget: TopAppBar
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

**Description:**
I am setting `android:windowTranslucentStatus` to true to achieve a transparent status bar to blend with the **ImageView** of a **CollapsingToolbar** when expanded and it follows `android:statusBarColor` when collapsed in FragmentA. However when navigating to FragmentB that only has **MaterialToolbar** the status bar color change and does not follow `android:statusBarColor` of the base theme.

**Expected behavior:**
If I set `statusBarForeground` at the `Theme.App.NoActionBar.TranslucentStatusBar` then there will be no translucency of status bar on both destinations, I want both behaviors.

1. Translucent status bar when **CollapsingToolbar** is expanded and colored status bar when collapsed on FragmentA.
image
image

2. Controlled color on status bar for FragmentB, not a variant color of the default background of **MaterialToolbar**. I noticed that it is using a light version of the default background color of **MaterialToolbar** shown in the right image which is pinkish.
image
image

So far I cannot achieve the second requirement.

**Source code:**

Toolbars theme set
```



<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
<item name="contentInsetStartWithNavigation">0dp</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>


<!-- Background color -->
<item name="colorSurface">@color/colorWhite_Primary</item>
<!-- Title and Navigation icon color -->
<item name="colorOnSurface">@color/colorPrimaryDark_White</item>
<!-- Subtitle and Action item color -->
<item name="colorOnSurfaceVariant">@color/colorPrimaryDark_White</item>
<!-- Action item and Overflow menu color when `colorOnSurfaceVariant` is not working -->
<!-- Drawer icon and Navigation icon also use this -->
<item name="colorControlNormal">@color/colorPrimaryDark_White</item>



<item name="titleCollapseMode">scale</item>
<item name="scrimAnimationDuration">700</item>
<!-- Collapsed Toolbar background -->
<item name="contentScrim">?attr/colorPrimary</item>
<item name="expandedTitleTextColor">@android:color/white</item>
<item name="collapsedTitleTextColor">@color/colorPrimaryDark_White</item>
<item name="statusBarScrim">@color/colorGray_PrimaryDark</item>
<item name="collapsedTitleTextAppearance">@style/TextAppearance.App.CollapsingToolbar.Collapsed</item>
<item name="expandedTitleTextAppearance">@style/TextAppearance.App.CollapsingToolbar.Expanded</item>>


<item name="android:shadowRadius">4</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowColor">@android:color/black</item>


<!-- no-op -->




<!-- Background color -->
<item name="colorSurface">@color/colorWhite_Primary</item>
<!-- Title and Navigation icon color -->
<item name="colorOnSurface">@color/colorPrimaryDark_White</item>
<!-- Subtitle and Action item color -->
<item name="colorOnSurfaceVariant">@color/colorPrimaryDark_White</item>
<!-- Action item and Overflow menu color when `colorOnSurfaceVariant` is not working -->
<!-- Drawer icon and Navigation icon also use this -->
<item name="colorControlNormal">@color/colorPrimaryDark_White</item>

```

App's base theme
```



<!-- Primary brand color -->
<item name="colorPrimary">@android:color/white</item>

<item name="toolbarStyle">@style/AppToolbar</item>

<item name="actionBarSize">@dimen/AppTopBarSize</item>

<item name="collapsingToolbarLayoutStyle">@style/AppCollapsingToolbar</item>

<!-- Status bar color -->
<item name="android:statusBarColor">@android:color/darker_gray</item>

<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>



<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>



<item name="android:windowTranslucentStatus">true</item>

```

Manifest
```

```

FragmentA
```

```

FragmentB
```

```

**Android API version:** 5.0

**Material Library version:** 1.12.0

**Device:** Pixel (Emulator)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Theme.App.NoActionBar.TranslucentStatusBar and Theme.App styles, then compare the FragmentA CollapsingToolbarLayout and FragmentB MaterialToolbar configurations shown in the issue. Reproduce the navigation and status-bar color transition on both destinations; done means FragmentA retains its expanded and collapsed behavior while FragmentB uses the intended controlled color.

Written by the indexing model from the issue text.

Assessment

Tech stack
android
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.