Android + Use ViewFlipper to flip individual items within a ListView?

Question

This is probably a stupid question.

I know I can wrap a ListView in ViewFlipper, but can we wrap individual ListView Items in a ViewFlipper? For instance, the latest Twitter app uses a ListView to display Tweets. It also allows you to set settings on individual items by sliding the tweet out of the way exposing the setting option icons below. Is this a custom implementation or do we have the ability to create something similar using ListView and ViewFlipper? Thanks, any advice is appreciated!

---

I've spent some time on this and got the ListView to display additional content via the ViewFlipper. However, the view only seems to "flip" on the last item in the ListView. How do I get each item to flip when clicked? Here's some code:

row.xml

<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/flipper" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:id="@+id/toptext" android:layout_width="fill_parent"
                android:layout_height="0dip" android:layout_weight="1"
                android:gravity="center_vertical" />
    <TextView android:id="@+id/bottomtext" android:layout_width="fill_parent"
                android:layout_height="0dip" android:layout_weight="1"
                android:gravity="center_vertical" />
</ViewFlipper>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ListView android:id="@id/android:list" android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

ListActivityView.java - extends ListActivity

    ...
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    ...
    }

    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
        super.onListItemClick(l, v, position, id);
        // doesn't matter which line is clicked
        // only the last item in the ListView displays the bottomText
        viewFlipper.showNext(); 
    }

ListingAdapter.java - extends ArrayAdapter

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;

        if (v == null) {
            LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = vi.inflate(R.layout.row, null);

            viewFlipper = (ViewFlipper) v.findViewById(R.id.flipper);
        }

Answer 1

If I am getting your question correct - you can use ViewFlipper inside a layout that defines a row in your list and init it the way you like when rendering corresponding view

Answer 2

Below code helps you achieve a requirement for having a view flipper in list view with invidual row flipping
## xml file ##

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/regularLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="@dimen/activity_horizontal_margin">

    <ViewFlipper
        android:id="@+id/row_item_flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <TextView
                android:id="@+id/list_item"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Regular Layout"
                android:textSize="28sp" />

            <Button
                android:text="Flip"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/front_button" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <TextView
                android:id="@+id/backTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Flip row done"
                android:textSize="18sp" />

            <Button
                android:text="Flip back"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/back_button" />
        </LinearLayout>
    </ViewFlipper>
</LinearLayout>


----------
## Java code ##


    @Override
    public ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_item, parent, false);
        return new ItemViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(final ItemViewHolder holder, int position) {

        final CustomItem data = dataList.get(position);
            holder.regularLayout.setVisibility(View.VISIBLE);
            holder.swipeLayout.setVisibility(View.GONE);
            holder.listItem.setText(data.dataItemValue );
            holder.backTextView.setText(data.dataItemValue + " position : "+ position);
            holder.viewFlipper.setFlipInterval(0);
            holder.viewFlipper.setInAnimation(null);
            holder.viewFlipper.setOutAnimation(null);
            if(holder.viewFlipper.getDisplayedChild()==0 && data.isFlipON){
                holder.viewFlipper.setDisplayedChild(1);
            } else if(holder.viewFlipper.getDisplayedChild()==1 && !data.isFlipON){
                holder.viewFlipper.setDisplayedChild(0);
            }else if(data.isFlipON){
                holder.viewFlipper.setDisplayedChild(1);
            }else{
                holder.viewFlipper.setDisplayedChild(0);
            }



        holder.frontButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                AnimationFactory.flipTransition(holder.viewFlipper, AnimationFactory.FlipDirection.LEFT_RIGHT);
                data.isFlipON = true;
            }
        });
        holder.backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                data.isFlipON = false;

                AnimationFactory.flipTransition(holder.viewFlipper, AnimationFactory.FlipDirection.LEFT_RIGHT);
            }
        });

    }