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>
Related
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?
I am building an app for Android and iOS. It is working but the creative people want to totally change the style so that the top part of the screen (where the actionbar is on android) is taller and has their logo centered in it.
Should I hide the actionbar and put the logo (and custom nav icons) at the top of my layouts, OR should I try to change the style of the actionbar (make it taller and include the logo in the center)? Either option seems a bit painful, but I don't think I can talk them out of it.
you should create own View. You can't center any item (icon, logo, title) in ActionBar, also you can't change height. Android ACtionBar's guidelines are very strict. You might change some params by using "findViewById" and passing hardcoded android ids, but they might change for different device manufacturers resulting no change on these units (or even some crashes)
Personally, I would probably modify the ActionBar and try to maintain as much of the functionality as possible. Especially if this is a long running project and it might go back to the standard action bar later.
You can do this by adding your own custom view that will contain your centered logo to the action bar:
getActionBar().setDisplayShowCustomEnabled(true);
getActionBar().setCustomView(R.layout.action_bar_view);
You can then use the action buttons and home/up buttons as you normally would.
Depending on your needs however, you may find it challenging to keep the logo centered since the home and action buttons will add to the left and right respectively which will shift the center view if unbalanced. If so, you can still use your custom action bar view from above and add buttons directly to it inside a FrameLayout to maintain the centering.
To change the height, you can use themes and styles. Wherever you define your styles, set the actionBarStyle and the height in that style:
<style name="MainTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle">
<item name="android:height">70dp</item>
</style>
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.
I'm trying to achieve the effect shown here: http://www.youtube.com/watch?v=6QHkv-bSlds&t=15m48s by Nick and the boys. I can get the action bar to be overlayed, but cannot figure out how to extend this to the status bar. I would also like to know how they managed the transparent black background behind the navigation bar (but this isn't as crucial).
Any help / advice would be greatly appreciated as I currently have no idea how this is done (and am starting to worry it may just be an image rather than an actual implementation).
Edit: i know how to make the bars fully transparent (thats the easy part)! I dont know how to extend the actionbar background to appear behind the now transluscent status bar
I had the same question and found this library: https://github.com/jgilfelt/SystemBarTint
Have a look at line 300 in:
https://github.com/jgilfelt/SystemBarTint/blob/master/library/src/com/readystatesoftware/systembartint/SystemBarTintManager.java
setupStatusBarView() Adds a view to the window's decor. This allows you to later set a color/drawable to this view.
If using the SystemBarTint library, the following will allow you to force the status bar to a specified color, which you can then match to your action bar's background:
SystemBarTintManager tintManager = new SystemBarTintManager(this);
tintManager.setStatusBarTintEnabled(true);
tintManager.setStatusBarTintColor(Color.parseColor("#DD000000"));
In this case you would set your action bar's background to: #DD000000
As described in the Android 4.4 APIs:
You can now make the system bars partially translucent with new themes, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor. By enabling translucent system bars, your layout will fill the area behind the system bars, so you must also enable fitsSystemWindows for the portion of your layout that should not be covered by the system bars.
If you're creating a custom theme, set one of these themes as the parent theme or include the windowTranslucentNavigation and windowTranslucentStatus style properties in your theme.
In your case (where you want the ActionBar), the second option - including the two new properties into your theme - will give you a translucent Navigation and Status bar.
They are using the new Translucent system bars feature (on Android 4.4 and up).
Translucent system bars
You can now make the system bars partially translucent with new
themes, Theme.Holo.NoActionBar.TranslucentDecor and
Theme.Holo.Light.NoActionBar.TranslucentDecor. By enabling translucent
system bars, your layout will fill the area behind the system bars, so
you must also enable fitsSystemWindows for the portion of your layout
that should not be covered by the system bars.
If you're creating a custom theme, set one of these themes as the
parent theme or include the windowTranslucentNavigation and
windowTranslucentStatus style properties in your theme.
I have an application which uses a custom title bar. However, when my application launches, I noticed that the default title bar is shown for a brief period of time. My problem is I don't want to show the default title bar while my application is loading. How do I hide the title bar while my application is loading so that there will be no hint of it and then show it afterwards?
So far, I tried the following solutions but none have worked:
Hide the title bar in XML and then set the custom title bar in code. (Problem encountered: I received an error message saying: "You cannot combine custom titles with other title features".)
In XML:
<item name="android:windowNoTitle">true</item>
In onCreate method:
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
//... some code goes here
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title_header);
Set the size of the title bar in XML to 0. Then change it's size via code later. (Problem encountered: I don't know how to set the size of title bar in code. Is it possible? I tried getWindow().setAttributes() and getWindow().setLayout() but both of them didn't worked.)"
In XML:
<item name="android:windowTitleSize">30dp</item>
Modify windowTitleBackgroundStyle and set a transparent drawable as background. (Problem encountered: The content of the title bar became invisible but a line below the title bar is still visible.)
In XML:
<!-- style used by windowTitleBackgroundStyle -->
<item name="android:background">#drawable/transparent</item>
Some explanations for what you've encountered, hopefully they help lead you in a direction you're happy with.
You've already seen that your theme is used to generate what you see during activity loading. What's happening is the system is generating a temporary/loading window based on your activity's theme as specified in your manifest while your process is still starting up. Your code may not even be running yet, and your own activity will have a different window. This is significant because a number of settings become locked in once the window's decor has been created, but you actually have two chances here. The window your activity uses hasn't been created yet when you see this loading state.
Setting no title in your theme isn't working because it maps to the window feature Window.FEATURE_NO_TITLE. This dominates over any other title window features you may request and once a feature is requested you can't un-request or remove it regardless of whether decor has been initialized yet.
As part of your theme, the title size is giving you predictable issues. Theme attributes can't be changed. However, which theme your activity is using can be changed before your window decor has been initialized. You can specify one theme in your manifest for the activity that will be used during loading and swap it out using setTheme on your activity. (Best place is probably in onCreate before setContentView, where you would otherwise request window features.)
Chances are the line below the title bar you're seeing is the android:windowContentOverlay - the drawable used to supply the drop shadow from the title bar over the content. On most devices the top edge of this shadow would probably appear as a line below the title bar area. You can set this to #null to get rid of the shadow entirely if you want.
What I've done is set the following in my 'application' tag in my manifest.
android:theme="#android:style/Theme.NoTitleBar"
And then, for each activity, I added
android:theme="#style/CustomTheme"
can you try to open application in full screen mode..then on load of application you can exit full screen.that way your title bar will not be visible while in full screen mode. This works in html.not sure if you can use this trick.