React Native - Screen flicker on Android with stack navigation - android

On Android only: every time when navigating between screens in stack navigation there will be a white flickering.
This is much harder to see on a light background but on a black screen background it is very noticeable.
I have already found the workarounds by setting setting the dark theme (or background color) on NavigationContainer but we using black and white backgrounds in our application so it is still visible at one of them. (and the flickering is still there but harder to see).
Also tried animationEnabled: false but then you have no animation at all when you navigate.
There have been previous issues but I haven't really found a good solution for this yet.
Also created an issue on the react-navigation GitHub (with example repo): click
White flickering on Samsung Galaxy S20+

Related

Notification bar is not a part of window

There is a thin bar at the top of the phone screen's that shows battery and clock and notifications.
When I try to run my app in fullscreen, this bar is purely black, meaning if I paint the whole window white with
SDL_RenderClear(renderer) the color of bar does not change. So it means it is not a part of the window right?
I found two similar threads in discourse.libsdl.org that are mentioning the exact same issue.
I tried the methods that both of them mentioned but It had no effect for me.
One thread was created by devvr and the other by Starg.
I created my window with SDL_WINDOW_FULLSCREEN and SDL_WINDOW_BORDERLESS flags.
And after that I did this SDL_SetWindowFullscreen(window,SDL_TRUE);
I tested the app only on Samsung Galaxy A22, but I'm not sure if it is a device related problem.
I tested the app on Samsung Galaxy J5, and the notification bar was totally hidden there (meaning i have no issue there).
I also tested the app on Samsung Galaxy A30 and I faced the same issue (notification bar is not a part of the window)
Another thing that I noticed is that the window height that SDL_GetCurrentDisplayMode is giving me on A22 and A30 is actually a little bit bigger than the actual size (meaning the objects at the bottom of the window can't be seen in the screen).
So i think that SDL_GetCurrentDisplayMode is actually doing okay and is giving me the right width and height but because the notification bar is not considered a part of the window, I am facing this issue too.

Android Bug - display area blocked - old UI fragments shining through current UI

I don't know if this is the right place to ask for a solution.
I have a weird bug on Samsung S9 Android 8.0:
The area for the 3 Buttons (Menu, Home, Back) is blocked for some apps, so their UI ends on the top border of this area although I set these buttons to not fixed so that I have to swipe up to see them. One of these apps is Instagram.
Also, there is the problem that the outline of some UI is shining through the current UI of each app, no matter which app is currently running. This UI is always the same. I removed all UI elements from an app I'm working on so that I have a completely white screen. Then I made a video because on screenshots the UI fragments are not visible:
https://der-magere-student.com/public/media/WIN_20210115_02_29_04_Pro.mp4
On the bottom you can see:
In more or less black: the android menu buttons (BUT NOT THE REAL ONES, the real ones are hidden until I swipe up)
In more or less white: 4 of the five toolbar button of Instagram (home (house icon), the magnifying glass, the Plus (inside the android home button), and the heart) The fifth is not visible
On the top you can see:
The right side of the WhatsApp toolbar: From right to left. The more icon, the call icon, and the video call icon
horizontally centered with a bit offset from the top display border you maybe can see a little bar. I don't know where this comes from
There is a lot more but it's not visible on the video and also not identifiable for me. But I can see something.
Does anyone know where this bug comes from? Is it known? How to fix it?
You're looking at OLED screen burn-in. It's not a software problem; it's actually wear on the screen that happens slowly over time.
The UI you're seeing at the bottom of the screen is Android's navigation buttons, which are particularly notorious for getting burned into the screen (see, for instance, this image from this article), because they're always in about the same spot. Newer versions of Android take measures to reduce the burn-in from them, but there's only so much that it's possible to do.
Try opening something that shows a white screen with the navigation buttons hidden: you'll see the same thing.

Disable auto-dimming based on screen content

I have an issue where the font color in a screen of my app changes from white to almost gray. After hours of experimenting I was able to find out that this is caused by Android's auto-dimming feature.
A page of mine starts of as a pretty dark background with a spinner. When data is fetched have plenty cards onscreen(all with white background).
This leads the color of the font in my header to change form grayish to (as intended) white. The change is extreme and very noticeable.
Is there a way to turn off this feature?

Titanium android app going white blank when relaunched from background

When titanium android app is running smooth. I didn’t find any crash or run time error. But the problem is when I minimise it and reopen it from background after some time(1 hr or 2 hr) its going white blank. Any help to fix this?
Check the logic in your application. Are you adding and removing UI elements on the screen after the background process runs? Sounds like you are looking at a window or view with a white background. I think if you don't assign a background, it comes up black.
Often find that when this happens to me, it is some view I didn't set a height and size for. It covers over or pushes down all the other UI elements so it appears blank when is reality the other UI elements are beyond the edge of the screen.
To troubleshoot, I often give my views and windows different colors to figure out exactly what view, or window, I'm looking at. Often it isn't the one I suspected or a view that is larger than I wanted it to be.

Detecting the background color of the option menu

I have realized that there are at least two background colors on Option menu of Android. On the HTC Hero, the background is white and on Samsung Galaxy S II, the background is black.
This became a problem when I set the icons for the background menus. Is there some way to detect the background color of the Option menus in Android?
Possible solutions:
Don't use icons.
Design icons according to the guidelines - http://developer.android.com/guide/practices/ui_guidelines/icon_design_menu.html. There are three different guidelines for up to 2.2 (white background), 2.3 (black background) and 3.0+, so it's a lot of work...
As Profete162 suggested, use #android:drawable/ic_menu_*
For Android 4.0+, you can also set the light / dark Holo theme, which is guaranteed (at least in theory) to remain unchanged across different phone manufacturers - so it'll look the same in HTC Sense, Samsung TouchWiz etc.
That's indeed a very annoying issue.
On my implementation, I always try to use standards icons from android.R.drawable.IC_menu_*, so I am sure these icons are part of the framework and users are always positively surprised to see their generic icons in my app!
That gives a really good continuity in the user experience on the device, but that doesn't answer your question, but at least provide a workaround.
Here are for instance all android 2.2 icons: http://androiddrawableexplorer.appspot.com/
You can trust me, using these icons will always fit your colors.
First of all to answer your title question:
You can reference and read the background of the options menu by reading the attributes of the current theme. The attribute for this is panelFullBackground. E.g. set it as the background of a textview in XML¹:
<TextView android:background="?android:attr/panelFullBackground"
... />
Note that the background seems to be a solid color, but it's not - it's actually a bitmap. If you look closely you can see a grey border at the top (android 2.3+), or a drop shadow (<= android 2.2), so its'a bit difficult. Luckily there is a different attribute called panelColorBackground which matches the background color of the drawable as close as possible. So if you want just the normal background color, use this instead.
¹ This can surely also be read from code, but I don't know how from the top of my head at the moment, maybe I'll look it up and edit it in later.
Regarding icons
So you have the color as stated above, but you still have to process it to know if it's a dark or a bright color. You can do that, but that's not the usual way to deal with these icons and probably a good bit of work until you cover all the possible cases - not to mention that you have to create icons for each variant.
Normally you should adopt the platform menu icon style. This works across all devices and looks familiar to your users (custom icons that dont follow this often look "wrong" - e.g. astro file manager does this I believe).
You can do that by hand (see the guidelines), but the way better alternative is the Android Asset Studio.
It comes in two flavors:
As a webapp
Integrated in the latest version of the ADT plugin for eclipse
(under File->New->Other->Android Icon Set)
The workflow for both is pretty similar, select the point "Menu Icon" and follow the wizard. It will promt you to enter a simple, black and white bitmap of your desired icon that just outlines it's shape. After you specified one, the asset studio will generate everything for you. Play a bit around with the "clipart" option, that has a few example bitmaps ready to see how it works. When finished, the webapp gives you a simple zip which can be extracted into your project directory, the eclipse version adds it directly to the project that you select in the wizard.
The background color can be anything, because its implemented in Framework by manufacturer. You can't read it, in fact you will never need to read it.
Just create your custom menu layout in res/menu folder, set style and use it.

Categories

Resources