I'm building a layout similar to the YouTube video layout, trying to get the RecyclerView holding the video comments to scroll as part of the whole layout and not be a separate scroll. I'm relatively new to Android programming and cannot get this to work.
The layout is as such:
- At the top of the layout there is a YouTube player which never scrolls with the screen;
- Bellow it are other views which should scroll;
- and at the bottom of the layout is the comment section which is a RecyclerView and it should scroll as part of the whole layout.
I've read on similar questions regarding headers to put the header inside the RecyclerView, but this seems bigger than just a header.
Additionally, the "header" part has a few views that change (rating, view count).
<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="match_parent">
<fragment
android:id="@+id/youtube_fragment"
android:name="com.google.android.youtube.player.YouTubePlayerSupportFragment"
android:layout_width="match_parent"
android:layout_height="200dp" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/youtube_fragment"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textview_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginEnd="64dp"
android:layout_marginRight="64dp"
android:layout_marginTop="40dp"
android:text="Star Wars the Force Awakens"
android:textColor="@color/colorPrimaryText"
android:textSize="@dimen/text_size_large" />
<TextView
android:id="@+id/textview_view_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignTop="@+id/textview_title"
android:text="1737\nViews"
android:textColor="@color/colorSecondaryText"
android:textSize="@dimen/text_size_small" />
<ImageButton
android:id="@+id/imagebutton_show_description"
style="?attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_below="@id/textview_view_count"
android:contentDescription="Image of an arrow pointing down, which when pressed shows the item's description"
android:src="@drawable/ic_arrow_drop_down_black_24dp" />
<TextView
android:id="@+id/textview_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/imagebutton_show_description"
android:layout_marginTop="12dp"
android:textColor="@color/colorSecondaryText"
android:textSize="@dimen/text_size_small"
android:visibility="gone" />
<View
android:id="@+id/divider1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/textview_description"
android:layout_marginLeft="@dimen/divider_horizontal_margin"
android:layout_marginRight="@dimen/divider_horizontal_margin"
android:layout_marginTop="32dp"
android:background="@color/colorDivider" />
<RatingBar
android:id="@+id/ratingbar"
style="@style/MyRating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textview_title"
android:layout_alignStart="@+id/textview_title"
android:layout_below="@+id/divider1"
android:layout_marginTop="16dp"
android:numStars="5" />
<TextView
android:id="@+id/rating_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/ratingbar"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="@+id/ratingbar"
android:layout_toRightOf="@+id/ratingbar"
android:text="0"
android:textColor="@color/colorSecondaryText"
android:textSize="@dimen/text_size_large" />
android:layout_below="@+id/divider1"
android:layout_marginTop="16dp"
android:text="FLOAT" />
<ImageView
android:id="@+id/imageview_user"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_below="@+id/ratingbar"
android:layout_marginTop="32dp"
android:src="@drawable/singer" />
<View
android:id="@+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/imageview_user"
android:layout_marginLeft="@dimen/divider_horizontal_margin"
android:layout_marginRight="@dimen/divider_horizontal_margin"
android:layout_marginTop="12dp"
android:background="@color/colorDivider" />
<TextView
android:id="@+id/comment_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/divider2"
android:layout_marginTop="24dp"
android:text="Comments"
android:textColor="@color/colorSecondaryText"
android:textSize="@dimen/text_size_small" />
<ImageView
android:id="@+id/imageview_commenting_user"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_below="@+id/textview_comment_header"
android:layout_marginTop="24dp"
android:src="@drawable/singer" />
<EditText
android:id="@+id/edittext_comment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/textview_comment_header"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_toEndOf="@+id/imageview_commenting_user"
android:layout_toRightOf="@+id/imageview_commenting_user"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="Add public comment"
android:longClickable="false" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/edittext_comment"
android:layout_marginBottom="16dp"
android:layout_marginTop="32dp" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
I later followed Hister's answer from Is there an addHeaderView equivalent for RecyclerView? and added everything but the video as a header, and the comments as the second holder. It seems to work (though I'm still not sure if this is how I was supposed to do this), but every time I added a new comment to the first position (after the header), I get extra white spaces added to the top of the comments section. I looked over the code and I have no idea what could add an empty section each time i add a new comment.
