Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make AppBarLayout background transparent

I'm trying to make a search fragment similar to the one in the Play Store:

Google Play Store

My AppBarLayout has a CardView in it, and the background is set to transparent:

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:elevation="0dp">

        <!-- CardView -->

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Main content -->

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

But as you can see, there is a solid background behind the CardView so that the content behind it is hidden:

Hidden content

How can I make the AppBarLayout's background transparent so that the content behind is visible?

like image 352
joharei Avatar asked Jul 25 '16 08:07

joharei


People also ask

How do you make AppBarLayout transparent?

Simply use app:elevation="0dp" inside "AppBarLayout" to remove the shadow.

What is the difference between AppBarLayout and ToolBar?

AppBarLayout is a parent layout of ToolBar and ToolBar is custom ActionBar. if you want scroll action on the ToolBar so you should write ToolBar into the AppBarLayout,before you will write code for scroll the ToolBar, you must know the NestedScrollBar,it is used to scroll the ToolBar.

How do I use AppBarLayout?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml.

What is the use of AppBarLayout in Android?

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures. Children should provide their desired scrolling behavior through AppBarLayout.


2 Answers

Another option is to add negative top margin to NestedScrollView (or whatever view is using appbar_scrolling_view_behavior) and the same positive top margin (or padding) to its direct child:

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_marginTop="-100dp" >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="100dp" >

        ...

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.core.widget.NestedScrollView>

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null" >

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed" >

        ...

    </com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

Note that in order for this approach to work the AppBarLayout should be placed below NestedScrollView in the layout-file. In case fading edges of NestedScrollView produce visual artifacts, add android:overScrollMode="never" to its parameters. Also take care when using elevation since it, when used in wrong place (say, when applied to whole AppBarLayout), may also produce visual artifacts.

like image 148
a.ch. Avatar answered Oct 15 '22 05:10

a.ch.


The same problem happened to me and at this point it has nothing to do with the transparency of the AppBarLayout. But the AppBarLayout pushes the content of your NestedScrollView below itself when fading in.

You can solve this by

  1. moving your NestedScrollView up and behind the AppBarLayout and
  2. adding a space element to your NestedScrollView with the size of the AppBar

Step 1 can be easily achieved by adding this to your onCreate()

mNestedScroll.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        mNestedScroll.getViewTreeObserver().removeOnGlobalLayoutListener(this);

        final int appBarHeight = mAppBar.getHeight();
        mNestedScroll.setTranslationY(-appBarHeight);
        mNestedScroll.getLayoutParams().height = mNestedScroll.getHeight() + appBarHeight;
    }
});

For Step 2 you need to add an empty view with the height of the appBar as a spacer to your NestedScrollView. Note: I used a RecyclerView instead of a NestedScrollView in my approach, so I had to add an empty ViewHolder with the appBarHeight to my RecyclerView. So this snippet is not tested, but it should do the trick for you:

<View
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"/>
like image 30
Stefan Medack Avatar answered Oct 15 '22 04:10

Stefan Medack