13

Próbuję odtworzyć pole wyszukiwania tak, jak jest w aplikacji Airbnb na Androida. Używam CoorinatorLayout z Pasek narzędzi i RecyclerView.Jak umieścić RelativeLayout wewnątrz CoordinatorLayout

Ale kiedy wkładam coś do Koordynatora oprócz tych dwóch rzeczy, to się nie pojawia. Oto mój kod:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/slidingLayout" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="@color/red" 
     app:layout_scrollFlags="scroll|enterAlways" /> 

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

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="50dp" 
    android:layout_marginRight="50dp" 
    android:layout_marginTop="20dp" 
    android:background="@drawable/rounded_background" 
    android:orientation="horizontal" 
    android:padding="6dp" 
    app:layout_scrollFlags="scroll|enterAlways"> 

    <EditText 
     android:id="@+id/search" 
     android:layout_width="0dp" 
     android:layout_height="fill_parent" 
     android:layout_weight="6" 
     android:background="@null" 
     android:fontFamily="sans-serif-light" 
     android:hint="Unesite grad" 
     android:paddingLeft="16dp" 
     android:paddingStart="16dp" /> 

    <ImageView 
     android:id="@+id/cancelSearch" 
     android:layout_width="0dp" 
     android:layout_height="40dp" 
     android:layout_weight="1" 
     android:padding="10dp" 
     android:src="@drawable/ic_cancel" /> 
</LinearLayout> 

<android.support.v7.widget.RecyclerView 
    android:id="@+id/recyclerView" 
    android:layout_width="match_parent" 
    android:layout_height="fill_parent" 
    android:layout_below="@id/appbar" 
    android:background="#ffffff" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

Ale faktycznie, jeśli to w ogóle działa, chciałbym mieć kłopoty z uruchomieniem pola wyszukiwania powyżej RecyclerView.

Próbowałem umieścić wszystko wewnątrz RelativeLayout, ale to nie zadziałało.

Tutaj jest także obraz tego, co próbuję zrobić enter image description here

EDIT:

Oto kod z RelativeLayout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/slidingLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.AppBarLayout 
      android:id="@+id/appbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
      android:background="#00000000"> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="@color/red" 
       app:layout_scrollFlags="scroll|enterAlways"/> 
    </android.support.design.widget.AppBarLayout> 

    <RelativeLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"> 
     <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="50dp" 
    android:layout_marginRight="50dp" 
    android:layout_marginTop="20dp" 
    android:background="@drawable/rounded_background" 
    android:orientation="horizontal" 
    android:padding="6dp" 
    app:layout_scrollFlags="scroll|enterAlways"> 

    <EditText 
     android:id="@+id/search" 
     android:layout_width="0dp" 
     android:layout_height="fill_parent" 
     android:layout_weight="6" 
     android:background="@null" 
     android:fontFamily="sans-serif-light" 
     android:hint="Unesite grad" 
     android:paddingLeft="16dp" 
     android:paddingStart="16dp" /> 

    <ImageView 
     android:id="@+id/cancelSearch" 
     android:layout_width="0dp" 
     android:layout_height="40dp" 
     android:layout_weight="1" 
     android:padding="10dp" 
     android:src="@drawable/ic_cancel" /> 
</LinearLayout> 
     <android.support.v7.widget.RecyclerView 
      android:id="@+id/recyclerView" 
      android:layout_width="match_parent" 
      android:layout_height="fill_parent" 
      android:layout_below="@id/appbar" 
      android:background="#ffffff" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
    </RelativeLayout> 

+0

Gdzie jest kod, w którym * próbowałeś * wstawić 'RelativeLayout' w' CoordinatorLayout'? –

+0

Próbowałem go na 2 sposoby. Najpierw owijałem wszystkie widoki wewnątrz Koordynatora, więc Względny był pierwszym i jedynym dzieckiem. Spowodowało to utratę zachowania przewijania na wszystkich elementach. A drugi jest w EDYCIE, gdzie owinąłem widok RecyclerView i to pole wyszukiwania wewnątrz Relative. –

+0

@NikolaMilutinovic Przewiń zachowanie będzie działać dla wszystkich potomków, które są bezpośrednim potomkiem 'CoordinatorLayout', więc jeśli ustawisz zachowanie układu na przewijanie zagnieżdżone' RelativeLayout' będzie działać. –

Odpowiedz

21

Starałam zrobić coś podobnego, ale z banerem reklamowym u dołu ekranu. Moje rozwiązanie było owinąć RelativeLayout poza CoordinatorLayout jako tak:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_above="@+id/ad_view"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

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

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

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

    <com.google.android.gms.ads.AdView 
     android:id="@+id/ad_view" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:layout_alignParentBottom="true" 
     android:layout_gravity="center|bottom" 
     app:adSize="SMART_BANNER" 
     app:adUnitId="@string/admob_id" /> 

</RelativeLayout> 

Pasek właściwie ukrywa podczas przewijania wewnątrz RecyclerView i wszystko wydaje się działać dobrze. Mogę sobie wyobrazić, że jeśli zastosujesz się do podobnej zasady, powinieneś być dobry.

+0

Dokładnie to, czego potrzebowałem (po wielu godzinach poszukiwań!). Dzięki. – sidiabale

0

Jeśli chcesz usunąć biały kolor paska stanu, należy usunąć następną linię

<item name="android:statusBarColor">@android:color/transparent</item>` 

w v21/styles.xml

Dzięki za przykład.

0
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/slidingLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="@color/red" 
      app:layout_scrollFlags="scroll|enterAlways"/> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="50dp" 
      android:layout_marginRight="50dp" 
      android:layout_marginTop="20dp" 
      android:background="@drawable/rounded_background" 
      android:orientation="horizontal" 
      android:padding="6dp" 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <EditText 
       android:id="@+id/search" 
       android:layout_width="0dp" 
       android:layout_height="fill_parent" 
       android:layout_weight="6" 
       android:background="@null" 
       android:fontFamily="sans-serif-light" 
       android:hint="Unesite grad" 
       android:paddingLeft="16dp" 
       android:paddingStart="16dp"/> 

      <ImageView 
       android:id="@+id/cancelSearch" 
       android:layout_width="0dp" 
       android:layout_height="40dp" 
       android:layout_weight="1" 
       android:padding="10dp" 
       android:src="@drawable/ic_cancel" /> 
     </LinearLayout> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recyclerView" 
     android:layout_width="match_parent" 
     android:layout_height="fill_parent" 
     android:layout_below="@id/appbar" 
     android:background="#ffffff" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"/> 
</android.support.design.widget.CoordinatorLayout> 

Sprawdź, czy to działa.

Powiązane problemy