Image and ExpandableListView in the same Scroll View

Question

I have a layout which contains a title, an image and the a ExpandableListView. My problem is that while the title doesn't have to scroll, I would like the image and the ExpandaleListView to be one unique block that can be scrolled.

Until now I cannot see the ExpandibleListView unless I add a height value.

This is my layout code:

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

    <LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

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

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/title"/>

</LinearLayout>

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

    <LinearLayout
                android:id="@+id/userContent"
                android:layout_width="match_parent"
                android:layout_height="175dp"
                android:background="@color/black"
                android:gravity="center_vertical">

                <RelativeLayout
                    android:id="@+id/userDrawer"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/transparent" >

                    <ImageView
                        android:id="@+id/ImgDrawer"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_alignParentLeft="true"
                        android:layout_centerVertical="true"
                        android:contentDescription="@string/app_name"
                        android:scaleType="centerCrop"
                        android:src="@drawable/ic_user" />

                </RelativeLayout>
            </LinearLayout>

<ExpandableListView
        android:id="@+id/lvExp"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:focusable="false"/>   

</LinearLayout>
</ScrollView>
</LinearLayout>

score 3 · Accepted Answer · answered Aug 06 '14 at 23:08

Solved putting the image into a layout called "header" and then putting this code into the activity:

final ExpandableListView elv = (ExpandableListView) v.findViewById(R.id.lvExp);
View header = inflater.inflate(R.layout.header, null);
elv.addHeaderView(header);

score 0 · Answer 2 · answered Jul 28 '14 at 02:00

Your layout file nested too deep, you should remove some unnecessary group, please try the layout file below:

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

    <LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/title"/>

    <ScrollView 
                android:layout_width="match_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"> 
    <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical">
                <ImageView
                        android:id="@+id/ImgDrawer"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_alignParentLeft="true"
                        android:layout_centerVertical="true"
                        android:contentDescription="@string/app_name"
                        android:scaleType="centerCrop"
                        android:src="@drawable/ic_user" />

<ExpandableListView
        android:id="@+id/lvExp"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:focusable="false"/>   

</LinearLayout>
</ScrollView>
</LinearLayout>

score 0 · Answer 3 · edited May 23 '17 at 12:23

The shortest & easiest solution for the ListView inside a ScrollView problem.

You do not have to do anything special in layout.xml file nor handle anything on the parent ScrollView. You only have to handle the child ListView. You can also use this code to use any type of child view inside a ScrollView & perform Touch operations.

Just add these lines of code in your java class :

ListView lv = (ListView) findViewById(R.id.layout_lv);
lv.setOnTouchListener(new OnTouchListener() {
// Setting on Touch Listener for handling the touch inside ScrollView
@Override
public boolean onTouch(View v, MotionEvent event) {
// Disallow the touch request for parent scroll on touch of child view
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
} 
});

If you put ListView inside a ScrollView then all the ListView does not stretch to its full height. Below is a method to fix this issue

/**** Method for Setting the Height of the ListView dynamically.
 **** Hack to fix the issue of not showing all the items of the ListView
 **** when placed inside a ScrollView  ****/
public static void setListViewHeightBasedOnChildren(ListView listView) {
ListAdapter listAdapter = listView.getAdapter();
if (listAdapter == null)
    return;

int desiredWidth = MeasureSpec.makeMeasureSpec(listView.getWidth(), 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, LayoutParams.WRAP_CONTENT));

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

To use this method just pass the ListView inside this method :

ListView list = (ListView) view.findViewById(R.id.ls);
setListViewHeightBasedOnChildren(list);

For using with ExpandableListView

ExpandableListView: view = listAdapter.getView(0, view, listView);
int widthMeasureSpec =    View.MeasureSpec.makeMeasureSpec(ViewGroup.LayoutParams.MATCH_PARENT,   View.MeasureSpec.EXACTLY);
int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(ViewGroup.LayoutParams.WRAP_CONTENT, View.MeasureSpec.EXACTLY);
view.measure(widthMeasureSpec, heightMeasureSpec);

For ListView with variable items height use the below link

ListView inside ScrollView is not scrolling on Android

adding the onTouch intercept code didn't work for me -- the expandable listview still scrolls independently of its parent scrollview :( — kip2, Feb 27 '15 at 08:49

Image and ExpandableListView in the same Scroll View

3 Answers3