CODEWITHSUNDEEP
androidxmlmaterial-designandroid-appbarlayout
Kistamushken
Kistamushken

Reputation: 221

AppBarLayout transparency

I've been playing around with AppBarLayout, but I can't find a way to make it's background transparent.

Here what i mean:

enter image description here

And here is my XML:

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        android:background="@android:color/transparent">

        <TextView
            android:id="@+id/toolbar"
            app:elevation="0dp"
            android:text="hey"
            android:textColor="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="#8000CDFE"
            app:layout_scrollFlags="scroll|enterAlways"/>

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

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

As you can see I am using color #8000CDFE which should give me 50% transparency, but for some reason it doesn't. I've tried setting transparent background to AppBarLayout, but it also doesn't help much.

Has anybody encountered this problem? Is there anyway to assign transparent colors to AppBarLayout and its' siblings?

Thanks.

Upvotes: 2

Views: 4690

Answers (2)

Castaldi
Castaldi

Reputation: 701

These simple few lines of code would do the trick

RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.recycler);
AppBarLayout barLayout = (AppBarLayout) findViewById(R.id.appbar);    

mRecyclerView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                mRecyclerView.setTranslationY(-barLayout.getHeight());
                mRecyclerView.getLayoutParams().height = mRecyclerView.getHeight()+barLayout.getHeight();
            }
        });

Upvotes: 0

Ari
Ari

Reputation: 3086

Why it happens:

According to the docs, CoordinateLayout is a special kind of a FrameaLayout, so one can assume overlay behavior to work just as it would with a regular FrameLayout, right? The thing is, though, that it does things differently when it detects that your RecyclerView has theapp:layout_behavior="@string/appbar_scrolling_view_behaviorflag.

When it detects the scrolling beahvior, I am assuming that it does the following (haven't looked at the code, just assuming): It places the RecyclerView just below AppBarLayout, but retains its full height. When scrolling occurs, all it does is set the RecyclerView's translationY to negative numbers to move it up by the scroll value.

Possible solution:

  1. Set translation of RecyclerView to -appBarHeight. This will make it appear underneath the appBar.
  2. Increase the RecyclerView's height by appBarHeight. This is to offset the translationY changes caused by the scrollBehavior.

For example, here is how you can do it:

ViewTreeObserver vto = mRecyclerView.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {

        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) {
            mRecyclerView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        } else {
            mRecyclerView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        }

        recyclerView.setTranslationY(-appBarHeight);
        recyclerView.getLayoutParams().height = recyclerView.getHeight()+appBarHeight;
    }
});

Upvotes: 6

Related Questions