Post Reply

[GUIDE][HOW-TO] Extended ActionBar

OP Takhion

31st January 2014, 05:01 PM   |  #1  
Takhion's Avatar
OP Junior Member
Thanks Meter: 30
 
18 posts
Join Date:Joined: May 2011
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:

Click image for larger version

Name:	problem.png
Views:	4371
Size:	47.4 KB
ID:	2550838

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!

Click image for larger version

Name:	solution.png
Views:	3573
Size:	46.3 KB
ID:	2550839

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:

Click image for larger version

Name:	overdraw_before.png
Views:	3857
Size:	47.6 KB
ID:	2550840

After:

Click image for larger version

Name:	overdraw_after.png
Views:	3878
Size:	47.0 KB
ID:	2550841

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 eagleeyetom; 31st January 2014 at 07:39 PM. Reason: Link added
The Following 22 Users Say Thank You to Takhion For This Useful Post: [ View ]
31st January 2014, 05:09 PM   |  #2  
tiwiz's Avatar
Recognized Developer
Flag Torino
Thanks Meter: 83
 
266 posts
Join Date:Joined: Nov 2010
Donate to Me
More
Great job, Takhion

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

Tiwiz
The Following 2 Users Say Thank You to tiwiz For This Useful Post: [ View ]
2nd February 2014, 03:36 PM   |  #3  
wawan20's Avatar
Senior Member
Flag Padang
Thanks Meter: 41
 
248 posts
Join Date:Joined: Nov 2012
More
cool, is this like a tinted statusbar module from Xposed framework??
2nd February 2014, 04:53 PM   |  #4  
chrisch91's Avatar
Senior Member
Thanks Meter: 21
 
249 posts
Join Date:Joined: Mar 2013
Sorry, but how to use this?!
2nd February 2014, 05:49 PM   |  #5  
dafunk2's Avatar
Senior Member
Flag Firenze
Thanks Meter: 126
 
375 posts
Join Date:Joined: Sep 2009
More
Thumbs up
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
2nd February 2014, 06:24 PM   |  #6  
meethere's Avatar
Senior Member
Thanks Meter: 103
 
709 posts
Join Date:Joined: Jan 2012
didnt get it though !!
2nd February 2014, 07:57 PM   |  #7  
Senior Member
Flag Southgate
Thanks Meter: 296
 
2,199 posts
Join Date:Joined: Nov 2011
More
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.
2nd February 2014, 08:05 PM   |  #8  
Takhion's Avatar
OP Junior Member
Thanks Meter: 30
 
18 posts
Join Date:Joined: May 2011
Quote:
Originally Posted by wawan20

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
The Following User Says Thank You to Takhion For This Useful Post: [ View ]
2nd February 2014, 08:06 PM   |  #9  
Senior Member
Thanks Meter: 174
 
667 posts
Join Date:Joined: Apr 2013
This is not for end users. This is for app developers folks!
The Following User Says Thank You to hypocritelecteur For This Useful Post: [ View ]
2nd February 2014, 08:07 PM   |  #10  
LeJolly's Avatar
Senior Member
Thanks Meter: 131
 
381 posts
Join Date:Joined: May 2013
Donate to Me
More
Quote:
Originally Posted by Jonnyredcorn

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

Post Reply Subscribe to Thread

Tags
android, development, theme, translucent, translucent status bar
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Top Threads in Android Software Development by ThreadRank