Making list view strech entire screen height

Question

I have a list view design for a recipes app. Each item consists of a image, title, description and number of calories. My problem is that it doesnt fill the entire screen, but instead it gives a scrollbar on the right.

How can I make it fill the screen? Also, is there a better way of showing the list items without using tables?

list.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fadingEdgeLength="0dp"
        android:fillViewport="true"
        android:overScrollMode="never"
        android:scrollbars="none">

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

            <ListView
                android:id="@+id/listViewRecipes"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:dividerHeight="1dp"
                android:padding="10dp"></ListView>

        </RelativeLayout>

    </ScrollView>

</FrameLayout>

list_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:padding="8dp"
    android:fadingEdgeLength="0dp"
    android:fillViewport="true"
    android:overScrollMode="never"
    android:scrollbars="none">
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1">

        <TableRow
            android:id="@+id/tableRow1">

            <!-- Image -->
            <ImageView
                android:id="@+id/listViewRecipeImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fillViewport="true"
                android:overScrollMode="never"
                app:srcCompat="@drawable/img_pixel" />
            <!-- //Image -->

            <!-- Title, Introduction -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_marginLeft="6dp"
                android:fadingEdgeLength="0dp"
                android:fillViewport="true"
                android:overScrollMode="never"
                android:scrollbars="none">

                <TextView
                    android:id="@+id/listViewRecipeTitle"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:text="Title"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@color/colorBlack"/>
                <TextView
                    android:id="@+id/listViewRecipeIntroduction"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="@color/colorBlack"
                    android:text="Introduction"/>
            </LinearLayout>
            <!-- //Title, Introduction -->

            <!-- Numbers -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <TableLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginTop="6dp">
                    <TableRow>

                        <TextView
                            android:id="@+id/textViewServingCalories"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="@color/colorDarkGray"
                            android:text="xx" />
                        <TextView
                            android:id="@+id/textViewServingCaloriesKcal"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textColor="@color/colorDarkGray"
                            android:layout_marginLeft="6dp"
                            android:text="@string/kcal_lowercase" />
                    </TableRow>
                </TableLayout>
                <TextView
                    android:id="@+id/textViewServingCaloriesKcalPerServing"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="@color/colorDarkGray"
                    android:text="@string/per_serving_lowercase" />
            </LinearLayout>
            <!-- //Numbers -->
        </TableRow>
    </TableLayout>
</LinearLayout>

Answer 1

This is a modify version of your code. You need to remove the outer scrollView since ListView is scrollable

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">


<ListView
    android:id="@+id/listViewRecipes"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:dividerHeight="1dp"
    android:padding="10dp">

</ListView>

</FrameLayout>

I have also remove the table layout and replace it with LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_weight="3">

    <ImageView
        android:id="@+id/listViewRecipeImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:overScrollMode="never"
        app:srcCompat="@drawable/add" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/listViewRecipeTitle"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Title"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorBlack"/>

        <TextView
            android:id="@+id/listViewRecipeIntroduction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/colorBlack"
            android:text="Introduction"/>

    </LinearLayout>

</LinearLayout>


<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingTop="8dp"
    android:layout_weight="1">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textViewServingCalories"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/colorPrimary"
            android:text="xx" />

        <TextView
            android:id="@+id/textViewServingCaloriesKcal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/colorPrimary"
            android:layout_marginLeft="6dp"
            android:text="Carolies" />

    </LinearLayout>

    <TextView
        android:id="@+id/textViewServingCaloriesKcalPerServing"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/colorPrimary"
        android:text="Per Server" />

</LinearLayout>

Answer 2

Listview contains an inner scrollview. Just remove the scrollview.

either use that RelativeLayout or just the Listview on your frame. And match parent it.