Elements outside screen in android xml

Question

So I'm trying to fix my UI on an android project, however some elements end up off screen with my current xml. I have no idea why, which is why I'm asking this question.

I have a listview containing songs and two textviews with current song's artist and song name. Under which, I have 3 floating actionbuttons. (Forward, play/pause/next)

Code:

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listContainer"
        android:layout_marginBottom="100dp"
        >
        <ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"/>
    </LinearLayout>
    <TextView
        android:id="@+id/currentSongName"
        android:layout_below="@+id/listContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#B2B6B8"
        android:text="TEST"
        />
    <TextView
        android:id="@+id/currentSongArtist"
        android:layout_below="@+id/currentSongName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#B2B6B8"
        android:text="TEST"
        />
    <LinearLayout
        android:layout_below="@+id/currentSongArtist"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:weightSum="3"
        android:background="#B2B6B8"
        >

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/prev_song"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_media_previous" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/play_pause"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_media_pause" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/next_song"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_media_next" />

    </LinearLayout>
</RelativeLayout>

However, when I use;

android:layout_below="@+id/listContainer"

In the first textView, all UI elements below listContainer dissapear. And when I remove it, all said elements are just aligned to top and on top of the listview.

Why is this, and how can I place the textfields and button-linearlayout so it is aligned below the listview margin?

Answer 1

The problem is that your ListView and its parent LinearLayout have a height of match_parent. This means that those two elements will be as tall as the parent element.

If you try to place Views below a View that takes up the entire height of the screen, they will be somewhere below the bottom of the screen.

The "right" solution depends a bit on what exactly you are going for. Sometimes you need to think about your layout from the bottom up instead of from the top down. One solution would be something like this, which aligns a bottom view to the bottom of the screen and the list above that view:

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

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_view" />

    <TextView
        android:id="@+id/bottom_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />

</RelativeLayout>