IT World: Dynamic Swipe View Example In Android

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.

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>

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>

IT World

Thứ Tư, 11 tháng 9, 2013

Dynamic Swipe View Example In Android | Android Custom Swipe view

Dynamic Swipe View Example In Android | Android Custom Swipe view

Không có nhận xét nào:

Đăng nhận xét