Make Action Bar Transparent

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

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

P.S. Releasing Lenx next week.

Playing around with Android UI

Articles focusing on Android UI - playing around with ViewPagers, CoordinatorLayout, meaningful motions and animations, implementing difficult customized views, etc.

Read next