Android Listview Custom Partition List Title

Question

How can I implement a custom section or title of a ListView application like Instagram in android.

http://prsarahevans.com/wp-content/uploads/2011/06/photo.PNG

When the panel with userpic is scrolled, the name and time are still present, and when another title panel approaches near it, animate, for example, push it up.

Thanks.

Answer 1

I managed to solve this problem using the scroll listener in the list. (checked on 2.1)

Let's say that for each line of the list I have a layout similar to the one below. There is part of the content and part of the header. It doesn't matter what type of view is used for the title or content.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#FFFFFF"> <ImageView android:id="@+id/content" android:layout_width="fill_parent" android:layout_height="300dp" android:scaleType="centerCrop" android:src="@drawable/pic" android:background="#aaaaff" android:layout_marginTop="40dp"/> <TextView android:id="@+id/header" android:layout_width="fill_parent" android:layout_height="40dp" android:padding="12dp" android:text="Deneme Row" android:textColor="#000000" android:background="#99ffffff"/> </RelativeLayout> 

The testing scheme for the action is as follows:

 <?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="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" > </ListView> </LinearLayout> 

Finally, the code for the activity is given below. Here I had to have an adapter that uses ViewHolder to store the title view, as well as a variable to track the scroll change for each subsequent scroll event (previousTop). This is because offsetTopAndBottom () changes the offset of the view associated with the previous location.

 public class TestActivity extends Activity implements AbsListView.OnScrollListener{ ListView list; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); list = (ListView) findViewById(R.id.list); list.setAdapter(new Adapter(this)); list.setOnScrollListener(this); } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { //the listview has only few children (of course according to the height of each child) who are visible for(int i=0; i < list.getChildCount(); i++){ View child = list.getChildAt(i); ViewHolder holder = (ViewHolder) child.getTag(); //if the view is the first item at the top we will do some processing if(i == 0){ boolean isAtBottom = child.getHeight() <= holder.header.getBottom(); int offset = holder.previousTop - child.getTop(); if(!(isAtBottom && offset > 0)){ holder.previousTop = child.getTop(); holder.header.offsetTopAndBottom(offset); holder.header.invalidate(); } } //if the view is not the first item it "may" need some correction because of view re-use else if (holder.header.getTop() != 0) { int offset = -1 * holder.header.getTop(); holder.header.offsetTopAndBottom(offset); holder.previousTop = 0; holder.header.invalidate(); } } } @Override public void onScrollStateChanged(AbsListView view, int scrollState) {} private static class Adapter extends ArrayAdapter<String> { public Adapter(Context context) { super(context, R.layout.row, R.id.header); for(int i=0; i < 50; i++){ add(Integer.toString(i)); } } @Override public View getView(int position, View convertView, ViewGroup parent) { if(convertView == null){ convertView = LayoutInflater.from(getContext()).inflate(R.layout.row, parent, false); ViewHolder holder = new ViewHolder(); holder.header = (TextView) convertView.findViewById(R.id.header); convertView.setTag(holder); } ViewHolder holder = (ViewHolder) convertView.getTag(); holder.header.setText(getItem(position)); return convertView; } } private static class ViewHolder { TextView header; int previousTop = 0; } } 

Answer 2

I improved the Siyamed question a bit so that the title does not disappear when the view is redrawn, for example, if the bitmap in the listview element is changed.

Instead of using coordinates relative to the last position, I use coordinates relative to the top of the view and use padding instead of offsets.

 @Override public void onScroll(AbsListView absListView, int firstVisibleItem, int visibleItemCount, int totalItemCount) { for(int i=0; i < list.getChildCount(); i++){ View child = list.getChildAt(i); ViewHolder holder = (ViewHolder) child.getTag(); if(i == 0){ try { boolean isAtBottom = child.getHeight() <= holder.movingHeader.getBottom(); if(!(isAtBottom)){ if (child.getTop() >= 0){} else if (child.getHeight() - movingHeader.getHeight() - 1 > -child.getTop()) { holder.movingHeader.setPadding(0, -child.getTop(), 0, 0); holder.movingHeader.invalidate(); } else { holder.movingHeader.setPadding(0, child.getHeight() - movingHeader.getHeight(), 0, 0); holder.movingHeader.invalidate(); } } } catch (Exception e) { e.printStackTrace(); } } else if (holder.movingHeader.getPaddingTop() != 0) { holder.movingHeader.setPadding(0, 0, 0, 0); holder.movingHeader.invalidate(); } } } 

Answer 3

If you use a list view, you have 2 views inside the list item. One is the title, and the other is the element.

Hide the title first, and when you change the scroll status or touch the user, the list item changes the visibility of the title.

Answer 4

After your setcontentview does something like the code below.

  ListView list = getListView(); View footer = getLayoutInflater().inflate(R.layout.footerlayout, list, false); View header = getLayoutInflater().inflate(R.layout.headerlayout, list, false); list.addHeaderView(header); list.addFooterView(footer); 

Answer 5

I know this question is a bit outdated, but he managed to find the StickyListHeaders library that does a pretty good job of abstracting the creation of section headers.

https://github.com/emilsjolander/StickyListHeaders