I'm using the SVGOMG-TWA Trusted Web Activity example from the Google Labs example (https://github.com/GoogleChromeLabs/svgomg-twa). How do I remove this white bar above the navigation bar? In this example, in styles.xml is configured only for the parameters of the splash screen that appears before loading the site view itself. The site itself is dark, as well as the colors of all the panels in the app. During the display of the splash screen, this band is missing, so I came to the conclusion that this is either part of the "site browsing activity" itself, or it does not fill the entire height of the screen and there is a free space, which is painted white. All colors in #color are dark.
Here is the styles styles.xml:
<resources>
<!— Theme to create a blank screen while the TWA is opening —>
<style name= "Theme.LauncherActivity" parent="Theme.AppCompat.NoActionBar">
<item name= "android:windowIsTranslucent">true</item>
<item name= "android:windowBackground">#color/colorPrimaryDark</item>
<item name= "android:statusBarColor">#color/colorPrimary</item>
<item name= "android:navigationBarColor">#color/colorPrimary</item>
<item name= "android:backgroundDimEnabled">false</item>
</style>
</resources>
And this is a part of the AndroidManifest AndroidManifest.xml:
<meta-data android:name= "android.support.customtabs.trusted.STATUS_BAR_COLOR"
android:resource="#color/colorPrimary" />
Thus, the example sets the color of the status bar for the site viewing itself after the splash screen is displayed, but if you set the background color in the same way, nothing changes and the white bar still remains.
I attached a screenshot of the app with the opened site and this white line:
https://i.stack.imgur.com/0OhZH.png
I also tried to look for other examples of TWA implementation, but they also had this band and they themselves were not functional. If you know of other ways to implement a PWA application without using Chrome and standard WebView, then I would be very happy to learn about them.
If the device has a battery charge of less than 10%, the page itself reloads and this white bar is removed. The color of the Status Bar also changes to light gray, although the color is specified for it. Maybe it's connected in some way.
I would be very grateful for any help!
This is not currently possible. There's a feature request for this to be implemented here: http://crbug.com/1021436
Related
I need to configure the system bar and navigation bar like Google's Google Pay App.
PSB screenshot:
I have marked the bars with green color.
When we open the google pay app, these bar's color changes to white and it feels like they are part of the app.
Also we can scroll out text/images and display them up in system bar.
The experience is immersive.
I need same design for my app (i.e. transparent/colorless system and navigation bars)
How to achieve this in a proper way without touching any base functionality ?
I read this article: Enable fullscreen mode
And I also read lot of answers around this area but could not find a solution.
Please advice how to achieve it like google pay app ?
And how I can display my text in system bar when scrolling ?
this requires min API 23 (maybe i'm wrong) The answer is in the documentation as usual
https://developer.android.com/training/gestures/edge-to-edge#change-color
briefly: you should edit the themes.xml
<!-- values-v29/themes.xml -->
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
#android:color/transparent
</item>
<!-- Optional: set to transparent if your app is drawing behind the status bar. -->
<item name="android:statusBarColor">
#android:color/transparent
</item>
<!-- Optional: set the status bar light and content dark. -->
<item name="android:windowLightStatusBar">
true
</item>
</style>
Please notice that there is a mid-GREY banner above the app. How can I
Remove this (the app should ideally begin right below 9:56)
Change the background color (less ideal)
TLDR;
It's a display bug on the Pixel 4 emulator. Real Pixel 4 doesn't have that gap.
Edit
My answer below was not spot on. I tried on an emulated Pixel 4, API 29 (with Android Studio 4.2, macOS Big Sur) with rounded corners, as yours, and it rather seems to be an issue with the curve of the phone than an empty ActionBar.
My app on a pixel 4:
Even Youtube has this space:
Edit 2
Compared with a real Pixel 4
We clearly see that this gigantic gap is only on the emulator.
That's a bug on the emulator, and probably the main reason why no one talks about it around the web (googling Pixel 4 status bar height shows angry Pixel 5 owners results about its huge height).
Didn't found any bug report about it, I'll file one.
Old answer
What you see is probably an empty ActionBar, that has the same color of your StatusBar.
If you use the default theme, your app will use it :
Beginning with Android 3.0 (API level 11), all activities that use the default theme have an ActionBar as an app bar.
It displays your Application's name, defined in your MainApplication's android:label on your AndroidManifest.xml (or MainActivity's if not found). As it's empty, there's just an empty space displayed.
As you manage your own navbar, you can disable with the base theme of your choice Theme.AppCompat.*.NoActionBar, on values/styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- You can set the color of your status bar here, or with RN - see further on the answer -->
<item name="android:statusBarColor">#color/dark</item>
</style>
Don't forget to apply this theme to your MainApplication, in your AndroidManifest.xml:
<application
android:name=".MainApplication"
android:theme="#style/AppTheme"
...
To illustrate better, here's what it looks like:
With the NoActionBar (code above)
With parent="Theme.AppCompat.Light" and <item name="android:statusBarColor">#color/dark</item>
With parent="Theme.AppCompat", and an empty app name.
For the second part of your question, you can either change the color of your status bar here (see the docs for this), or within React Native.
go to
android/app/src/main/res/values/styles.xmlandroid/app/src/main/res/values/styles.xml
and add this code. it will remove
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">
#000000
</item>
</style>
</resources>
I have a freshly created Flutter app, and I configured my splash screen to display some background color and app icon in the middle.
By default, Android splash starts with status bar that looks dark semi-transparent. I wanted to change the color to be the same as splash background. I managed do this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="LaunchTheme" parent="#android:style/Theme.NoTitleBar">
<item name="android:windowBackground">#drawable/launch_background</item>
<item name="android:colorPrimaryDark">#color/splash_color</item>
<item name="android:statusBarColor">#color/splash_color</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
</resources>
It works, but only for the few first milliseconds. After that, the logo jumps up a little and status bar appears again. This happens before main method even starts.
How can I setup this so that status bar looks exactly the same from the start, until home page is shown?
EDIT:
I prepared source code: https://github.com/szotp/splash_status_problem
The jump up does not appear in completely now project for some reason, but this semi transparent background can be seen.
#szotp, i had similar issue when i tried to implement splash screen so i used flutter_native_splash package instead. It auto-generates native code for splash screens, all you need to do is provide image and color. It will merge your status bar with same color as your screen background color. Not sure what yours look like but it worked really well for me.
I'm new to Android studio and I figured out how I can send my application to my phone. The problem is, In the preview, At the bottom, it has this auction bar (See photo) Is there a way to get rid of that? Because my phone (Samsung Galaxy S6 Edge) Does not have that, And it sits in the way if I want to place something at the very bottom. Because in android studio it may be at the very bottom, But on my phone, it isn't.
Also, Is there a way to make that top bar, That is now black, Sort of transparent? So it takes the colour of the background? You see it in a lot of apps. As I mentioned, I'm very new in android studio so sorry.
Thanks in advance
The control bar at the bottom is part of the emulator aka any phone without hard buttons. You can toggle to full screen and it will hide it for you.
For example code simply create new activity and select fullscreen activity. You will see that it manages it by touch of surface to reappear and timer to dissappear. Just remove that bloat and handle it yourself. Done !
As for the status bar at the top, it uses your activity default background. So if you want to change this go to your styles and add a background to your AppTheme and this will be the default background color of unspecified areas instead of black.
Example:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/blue</item>
<item name="android:actionMenuTextColor">#color/white</item>
</style>
The windowBackground color will drive the background color of unspecified areas unless you override the theme on any particular activity in the manifest. Goodluck.
hope you guys can give me a hand now! this is tricky to me
I have run into an requirement of my application that i cant find a way to do this.
I need my application to be fullscreen and no title bar (done), and this application will have a background image. However, all the activities/views of my application must be transparent/translucent so the application background will be visible all the time behind the information i am displaying.
Basically i would like to have this behavior
http://www.geeky-gadgets.com/wp-content/uploads/2010/05/amazon-kindle-android-app.jpg
supousing that the image you see is not the phone wallpaper, but the application background image. What would be the application configuration in the manifest file and what would be the configuration for eacy activity/view?
I also noticed that, i need to setup each activity to be fullscreen without title bar. Is there a way to do this globaly in the application so all activities will behave this way?
Many thanks for your time
To hide the title bar in all your activities you should set a custom theme in your AndroidManifest.xml file like so:
<application
android:icon="#drawable/application_icon"
android:label="#string/app_name"
stuff..
android:theme="#style/MyTheme">
Then define the theme in styles.xml:
<style name="MyTheme" parent="android:Theme.Black">
<item name="android:windowNoTitle">true</item>
</style>
For the background, I'm pretty sure you can just set a the background of a ListView to point to a .PNG that you have in your resource folder (it probably has to be the exact dimensions of the screen).