How to make ActionBar Transparent?

Question

enter image description here

Okay I want my ActionBar to look like the picture. I have 4 pages with all different picture. And when you scroll down I want the picture to be under the status bar and actionbar. How can I do this?

I tried to do it myself but the image appears like this.

enter image description here

Here is my app_bar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="@color/transparent"
android:elevation="0dp"
android:minHeight="?actionBarSize"
android:transitionName="actionBar"
app:contentInsetStart="@dimen/toolbar_contentInset"
app:popupTheme="@style/Theme.AppCompat.Light"
app:theme="@style/CustomAppBar"
tools:ignore="UnusedAttribute" />

My MainActivity

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayShowTitleEnabled(false);;
    toolbar.setTitle("");
    toolbar.setSubtitle("");

This answer will help you to get transparent action bar. http://stackoverflow.com/a/13854832/2967875 — zzas11, Jul 06 '15 at 01:22

score 0 · Answer 1 · answered Jul 06 '15 at 01:51

I see you've set your Toolbar's color to transparent, good job! That's one step down, and one more to go.

You'd need to activate the windowActionBarOverlay mode to true, so that the space that were reserved for your Toolbar be gone and be filled with your content instead. To do this, either you specify it in your style.xml:

<style name="AppTheme" parent="android:Theme.Holo">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="android:actionBarStyle">@style/action_bar_theme</item>
    <item name="android:actionMenuTextColor">#fff</item>
</style>

<style name="action_bar_theme" parent="@android:style/Widget.Holo.ActionBar">
    <item name="android:background">#b3000000</item>
    <item name="android:titleTextStyle">@style/action_bar_text</item>
</style>

..or alternatively, via your activity's onCreate():

// Call this on your activity's onCreate() BEFORE YOU DO ANYTHING ELSE. 
getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

score 0 · Answer 2 · answered Jul 06 '15 at 02:12

I think if you want to implement the effect you want, only setting Toolbar overlay is not enough.

I implemented this before: Toolbar can be collapsed or expanded when contents are scrolled up or down. Here below are my codes, take a look at it first:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="me.danielpan.youtubelike.ProfileActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:fitsSystemWindows="true"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="0dp"
            app:collapsedTitleTextAppearance="@style/ThemeOverlay.AppCompat.Dark"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:paddingStart="0dp"
            app:statusBarScrim="?attr/colorAccent">

            <ImageView
                android:id="@+id/profile_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/profile_bg"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:pressedTranslationZ="3dp"
        app:fabSize="mini"
        app:rippleColor="@color/swipe_refresh_color_scheme_blue_1"
        app:borderWidth="3dp"
        app:elevation="2dp"
        android:src="@drawable/icon_plus"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        app:layout_anchor="@id/recycler_view"
        app:layout_anchorGravity="bottom|right|end"
        />
</android.support.design.widget.CoordinatorLayout>

I set ThemeOverlay to AppBarLayout, CollapsingToolbarLayout and Toolbar. And this worked well: Toolbar is transparent at first, when contents are scrolled up, Toolbar becomes opaque and at last is in the color of my ImageView by using Palette.

Hope you'll be inspired by my codes, good luck~

How to make ActionBar Transparent?

2 Answers2