Fork me on GitHub

Make Action Bar Transparent

Posted on 28 May 2014
Under Notes
Tagged
Android
Make Action Bar Transparent | Jay Rambhia’s Blog

I have been working on an app which produces long exposure effect. As of now, we are almost ready with the free version of the app. For this, I got some feedback from some of the users. One of them said that we should make the action bar transparent and since it’s a camera app, it’d look great if it’s interface looked similar to that of Google Camera app. We are nowhere near that app, but we thought of giving it a try. Plus, making the Action Bar transparent gives more space for the camera preview.

To make this happen, I looked around a lot. Found many answers on stackoverflow, but none of them really worked. But it was a simple solution.

Following are some files that I changed.

styles.xml

<resources>
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light"/>
    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:actionBarStyle">@style/Widget.ActionBar</item>
        <item name="android:actionMenuTextColor">#fff</item>
    </style>

    <style name="Widget.ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@android:color/transparent</item>
    </style>

    <style name="Widget.ActionBar.Transparent">
        <item name="android:background">@android:color/transparent</item>
    </style>
</resources>

themes.xml

I may have repeated things here.

<resources>
    <style name="Theme.TranslucentActionBar" parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/Widget.ActionBar</item>
        <item name="android:windowActionBar">true</item>  
        <item name="android:windowBackground">@android:color/transparent</item> 
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="Theme.TranslucentActionBar.ActionBar" />

    <style name="Theme.TranslucentActionBar.ActionBar.Overlay">
        <item name="android:actionBarStyle">@style/Widget.ActionBar.Transparent</item>
        <item name="android:windowActionBarOverlay">true</item>
    </style>
</resources>

In MainActivity

This may not have played a role in it.

    ActionBar actionBar = getActionBar();
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setDisplayShowHomeEnabled(false);

AndroidManifest.xml

Now, this is the most important part. I spent over an hour to make it transparent and this was the solution.

<application 
    .
    .
    some stuff here

    android:theme="@style/Theme.TranslucentActionBar" >

    . 
    .
    some more stuff here
</application>

And here’s a screenshot of the app that I am working on

screenshot

Low light and low res of the front camera. Still working on the UI.

P.S. Releasing Lenx next week.

If you liked - Make Action Bar Transparent and found it helpful, please share it with your fellow developers.

comments powered by Disqus


If you have some feedback or questions regarding this post, please add comments. I'd be happy to get some feedback.



If you liked this post, then you should follow Jay on twitter too. He would be excited to know that you like his work.