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);
        }

score 1 · Accepted Answer · answered Aug 04 '11 at 19:20

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

answered Aug 04 '11 at 19:20

Asahi

13,378
12
67
87

I've attempted to do just that, yet haven't been successful. I'll take a few more whacks tonight and post code if I still can't get it to work. Thanks for responding! – worked Aug 04 '11 at 20:49
`viewFlipper` seems to be a member - so it always references the last item returned by `getView()`. You need to reinit it in `onListItemClick()` before calling `showNext()` – Asahi Aug 05 '11 at 05:38
Could you clarify a bit more on reinit it? Thanks! Note, I swapped the ViewFlipper for a FrameLayout and I still have the same issue. Also instead of "viewFlipper.showNext();" I use a custom animation. – worked Aug 07 '11 at 21:59
`getView` is called for every item in your list. Since you init `viewFlipper` in `getView` it will always reference `ViewFlipper` view from the last list item being processed (that's why you always see flip on the last list row no matter what you click). As a solution you could initialize `viewFlipper` in `onListItemClick` (right before calling `showNext`) and thus ensure that you reference flipper from the row being clicked. – Asahi Aug 08 '11 at 06:37

score 0 · Answer 2 · answered May 22 '17 at 07:08

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);
            }
        });

    }

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

2 Answers2

Linked