Friday, 12 April 2013

Dynamic Swipe View Example In Android | Android Custom Swipe view


Hello Friends,

Have you searching  for dynamic swipe view on list view Item ??
Actually my need is to display the list view item one by one on swiping it from left
to right or right to left.

In my application my need is to show an listview items i.e an profile image(Imageview), a
TextView fortitle , another ImageView and a textview which contains some description.
This items swipe left to right and right to left based on the size of listview.

We can do this in two ways:
    1. Using Android View flipper : By using view flipper first we have  to make the
        complete xml programatically using java, because we don't know the exact size
        of ListView . So showing the item on by one we need to make the xml in our java
        code, which is toughest job.

   2. Using Android GestureListener :    I am using this one because in this there is
       no need to make the in your code. We just need to bind the view on left and right
       gesture.

 Today , I am going to share my complete source code for dynamic swipe view in
 android. Using this we can display the details of list view item on swipe.

dynamic swipe view
swipe gesture


Code:

1.actvity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/background_dark"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/tabBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/blue_gradient_header"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/txtTitle"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Dynamic swipe View"
            android:textColor="@android:color/white"
            android:textSize="22sp"
            android:textStyle="bold"
            android:typeface="sans" >
        </TextView>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabBar" >

        <TextView
            android:id="@+id/text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/image"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/image"
            android:background="#AAff0000"
            android:padding="10dp"
            android:text="Mukesh"
            android:textSize="16sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/image"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="14dp"
            android:background="@drawable/mukesh"
            android:padding="5dp"
            android:scaleType="fitXY" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_alignLeft="@+id/image"
            android:layout_below="@+id/image"
            android:layout_marginBottom="30dp"
            android:layout_marginTop="10dp" />

        <TextView
            android:id="@+id/desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageView1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:padding="8dp"
            android:text="Hello ! this is an Sample code.My need is to show listview Item on swipe, one by one.For this I am using gessture listner and Fling animation."
            android:textSize="14sp"
            android:textStyle="bold" />
    </RelativeLayout>

</RelativeLayout>


2.MainActivity.Java

package com.example.fling;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.GestureDetector.OnGestureListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnGestureListener {
 protected GestureDetector gestureScanner;
 protected ViewFlipper vf;
 private static final int SWIPE_MIN_DISTANCE = 120;
 private static final int SWIPE_MAX_OFF_PATH = 250;
 private static final int SWIPE_THRESHOLD_VELOCITY = 200;
 TextView tv;
 String[] name = { "Mukesh", "Hitesh", "Rohit", "Arshad" };
 int[] color = { Color.BLUE, Color.RED, Color.CYAN, Color.GREEN };
 int[] background = { Color.RED, Color.CYAN, Color.MAGENTA, Color.BLUE };
 int[] d = { R.drawable.mukesh, R.drawable.image_1, R.drawable.image_2,
   R.drawable.image_3 };
 int pos = 0;
 @SuppressWarnings("unused")
 private Animation slideLeftIn;
 private Animation slideLeftOut;
 private Animation slideRightIn;
 private Animation slideRightOut;
 RelativeLayout ll;
 ImageView image;
 ImageView profilePic;

 @Override
 public void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);
  gestureScanner = new GestureDetector(this);
  setContentView(R.layout.activity_main);
  ll = (RelativeLayout) findViewById(R.id.ll);
  tv = (TextView) findViewById(R.id.text);
  image = (ImageView) findViewById(R.id.imageView1);
  profilePic = (ImageView) findViewById(R.id.image);
  setText(pos);
  slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
  slideLeftOut = AnimationUtils
    .loadAnimation(this, R.anim.slide_out_left);
  slideRightIn = AnimationUtils
    .loadAnimation(this, R.anim.slide_in_right);
  slideRightOut = AnimationUtils.loadAnimation(this,
    R.anim.slide_out_right);
 }

 @Override
 public boolean onTouchEvent(MotionEvent me) {
  return gestureScanner.onTouchEvent(me);
 }

 public boolean onDown(MotionEvent e) {
  return true;
 }

 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
  try {
   if (e1.getX() > e2.getX()
     && Math.abs(e1.getX() - e2.getX()) > SWIPE_MIN_DISTANCE
     && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
    Toast.makeText(this.getApplicationContext(), "Left",
      Toast.LENGTH_SHORT).show();
    // vf.showPrevious();
    ll.setAnimation(slideLeftIn);
    ll.setAnimation(slideLeftOut);

    pos++;
    if (pos == 0) {
     setText(pos);
    } else {

     setText(pos);
    }

   } else if (e1.getX() < e2.getX()
     && e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
     && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
    Toast.makeText(this.getApplicationContext(), "Right",
      Toast.LENGTH_SHORT).show();
    // vf.showNext();
    pos--;
    ll.setAnimation(slideRightIn);
    ll.setAnimation(slideRightOut);
    if (pos == 0) {
     setText(pos);
    } else {

     setText(pos);
    }
   }
  } catch (Exception e) {
   // nothing
  }
  return true;

 }

 public void onLongPress(MotionEvent e) {
 }

 public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
   float distanceY) {
  return true;
 }

 public void onShowPress(MotionEvent e) {
 }

 public boolean onSingleTapUp(MotionEvent e) {
  return true;
 }

 private void setText(int position) {
  tv.setText(name[position]);
  tv.setTextColor(color[position]);
  tv.setBackgroundColor(background[pos]);
  image.setBackgroundResource(d[pos]);
  profilePic.setBackgroundResource(d[pos]);
 }
}


Now , I added Anim folder under the res folder. This helps me in animating my view
from left to right and right to left.

1. res/anim/slide_in_left.xml:


<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="-50%p"
        android:toXDelta="0" />

    <alpha

        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

</set>

2. res/anim/slide_in_right.xml:

   
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate

        android:duration="500"

        android:fromXDelta="50%p"

        android:toXDelta="0" />



    <alpha

        android:duration="500"

        android:fromAlpha="0.0"

        android:toAlpha="1.0" />



</set>

3. res/anim/slide_out_left.xml:
   
   <set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-50%p" />

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

  </set>

4.res/anim/slide_out_right.xml:

  <set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-50%p" />

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

 </set>
            
      
Download the code: DynamicSwipeView





Cheers :)
Enjoy Coding.... :)

Mukesh Yadav

Hi Guys I am from Delhi working as Web/Mobile Application Developer(Android Developer), also have knowledge of Roboelctric and Mockito ,android test driven development... Blogging has been my passion and I think blogging is one of the powerful medium to share knowledge and ideas....

2 comments:

  1. Gr8....thanks for nice tutorial

    ReplyDelete
  2. nice tutorials and every thing is new whivh i have never seen in any other blog keep it up!

    ReplyDelete

 

Copyright @ 2013 Android Developer Blog.