Making Recyclerview Fixed Height and Scrollable

Question

SOLVED CHECK ANSWER BELOW...

So I am trying to create a comments functionality for my Android app and I want to display the comments inside a recyclerview and then have a button and textview below the recyclerview to add comments. I want to have the recyclerview a certain height and make it scrollable if there are lots of comments because I dont want the users to have to scroll down the screen to find the add button.

I couldn't get it to work so I was wondering if anyone else had that issue.

I have all the adapter and everything set up, I am just having trouble with the recyclerview.

Thanks.

I prob was not clear on what I was trying to accomplish. I am trying to create a cardview where it will display all the comments and the ability to add a new comment. The recyclerview will take up approx 80% of the height and then the last 20% is for the edittext and button.

My XML (Scroll to last cardview where the recyclerview is)

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/scrollview">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ProfilePageActivity"
    >

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/profilepagetoolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:minHeight="?attr/actionBarSize">

    </android.support.v7.widget.Toolbar>
    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_marginTop="35dp"
        android:layout_below="@+id/profilepagetoolbar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:id="@+id/aboutCard">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:gravity="center_vertical"
            android:orientation="vertical"
            android:layout_alignTop="@+id/aboutCard"
            android:focusable="true"
            android:focusableInTouchMode="true">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginEnd="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginTop="-60dp"
                android:gravity="center_vertical"
                android:maxLines="1"
                android:textColor="@color/text"
                android:textSize="20sp"
                android:text="ABOUT" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/dividers" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingTop="10dp">

                <ImageView
                    android:id="@+id/nameicon"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_margin="8dp"
                    android:transitionName="appIcon"
                    android:background="@drawable/ic_account_circle_black_24dp"/>
                <TextView
                    android:id="@+id/Name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="4dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="8dp"
                    android:gravity="center_vertical"
                    android:maxLines="1"
                    android:textColor="@color/secondary"
                    android:textSize="20sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingTop="10dp">

                <ImageView
                    android:id="@+id/locationicon"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_margin="8dp"
                    android:transitionName="appIcon"
                    android:background="@drawable/ic_map_black_24dp"/>
                <TextView
                    android:id="@+id/Location"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="4dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="11dp"
                    android:gravity="center_vertical"
                    android:maxLines="1"
                    android:textColor="@color/secondary"
                    android:textSize="15sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingTop="10dp">

                <ImageView
                    android:id="@+id/websiteIcon"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_margin="8dp"
                    android:transitionName="appIcon"
                    android:background="@drawable/ic_explore_black_24dp"/>
                <TextView
                    android:id="@+id/Website"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="4dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="11dp"
                    android:gravity="center_vertical"
                    android:maxLines="1"
                    android:textColor="@color/secondary"
                    android:textSize="15sp" />
            </LinearLayout>

        </LinearLayout>
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_marginTop="35dp"
        android:layout_below="@+id/aboutCard"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:id="@+id/writeComment"
        android:layout_alignParentTop="false"
        android:layout_alignParentBottom="false">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:gravity="center_vertical"
            android:orientation="vertical"
            android:focusable="true"
            android:focusableInTouchMode="true">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginEnd="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginTop="-100dp"
                android:gravity="center_vertical"
                android:maxLines="1"
                android:textColor="@color/text"
                android:textSize="20sp"
                android:text="Comments" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/dividers"
                android:id="@+id/divider"/>

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

                <EditText
                    android:layout_width="244dp"
                    android:layout_height="wrap_content"
                    android:id="@+id/editComment"
                    android:layout_below="@+id/divider"
                    android:textColor="@color/text"
                    android:hint="Write a comment..."/>

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Create"
                    android:id="@+id/btnComment"
                    android:layout_gravity="center_horizontal" />
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/writeComment"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:id="@+id/commentsCard">

        <LinearLayout
            android:layout_alignParentTop="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginEnd="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginTop="0dp"
                android:gravity="center_vertical"
                android:maxLines="1"
                android:textColor="@color/text"
                android:textSize="20sp"
                android:text="Comments" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/commentsList"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:focusableInTouchMode="true" />

        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>
</ScrollView>

The second and first comment are being cut off.

Answer 1

So what my problem was that for some reason, Recyclerview didnt wrap_contents. I did some research (thanks stackoverflow) and found out a lot of people were having this issue and they posted solutions for this issue.

Basically, I had to use a customized linearlayoutmanger to fix the issue.

I will post the solution they posted and links to their questions. thanks for whoever tried to help, I appreciate it.

This is the extra file I needed. And then I had to set my recyclerview to use this layout instead of the default one.

public class MyLinearLayoutManager extends LinearLayoutManager {

public MyLinearLayoutManager(Context context, int orientation, boolean reverseLayout)    {
    super(context, orientation, reverseLayout);
}

private int[] mMeasuredDimension = new int[2];

@Override
public void onMeasure(RecyclerView.Recycler recycler, RecyclerView.State state,
                      int widthSpec, int heightSpec) {
    final int widthMode = View.MeasureSpec.getMode(widthSpec);
    final int heightMode = View.MeasureSpec.getMode(heightSpec);
    final int widthSize = View.MeasureSpec.getSize(widthSpec);
    final int heightSize = View.MeasureSpec.getSize(heightSpec);
    int width = 0;
    int height = 0;
    for (int i = 0; i < getItemCount(); i++) {
        measureScrapChild(recycler, i,
                View.MeasureSpec.makeMeasureSpec(i, View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(i, View.MeasureSpec.UNSPECIFIED),
                mMeasuredDimension);

        if (getOrientation() == HORIZONTAL) {
            width = width + mMeasuredDimension[0];
            if (i == 0) {
                height = mMeasuredDimension[1];
            }
        } else {
            height = height + mMeasuredDimension[1];
            if (i == 0) {
                width = mMeasuredDimension[0];
            }
        }
    }
    switch (widthMode) {
        case View.MeasureSpec.EXACTLY:
            width = widthSize;
        case View.MeasureSpec.AT_MOST:
        case View.MeasureSpec.UNSPECIFIED:
    }

    switch (heightMode) {
        case View.MeasureSpec.EXACTLY:
            height = heightSize;
        case View.MeasureSpec.AT_MOST:
        case View.MeasureSpec.UNSPECIFIED:
    }

    setMeasuredDimension(width, height);
}

private void measureScrapChild(RecyclerView.Recycler recycler, int position, int widthSpec,
                               int heightSpec, int[] measuredDimension) {
    View view = recycler.getViewForPosition(position);
    if (view != null) {
        RecyclerView.LayoutParams p = (RecyclerView.LayoutParams) view.getLayoutParams();
        int childWidthSpec = ViewGroup.getChildMeasureSpec(widthSpec,
                getPaddingLeft() + getPaddingRight(), p.width);
        int childHeightSpec = ViewGroup.getChildMeasureSpec(heightSpec,
                getPaddingTop() + getPaddingBottom(), p.height);
        view.measure(childWidthSpec, childHeightSpec);
        measuredDimension[0] = view.getMeasuredWidth() + p.leftMargin + p.rightMargin;
        measuredDimension[1] = view.getMeasuredHeight() + p.bottomMargin + p.topMargin;
        recycler.recycleView(view);
    }
}
}

After that. Change this:

 mProductsRecyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));

To this:

mRecyclerView.setLayoutManager(new MyLinearLayoutManager(getApplicationContext(),1,false));

Three new paramets(Context, int Orientation, boolean reverse); basically, i put 1 for orientation so it shows vertiacally, and false for revers so it shows up how it is ordered in my List.

Links to other people's question with same problem as me. Nested Recycler view height doesn't wrap its content

Nested Recycler view height doesn't wrap its content

Thanks once again guys. Hope this helps someone else

Answer 2

Add this code in your activity, will set the height of your recycler view to the 90% of user's screen window.

DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);

int a =  (displaymetrics.heightPixels*90)/100;

recylcerView.getLayoutParams().height =a;

and your comment layout below the your recyclerView

like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:id="@+id/mudit"
        >

        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="5dp"
            android:scrollbars="vertical" />
    </LinearLayout>

    <RelativeLayout
        android:layout_below="@+id/mudit"
        android:id="@+id/rl_commentWrap"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:ems="10" />

        <Button
            android:id="@+id/plusButton"
            style="android:buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:text="Send"
            android:textColor="#FFFFFF"
            android:translationZ="5dp" />
    </RelativeLayout>

</RelativeLayout>