title: Android - Material Design Library: How to use the collapsingToolBar Layout
body: <p>I'm new to android development and am trying to work with collapsingToolBar in Google's material design library. I am new to this whole collapsing toolbar, but I followed some online tutorials and made an xml according to my needs keeping in mind the advices. I have a main activity with a viewPager containing 5 fragments, now I want that the viewPager should occupy full screen when the user scrolls the activity and the rest of the activity is the collapsing toolbar.</p>
  
  <p>The rest of the activity has two imageViews, a rating bar and some TextViews in it. I'm not sure if all of these are compatible with the collapsing toolbar layout so I'm trying.</p>
  
  <p><a href="https://i.stack.imgur.com/mhFfl.png" rel="nofollow noreferrer">This</a> is what I meant to say. This is a screenshot from before I tried to implement the coordinatorLayout and collapsing Toolbar.</p>
  
  <p><a href="https://lh3.googleusercontent.com/zddyP38TgKHsggZuEQXsDlqrO2b6Kc2KipduxciMDRe4BxH7WmBZkaTQK2r0vKSgv6s=h900-rw" rel="nofollow noreferrer">Here</a> is the type of output I want from the app. This example has less tabs in the viewpager but the basic collapsing toolbar layout implementation is the same. Here is the playstore line of the app, just in case: play.google.com/store/apps/details?id=com.kkings.cinematics</p>
  
  <p>Here is the xml of my activity, the current one (having collapsing toolar):</p>
  
  <pre><code>&lt;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="wrap_content"
      android:layout_height="wrap_content"&gt;
  
      &lt;RelativeLayout
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"&gt;
  
          &lt;android.support.design.widget.AppBarLayout
              android:id="@+id/tvDescAppBarLayout"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:fitsSystemWindows="true"
              android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar"&gt;
  
              &lt;android.support.design.widget.CollapsingToolbarLayout
                  android:id="@+id/tvDescCollapsingToolBar"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:fitsSystemWindows="true"
                  app:contentScrim="@color/chocolateBrown"
                  app:layout_scrollFlags="scroll|exitUntilCollapsed"&gt;
  
                      &lt;RelativeLayout
                          android:id="@+id/tvDescTabLayout01"
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:background="@android:color/black"
                          android:paddingBottom="8dp"&gt;
  
                          &lt;ImageView
                              android:id="@+id/tvBackgroundImage"
                              android:layout_width="match_parent"
                              android:layout_height="200dp"
                              android:adjustViewBounds="true" /&gt;
  
                          &lt;ImageView
                              android:id="@+id/tvImageMain"
                              android:layout_width="120dp"
                              android:layout_height="150dp"
                              android:layout_alignParentTop="true"
                              android:layout_marginLeft="20dp"
                              android:layout_marginTop="100dp"
                              android:foregroundGravity="left" /&gt;
  
  
                          &lt;TextView
                              android:id="@+id/tvDescHeading"
                              android:layout_width="140dp"
                              android:layout_height="wrap_content"
                              android:layout_below="@+id/tvBackgroundImage"
                              android:layout_marginLeft="8dp"
                              android:layout_marginTop="16dp"
                              android:layout_toRightOf="@id/tvImageMain"
                              android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
                              android:textColor="@android:color/white"
                              android:textStyle="bold|italic" /&gt;
  
                          &lt;RatingBar
                              android:id="@+id/tvDescRating"
                              style="?android:attr/ratingBarStyleSmall"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_alignParentRight="true"
                              android:layout_below="@id/tvBackgroundImage"
                              android:layout_marginRight="8dp"
                              android:layout_marginTop="30dp"
                              android:gravity="center_vertical"
                              android:numStars="5"
                              android:stepSize="0.5"
                              android:visibility="visible" /&gt;
  
                          &lt;TextView
                              android:id="@+id/tvDescIdTag"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_alignTop="@+id/tvDescReleaseDate"
                              android:layout_below="@+id/tvDescRating"
                              android:layout_marginBottom="8dp"
                              android:layout_toLeftOf="@+id/tvDescId"
                              android:text="ID: "
                              android:textColor="#D2D2D2"
                              android:textSize="15sp"
                              android:textStyle="italic|bold" /&gt;
  
                          &lt;TextView
                              android:id="@+id/tvDescId"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_alignParentRight="true"
                              android:layout_alignTop="@id/tvDescIdTag"
                              android:layout_below="@+id/tvDescRating"
                              android:layout_marginBottom="8dp"
                              android:layout_marginRight="16dp"
                              android:textColor="#D2D2D2"
                              android:textSize="15sp"
                              android:textStyle="bold|italic" /&gt;
  
  
                          &lt;TextView
                              android:id="@+id/tvDescReleaseDate"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_below="@+id/tvDescHeading"
                              android:layout_marginLeft="20dp"
                              android:layout_marginTop="8dp"
                              android:layout_toRightOf="@+id/tvImageMain"
                              android:textColor="#D6D6D6"
                              android:textSize="13sp"
                              android:textStyle="bold" /&gt;
  
                      &lt;/RelativeLayout&gt;
  
              &lt;/android.support.design.widget.CollapsingToolbarLayout&gt;
  
          &lt;/android.support.design.widget.AppBarLayout&gt;
  
          &lt;android.support.v4.widget.NestedScrollView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@+id/tvDescAppBarLayout"&gt;
  
              &lt;LinearLayout
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:orientation="vertical"&gt;
  
                  &lt;android.support.design.widget.TabLayout
                      android:id="@+id/tvDescTabLayout"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:background="@android:color/darker_gray"
                      app:tabMode="fixed"
                      app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
                      app:tabTextColor="@android:color/black" /&gt;
  
                  &lt;android.support.v4.view.ViewPager
                      android:id="@+id/tvDescViewPager"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_alignParentBottom="true"
                      android:background="@android:color/white" /&gt;
  
              &lt;/LinearLayout&gt;
  
          &lt;/android.support.v4.widget.NestedScrollView&gt;
  
      &lt;/RelativeLayout&gt;
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>This is the type of result this activity produces:</p>
  
  <blockquote>
    <p>i.stack.imgur.com/hPruf.png</p>
  </blockquote>
  
  <p>I haven't made any changes in the java. The credits or any other class can't display anything. I suspect that this is due to some clash between recyclerView and nestedScroll View.</p>
  
  <p>So, anyway, I saw that in all the online tutorials, they used a toolbar inside the collapsingToolbarLayout. So I tried doing the same same thing, hereis the new XML:</p>
  
  <pre><code>&lt;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="wrap_content"
      android:layout_height="wrap_content"&gt;
  
      &lt;RelativeLayout
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"&gt;
  
          &lt;android.support.design.widget.AppBarLayout
              android:id="@+id/tvDescAppBarLayout"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:fitsSystemWindows="true"
              android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar"&gt;
  
              &lt;android.support.design.widget.CollapsingToolbarLayout
                  android:id="@+id/tvDescCollapsingToolBar"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:fitsSystemWindows="true"
                  app:contentScrim="@color/chocolateBrown"
                  app:layout_scrollFlags="scroll|exitUntilCollapsed"&gt;
  
                  &lt;android.support.v7.widget.Toolbar
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:background="@color/transparentColor"
                      android:fitsSystemWindows="true"
                      app:layout_scrollFlags="scroll|enterAlways"&gt;
  
                      &lt;RelativeLayout
                          android:id="@+id/tvDescTabLayout01"
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:background="@android:color/black"
                          android:paddingBottom="8dp"&gt;
  
                          &lt;ImageView
                              android:id="@+id/tvBackgroundImage"
                              android:layout_width="match_parent"
                              android:layout_height="200dp"
                              android:adjustViewBounds="true" /&gt;
  
                          &lt;ImageView
                              android:id="@+id/tvImageMain"
                              android:layout_width="120dp"
                              android:layout_height="150dp"
                              android:layout_alignParentTop="true"
                              android:layout_marginLeft="20dp"
                              android:layout_marginTop="100dp"
                              android:foregroundGravity="left" /&gt;
  
  
                          &lt;TextView
                              android:id="@+id/tvDescHeading"
                              android:layout_width="140dp"
                              android:layout_height="wrap_content"
                              android:layout_below="@+id/tvBackgroundImage"
                              android:layout_marginLeft="8dp"
                              android:layout_marginTop="16dp"
                              android:layout_toRightOf="@id/tvImageMain"
                              android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
                              android:textColor="@android:color/white"
                              android:textStyle="bold|italic" /&gt;
  
                          &lt;RatingBar
                              android:id="@+id/tvDescRating"
                              style="?android:attr/ratingBarStyleSmall"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_alignParentRight="true"
                              android:layout_below="@id/tvBackgroundImage"
                              android:layout_marginRight="8dp"
                              android:layout_marginTop="30dp"
                              android:gravity="center_vertical"
                              android:numStars="5"
                              android:stepSize="0.5"
                              android:visibility="visible" /&gt;
  
                          &lt;TextView
                              android:id="@+id/tvDescIdTag"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_alignTop="@+id/tvDescReleaseDate"
                              android:layout_below="@+id/tvDescRating"
                              android:layout_marginBottom="8dp"
                              android:layout_toLeftOf="@+id/tvDescId"
                              android:text="ID: "
                              android:textColor="#D2D2D2"
                              android:textSize="15sp"
                              android:textStyle="italic|bold" /&gt;
  
                          &lt;TextView
                              android:id="@+id/tvDescId"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_alignParentRight="true"
                              android:layout_alignTop="@id/tvDescIdTag"
                              android:layout_below="@+id/tvDescRating"
                              android:layout_marginBottom="8dp"
                              android:layout_marginRight="16dp"
                              android:textColor="#D2D2D2"
                              android:textSize="15sp"
                              android:textStyle="bold|italic" /&gt;
  
  
                          &lt;TextView
                              android:id="@+id/tvDescReleaseDate"
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:layout_below="@+id/tvDescHeading"
                              android:layout_marginLeft="20dp"
                              android:layout_marginTop="8dp"
                              android:layout_toRightOf="@+id/tvImageMain"
                              android:textColor="#D6D6D6"
                              android:textSize="13sp"
                              android:textStyle="bold" /&gt;
  
                      &lt;/RelativeLayout&gt;
  
                  &lt;/android.support.v7.widget.Toolbar&gt;
  
              &lt;/android.support.design.widget.CollapsingToolbarLayout&gt;
  
          &lt;/android.support.design.widget.AppBarLayout&gt;
  
          &lt;android.support.v4.widget.NestedScrollView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@+id/tvDescAppBarLayout"&gt;
  
              &lt;LinearLayout
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:orientation="vertical"&gt;
  
                  &lt;android.support.design.widget.TabLayout
                      android:id="@+id/tvDescTabLayout"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:background="@android:color/darker_gray"
                      app:tabMode="fixed"
                      app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
                      app:tabTextColor="@android:color/black" /&gt;
  
                  &lt;android.support.v4.view.ViewPager
                      android:id="@+id/tvDescViewPager"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_alignParentBottom="true"
                      android:background="@android:color/white" /&gt;
  
              &lt;/LinearLayout&gt;
  
          &lt;/android.support.v4.widget.NestedScrollView&gt;
  
      &lt;/RelativeLayout&gt;
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>This toolbar makes everything weird, this is what this looks like:</p>
  
  <blockquote>
    <p>i.stack.imgur.com/PfqP9.png</p>
  </blockquote>
  
  <p>Also, the logcat doesn't show any errors.</p>
  
  <p>I just can't seem to figure out where I'm going wrong. I have checked all other similar questions on StackOverFlow, none of the solutions have worked so far. </p>
  
  <p>And here is the tutorial I was mentioning: </p>
  
  <blockquote>
    <p>www.youtube.com/watch?v=ssh09JbQ3nc</p>
  </blockquote>
  
  <p>What am i doing wrong here? </p>