Reputation: 579
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>
Upvotes: 0
Views: 22
Reputation: 2493
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>
Upvotes: 1
Reputation: 3048
Listview contains an inner scrollview. Just remove the scrollview.
either use that RelativeLayout or just the Listview on your frame. And match parent it.
Upvotes: 0