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.... :)

Sunday 7 April 2013

Facebook like slide-in and slide out navifation | Android Slide Navigation


Hello Friends,

Today , I am going to share you my code with the help of which you
can show facebook like slide navigation in your android.

If you are searching for facebook like slide in slide out navigation 
view, or trying to implement facebook like page navigation in your 
android application , then this tutorial definitely helps you. 

facebook slide
android navigation                                               







  











android slide navigartion
facebook



Download the complete source code here

Enjoy Coding..... :)
Cheers...


 

Copyright @ 2013 Android Developers Blog.