Marat Marat - 4 months ago 14
Android Question

RelativeLayout does not expand with the heights of view elements

I have Relative layout the is set to

wrap_content
in height. It has 2 TextView and 2 EditText. However, the RelativeLayout does not match to the height of EditTexts.

Dashed Rectangle is the region highlighted by android studio preview tool as the borders of RelativeLayout.

The actual problem is that when I run the app the bottom edittext kind of goes below the Relative layout and so its bottom part disappears. Thereby, user can't see that bottom line and don't know that there is a textfield.

Android Studio Preview:

enter image description here

Problem and Result on Emulator:

enter image description here

XML file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">

<android.support.v4.widget.Space
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="5" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/numberOfDaysTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="@string/initialNumberOfDays"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="58sp" />

<TextView
android:id="@+id/daysText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/numberOfDaysTextView"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="@string/daysText"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="15sp" />

</RelativeLayout>

<android.support.v4.widget.Space
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/fromDatePickerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="@string/fromTextView"
android:textSize="15sp" />

<EditText
android:id="@+id/fromDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/fromDatePickerTextView"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_toEndOf="@+id/fromDatePickerTextView"
android:layout_toRightOf="@+id/fromDatePickerTextView"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />

<TextView
android:id="@+id/toDatePickerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@+id/fromDatePickerTextView"
android:layout_alignRight="@+id/fromDatePickerTextView"
android:layout_below="@+id/fromDatePickerTextView"
android:layout_marginTop="32dp"
android:text="@string/toTextView"
android:textSize="15sp" />

<EditText
android:id="@+id/toDate"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/toDatePickerTextView"
android:layout_marginLeft="28dp"
android:layout_marginStart="28dp"
android:layout_marginTop="22dp"
android:layout_toEndOf="@+id/toDatePickerTextView"
android:layout_toRightOf="@+id/toDatePickerTextView"
android:ems="10"
android:focusableInTouchMode="false"
android:inputType="date" />

</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
android:id="@+id/calculateDaysButton"
android:layout_width="160dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:layout_marginTop="40dp"
android:background="@drawable/button_bg"
android:text="@string/calculateButtonText"
android:textColor="@android:color/white" />

</RelativeLayout>

</LinearLayout>

Answer

You should use Linear Layout instead of Relative Layout.

Check out below code i have done some modification and applied with Linear Layout. You can modify with margin , height , width.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <android.support.v4.widget.Space
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/numberOfDaysTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="0"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="58sp" />

        <TextView
            android:id="@+id/daysText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/numberOfDaysTextView"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="Day"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="15sp" />

    </RelativeLayout>

    <android.support.v4.widget.Space
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="3" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/fromDatePickerTextView"
                android:layout_width="30dp"
                android:layout_height="wrap_content"

                android:text="to"
                android:textSize="15sp" />

            <EditText
                android:id="@+id/fromDate"
                android:layout_width="130dp"
                android:layout_height="45dp"

                android:layout_marginLeft="28dp"
                android:layout_marginStart="28dp"

                android:ems="10"
                android:focusableInTouchMode="false"
                android:inputType="date" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/toDatePickerTextView"
                android:layout_width="30dp"
                android:layout_height="wrap_content"

                android:layout_marginTop="32dp"
                android:text="feom"
                android:textSize="15sp" />

            <EditText
                android:id="@+id/toDate"
                android:layout_width="130dp"
                android:layout_height="wrap_content"

                android:layout_marginLeft="28dp"
                android:layout_marginStart="28dp"
                android:layout_marginTop="22dp"

                android:ems="10"
                android:focusableInTouchMode="false"
                android:inputType="date" />
        </LinearLayout>
    </LinearLayout>



    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/calculateDaysButton"
            android:layout_width="160dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="15dp"
            android:layout_marginTop="40dp"
            android:background="@drawable/button_bg"
            android:text="@string/calculateButtonText"
            android:textColor="@android:color/white" />

    </RelativeLayout>

</LinearLayout>

enter image description here

Hope this Solves your problem.