Layout preview and actual device do not match

Question

I don't know why this is happening. I bet it's something real simple but I could not figure out why. I have a comment activity with a Relative Layout as a parent and a RecyclerView as well as a Linear Layout (with 2 children: an edit text and a submit button) as children. my layout.xml is as follow

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_comment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.erik.appname.CommentActivity">


<android.support.v7.widget.RecyclerView
    android:padding="10dp"
    android:layout_width="match_parent"
    android:layout_height="470dp"
    android:id="@+id/posted_comments">

</android.support.v7.widget.RecyclerView>



<LinearLayout
    android:id="@+id/write_comment"
    android:gravity="bottom"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/posted_comments"
    android:layout_alignParentStart="true">

    <EditText
        android:layout_alignParentBottom="true"
        android:paddingLeft="10dp"
        android:layout_width="0dp"
        android:layout_weight="8"
        android:background="@drawable/input_outline2"
        android:layout_height="match_parent"
        android:inputType="textPersonName|textMultiLine"
        android:text=""
        android:gravity="left|center"
        android:hint="Comment..."
        android:textSize="20dp"
        android:maxLength="100"
        android:id="@+id/current_comment" />

    <ImageButton
        android:src="@drawable/submit"
        android:scaleType="fitCenter"
        android:padding="5dp"
        android:background="@drawable/input_outline2"
        android:layout_alignParentBottom="true"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:id="@+id/submit"
        android:layout_toEndOf="@+id/current_comment"
        />


</LinearLayout>

this is what I got from the preview (which I want it to look like) preview

while this is the screenshot from the actual device real device

why are the edittext and button below the recyclerview behave that way?

I've tried many things such as wrapping everything in Linear Layout, wrapping the RelativeLayout in a Linear Layout and the Linear layout containing the edit text and button in another and tried to stack them up and use layout_weight to determine the proportion... can't seem to figure out the correct way to do it.

Many thanks for the help to come!

Answer 1

You have specified your RecyclerView height to android:layout_height="470dp", which is limited to 470dp and after taking the predefined height it will leave the rest for the bottom LinearLayout. Defining hard code height is not a good idea. Try to remove the height and width of the RecyclerView to match_parent it will work.

Solved code [Edit with your next values]:

<?xml version="1.0" encoding="utf-8"?>

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

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/posted_comments"
    android:layout_above="@+id/write_comment">

</android.support.v7.widget.RecyclerView>


<LinearLayout
    android:id="@+id/write_comment"
    android:gravity="bottom"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true">

    <EditText
        android:paddingEnd="10dp"
        android:layout_width="0dp"
        android:layout_weight="8"
        android:background="@mipmap/ic_launcher"
        android:layout_height="match_parent"
        android:inputType="textPersonName|textMultiLine"
        android:text=""
        android:gravity="left|center"
        android:hint="Comment..."
        android:textSize="20sp"
        android:maxLength="100"
        android:id="@+id/current_comment" />

    <ImageButton
        android:src="@mipmap/ic_launcher"
        android:scaleType="fitCenter"
        android:padding="5dp"
        android:background="@mipmap/ic_launcher"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:id="@+id/submit"
        android:layout_toEndOf="@+id/current_comment"
        />


</LinearLayout>
</RelativeLayout>