Android status bar background image

Adding a background image to an Android Toolbar in the right way

At first glance it seems pretty easy to add a background drawable to your Android material design Toolbar. However, if your app bar consists of several views (e.g. an additional tab layout) or if you want a transparent status bar, it gets complicated.

The final result

In this tutorial I will show you how to overcome several difficulties in order to implement a layout similar to the following:

Getting started

We start with a new Tabbed Activity with Action Bar Tabs (with ViewPager). Android Studio generates a layout file and the activity which are the perfect start for this project. We just need to make a few optimizations here and there so that it looks like the end result above. The first step is to get rid of the floating action button in your activity_main.xml and in the MainActivity.java code and after that your app should look like this:

With this being your layout file:

Making the status bar transparent

First of all, you need to change your activity theme to have a transparent status bar. Therefore add a theme to your styles.xml:

And set this theme as your activity theme in the AndroidManifest.xml:

This makes almost no difference to the appearance of your app, only the status bar looks a bit darker. However, this is necessary for your background image to be visible below the status bar.

Adding a background image to the AppBarLayout

After that, you need to add your background drawable resource to your layout by adding the following attribute to your AppBarLayout in your activity_main.xml layout file:

You can download the background drawable I am using here as vector graphic which was created in Adobe Illustrator. Unfortunately, the result looks not as good as expected (your layout can differ based on the size of the background image you chose):

There are several issues with your layout:
1. The Toolbar is not transparent so there is a lot of blue (primary color)
2. The image is not visible under our status bar, even though we made it transparent before
3. You can scroll the Toolbar away
4. The app bar layout changed its size based on the background image

To fix the first issue we simply need to remove the android:background=»?attr/colorPrimary» attribute from our Toolbar to make it transparent instead of filled with the primary color.

Furthermore, to fix the second issue we need to add some android:fitsSystemWindows=»true» attributes to our layout since this attribute is not inherited. So add it to your AppBarLayout and to your Toolbar in order to make the AppBarLayout use the space below the status bar and to position your Toolbar just below the status bar. Additionally, remove the android:paddingTop=»@dimen/appbar_padding_top» attribute from your AppBarLayout.

Moreover, to change the third issue remove the app:layout_scrollFlags=»scroll|enterAlways» attribute from your Toolbar.

Last but not least, the Toolbar is way to big because the background drawable is part of the content of the view and the attribute android:layout_height=»wrap_content» is set for your AppBarLayout. Nevertheless, you can’t just change the height of the app bar layout to a fixed value, since the status bar height differs from phone to phone. Luckily, I can tell you the height of a TabLayout which is 48dp high and the height of a Toolbar which is 56dp high. Consequently, our AppBarLayout needs to have the height 48dp+56dp+StatusBarHeight. You need to set this height programmatically in the onCreate method of your MainActivity.java by using the following code:

Just call the method setAppBarHeight in your onCreate method and that’s it!
Finally, your app should now look like this:

Источник

How to change the background color of android status bar

I want to change the background color of the status bar by writing an application. My android device has black color, I want to change it to some other color. I saw some posts related to it here, but they are telling about notification background.

If any body knows about this please help me.

The default status bar

After using a drawable as background to status bar

5 Answers 5

Sorry, unless you are making a custom ROM this isn’t possible, unless you only want the status bar changed for your app.

This would require a heck of a lot of work.

First you will need to add Theme.NoTitleBar.Fullscreen to your manifest

Then once you have done that you need to create a standard layout which represents the status bar, this would mean that you have to add the time, and also receive all the notifications from other apps, I do not personally know how to do that but I’m sure there is a way.

If you really want to do this goodluck, you have a hard time ahead of you.

Sorry, unless you have the knowledge how to build custom ROMS I do not think this is possible

Источник

displaying my toolbar image as background to status bar effecting navigation bar in android

I want my toolbar to take the space of status bar and the image used for it be the background of the status bar and I successfully do that with this code inside my activity

the problem is this code make my activity layout take the full screen even the space with navigation bar so how to solve this?

here is an image for the screen

3 Answers 3

This is the solution I used for testing on android 10 and other versions, so check if this is of any help.

In your styles.xml create a custom theme, you can set parent theme to what your app theme is if it has any of the NoActionBar (AppCompat/DayNight/material etc.) set as parent or set one directly(since without NoActionBar a default one will get generated on top), the major requirement is these three lines:

You can check the documentation for statusBarColor if you wish, basically tells you what needs to be done.

So simply set a transparent color or any color you wish to set to the status bar as per your requirement. And set this theme to the activity you want.

Now in the activity create this method as shown below:

Those are the flags you require, don’t add View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION while setting flags as it hides the navigation bar which your requirement is to show.

You’ll need to call the method otherwise statusbar won’t be created properly.

So try this, and let me know if it worked for you.

EDIT: Don’t forget to remove FLAG_LAYOUT_NO_LIMITS flags incase you have them in activity as it will create problems. Here’s what i got on testing for android 10.

Источник

Real background image size in android (with status bar)

I’d like to use a high detail image as backrgound in my app, and I’ve got a problem with my designer because of this 😀

By now, we’ve got three image sizes (one per density) according to the most common devices’ screen size, as we know:

• low: 240 x 320 (e. HTC Tattoo)
• mid:320 x 480 (e. HTC Magic)
• high: 480 x 800 (e. Nexus One)

The problem is that, when I set an image as background, it gets resized, and I can see several horizontal «ghost» lines on it.

So we decided to resize the images with «height-minus-statusbar’s height» (only in high-density one, just as test), having finally a 480 + 752 px image (according to http://developer.android.com/guide/practices/ui_guidelines/icon_design.html , the status bar’s height is 48px)

But it still shows those «ghost» lines, so we think it’s being resized again.

Could someone help me? I just want a normal background, with no resizing, but I don’t know the real dimensions.

3 Answers 3

You are setting yourself up to be in a continual state of pain. You simply can not design against exact resolutions; there is too much variation in devices for that, and by doing so you are going to be slapped in the face continually as you encounter new devices. Android has a lot of facilities for dealing with this screen variety, such as 9-patches, its density management, layout managers, etc. If you take advantage of those, you will be happy; if you don’t, you will be swearing all the time.

But if you want to swear, I can’t stop you. Just please don’t take to the net complaining about Android fragmentation. 🙂

As far as your image being scaled due to the status bar — yes the status bar takes a chunk out of the screen. How much is not defined, so it could well vary slightly between devices. The window background, as set by Activity.getWindow().setBackgroundDrawable(), will extend behind the status bar (and IME or other variable system decoration), so at least using that will reduce the variation. That said, the actual display space could be carved out for other reasons from the physical screen size; it intentionally isn’t defined exactly what part of the screen an app gets to play in.

Don’t forget about the Droid A855 (480×854 resolution), or the Galaxy Tab (1024×600), or the many other resolutions out there. Your best bet, if you need it pixel-perfect, is to make an image the size of the largest resolution in its category (i.e. 480×854 for a normal sized hdpi screen) and just set it as an ImageView, with a scaleType of centerCrop. On second thought, an ImageView would work (if using the android:background attribute) but is unnecessary. You can simply set the NinePatch background as the background attribute of your root layout (e.g. RelativeLayout, LinearLayout). If the NinePatch is correctly formatted, the background will be centered, and the frame will stretch to fit the remaining space without distortion. On a Nexus One, you’d be cutting off the top and bottom 27 pixels of the image, but it would not be resized.

A better suggestion, depending on the type of image it is, would be to make part of it into a NinePatch. For example, if it has a small border or frame on the outer edges, make the primary part of the background smaller (430 x 750?), and make the outer edges of the frame stretch via NinePatch. This way, even if there’s a new device with a slightly different resolution, it will still scale to fit properly, without any stretching.

Источник

Lollipop : draw behind statusBar with its color set to transparent

I have set my statusBar color to transparent for Lollipop only with the following line in my theme :

Now I need to draw behind it, but I can’t get any view draw behind it. I know how to do it with the windowTranslucentStatus property, but don’t want to use this property since it will then ignore the color of the statusBar set to transparent.

16 Answers 16

Method #1:

To achieve a completely transparent status bar, you have to use statusBarColor , which is only available on API 21 and above. windowTranslucentStatus is available on API 19 and above, but it adds a tinted background for the status bar. However, setting windowTranslucentStatus does achieve one thing that changing statusBarColor to transparent does not: it sets the SYSTEM_UI_FLAG_LAYOUT_STABLE and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags. The easiest way to get the same effect is to manually set these flags, which effectively disables the insets imposed by the Android layout system and leaves you to fend for yourself.

You call this line in your onCreate method:

Be sure to also set the transparency in /res/values-v21/styles.xml:

Or set the transparency programmatically:

The good side to this approach is that the same layouts and designs can also be used on API 19 by trading out the transparent status bar for the tinted translucent status bar.

Method #2:

If you only need to paint a background image under your status bar, instead of positioning a view behind it, this can be done by simply setting the background of your activity’s theme to the desired image and setting the status bar transparency as shown in method #1. This was the method I used to create the screenshots for the Android Police article from a few months ago.

Method #3:

If you’ve got to ignore the standard system insets for some layouts while keeping them working in others, the only viable way to do it is to work with the often linked ScrimInsetsFrameLayout class. Of course, some of the things done in that class aren’t necessary for all scenarios. For example, if you don’t plan to use the synthetic status bar overlay, simply comment out everything in the init() method and don’t bother adding anything to the attrs.xml file. I’ve seen this approach work, but I think you’ll find that it brings some other implications that may be a lot of work to get around.

I also saw that you’re opposed to wrapping multiple layouts. In the case of wrapping one layout inside of another, where both have match_parent for height and width, the performance implications are too trivial to worry about. Regardless, you can avoid that situation entirely by changing the class it extends from FrameLayout to any other type of Layout class you like. It will work just fine.

Источник