Jak AppBarLayout tło przezroczyste

Question

Próbuję zrobić wyszukiwarki fragment podobny do tego w Sklepie Play:

My AppBarLayout ma CardView w nim, a tło jest ustawiony na 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> 

Ale jak widać, nie jest stałe tło za CardView więc, że zawartość jest ukryty za nim:

Jak mogę sprawić, że AppBarLayout „s tło przezroczyste tak, że zawartość jest widoczna z tyłu?

Answer 1

Ten sam problem przydarzył mi się iw tym momencie nie ma nic wspólnego z przezroczystością AppBarLayout. Ale AppBarLayout wypycha zawartość swojej NestedScrollView poniżej samoczynnie blaknięcie.

Problem ten można rozwiązać przez

1. przesuwając NestedScrollView się i za AppBarLayout i
2. dodając element przestrzeni do NestedScrollView z wielkość AppBar

Krok 1 można łatwo osiągnąć poprzez dodanie do Twoich 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; 
    } 
}); 

Dla kroku 2 trzeba dodać pustą widok z wysokości appBar jako przekładki do NestedScrollView. Uwaga: W moim podejściu użyłem RecyclerView zamiast NestedScrollView, więc musiałem dodać puste ViewHolder z appBarHeight do mojego RecyclerView.Tak więc ten fragment nie jest testowany, ale powinien załatwić sprawę:

<View 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize"/> 

Answer 2

Spróbuj umieścić CardView w wymianie FrameLayout z match_parent, tak aby CardView miał wokół niego przestrzeń. Nie jestem w 100% przekonany, że to zadziała, ale warto spróbować.

Answer 3

Próbowałem wielu kodów, aby dać mi mniej lub więcej tego, czego szukasz. To alternatywne rozwiązanie, ale trzeba zmienić AppBarLayout do prostego widoku ... Spójrz to:

<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/annonce.main.coordinator" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:ignore="RtlHardcoded"> 

<android.support.v7.widget.RecyclerView 
    android:id="@+id/rv" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/> 

<!-- here you put your search bar, can be any view !--> 
<android.support.v7.widget.CardView 
    android:id="@+id/searchbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:cardElevation="4dp" 
    app:cardUseCompatPadding="true" 
    app:layout_behavior="[package].RecyclerSearchBehavior"> 

    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:hint="Pesquise aqui" 
     android:minHeight="58dp"/> 

</android.support.v7.widget.CardView> 

Uwaga: to jest wewnątrz CoordinatorLayout. Tworzenie Zachowanie Pogląd ten rodzaj paska wyszukiwania używasz:

public class RecyclerSearchBehavior extends CoordinatorLayout.Behavior<CardView> { 
//Initial height and location 
private int mViewHeight; 
private int[] mViewStartLocation; 


public RecyclerSearchBehavior(Context context, AttributeSet attrs) { 
} 

@Override 
public boolean layoutDependsOn(CoordinatorLayout parent, final CardView child, View dependency) { 
    //the first function called. The initial variables settings. 
    //getting height 
    mViewHeight = child.getHeight(); 
    //getting location on screen 
    mViewStartLocation = new int[2]; 
    child.getLocationOnScreen(mViewStartLocation); 
    //if the dependecy is your recycler 
    if (dependency instanceof RecyclerView) 
     //add scroll listener 
     ((RecyclerView) dependency).addOnScrollListener(new RecyclerView.OnScrollListener() { 
      @Override 
      public void onScrollStateChanged(RecyclerView recyclerView, int newState) { 
       super.onScrollStateChanged(recyclerView, newState); 
      } 
      //here the magic happens 
      @Override 
      public void onScrolled(RecyclerView recyclerView, int dx, int dy) { 
       super.onScrolled(recyclerView, dx, dy); 
       //animate function 
       animate(child, dy); 
      } 
     }); 
    return dependency instanceof RecyclerView; 
} 

private void animate(CardView child, int dy) { 
    //the initial position of your search bar is 0, because it is on top, so... 
    if (child.getY() <= 0) 
     //dy is an integer that shows you if user scrolls up or down 
     if (dy >= 0) { 
      //move to top is a negative value, so *-1 
      //if that is < than height, scrools up 
      if ((child.getY() * -1) <= (mViewHeight)) 
       child.setTranslationY(child.getY() - dy * 0.1f); 
     } else { 
      //if the position of search bar is < than zero, scrolls down 
      if (child.getY() < 0) 
       child.setTranslationY(child.getY() - dy * 0.1f); 
      //else, put the view on 0y 
      else child.setY(0); 
     } 
    //else, put the view on 0y again. this function is called after any user      
    //touches... so everything happens fast and with numbers different than 
    //1 
    else child.setY(0); 
} 

}

i zrobione. Twój "pasek wyszukiwania" jest tutaj.

Jedynym problemem jest konieczność dodania dopełnienia do pierwszego elementu w Recyklerze lub przezroczystego widoku jako pierwszego elementu.