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

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



Google Play Store



Мой 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 прозрачным, чтобы содержимое за ним было видно?

438   3  

3 ответов:

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

Вы можете решить это с помощью

  1. перемещение вашего NestedScrollView вверх и за AppBarLayout и
  2. добавление элемента пространства к вашему NestedScrollView с размером Панели приложений

Шаг 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 Вам нужно добавить пустой вид с высотой панели приложений в качестве разделителя к вашему NestedScrollView. Примечание: я использовал RecyclerView вместо NestedScrollView в своем подходе, поэтому мне пришлось добавить пустой Видхолдер с appBarHeight в мой RecyclerView. Таким образом, этот фрагмент не тестируется, но он должен сделать трюк для вас: 

<View
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"/>
3  
2016-12-21 11:28:28

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

0  
2016-07-25 12:07:42

Я перепробовал множество кодов, чтобы получить более или менее то, что вы ищете. Это альтернативное решение,но вам нужно будет изменить 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, или прозрачный вид в качестве первого элемента.

0  
2016-10-19 02:17:00

Comments

    Ничего не найдено.
Click here to cancel reply.