Fenix: Modify the Status Bar color to match Fenix color while being in Private Mode
Why/User Benefit/User Problem
Modifying the color of Status Bar in private mode will create a feeling of a full screen app while browsing.
What/Requirements
Modify the color for Status Bar.
Acceptance Criteria (how do I know when I’m done?)
The Status Bar color matches the Fenix color in private mode.
Notes
This change will make a difference for the newest devices with a small Notch.
Also, note that in normal browsing mode, it looks very good as everything is in the same color.
I will add 2 photos(not screenshots) to see the difference.
Device: Samsung Galaxy S10+
abodea
All 28 comments
@AmyYLee is this something we want to do? do we need to provide a color?
removing feature label - this is a small thing if we want to do it.
lime124
on 17 Jul 2019
I think we can make the status bar transparent? Notches are becoming quite popular so we should probably make sure it looks good 👍
boek
on 17 Jul 2019
@AmyYLee is this something we want to do? do we need to provide a color?
removing feature label - this is a small thing if we want to do it.
This sounds good to me. As @boek said, we can make it transparent so no new colour needs to be provided.
AmyYLee
on 18 Jul 2019
@abodea ^
lime124
on 18 Jul 2019
I believe this is the best option. Even on Google Play the transparent Status Bar is used for phones with Notches.
abodea
on 19 Jul 2019
I want to work this out, can I create a PR?
mythio
on 22 Jul 2019
Go for it @mythio!
NotWoods
on 22 Jul 2019
Hi, I want to add a quick update about this issue:
Can we make the navigation bar to be transparent too or to match this #1750
The browsing toolbar gradient was updated too and with the current colors on the side it's not looking very good.
abodea
on 31 Jul 2019
@abodea can you do me a huge favor and create a new issue for that request. let's keep this one just scoped to the status bar. thanks so much!
lime124
on 2 Aug 2019
@NotWoods I am facing a problem. When I set the android:statusBarColor to @android:color/transparent, the status bar doesn't become translucent but if I change it to any other color, it works. Can you provide me any leads?
mythio
on 5 Aug 2019
Try <item name="android:windowTranslucentStatus">true</item> along with fitsSystemWindows
NotWoods
on 5 Aug 2019
Hi @lime124 I added this #4682. Sorry for the delay.
abodea
on 12 Aug 2019
HI, since this hasn't been solved yet, can I give it a shot?
Charis1331
on 1 Sep 2019
@AmyYLee do we also want to make navigation bar transparent, like in the sample below?
mcarare
on 17 Sep 2019
@AmyYLee do we also want to make navigation bar transparent, like in the sample below?
@mcarare This looks good to me. Thanks!
AmyYLee
on 18 Oct 2019
@AmyYLee Sorry, I realised the position of the _bottom bar_ has changed in meantime. The options would be:
- 1: transparent navigation bar
- 2: solid navigation bar
- 3:transparent navigation bar + transparent bottom bar
Which one should we go with?
mcarare
on 21 Oct 2019
There's also the option to have the navigation bar match the gradient of the toolbar in case 1
NotWoods
on 21 Oct 2019
@mcarare Can we have the bottom bar adapt the gradient of the search bar like this?
AmyYLee
on 21 Oct 2019
@AmyYLee This is as close I can get, without tweaking the assets. I think it looks good, cause the gradient is continuous from bottom left corner (including the nav bar whereas in 3 the nav bar in transparent)
If you want to make an exact replica of your suggestion I can try to modify the assets. TY!
mcarare
on 22 Oct 2019
@AmyYLee This is as close I can get, without tweaking the assets. I think it looks good, cause the gradient is continuous from bottom left corner (including the nav bar whereas in 3 the nav bar in transparent)
If you want to make an exact replica of your suggestion I can try to modify the assets. TY!
@mcarare This looks good to me. Thanks!
AmyYLee
on 22 Oct 2019
Hey @mcarare, is there still additional work on this one (and if so, would you mind assigning yourself?)? I don't see a PR attached, but it looks like you've already fixed the problem based on the comments above.
severinrudie
on 3 Dec 2019
@Baron-Severin I still have to work out some issues when you navigate away from the screen.
mcarare
on 3 Dec 2019
Hi, verified as fixed on the latest Nightly Build #13440604 from 12/10 using the following devices:
• Samsung Galaxy S10 + (Android 9)
• Google Pixel 3a XL (Android 9)
• Huawei Mate 20 Lite (Android 8.1.0)
Comparison: Fenix Nightly 12/10 VS RC 2.3.0 10/30 from a Samsung Galaxy S10 +
AndiAJ
on 10 Dec 2019
@AndiAJ Does this break things in Android 5?
Getting some weird behavior on a simulator
boek
on 12 Dec 2019
cc: @mcarare
boek
on 12 Dec 2019
@boek I think this does not happen with real devices. Emulators have a default skin and to not have Window Insets.
mcarare
on 12 Dec 2019
Hi @boek , I wasn't able to reproduce this on on the latest Nightly Build #13460608 from 12/12 using the following devices:
• Motorola G4 (Android 6.0.1)
• OnePlusA3 (Android 6.0.1)
• LG Nexus 4 (Android 5.1.1)
• Asus Nexus 7 (Android 5.1.1)
The only issues regarding the overlapping matter that I'm aware off are #7062 & #7111
AndiAJ
on 12 Dec 2019
Re-opening this issue based on the https://github.com/mozilla-mobile/fenix/pull/7152 PR.
Home screen full screen was reverted, I consider we should keep this open and re-verify it when the full screen will be added back.
abodea
on 18 Dec 2019
Related issues
csadilek
·
3Comments
bbinto
·
3Comments
lindongbin
·
3Comments
abodea
·
3Comments
softvision-miralobontiu
·
3Comments
Most helpful comment
Hi, verified as fixed on the latest Nightly Build #13440604 from 12/10 using the following devices:
• Samsung Galaxy S10 + (Android 9)
• Google Pixel 3a XL (Android 9)
• Huawei Mate 20 Lite (Android 8.1.0)
Comparison: Fenix Nightly 12/10 VS RC 2.3.0 10/30 from a Samsung Galaxy S10 +
