[] Apply background tinting to the Android system UI when using KitKat translucent modes

Related tags

UI/UX SystemBarTint
Overview

Android System Bar Tint

Apply background tinting to the Android system UI when using KitKat translucent modes.

screenshot

Android 4.4 (KitKat) introduced translucent system UI styling for status and navigation bars. These styles are great for wallpaper based activities like the home screen launcher, but the minimal background protection provided makes them less useful for other types of activity unless you supply your own backgrounds inside your layout. Determining the size, position and existence of the system UI for a given device configuration can be non-trivial.

This library offers a simple way to create a background "tint" for the system bars, be it a color value or Drawable. By default it will give you a semi-opaque black background that will be useful for full-bleed content screens where persistent system UI is still important - like when placed over a map or photo grid.

Usage

You must first enable translucency in your Activity - either by using or inheriting from one of the various *.TranslucentDecor themes, by setting the android:windowTranslucentNavigation or android:windowTranslucentStatus theme attributes to true or by applying the FLAG_TRANSLUCENT_NAVIGATION or FLAG_TRANSLUCENT_STATUS flags to your Activity window in code.

If translucency is not enabled or your app is running on a platform version earlier than API 19, the system UI will appear as normal. You should not enable tinting when using fullscreen or immersive window modes. You can safely use this library on Android versions back to API 10.

To enable the tint:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    // create our manager instance after the content view is set
    SystemBarTintManager tintManager = new SystemBarTintManager(this);
    // enable status bar tint
    tintManager.setStatusBarTintEnabled(true);
    // enable navigation bar tint
    tintManager.setNavigationBarTintEnabled(true);
}

To provide custom tint color values or drawables:

// set a custom tint color for all system bars
tintManager.setTintColor(Color.parseColor("#99000FF"));
// set a custom navigation bar resource
tintManager.setNavigationBarTintResource(R.drawable.my_tint);
// set a custom status bar drawable
tintManager.setStatusBarTintDrawable(MyDrawable);

SystemBarConfig

Developers should not need to concern themselves with the size or positioning of the system UI. Use android:fitsSystemWindows="true" in conjunction with android:clipToPadding="false" to achieve the optimal layout for full bleed content screens that need to be padded within the system UI bounds. However, certain elements like the GoogleMap provided by Google Play Services may force you to determine the pixel insets for the system bars in order to provide the appropriate layout effect.

Use the SystemBarConfig class provided by SystemBarTintManager to access those inset values:

SystemBarConfig config = tintManager.getConfig();
map.setPadding(0, config.getPixelInsetTop(), config.getPixelInsetRight(), config.getPixelInsetBottom());

Setup

Download and include the JAR in your project, or add the dependency in your build.gradle:

dependencies {
    compile 'com.readystatesoftware.systembartint:systembartint:1.0.3'
}

This repository also includes a sample app which you can download from Google Play:

Android app on Google Play

Credits

Author: Jeff Gilfelt

Sample app uses Android-Color-Picker by chiralcode

License

Copyright 2013 readyState Software Limited

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
A crypto currency wallet UI/UX template created using Android's jetpack compose.
A crypto currency wallet UI/UX template created using Android's jetpack compose.

CryptoWalletTemplate A crypto currency wallet UI/UX template created using Android's jetpack compose. High definition demo on youtube Youtube video de

This project has been superseded by SuperSLiM, a layout manager for RecyclerView. I strongly recommend using SuperSLiM and not StickyGridHeaders.
This project has been superseded by SuperSLiM, a layout manager for RecyclerView. I strongly recommend using SuperSLiM and not StickyGridHeaders.

StickyGridHeaders Replacement project at SuperSLiM This repository is abandoned and will no longer see any development or support. The replacement Sup

PCard  Add payment card screen made using JetPack Compose
PCard Add payment card screen made using JetPack Compose

PCard Add payment card screen made using JetPack Compose Find this repository useful? ❤️ Support it by joining stargazers for this repository. ⭐ And f

Beagle is an open-source framework for cross-platform development using the concept of Server-Driven UI.
Beagle is an open-source framework for cross-platform development using the concept of Server-Driven UI.

Beagle Getting Started · Learn the Basics · Contribute Beagle is an open-source framework for cross-platform development using the concept of Server-D

Ms-goals - Project developed using Kotlin and Spring

Goals microservice Kotlin + Spring CRUD application. You can find the following

Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Draggable Panel DEPRECATED. This project is not maintained anymore. Draggable Panel is an Android library created to build a draggable user interface

TourGuide is an Android library that aims to provide an easy way to add pointers with animations over a desired Android View

TourGuide TourGuide is an Android library. It lets you add pointer, overlay and tooltip easily, guiding users on how to use your app. Refer to the exa

Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.
Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.

Bubbles for Android Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your

View that imitates Ripple Effect on click which was introduced in Android L  (for Android 2.3+)
View that imitates Ripple Effect on click which was introduced in Android L (for Android 2.3+)

RippleView View that imitates Ripple Effect on click which was introduced in Android L. Usage For a working implementation, Have a look at the Sample

Comments
  • Fixed bug where getActionBarHeight would throw a ResourcesNotFoundException

    Fixed bug where getActionBarHeight would throw a ResourcesNotFoundException

    Fixed bug where getActionBarHeight would throw a ResourcesNotFoundException if custom value was set for android:actionBarSize in the theme.

    To replicate bug, in the current app's theme set:

    <item name="android:actionBarSize">56dp</item>
    

    Then constructing a new SystemBarTintManager will throw a Resources$NotFoundException

    It looks as is this bug may be related to issues seen by @nubela in issue #8

    Cheers, Rich

    opened by richardprior 1
  • Safe type array useage & stopped potential memory leak

    Safe type array useage & stopped potential memory leak

    Just some small optimisations as I was looking through the project.

    Recycled the requested type array.

    Made the inner class static, this stops it holding a reference to the SystemBarTintManager ; which holds a reference to the Context. In the case that someone uses the getSystemBarConfig and holds onto the SystemBarConfig.

    Highlighted immutable fields.

    opened by blundell 1
  • Added check for SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

    Added check for SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

    Currently SystemBarTiny doesn't work when only using View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN.

    On Android L, the status bar can be made fully transparent using View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN. This enables SystemBarTint to be used in this mode.

    opened by josh-burton 0
Releases(v1.0.3)
Owner
Jeff Gilfelt
Jeff Gilfelt
Android view that allows the user to create drawings. Customize settings like color, width or tools. Undo or redo actions. Zoom into DrawView and add a background.

DrawView Android view that allows the user to create drawings. Draw anything you like in your Android device from simple view. Customize draw settings

Oscar Gilberto Medina Cruz 839 Dec 28, 2022
Floating Notification for Android app - Facebook ChatHeads Notification system

FloatingView (Application Demo on Play Store) DEPRECATED SEE FloatingView Floating View for Android app - Facebook ChatHeads Notification system This

Fernandez Anthony 530 Nov 17, 2022
Floating Notification for Android app - Facebook ChatHeads Notification system

FloatingView (Application Demo on Play Store) DEPRECATED SEE FloatingView Floating View for Android app - Facebook ChatHeads Notification system This

Fernandez Anthony 530 Nov 17, 2022
Celebrate more with this lightweight confetti particle system 🎊

Konfetti ?? ?? Celebrate more with this lightweight confetti particle system. Create realistic confetti by implementing this easy to use library. Demo

Dion Segijn 2.7k Jan 2, 2023
Awesome RunnerBe design system and more!

Honeycomb Awesome RunnerBe design system and more! Core Preview 아직 모든 요소가 구현되지 않았으며 단순히 미리보기 입니다 class MainActivity : AppCompatActivity() { overri

RunnerBe 2 Apr 21, 2022
NeoPOP was created with one simple goal; to create the next generation of a beautiful, affirmative design system

NeoPop is CRED's inbuilt library for using NeoPop components in your app

CRED 254 Dec 29, 2022
Drawing App: A simple drawing application that allows the user to draw using a pencil or using shapes

Drawing-App Drawing app is a simple drawing application that allows the user to

Nada Feteiha 1 Oct 5, 2022
SwipeBack for Android Activities to do pretty the same as the android "back-button" will do, but in a really intuitive way by using a swipe gesture

SwipeBack SwipeBack is for Android Activities to do pretty the same as the android "back-button" will do, but in a really intuitive way by using a swi

Hannes Dorfmann 697 Dec 14, 2022
Android layout decorators : Injecting custom attributes in layout files, Using decorators to get rid of unnecessary class explosion with custom views

Decor Decor is a library that applies decorators to Android layout with additional attributes without the need to extend and create a custom View for

Mouna Cheikhna 304 Nov 25, 2022