Setting a Button height to wrap_content not doing what is expected

Issue

I'm trying to position a couple of buttons at the bottom of the page and have set their height to wrap_content, like so:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_container"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</com.google.android.material.appbar.AppBarLayout>

<TextView
    android:id="@+id/words_prompt"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/appbar"
    android:layout_margin="10dp"
    android:text="@string/words_prompt" />

<EditText
    android:id="@+id/word_list"
    android:singleLine="false"
    android:enabled="false"
    android:lines="10"
    android:textStyle="bold"
    android:textColor="@color/colorPrimaryDark"
    android:background="#ffffff"
    android:inputType="textMultiLine"
    android:layout_below="@+id/words_prompt"
    android:layout_margin="10dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:gravity="top"
    android:layout_width="180sp"
    android:layout_height="wrap_content"/>

<TextView
    android:id="@+id/time_left_prompt"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/word_list"
    android:layout_toEndOf="@+id/word_list"
    android:layout_below="@+id/words_prompt"
    android:layout_margin="10dp"
    android:text="@string/time_left_prompt" />

<TextView
    android:id="@+id/time_left"
    android:textStyle="bold"
    android:layout_below="@+id/words_prompt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/time_left_prompt"
    android:layout_toEndOf="@+id/time_left_prompt"
    android:layout_margin="10dp" />

<EditText
    android:id="@+id/typed_word"
    android:focusable="false"
    android:maxLength="10"
    android:inputType="text"
    android:textCursorDrawable="@drawable/custom_cursor"
    android:enabled="false"
    android:layout_below="@+id/word_list"
    android:digits="abcdefghijklmnopqrstuvwxyz"
    android:textColor="@color/colorPrimaryDark"
    android:layout_margin="10dp"
    android:hint="@string/type_hint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<Button
    android:id="@+id/done_button"
    android:enabled="false"
    android:text="@string/done_prompt"
    android:layout_toRightOf="@+id/typed_word"
    android:layout_toEndOf="@+id/typed_word"
    android:layout_alignBaseline="@+id/typed_word"
    android:layout_below="@+id/word_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<include
    layout="@layout/keyboardlayout_en"
    android:id="@+id/keyboard_layout"
    android:visibility="invisible"
    android:layout_centerInParent="true"
    android:layout_marginTop="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/done_button"/>

<Button
    android:id="@+id/start_timer_button"
    android:text="@string/start_timer_prompt"
    android:layout_margin="10dp"
    android:layout_below="@+id/done_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<TextView
    android:id="@+id/best_score_prompt"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/start_timer_button"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:text="@string/best_score_prompt" />

<TextView
    android:id="@+id/best_score"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/start_timer_button"
    android:layout_toRightOf="@+id/best_score_prompt"
    android:layout_toEndOf="@+id/best_score_prompt"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginEnd="10dp" />

<TextView
    android:id="@+id/elapsed_time_prompt"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="invisible"
    android:layout_below="@+id/best_score_prompt"
    android:layout_margin="10dp"
    android:text="@string/elapsed_time_prompt" />

<TextView
    android:id="@+id/elapsed_time"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="invisible"
    android:layout_below="@+id/best_score_prompt"
    android:layout_toRightOf="@+id/elapsed_time_prompt"
    android:layout_toEndOf="@+id/elapsed_time_prompt"
    android:layout_margin="10dp" />

<Button
    android:id="@+id/reset_button"
    android:text="@string/reset_prompt"
    android:enabled="false"
    android:layout_alignParentBottom="true"
    android:layout_below="@+id/best_score_prompt"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/quit_button"
    android:text="@string/quit_prompt"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_below="@+id/best_score_prompt"
    android:layout_marginRight="10dp"
    android:layout_marginEnd="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</RelativeLayout>

But the layout renders as this:

Why are the heights so off and what do I need to do to fix this (without hard-coding the button height with numbers or adding top margins)?

Solution

Remove in both buttons:

android:layout_below="@+id/best_score_prompt"

With:

Without:

Answered By - Gabriele Mariotti