Changing the Status Bar aspect

Android has several ways to customize the status bar. Depending on the API version of the device in which our application is installed, the status bar will have some configuration options.

Coloring the status bar

Since Material Design theme was added in Android 5.0 (Lollipop), we have the option to change the color of the status bar to display the same colors of our application.

To do this, in our XML style must add the following lines:

<style name="MainAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--darker variant for the status bar and contextual app bars-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

screenshot_api_21_color

Colored status bar in Lollipop

 Turning transparent the Status bar

Android gives us the option to put the status bar as transparent in our application. In Lollipop, we get the status bar all transparent, but in Kitkat, Android will add a black transparency.

To achieve it, we must distinguish between the versions of Android 19 () and 21 (Lollipop)  because they use different ways to perform it. We have to create two new value folders for the api version 19 and 21.

assets001

In the main style XML stays as follow:

<style name="AppTheme" parent="MainAppTheme"/>
<!-- Base application theme. -->
<style name="MainAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Your app branding color for the app bar -->
<item name="colorPrimary"&gt;@color/colorPrimary&lt;/item&gt;
<!-- Darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!-- Theme UI controls like checkboxes and text fields -->
<item name="colorAccent">@color/colorAccent</item>
</style>

Two styles are defined in the main XML. ‘MainAppTheme’ style has the shared theme attributes and ‘MainAppTheme’ style has the unique attributes per API version.

The style XML created in the values-v21 folder  has:

&lt;style name="AppTheme" parent="MainAppTheme"&gt;
&lt;item name="android:statusBarColor"&gt;@android:color/transparent&lt;/item&gt;
&lt;/style&gt;

The style XML created in the values-v21 folder has:

<style name="AppTheme" parent="MainAppTheme">
<item name="android:windowTranslucentStatus">true</item>
</style>

If we want to turn transparent the status bar, we have to add the following line in the onCreate method of each activity.

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
screenshot_api_19

Black Transparent Status Bar in Kitkat

screenshot_api_16

Transparent Status Bar in Lollipop

You can take a look in this repository of Github .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s