Develop Reference

TextView not appearing on emulator and real device

This is how the design looked in Preview tab
But when I run it on emulator or real device, valid until date not appearing.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="#dimen/card_margin"
android:elevation="3dp"
card_view:cardCornerRadius="#dimen/sell_item_radius">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_light">
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/validUntil"
android:textColor="#color/colorPrimaryDark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/date"
android:text="date"
android:textColor="#color/colorPrimaryDark" />
</RelativeLayout>
<ImageView
android:id="#+id/itemImage"
android:layout_width="match_parent"
android:layout_height="#dimen/sell_item_image_height"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/ic_camera" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/itemImage"
android:layout_alignParentRight="true"
android:src="#drawable/ic_favourite" />
<TextView
android:id="#+id/imageCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:text="#string/imageCount"
android:textColor="#color/blue" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/itemImage"
android:layout_marginTop="-3dp"
android:paddingLeft="#dimen/sell_item_image_padding"
android:paddingTop="#dimen/sell_item_image_padding"
android:paddingRight="#dimen/sell_item_image_padding"
android:text="#string/title"
android:textColor="#color/blue"
android:textSize="#dimen/sell_item_title" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginRight="10dp"
android:paddingLeft="#dimen/sell_item_image_padding"
android:paddingRight="#dimen/sell_item_image_padding"
android:text="#string/price" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Thanks

The reason that you don't see some of your views is that all of your views width and height are wrap_content - so you created a layout that your views can expand according to the content of them (if you will add 200 dp on 600 dp image and set width and height to wrap_content this will be your view size) and you can see that even on your preview - your views are overlapping one another.
So you can either use fixed size on your views, but by doing so you are entering the danger zone - your layout won't be responsive to all screen sizes, that's because different phones got different screen size and what may look good on one phone won't look good on another phone.
Sure, you can fix this by creating a single layout for every screen size but that's a lot of work.
You can also define your relative layout with android:weightSum and layout_weight
But there is an even better option:
You can use ConstraintLayout to achieve a single layout that is responsive to all screen sizes, all of its view hierarchy is flat (no nested view groups) and is it really simple to use.
Here is an example for a layout that looks just like you want with constraintLayout :
<androidx.constraintlayout.widget.ConstraintLayout 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">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView13"
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/textView10"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="heart"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView8" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/textView14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8"
tools:src="#tools:sample/avatars[11]" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is how it looks in portrait :
And landscape:

Finally I solved it ! I just move the imageView with id itemImage, place it after first RelativeLayout.

How to update constraints after scale a view in Android ConstraintLayout

Update:
I just used setTextScaleX instead of setScalex to scale the textView and it worked as what I expected this time.
Just like the photos above.
I use ConstraintLayout to keep the space between "$" and center textView and "00".
When I set 5555 to the center textView, it became wider, but I want to keep its original size.
So I scaled the "5555" part, I found the constraints did not update as well.
Can anybody give me some advice?
Thanks a lot!
My layout xml is as following.
<android.support.constraint.ConstraintLayout 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"
tools:context="com.echo.tipcalculator.fragments.FeeUnitFragment">
<TextView
android:id="#+id/fee_title"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp" />
<TextView
android:id="#+id/fee_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$"
android:textSize="20dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/fee_title"
app:layout_constraintLeft_toLeftOf="#+id/fee_title" />
<TextView
android:id="#+id/fee_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:clickable="true"
android:ellipsize="end"
android:gravity="top"
android:includeFontPadding="false"
android:maxLines="1"
android:text="0"
android:textSize="80dp"
app:layout_constraintLeft_toRightOf="#+id/fee_unit"
app:layout_constraintTop_toTopOf="#+id/fee_unit" />
<TextView
android:id="#+id/fee_decimal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00"
android:textSize="20dp"
app:layout_constraintTop_toTopOf="#+id/fee_main"
app:layout_constraintLeft_toRightOf="#+id/fee_main"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp" />
</android.support.constraint.ConstraintLayout>

Is this design possible with ConstraintLayout?

I was playing around with ConstraintLayout and I can't guess how to do this simple design using only a ConstraintLayout.
Simple design
Each TextView is centered with its image.
Each image is separated with the previous image with a fixed margin.
All views, treated like a group, are centered horizontally.
I have implemented the design using RelativeLayout:
<?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:layout_width="match_parent" android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="4dp">
<RelativeLayout
android:id="#+id/androidALayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/androidAIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/androidATV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android A"
android:layout_below="#id/androidAIV"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/androidBLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/androidALayout"
android:layout_marginLeft="32dp">
<ImageView
android:id="#+id/androidBIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/androidBTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android B"
android:layout_below="#id/androidBIV"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/androidCLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/androidBLayout"
android:layout_marginLeft="32dp">
<ImageView
android:id="#+id/androidCIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/androidCTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android C"
android:layout_below="#id/androidCIV"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/androidDLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/androidCLayout"
android:layout_marginLeft="32dp">
<ImageView
android:id="#+id/androidDIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/androidDTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android D"
android:layout_below="#id/androidDIV"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Is this possible?

It surely is possible. The best approach is choosing the first ImageView as reference element to which constrain everything else.
Center the TextView by assigning the left and right constraints to its image left and right edges respectively.
Then assign each image left and top contrain to their right and top edge of the previous image respectively.
Finally select all the images in the layout editor, right click and Center Horizontally (this will chain them to fit the screen width)
Example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/imageView"
app:layout_constraintRight_toRightOf="#+id/imageView"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="30dp"
app:layout_constraintRight_toLeftOf="#+id/imageView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/imageView2"
app:layout_constraintRight_toRightOf="#+id/imageView2"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintLeft_toRightOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintRight_toLeftOf="#+id/imageView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/imageView3"
app:layout_constraintRight_toRightOf="#+id/imageView3"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintLeft_toRightOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintRight_toLeftOf="#+id/imageView4" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/imageView4"
app:layout_constraintRight_toRightOf="#+id/imageView4"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imageView4" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintLeft_toRightOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

I've found the solution: Group views in ConstraintLayout to treat them as a single view
Using chains, multiple views could be treated like a group.

Correct layouts to use in this situation?

I'm completely new to Android development, and so I'm still a little confused as to which layouts to use in certain situations.
I need to recreate this:
Where you have 2 lines of text (one above, one below) aligned next to an image. This is all within a card.
Bold Text and Text should be centered with each other vertically. Subtext should be 10dp below the first line. The space between the lines of text and the image is 16dp.
First I used only a RelativeLayout with an ImageView and 3 TextView in it, but that felt wrong and unorganized.
So then I tried this:
http://i.imgur.com/eph6Em8.png
But I'm still not sure if this is the most correct way to do this.
What should I change?

Try this:
Set your "Parent Layout" as "RelativeLayout".
Inside this relative layout, take an ImageView and set "alignParentLeft" property to true and also "centreInparent" to true.
Now, inside this RelativeLayout, take a LinearLayout with orientation set to Veritical and "toRightOf=#id/ImageView". Inside this LinearLayout, take RelativeLayout (RelativeLayout2) as first child and inside it Take two "TextViews".
One with "alignParentLeft=true" and "width = matchparent". While the second one "alignParenRight=true" and "width = wrap_content". Now, what you need to is, in the first "TextView" set "toLeftOf=#id/secondTextView".
Now about the last "TextView". Just create a "TextView" inside the LinearLayout (that you created above with vertical orientation) and place it as second child.
This will create a perfect layout. It is also an easy way to create one.

You can use Constraint Layout to achieve your desired UI. Below is the xml code to implement your UI.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:src="#drawable/def_doc"
android:id="#+id/rvMsg_img"
android:maxHeight="80dp"
android:maxWidth="80dp"
android:minHeight="80dp"
android:minWidth="80dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/viewLine" />
<TextView
android:text="Kevin De Bruyne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_name"
android:textColor="#color/textBlack"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="0.0"
android:textSize="16sp"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time" />
<TextView
android:text="Hello developer. please check this message for long length. max length to 50 characters."
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_last"
android:maxLines="2"
android:ellipsize="end"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/rvMsg_name"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />
<TextView
android:text="09:50 AM"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_time"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="1.0" />
<View
android:id="#+id/viewLine"
android:layout_height="2dp"
android:layout_width="0dp"
android:background="#EAEAEA"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it will help you.

Try this layout structure
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="centar"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BOLD TEXT"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sub Text" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Text" />
tru this code to achive gole.

RecyclerView scrolling as part of parent layout and not as a separate scroll (Similar to YouTube video comments)

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.