[GUIDE][HOW-TO] Extended ActionBar

Search This thread

Takhion

Member
May 7, 2011
18
30
https://github.com/Takhion/android-extendedactionbar

The problem:

Android 4.4 Kitkat introduced a wonderful new opportunity: translucent bars.

It's as simple as adding the following to your theme:

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

Awesome, right? Well, almost.
The thing is, if you happen to have an ActionBar (like 99.9% of apps out there) than it won't automatically extend behind the status bar: the status bar will be translucent and the window background will be showed...
A picture is worth a thousand words:

problem.png

There are many ways to fix this programmatically or with some wise layouts, but when the application is launched or recreated only the theme will be used (before loading ANY code or layout) and the problem will still be annoyingly present.

The solution:

In the repository at the end I show how to achieve an illusion of "ActionBar extension" (look at the code to see what it means). It is unfortunately more of a hack than a proper solution, but that is due to the fact that the required components (namely @android:dimen/status_bar_height and the ability to create custom drawables, as the ones provided are barely usable and highly bugged) have been banned by the Gods.

Please use it with careful consideration and don't blame me if your device explodes or you cat conquers the world!

solution.png

The extra mile:

While I was there I took the opportunity to create a simple Activity that removes the hacky window background and does things properly in order to eliminate any overdraw.
It's supposed to be a starting point, though I hope to make it into a real library someday.

Before:

overdraw_before.png

After:

overdraw_after.png

Notes:

I will start using a variation of this code in my apps along with a "secret agent" that will notify me if it ever encounters a device with a status bar bigger than 25dp (if it's smaller or not at the top, it won't be a problem as it will get drawn behind the ActionBar).
If such a thing happens, I will update this accordingly.


https://github.com/Takhion/android-extendedactionbar
 
Last edited by a moderator:

dafunk2

Senior Member
Sep 22, 2009
594
249
Firenze
Wonderful!
Can please explain how to use those lines of code?
Many people who know how to compile/decompile an apk will like to try by themselves.
Thanks for this wonderful gem :)
 

Jonnyredcorn

Senior Member
Nov 7, 2011
2,443
368
Southgate
I'm kinda confused...all my apps have the black transparent status bar except for Google Now. I've never seen the issue this fix seems to address, I just always have a black status bar when in apps.
 

LeJolly

Senior Member
May 29, 2013
431
150
I'm kinda confused...all my apps have the black transparent status bar except for Google Now. I've never seen the issue this fix seems to address, I just always have a black status bar when in apps.

Same here, never seen that happen before!

Sent from my Nexus 5 using XDA Premium 4 mobile app
 

Takhion

Member
May 7, 2011
18
30
Sorry, but how to use this?!

Wonderful!
Can please explain how to use those lines of code?
Many people who know how to compile/decompile an apk will like to try by themselves.
Thanks for this wonderful gem :)

didnt get it though !!

I'm kinda confused...all my apps have the black transparent status bar except for Google Now. I've never seen the issue this fix seems to address, I just always have a black status bar when in apps.

Ok I see there is some confusion here, I'll try to be more clear: this is not something intended to automatically "fix" third party applications; it is a "design pattern" to use when developing your own apps in order to give the effect of the extended ActionBar at the theme level, something I have never seen done before. For example take a look at Trello or PushBullet apps, when you start them the status bar is black or has a different color than when the Activity actually starts: that's because they put "something" behind it either programmatically or with some layout, but are unable to so just with the theme, like I was able to achieve here.
In order to be seen it requires Android 4.4 KitKat and a device compatible with translucent bars (everything except the Nexus 10, as far as I know)!
 
  • Like
Reactions: guigadourado

Jonnyredcorn

Senior Member
Nov 7, 2011
2,443
368
Southgate
This is not for end users. This is for app developers folks!

I understand, but the OP says that 99.9% of apps use the translucent status-bar...however I've never seen the translucent status-bar(except in Google Now), or the problems associated with it.

I would love for all apps to take advantage of the translucent Navigation Bar & Status Bar the way Google Now does.
 

Takhion

Member
May 7, 2011
18
30
I understand, but the OP says that 99.9% of apps use the translucent status-bar...however I've never seen the translucent status-bar(except in Google Now), or the problems associated with it.

I would love for all apps to take advantage of the translucent Navigation Bar & Status Bar the way Google Now does.

Actually I said that 99.9% of apps "happen to have an ActionBar" :D
 

Jonnyredcorn

Senior Member
Nov 7, 2011
2,443
368
Southgate
Actually I said that 99.9% of apps "happen to have an ActionBar" :D

Haha, you are correct I mis-quoted you. I was under the impression however that you meant that the apps that have the action-bar suffer from the new status-bar.

Does this fix then mean most apps will start to take advantage of the new translucency?

EDIT: I saw your response and I understand that this is for developers making apps. I was just under the impression apps already had issues and this fixed them(if the dev applied it to their app). So hopefully with this post more apps will start having translucent statusbars!
 
Last edited:

Takhion

Member
May 7, 2011
18
30
Not happening in either of those apps. Not joking!

Sent from my Nexus 5 using XDA Premium 4 mobile app

You obviously need KitKat (and not be on the Nexus 10): try to kill the app, then launch it and watch closely the status bar... You should see it's light gray for a moment and then takes whatever color the ActionBar is (blue for Trello and green for PushBullet)!
 
  • Like
Reactions: LeJolly

LeJolly

Senior Member
May 29, 2013
431
150
You obviously need KitKat (and not be on the Nexus 10): try to kill the app, then launch it and watch closely the status bar... You should see it's light gray for a moment and then takes whatever color the ActionBar is (blue for Trello and green for PushBullet)!

Oh that's what you ment! I thought you were saying that it stays like that :) When you open XDA Premium (if you have it and this happens at least on Nexus 5) the navigation bar does that also and it's weird!

Sent from my Nexus 5 using XDA Premium 4 mobile app
 

Takhion

Member
May 7, 2011
18
30
Haha, you are correct I mis-quoted you. I was under the impression however that you meant that the apps that have the action-bar suffer from the new status-bar.

Does this fix then mean most apps will start to take advantage of the new translucency?

EDIT: I saw your response and I understand that this is for developers making apps. I was just under the impression apps already had issues and this fixed them(if the dev applied it to their app). So hopefully with this post more apps will start having translucent statusbars!

Well I certainly hope so!!
I did it as part of something I'm developing and for the sake of the challenge but if you guys spread the word enough, it will be good for humanity :laugh:
 

Top Liked Posts

  • There are no posts matching your filters.
  • 22
    https://github.com/Takhion/android-extendedactionbar

    The problem:

    Android 4.4 Kitkat introduced a wonderful new opportunity: translucent bars.

    It's as simple as adding the following to your theme:

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

    Awesome, right? Well, almost.
    The thing is, if you happen to have an ActionBar (like 99.9% of apps out there) than it won't automatically extend behind the status bar: the status bar will be translucent and the window background will be showed...
    A picture is worth a thousand words:

    problem.png

    There are many ways to fix this programmatically or with some wise layouts, but when the application is launched or recreated only the theme will be used (before loading ANY code or layout) and the problem will still be annoyingly present.

    The solution:

    In the repository at the end I show how to achieve an illusion of "ActionBar extension" (look at the code to see what it means). It is unfortunately more of a hack than a proper solution, but that is due to the fact that the required components (namely @android:dimen/status_bar_height and the ability to create custom drawables, as the ones provided are barely usable and highly bugged) have been banned by the Gods.

    Please use it with careful consideration and don't blame me if your device explodes or you cat conquers the world!

    solution.png

    The extra mile:

    While I was there I took the opportunity to create a simple Activity that removes the hacky window background and does things properly in order to eliminate any overdraw.
    It's supposed to be a starting point, though I hope to make it into a real library someday.

    Before:

    overdraw_before.png

    After:

    overdraw_after.png

    Notes:

    I will start using a variation of this code in my apps along with a "secret agent" that will notify me if it ever encounters a device with a status bar bigger than 25dp (if it's smaller or not at the top, it won't be a problem as it will get drawn behind the ActionBar).
    If such a thing happens, I will update this accordingly.


    https://github.com/Takhion/android-extendedactionbar
    2
    Great job, Takhion ;)

    Just to help people visiting the link, the repo can be found here

    Tiwiz
    1
    cool, is this like a tinted statusbar module from Xposed framework??

    Well the final result is similar, although you don't need the Xposed framework but just "simple" Android 4.4 and it's something to implement while developing an app, not for every installed app ;)
    1
    This is not for end users. This is for app developers folks!
    1
    Sorry, but how to use this?!

    Wonderful!
    Can please explain how to use those lines of code?
    Many people who know how to compile/decompile an apk will like to try by themselves.
    Thanks for this wonderful gem :)

    didnt get it though !!

    I'm kinda confused...all my apps have the black transparent status bar except for Google Now. I've never seen the issue this fix seems to address, I just always have a black status bar when in apps.

    Ok I see there is some confusion here, I'll try to be more clear: this is not something intended to automatically "fix" third party applications; it is a "design pattern" to use when developing your own apps in order to give the effect of the extended ActionBar at the theme level, something I have never seen done before. For example take a look at Trello or PushBullet apps, when you start them the status bar is black or has a different color than when the Activity actually starts: that's because they put "something" behind it either programmatically or with some layout, but are unable to so just with the theme, like I was able to achieve here.
    In order to be seen it requires Android 4.4 KitKat and a device compatible with translucent bars (everything except the Nexus 10, as far as I know)!