CollapsingToolBarLayout with TabLayout and ViewPager

user_754865 0
Viewed 4126

Layout example from app

Am try to create a layout similar to the one in the image using a CordinatorLayout and CollapsingToolbarLayout, TabLayout and ViewPager. My Layout doesn't render properly.

Here is my layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:fitsSystemWindows="true">

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

            <ImageView
                android:id="@+id/image"
                android:src="@drawable/thumb_placeholder"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"/>

            <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_collapseMode="pin" />

            <android.support.design.widget.TabLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/movie_tabs"
                app:tabGravity="fill"
                app:tabMode="fixed"
                android:background="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabTextColor="@color/textColorPrimary"
                app:tabSelectedTextColor="@color/textColorPrimary"
                app:tabIndicatorColor="@color/textColorPrimary"
                app:tabIndicatorHeight="4dp"
                app:paddingStart="20dp"
                app:paddingEnd="20dp">
            </android.support.design.widget.TabLayout>

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/movieviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

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

Testing it on my device i get this enter image description hereenter image description here

The ViewPager Fragment overlays the TabLayout if it has content and displays the TabLayout on top of the ImageView when there is no content. What am i doing wrong, i am still somewhat of an Android noob.

android-fragments android
4 Answers

Old answer but maybe someone found it useful

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <VideoView
                android:id="@+id/video_view"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="48dp"
                app:layout_collapseMode="pin" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="bottom"
                app:tabMode="scrollable" />

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>
user_19733910 
    <?xml version="1.0" encoding="utf-8"?>
<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/main_content"
    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="250dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


<!--            Your extra details excluding tablayout. if u want any..-->
            <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:orientation="vertical"
                tools:context="com.sweedesi.android.customerapp.Fragments.SweetMartListFragment">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/home_dummy_4"
                    android:scaleType="centerCrop" />

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/black_shadow"
                    android:scaleType="centerCrop" />


                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    tools:context="com.sweedesi.android.customerapp.Fragments.SweetMartListFragment">


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="@dimen/margin_10"
                        android:layout_marginTop="@dimen/margin_10"
                        android:layout_marginRight="@dimen/margin_10"
                        android:orientation="vertical">

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

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_centerVertical="true"
                                android:layout_marginTop="@dimen/margin_10"
                                android:layout_marginRight="@dimen/margin_10"
                                android:layout_toLeftOf="@+id/txt_reviews"
                                android:text="Bhagat Mishthan Bhandar"
                                android:textColor="@color/orangeColor"
                                android:textSize="@dimen/font_slarge"
                                android:textStyle="bold" />

                            <TextView
                                android:id="@+id/txt_reviews"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignParentRight="true"
                                android:layout_marginTop="@dimen/margin_5"
                                android:text="580 reviews"
                                android:textColor="@color/colorWhite"
                                android:textSize="@dimen/fontsize_normal" />


                        </RelativeLayout>

                        <View
                            android:layout_width="100dp"
                            android:layout_height="1dp"
                            android:layout_marginTop="@dimen/margin_5"
                            android:layout_marginBottom="@dimen/margin_5"
                            android:background="@color/orangeColor" />

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="@string/min_order"
                                android:textColor="@color/colorWhite"
                                android:textSize="@dimen/fontsize_normal" />

                            <TextView
                                android:id="@+id/txt_price"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="@dimen/margin_5"
                                android:text="1000"
                                android:textColor="@color/colorWhite"
                                android:textSize="@dimen/fontsize_normal" />


                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="@dimen/margin_5"
                            android:orientation="horizontal">

                            <ImageView
                                android:layout_width="20dp"
                                android:layout_height="20dp"
                                android:layout_marginTop="@dimen/margin_5"
                                android:background="@drawable/location_white" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center_vertical"
                                android:layout_marginLeft="@dimen/margin_5"
                                android:text="Bhati enclave, Main queens road, Opp Jharkhand mahadev mandir, Vaishali nagar, Jaipur - 302021"
                                android:textColor="@color/colorWhite"
                                android:textSize="@dimen/fontsize_normal" />
                        </LinearLayout>
                    </LinearLayout>

                </RelativeLayout>

            </RelativeLayout>


            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_alignParentBottom="true"
                android:layout_gravity="bottom"
                android:background="@color/colorWhite"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@color/orangeColor"
                app:tabTextAppearance="@style/MyCustomTabText"
                app:tabTextColor="@color/colorText" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/transperentColor"
                app:layout_collapseMode="parallax"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


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

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"

                android:layout_height="wrap_content" />
        </RelativeLayout>
    </android.support.v4.widget.NestedScrollView>


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