Как сделать AppBarLayout фон прозрачным

Question

Я пытаюсь сделать фрагмент поиска, похожий на тот, в магазине Play:

AppBarLayout Мой имеет CardView в нем, а фон установлен в прозрачна:

<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> 

Но как вы можете видеть, есть твердый фон позади CardView так, что содержание за ним скрывается:

Как я могу сделать фон AppBarLayout «s прозрачной, так что содержание позади видно?

Answer 1

Такая же проблема возникла со мной, и в этот момент она не имеет ничего общего с прозрачностью AppBarLayout. Но AppBarLayout выталкивает содержимое вашей NestedScrollView ниже себя, когда выцветания.

Вы можете решить эту проблему

1. переместив NestedScrollView и позади AppBarLayout и
2. добавления пространства элемент к вашему NestedScrollView с размер AppBar

Шаг 1 может быть легко достигнуто, добавив в ваш 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; 
    } 
}); 

Для Шаг 2 вам нужно добавить пустой вид с высоты AppBar как спейсер к вашему NestedScrollView. Примечание. Я использовал RecyclerView вместо NestedScrollView в моем подходе, поэтому мне пришлось добавить пустой ViewHolder с appBarHeight в мой RecyclerView.Таким образом, этот фрагмент не проверен, но он должен сделать трюк для вас:

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

Answer 2

Попробуйте поместить карту CardView в FrameLayout с размерами match_parent, чтобы у CardView было пространство вокруг него. Я не уверен на 100%, что он будет работать, но стоит попробовать.

Answer 3

Я пробовал много кодов, чтобы дать мне более или менее то, что вы ищете. Это альтернативное решение, но вам нужно будет изменить AppBarLayout к простому мнению ... Посмотрите это:

<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> 

Примечание: это внутри CoordinatorLayout. Создание поведения, что просмотр является тип панели поиска вы используете:

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); 
} 

}

И сделано. Ваша «панель поиска» находится здесь.

Единственная проблема здесь: вам понадобится добавить дополнение к вашему первому элементу Recycler или прозрачный вид в качестве первого элемента.