Search code examples
androidandroid-fragmentsandroid-coordinatorlayout

How to position layouts vertically in coordinatorLayout


I want to implement collapsing layout inside my fragment.However my collapsingLayout, framelayout (container) and tablayout are positioned like they are placed in frame layout.
I want to make Collapsinglayout at top, tablayout below it and frame layout conteiner below tablayout, preserving collapsing annimation. (frame layout container host various fragments consisting of recyclerview [because of varioius custom gesture, viewpager is not considered])

fragment_layout.xml

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/appBgColor"
    android:clickable="true"
    tools:context="com.lunchpoint.fragments.RestaurantFragment"

    >
  <android.support.design.widget.AppBarLayout
      android:id="@+id/id_appbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@android:color/transparent"
      android:fitsSystemWindows="true"
      >

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

      <RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="310dip"
          >
       <!--Header layout-->
      </RelativeLayout>

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

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

      android:layout_marginEnd="16dip"
      android:layout_marginLeft="16dip"
      android:layout_marginRight="16dip"
      android:layout_marginStart="16dip"
      app:tabGravity="fill"
      app:tabMinWidth="0dip"
      app:tabMode="scrollable"
      app:tabPaddingEnd="1dp"
      app:tabPaddingStart="1dp"
      />

  <FrameLayout

      android:id="@+id/container"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      />

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

Solution

  • CoordinatorLayout is a powered FrameLayout: all childs can define their position through a behavior or an anchor. See more docs like this.