Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to add swipe gestures in ListView item

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 906
    Comment on it

    In the below example , I have  added swipe gestures on ListView. When you swipe particular ListItem in ListView then swipe gestures will perform. Here first I have added ListView in actvity_main.xml layout. In second step I have created a new list_row_item .xml layout here I have added TextView and ImageView, in next step I have created  four new xml layout in anim folder. 
    Now see programming area, here I have created a new class MyListAdapter on this class extend with Base class . After this I have created a new MyGestureListener class this class extends with GestureDetector. SimpleOnGestureListener, I have used anim layouts, and I have used onFling method , In MainActivity I have define ListView , and added user name with in String.

    You can see below example code it clearly describe you How to add  swipe gestures in ListView item.

     

    Step(1)-actvity_main.xml layout-

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" >
    
        <ListView
            android:id="@+id/listView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:divider="#cdfcf2"
            android:dividerHeight="2dp" >
        </ListView>
    
    </RelativeLayout>

    Step(2)-Created a new list_row_item.xml layout-

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/listPreferredItemHeightLarge" >
    
        <ImageView
            android:id="@+id/userimage"
            android:layout_height="80dp"
            android:layout_width="60dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_margin="10dp"
            android:src="@drawable/pin1"
            android:contentDescription="@string/app_name" />
    
        <LinearLayout
            android:id="@+id/layout_front"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout_toRightOf="@id/userimage"
            android:layout_centerVertical="true"
            android:gravity="center_vertical"
            android:orientation="vertical" >
    
            <TextView
                android:id="@+id/name"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="Company Name"
                android:textAppearance="?android:attr/textAppearanceMedium" />
            <TextView
                android:id="@+id/detail1"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="Company details"
                android:textAppearance="?android:attr/textAppearanceSmall" />
    
    
        </LinearLayout>
    
        <RelativeLayout
            android:id="@+id/layout_back"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout_toRightOf="@id/userimage"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:layout_centerVertical="true"
            android:visibility="gone"
            android:gravity="center_vertical" >
    
            <ImageView
                android:id="@+id/btn1"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:padding="5dp"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:src="@drawable/pin2"
                android:contentDescription="@string/app_name" />
            <ImageView
                android:id="@+id/btn2"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:padding="5dp"
                android:layout_centerInParent="true"
                android:layout_centerVertical="true"
                android:src="@drawable/pin3"
                android:contentDescription="@string/app_name" />
            <ImageView
                android:id="@+id/btn3"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:padding="5dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/pin4"
                android:contentDescription="@string/app_name" />
            <ImageView
                android:id="@+id/btn4"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:padding="5dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/pin5"
                android:contentDescription="@string/app_name" />
    
        </RelativeLayout>
    
    </RelativeLayout>

    Step(3)-Created a new in_from_left.xml in anim folder-

    <?xml version="1.0" encoding="utf-8"?>
        <translate xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromXDelta="-100%p"
            android:toXDelta="0"
            android:duration="800" />

    Step(4)-Created a new in_from_right.xml in anim folder-

    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="800" />

    Step(5)-Created a new out_to_left.xml in anim folder-

    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="800" />

    Step(6)-Created a new out_to_right.xml in anim folder-
     

    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="800"
        android:fromXDelta="0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXDelta="100%p" />

      Step(7)- Created a new MyListAdapter class-
      

     public class MyListAdapter extends BaseAdapter {
    
            private Context ctx;
            private String[] names;
    
            public MyListAdapter(Context ctx, String[] data) {
                this.ctx = ctx;
                this.names = data;
            }
    
            static class ViewHolder {
                RelativeLayout container;
                TextView userName;
                GestureDetectorCompat mDetector;
            }
    
            @Override
            public int getCount() {
                return names.length;
            }
    
            @Override
            public Object getItem(int arg0) {
                return names[arg0];
            }
    
            @Override
            public long getItemId(int position) {
                return position;
            }
    
            @Override
            public View getView(final int position, View convertView, ViewGroup parent) {
                if (convertView == null) {
                    convertView = LayoutInflater.from(ctx).inflate(
                            R.layout.list_row_item, null);
                    final ViewHolder holder = new ViewHolder();
                    holder.container = (RelativeLayout) convertView
                            .findViewById(R.id.container);
                    holder.userName = (TextView) convertView.findViewById(R.id.name);
                    holder.mDetector = new GestureDetectorCompat(ctx,
                            new MyGestureListener(ctx, convertView));
                    convertView.setTag(holder);
    
                }
                final ViewHolder holder = (ViewHolder) convertView.getTag();
                holder.userName.setText(names[position]);
                holder.container.setOnTouchListener(new View.OnTouchListener() {
    
                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        holder.mDetector.onTouchEvent(event);
                        return true;
                    }
                });
    
                return convertView;
            }
    
        }
    
    


    Step(8)- Created a new MyGestureListener class-

      public class MyGestureListener extends GestureDetector.SimpleOnGestureListener {
    
        private static final int MIN_DISTANCE = 50;
        private static final String TAG = "MyGestureListener";
        private RelativeLayout backLayout;
        private LinearLayout frontLayout;
        private Animation inFromRight,outToRight,outToLeft,inFromLeft;
    
    
        public MyGestureListener(Context ctx,View convertView) {
            backLayout = (RelativeLayout) convertView.findViewById(R.id.layout_back);
            frontLayout = (LinearLayout) convertView.findViewById(R.id.layout_front);
            inFromRight = AnimationUtils.loadAnimation(ctx, R.anim.in_from_right);
            outToRight = AnimationUtils.loadAnimation(ctx, R.anim.out_to_right);
            outToLeft = AnimationUtils.loadAnimation(ctx, R.anim.out_to_left);
            inFromLeft = AnimationUtils.loadAnimation(ctx, R.anim.in_from_left);
        }
    
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                               float velocityY) {
            float diffX = e2.getX() - e1.getX();
            float diffY = e2.getY() - e1.getY();
            if (Math.abs(diffX) > Math.abs(diffY)) {
                if (Math.abs(diffX) > MIN_DISTANCE) {
                    if(diffX<0){
                        Log.v(TAG, "Swipe Right to Left");
                        if(backLayout.getVisibility()==View.GONE){
                            frontLayout.startAnimation(outToLeft);
                            backLayout.setVisibility(View.VISIBLE);
                            backLayout.startAnimation(inFromRight);
                            frontLayout.setVisibility(View.GONE);
                        }
                    }else{
                        Log.v(TAG, "Swipe Left to Right");
                        if(backLayout.getVisibility()!=View.GONE){
                            backLayout.startAnimation(outToRight);
                            backLayout.setVisibility(View.GONE);
                            frontLayout.setVisibility(View.VISIBLE);
                            frontLayout.startAnimation(inFromLeft);
                        }
                    }
                }
            }
    
            return true;
        }
    
    }


    Step(9)-MainActivity-
     

    public class MainActivity extends AppCompatActivity {
    
    
            ListView listView;
            String[] names={"Evon ","Ericsson","TCS","Microsoft","Dell","Apple"};
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
    
                listView = (ListView) findViewById(R.id.listView1);
                MyListAdapter adapter = new MyListAdapter(this,names);
                listView.setAdapter(adapter);
            }
    
        }

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: