Android - make a LinearLayout that contains a scrollable ListView

Question

I know that everyone recommended that we never use ListView and ScrollView together, and I completely agree. However, I am currently stuck in a very simple scheme, such as the 8tracks profile page (as shown in the figure below), which includes an area for the user profile and a list of mixes they made. Therefore, it is generally desirable that users can simply scroll this page, which means that part of the profile will be displayed on top of the screen and gradually go out of view, and at the same time, the following list will be scrolled:

However, for now, all I can do is turn on the ListView within the LinearLayout , as well as my sketch.

With this design, I can only scroll down the list, while the profile area remains in the same place that sucks. So I'm looking for any idea to make the whole page scrollable, not just a list. Please help and thanks.

EDITED : Sorry for the misleading question. My problem is even more complicated, because the contents of the tabs are not just ListView - on one tab there is LinearLayout or GridView . Again, I want to make the whole page scrollable, but ScrollView cannot help, because if the contents of the tab are ListView or GridView , these views will be collapsed and, more importantly, this goes against the design rule.

Answer 1

I know that it's already late, but I am already a developer of 8tracks. The (old) 2.x application you mentioned above is being overwritten, but I can show you what the old developer did for the profile page.

Before moving on to this, I must say that this is not the best way to do this, but the 8tracks (2.x) application is deprecated.

So, back to the code ... ProfileActivity contains ProfileFragment .

The main layout that you see using the Follow button (and profile image) is as follows:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- Image, name, location --> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="10dip" > <com.gdub.widget.ImageViewClickable android:id="@+id/dj_avatar" android:layout_width="110dip" android:layout_height="110dip" android:layout_marginRight="10dip" android:background="@drawable/default_avatar_max200" android:scaleType="centerCrop" /> <com.gdub.widget.CollapsingTextView android:id="@+id/dj_location" style="@style/mix.counts" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dip" android:layout_toRightOf="@id/dj_avatar" /> <ViewSwitcher android:id="@+id/profile_action_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/dj_location" android:layout_toRightOf="@id/dj_avatar" > <Button android:id="@+id/follow_btn" style="@style/white_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/follow" /> <Button android:id="@+id/edit_profile_btn" style="@style/white_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/edit_profile" /> </ViewSwitcher> </RelativeLayout> <TextView android:id="@+id/dj_bio" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="-25dip" android:gravity="left|center_vertical" android:lineSpacingExtra="2dip" android:paddingLeft="10dip" android:paddingRight="10dip" android:textColor="@color/default_text" android:textSize="15sp" /> <include android:id="@+id/profile_tabs" layout="@layout/profile_tabs" /> </LinearLayout> 

And profile_tabs ...

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:visibility="gone" android:orientation="horizontal"> <include android:id="@+id/profile_mixes_button" layout="@layout/profile_tab" /> <include android:id="@+id/profile_followers_button" layout="@layout/profile_tab" /> <include android:id="@+id/profile_following_button" layout="@layout/profile_tab" /> </LinearLayout> 

So, as you can see, this is a regular layout with three buttons that mimic the tabs.

Tab content is also dictated by ViewSwitcher:

 <?xml version="1.0" encoding="utf-8"?> <ViewSwitcher xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/profile_view_switcher" android:layout_width="match_parent" android:layout_height="match_parent" android:inAnimation="@anim/fade_in_300" android:outAnimation="@anim/fade_out_300" android:background="@color/white"> <include android:id="@+id/profile_loading" layout="@layout/loading_view_full" /> <ListView android:id="@+id/profile_content_list" android:layout_width="match_parent" android:layout_height="match_parent" android:cacheColorHint="#00000000" android:divider="@null" android:dividerHeight="0dip" android:fadingEdge="none" /> </ViewSwitcher> 

This shows the boot wheel, and then switches to the list. There is no other scrollable ViewGroup.

And that’s basically it.

Now, if you want to scroll the WHOLE line, you need to use a custom adapter and set the above layout as a title (or at least use getItemType in the adapter in a smart way). Thus, the entire screen is a list (with all the optimizations available in the list).

We (ab) use this in the new 8tracks app under dev .;)

Answer 2

Try using the following on your list.

 listview.addHeaderView(v); 

Also remember, you must call this method before calling setAdapter () in your list.

enable your linearlayout where you have user data and tabs and add it as a title to the list.

Answer 3

You can try to make the profile and tabs the title of the list, and then update the contents of the list when you click the tabs. I don’t know if you want the tabs to disappear from view when scrolling.

Answer 4

In accordance with the UI guidelines and best practices, it is recommended that you do not use scrollable content inside Scrollview, and this prevents the scrollable content from scrolling.

When you put two scrollview widgets, just get confused as to the scroll view. Therefore, sometimes it cannot deliver a touch event.

But if you want to achieve scrolling, you can control it using the onTouch event for a specific view. And you need to design your layout accordingly.

But even if this requirement forces you to do such layouts. Try it...

Let's say it looks a bit like this ....

  <ScrollView android:id="@+id/parent_scroll" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1″ android:background="@drawable/dotted_bg" android:focusableInTouchMode="false"> <LinearLayout /> <LinearLayout /> <LinearLayout > <ScrollView android:id="@+id/child_scroll" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/text_box_bg"> <TextView android:id="@+id/text_description" android:layout_width="fill_parent" android:layout_height="fill_parent" android:textColor="@color/gray" android:textSize="12dip" android:padding="5dip" android:scrollbars="vertical"/> <!–ScrollView> </LinearLayout> 

Step 1. Provide a unique identifier for both scrolls.

Step 2: Get a link to this two scrolls in your activity.

  parentScroll=(ScrollView)findViewById(R.id.parent_scroll); childScroll=(ScrollView)findViewById(R.id.child_scroll); 

Step 3: Now install touch listeners for both.

  parentScroll.setOnTouchListener(new View.OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { Log.v(TAG,"PARENT TOUCH"); findViewById(R.id.child_scroll).getParent().requestDisallowInterceptTouchEvent(false); return false; } }); childScroll.setOnTouchListener(new View.OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { Log.v(TAG,"CHILD TOUCH"); // Disallow the touch request for parent scroll on touch of child view v.getParent().requestDisallowInterceptTouchEvent(true); return false; } }); 

Hope this helps you.