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>
Related
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
How do I get rid of the empty space shown below (the space between the horizontal red lines)? I didn't see this on my app until getting a new phone (Samsung S8), which has more vertical screen space than my old HTC One.
The beginning of the layout file for that activity is:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout ...
My values-v14/styles.xml is
<resources>
<!--
Base application theme for API 14+. This theme completely replaces
AppBaseTheme from BOTH res/values/styles.xml and
res/values-v11/styles.xml on API 14+ devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
</style>
</resources>
I tried googling this problem but I couldn't find anything -- I must be searching for the wrong terms. What file do I need to edit to make the empty space above my app's action bar go away?
Edit: for comparison, here's what the app looks like in the emulator (it looks the same way on my HTC One):
I'd like the app to behave the same way as above (i.e. no black space above the action bar) when I run it on my Samsung S8. What do I need to change?
change this <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
hopefully this will help you out , if not Kindly post your full xml file
happy to help
This is happening due to the wider aspect ratio of the Samsung Galaxy S8. By default, Android applications support a maximum aspect ratio of 16:9. To solve, add this element inside the <application> tag in your manifest:
<meta-data android:name="android.max_aspect" android:value="2.1" />
Full details available in this Google blog post: https://android-developers.googleblog.com/2017/03/update-your-app-to-take-advantage-of.html
How can I change the color of the animation?
The color is based on your accentColor in your AppTheme.
To change it, change your AppTheme (generally in res/values/styles.xml) to:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat">
<!-- Customize your theme here. -->
<item name="colorPrimary">#F00</item> <-- change to color
<!-- Status Bar color -->
<item name="colorPrimaryDark">#000</item>
<!-- Details color -->
<item name="colorAccent">#000</item>
</style>
Beware it's an global app change, every scrollview bounce animation will have this color.
To change only the overflow animation color, use android:colorEdgeEffect. Otherwise it will be inherited from the colorPrimary in AppTheme.
The accepted answer should be changed to specify colorPrimary instead of colorAccent.
See answer here: android lollipop scrollview edge effect color
Put this inside android/app/src/res/values/styles.xml
<item name="android:colorEdgeEffect">#E53644</item>
if someone is using expo managed app, it's not supported by expo yet, but there's a workaround.
you'd need to expo eject -> to transition to bare workflow. then as said above within android/app/src/res/values/styles.xml add
<item name="android:colorEdgeEffect">#E53644</item>.
now the worst part which took me hours to figure out - you'll have 2 themes generated by default the AppTheme and Theme.App.SplashScreen, it didn't work until I've added it to splashscreen one :/. I've added it to both themes just in case. note that this specific change will work only when you run android specific native build npm run android, for more please read this
I'm using Expo managed workflow + react native paper with Material UI v3 and in debugging the color of the "ripple" was purple.
But luckily, when I test it over the Google Play Store, it was based on the primary color (or primary container color).
PS: I had similar issues with the color of dialog buttons and the app icon being not shown correctly.
The "Rendering problem" states Couldn't resolve resource #style/Widget.Holo.Actionmode but when I do a project/path search for Widget.Holo.Actionmode it isn't there.
As a result, my soft numeric keypad won't display.
What the heck do I do? I've changed the styles in the Android Studio 1.1.0 dropdown in design mode but no matter what I choose I get the rendering problem and no keypad. I had colors set to Holo this and that because I liked the shades and I had Holo as the theme from the dropdown. I also have in AndroidManifest.xml this:
android:theme ="#style/AppTheme"
But when it was working, I had commented that out to get nice black background. Either way, no keypad.
All I have in styles.xml is this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.ThemeOverlay.AppCompat">
<!-- Customize your theme here. -->
</style>
</resources>
I exited and re-entered AS. No keypad; same problem.
I'll post all xml and activity java code if need be. This is insane.
Looks to me like there's a problem in APIs 17 & 18 with the definition of Widget.Holo.ActionMode. I added the following to my styles.xml file:
<!-- Put this here to fix rendering error in API 17-18 -->
<style name="Widget.Holo.ActionMode" parent="#android:style/Widget.Holo.ActionMode">
<item name="titleTextStyle">#android:style/TextAppearance.Holo.Widget.ActionMode.Title</item>
<item name="subtitleTextStyle">#android:style/TextAppearance.Holo.Widget.ActionMode.Subtitle</item>
</style>
This may happen on APIs below 17, haven't tested. It was fixed in 19.
I have a ListView with some rows and a custom checkbox on the right hand side. On my OS 4.4 Nexus 4 it seems like a gentle gradient is being applied to the list row backgrounds, creating an ugly artifact on the checkboxes (they disappear half way down, and then invert for the bottom half). On other devices I don't see this problem, and I also don't see it in an OS 4.4.2 emulator.
I haven't been able to find any information online about this, so I'm not sure if it's specific to the device, or the exact OS flavor.
Is this something I can disable? If not, what advice should I give my asset designer?
Here's a screenshot:
The Holo.Light theme uses a subtle grey gradient background. It might only be more apparent on one of your devices due to the screen's contrast/brightness.
You can just set the background to solid white by using the android:windowBackground tag in your Activity's theme:
<style name="SolidWhiteTheme" parent="android:Theme.Holo.Light">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:colorBackground">#android:color/white</item>
</style>
And then applying the theme to your activity in your AndroidManifest.xml like so:
<activity
android:theme="#style/SolidWhiteTheme"
...
>
...
</activity>
As Denley mentioned, the reason for this is the default background specified by the Holo.Light theme.
However, since this background is specifically affecting your ListView, I would suggest setting the background of your ListView in your xml file. Code below.
<ListView
android:background="#android:color/white">
Try specifying a background color for your activity (android:background). If the background is not explicitly set, the device may be using it's own device-specific default background, which is why the gradient is only shown on your Nexus 4 and not other devices.