status and navigation bar design

Question

How to make the status bar to be transparent and hide the navigation bar?

For example,

score 0 · Accepted Answer · answered Jan 08 '18 at 14:12

All you need to do is set these properties in your theme:

<item name="android:windowTranslucentStatus">true</item>

Your activity / container layout you wish to have a transparent status bar needs this property set:

android:fitsSystemWindows="true"

To hide navigation bar use this code on your activity onCreate()

View decorView = getWindow().getDecorView();
// Hide both the navigation bar and the status bar.
// SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as
// a general rule, you should design your app to hide the status bar whenever you
// hide the navigation bar.
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
              | View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);

thank you for your reply. I get what I need from your answer! — Jim, Jan 08 '18 at 14:33

score 0 · Answer 2 · answered Jan 08 '18 at 14:12

Select empty activity while creating new activity.

If you just want a theme with no action bar you can use 'NoActionBar' variant, for eg. if your base theme is as below

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

then you can use

<style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

But if you want to retain the properties of your main theme i.e. AppTheme you can do as below

<style name="AppThemeNoActionBar" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

You can retain all the properties of your base theme this way and don't have to explicitly add them in your NoActionBar theme :)

score 0 · Answer 3 · answered Jan 08 '18 at 14:17

in your style

   <style name="AppTheme.TransparentActivity">
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="windowNoTitle">true</item>
   </style>

and in your manifest file

    <activity
        android:name=".MainActivity"
        android:theme="@style/AppTheme.TransparentActivity">
     </activity>

status and navigation bar design

3 Answers3