Navigation bar draw over content when using translucent status - android

So I'm having a small issue with the theme of my app. I have the android:windowTranslucentStatus set to true in the base theme and also have the android:fitsSystemWindows="true" to allow the background image to draw under the status bar. However this leads to another problem with my ListView. Basically it draws under the navigation bar and when you scroll to the end of the list it stuck under the navbar like this
I'm thinking about giving the listview a margin or padding value to avoid this but it seems ugly and probably not the right way. Anyone has a solution to this?

Related

How to implement system bars insets with edge-to-edge gesture navigation?

I'm trying to add the edge-to-edge stuff for the gesture navigation bar to the Tip Time app from Google. I added the transparent navigationBarColor XML tag to themes.xml as well as the following code to the onCreate() function of MainActivity.kt:
This was directly copy-pasted from the documentation. Android Studio says that "it cannot find a parameter with this name" for each of the three margins. I noticed that changing the parenthesis right after <ViewGroup.MarginLayoutParams> to curly braces fixes the compiler error. Maybe the documentation is just wrong?
Anyways, even after fixing that, the app still doesn't look right:
As you can see, the entire view gets shifted up slightly and the "Cost of Service" TextView is partially cut-off by the app bar. What would I need to change to implement the system/navigation bar insets for edge-to-edge content so the UI looks nice? Also, as a side-question, how can I change the dark blue color of the system status bar to match the color of the app bar so that they look blended?
As per documentation for edge to edge contents:
Draw behind the status bar if it makes sense for your content and
layout, such as in the case of full-width imagery. To do this, use
APIs such as AppBarLayout, which defines an app bar pinned to the top
of the screen.
So, while handing the window insets (especially the top one), you can't use the default ActionBar, instead you need to customize that with AppBarLayout and ToolBar, and to make it act as the ActionBar, use setSupportActionBar(), and a NoActionBar app theme; it'd be <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.NoActionBar"> in the shared repo.
the entire view gets shifted up slightly and the "Cost of Service" text field is partially cut-off by the app bar.
The reason that the sample uses the default ActionBar instead of a customized one; when it comes to handle the top window insets, it won't affect the default ActionBar; notice that you pass in the activity's root layout to setOnApplyWindowInsetsListener callback, and as the ActionBar is not a part of the activity, it won't be affected. Therefore the activity is shifted up behind the ActionBar when the top inset is removed. So, to solve this you have either to totally remove the default ActionBar or to use a custom toolbar instead.
Also, as a side-question, how can I change the dark blue color of the system status bar to match the color of the app bar so that they look blended?
Use a transparent status bar color in the app's theme:
<item name="android:statusBarColor" tools:targetApi="l">#android:color/transparent</item>

SlidingTabStrip indicator underneath SlidingTabLayout

I am using a fragment pager adapter for two tabs, based almost identically on the code from the Sliding Tabs Basic sdk sample. All was working fine until I tried to swap out the action bar for the tool bar. I had to switch up my theme to light, and now I've noticed that the tabs were using a transparent default colour. I want my tabs to be the same colour as the tool bar, but in setting the colour, they are obscuring the sliding tab strip indicator completely. What is the correct way to push the SlidingTabStrip to the front?
I've tried setting the background resource of the tab programmatically rather than via the selectableItemBackground theme property. The background still obscures the indicators.
I've tried to bringToFront() or bringChildToFront() the SlidingTabStrip in multiple places, (it is created in the constructor of the SlidingTabLayout). I've tried it after the for loop in SlidingTabLayout.populateTabStrip() which seems sensible as this is where the tab views are created.
I wonder why no-one else has had this issue ?!
Well I figured out the solution and it actually took me far too long - by inverting the problem we can leave the selectableItemBackground transparent when unpressed, and set:
<item name="android:windowBackground">#color/my_bg_color</item>
in the theme itself. This means I can have my tabs the same colour as the tool bar and not obscure the indicator. It's a weird set-up though, because if I did want the tabs a different colour to the windowBackground or tool bar, with the indicator un-obscured, this would not be the solution!

Material: Navigation bar elevation or shadow

Setting the navigation bar color to something other than black only plays well with material design if you set it to transparent (or the same color as the window background) and the content is not scrollable.
<item name="android:navigationBarColor">#android:color/transparent</item>
If the navigation bar has another color or if the content is scrollable, the ink just gets cut off when reaching the bar like in the picture:
I would like to set an elevation on the navigation bar so that it casts a shadow and it becomes clear that it's another layer. Is this possible?
According to Google I/O Android talks, all shadows are generated by some light source, which provides shadows under elements, not above them. Then, Navigation Bar should have no visible shadow.
Maybe, the only solution of your problem is to use additional drawable to imitate shadow.

GridView removing row too soon

I'm using a GridView that fills the whole of my main activity. To make it look nicer I'm using a transparent action bar. I'm using these values on my grid view so that the content doesn't start in the action bar but still scrolls through it:
android:paddingTop="?android:attr/actionBarSize"
android:clipToPadding="false"
The only problem is once the bottom of the row enters the action bar it disappears. I'm assuming because Android thinks it is no longer visible so it's safe to remove.
I'd like a way for it to not disappear, even past the status bar as I'll probably make that transparent on KitKat too. Either a different approach or a simple solution would be great.
Turns out this was a problem with the TwoWayGridView library I was using (https://github.com/jess-anders/two-way-gridview). Switched back to a normal GridView and it works fine.

Customizing Bottom Action Bar in Android

I want to use the split Action Bar - one on top, one on bottom. I know you can call it with this:
uiOptions="splitActionBarWhenNarrow"
My 2 questions are simple concepts:
I would like only two items on the bottom; one on far left, one on far right. Is this possible? It seems to be almost an overflow and pushes everything up top -- down to the bottom. Is there a way to control what items will show up on which bar?
Also, I have holo.light.darkactionbar theme. Yet, for the bottom bar, it keeps the light background AND the white text so you can not see the icons - is it possible to apply dark background like the top bar?
I would like only two items on the bottom; one on far left, one on far right. Is this possible? It seems to be almost an overflow and pushes everything up top -- down to the bottom. Is there a way to control what items will show up on which bar?
Unfortunately not. All action items will be pushed on to the bottom bar when using the split action bar. One way to get around this would be to not use the split action bar, and have a custom view at the bottom holding buttons for all the items you want at the bottom. You'd probably be able to emulate the style of an split action bar fairly well using themes.
Also, I have holo.light.darkactionbar theme. Yet, for the bottom bar, it keeps the light background AND the white text so you can not see the icons - is it possible to apply dark background like the top bar?
This sounds odd and isn't standard behaviour (both bars are dark in my app), are you using a custom theme? If you want to override this manually, define a theme with a custom android:backgroundSplit value as shown on the Android Developers website.

Categories

Resources