Custom Translucent Android ActionBar

user_852056 0
Viewed 54245

I've been scouring the interwebs (e.g. Android documentation, answers here, etc.) for the answer to what I thought would be a fairly trivial question. How do you achieve a translucent action bar like the ones in Google Music and YouTube (links are image examples)?

I want video content to be full screen and not constrained/pushed down by the action bar while still leveraging the benefits of a built in UI component. I can obviously use a completely custom view, but I'd rather leverage the ActionBar if possible.

Manifest

<activity
    android:name="videoplayer"
    android:theme="@android:style/Theme.Holo"
    android:launchMode="singleTop"
    android:configChanges="keyboardHidden|orientation"/>

Activity

// Setup action bar
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
View customActionBarView = getLayoutInflater().inflate(R.layout.player_custom_action_bar, null);
actionBar.setCustomView(customActionBarView,
                        new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
                                                   R.dimen.action_bar_height));
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

Menu

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/button1"
        android:icon="@drawable/button1"
        android:showAsAction="always"/>

    <item
        android:id="@+id/button2"
        android:icon="@drawable/button2"
        android:showAsAction="always"/>
</menu>

Custom ActionBar View

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_action_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:background="@color/TranslucentBlack">

    <!--Home icon with arrow-->
    <ImageView
        android:id="@+id/home"
        android:src="@drawable/home"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

    <!--Another image-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:visibility="visible"/>

    <!--Text if no image-->
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:visibility="gone"/>

    <!--Title-->
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingLeft="20dp"
        android:gravity="center_vertical"/>
</LinearLayout>
android-3.0-honeycomb android-4.0-ice-cream-sandwich android-5.0-lollipop android-actionbar android
7 Answers

I just like to share with you the steps I took to achieve this:

1) At the OnCreate of your activity, 

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

then

getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

This is done before setContentView.

2) After setContentView, you can do the following

 getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(0, 100, 181, 246)));

Where the alpha value of 0 means it is fully transparent.

user_42750960

Step I : Firstly, Set your theme at styles.xml

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

Step II : Second, you have to set theme to your activity at AndroidManifest.xml

    <activity android:name=".activity.YourActivity"
        android:theme="@style/AppTheme.NoActionBar"/>

Step III : Now, In your activity layout file set like this:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/agri_bg_login">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tool_bar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    </RelativeLayout>

Finally, You can set it in your activity.

    Toolbar tool_bar = findViewById(R.id.tool_bar);
    setSupportActionbar(tool_bar);
    getSupportActionbar().setTitle("Your actionbar title");
    getSupportActionbar().setDisplayHomeAsUpEnabled(true);

That's all, You'll get result with transparent Actionbar. Also, Here if you want to display drawer toggle button and menu, It'll show them.

user_69093610
Related