How can i have a ListView inside a NestedScrollView

Question

I have created an app with a page that need to load content dynamically from web service. I want to have listview that can scroll together with a linear layout inside NestedScrollView. But when the contents is loaded to the listview, it doesn't stretch to its full height.

Here is my code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.myquestionth.myquestionth10.Profile2Activity"
    tools:showIn="@layout/activity_profile2">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#BBBBBB" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Media heading"
                android:id="@+id/textView2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis."
                android:id="@+id/textView8" />

        </LinearLayout>

        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#70bcf5" />

    </LinearLayout>

</android.support.v4.widget.NestedScrollView>

I have some searched about scrollview cannot be nested. This is an example i want according to my layout designing from Google play review page. What the method they use? Suggest me if i do something wrong. Many thanks.

Here is what i want.

Solution 1

Well, I would suggest you 2 ways to solve that problem:

1) Try to make LinearLayout a header of your ListView. Note that header should be inflated as it is written here.

2) You mentioned that you use NestedScrollView, so maybe you should also try to replace ListView inside NestedScrollView with LinearLayout, as wise people suggested here, adding row views in loop similar to how your adapter works.

Good luck!

Solution 2

on Lollipop onwards you can use

yourtListView.setNestedScrollingEnabled(true);

This enable or disable nested scrolling for this view if you need backwards compatibility with older version of the OS you'll have to use the RecyclerView.

Solution 3

Just use this code, if you want to make listview expand in a nestedscrollview. Pass the listview reference to the function at the end of creating listview.

private static void setListViewHeightBasedOnChildren(ListView listView) {
    ListAdapter listAdapter = listView.getAdapter();
    if (listAdapter == null)
        return;

    int desiredWidth = View.MeasureSpec.makeMeasureSpec(listView.getWidth(), View.MeasureSpec.UNSPECIFIED);
    int totalHeight = 0;
    View view = null;
    for (int i = 0; i < listAdapter.getCount(); i++) {
        view = listAdapter.getView(i, view, listView);
        if (i == 0)
            view.setLayoutParams(new ViewGroup.LayoutParams(desiredWidth, ViewGroup.LayoutParams.WRAP_CONTENT));

        view.measure(desiredWidth, View.MeasureSpec.UNSPECIFIED);
        totalHeight += view.getMeasuredHeight();
    }
    ViewGroup.LayoutParams params = listView.getLayoutParams();
    params.height = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));
    listView.setLayoutParams(params);
}

Solution 4

Instead of add a ListView below a Linear Layout and inside a ScrollView, I would suggest to put everything inside the ListView.

Yes you can.

Implement (override) following method on your adapter:

public class MyAdapter extends BaseAdapter {
    // One view to Header
    // One view to filter options ("most helpful first" and "Options")
    // One view to comments
    private final static int VIEW_HEADER = 0;
    private final static int VIEW_OPTIONS = 1;
    private final static int VIEW_COMMENTS = 2;
    private final static int VIEW_TYPE_MAX = 3;

    @Override
    public int getViewTypeCount () {
        // It will return 3 since I have 3 different types of VIEW
        return VIEW_TYPE_MAX;
    }

    @Override
    public int getItemViewType(int position) {
        if (position == 0)
            return VIEW_HEADER;
        else if (position == 1)
            return VIEW_OPTIONS;
        else
            return VIEW_COMMENTS;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            if(getItemViewType(position) == VIEW_HEADER)
                // Inflate HEADER Layout
            else if (getItemViewType(position) == VIEW_OPTIONS)
                // Inflate Options Layout
            else
                // Inflate comments Layout
        }

        // Fill the view contents according to its type
        ....
        return convertView;
    }
}

Android will re-use the views. However Android will re-use views of the same type always.

View more solutions

Comments

[Marcus]

Thanks Guiherme i will try this.

[W0rmH0le]

You are welcome.. Try Alex Pepper answer as well... it seems simpler