CODEWITHSUNDEEP
androidandroid-studioandroid-layoutmaterial-design
Kevin Paul Montealegre Melo
Kevin Paul Montealegre Melo

Reputation: 131

How to make the AppBarLayout have a transparent background like Gmail?

I'm trying to implement an appbarlayout similar to Gmail, but I have a little problem, the background is not transparent. I tried to place transparent color background but this hasn't worked. Try applying a style with the transparent property and it doesn't work. so I run out of alternatives, any help will really be appreciated

Gmail App Bar Layout: Gmail App Bar Layout:

My App Bar Layout: My App Bar Layout:

  <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_marginTop="6dp"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:fitsSystemWindows="true">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardElevation="8dp"
            app:layout_scrollFlags="scroll|enterAlways"
            app:cardMaxElevation="15dp"
            app:cardCornerRadius="10dp">

       <com.google.android.material.appbar.MaterialToolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

 </com.google.android.material.card.MaterialCardView>

Upvotes: 1

Views: 491

Answers (3)

Yeldar Nurpeissov
Yeldar Nurpeissov

Reputation: 2296

Try add this in FrameLayout:

<FrameLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

    <fragment> // here include your fragment container

 <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_marginTop="6dp"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:fitsSystemWindows="true">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardElevation="8dp"
            app:layout_scrollFlags="scroll|enterAlways"
            app:cardMaxElevation="15dp"
            app:cardCornerRadius="10dp">

       <com.google.android.material.appbar.MaterialToolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

 </com.google.android.material.card.MaterialCardView>

</FrameLayout>

Upvotes: 1

Shamsuddin Lelin
Shamsuddin Lelin

Reputation: 9

 recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
       

        override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)
     

            if (dy > 0) {
                // Scrolling up

                appBar.setBackgroundResource(R.drawable.bg_white_with_shadow)



            } else if (dx == 0 && layoutManager.findFirstVisibleItemPosition() == 0) {
                // Scrolling down

                appBar.setBackgroundColor(Color.TRANSPARENT)


            }
        }
    })

Upvotes: 0

Ilham Ramadhan
Ilham Ramadhan

Reputation: 1

create layout using cardview without using appbar, then you can animate when scroll down to disappear and scroll up to show the card

Upvotes: 0

Related Questions