Solo Solo - 1 month ago 12
Android Question

Making list view strech entire screen height

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?

enter image description here

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 Source

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>