Tuesday, January 29, 2013

Android View Flipper



1) Create a new Android project. Target any API greater than 1.6.
2) In your /res folder, you’ll need a main.xml layout. Notice how the ViewFlipper control contains two linear layouts; these layouts are what the widget will iterate through when you call the next() and previous() methods in your code. Our layouts are simple and just contain a single text view, but you can use any sort of layouts you need in your application.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="View Flipper Demo" />

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_margin="6dip" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center" >

            <com.jitesh.viewflipper.CustomTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hi I am Jitesh Upadhyay"
                android:textColor="#114B24"
                android:textSize="14sp"
                android:textStyle="bold" >
            </com.jitesh.viewflipper.CustomTextView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center" >

            <com.jitesh.viewflipper.CustomTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hope you will like this example"
                android:textColor="#621616"
                android:textSize="14sp"
                android:textStyle="bold" >
            </com.jitesh.viewflipper.CustomTextView>
        </LinearLayout>
    </ViewFlipper>

</LinearLayout>

3) MainActivity.java

package com.jitesh.viewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {
private ViewFlipper vf;
private float lastX;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
vf = (ViewFlipper) findViewById(R.id.view_flipper);
}

@Override
public boolean onTouchEvent(MotionEvent touchevent) {
switch (touchevent.getAction()) {
case MotionEvent.ACTION_DOWN: {
lastX = touchevent.getX();
break;
}
case MotionEvent.ACTION_UP: {
float currentX = touchevent.getX();
if (lastX < currentX) {
if (vf.getDisplayedChild() == 0)
break;
vf.setInAnimation(this, R.anim.in_from_left);
vf.setOutAnimation(this, R.anim.out_to_right);
vf.showNext();
}
if (lastX > currentX) {
if (vf.getDisplayedChild() == 1)
break;
vf.setInAnimation(this, R.anim.in_from_right);
vf.setOutAnimation(this, R.anim.out_to_left);
vf.showPrevious();
}
break;
}
}
return false;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}


the CustomTextView .java code is as follows


package com.jitesh.customfonts;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;

public class CustomTextView extends TextView {

public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public CustomTextView(Context context) {
super(context);
init();
}

public void init() {

Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/HandmadeTypewriter.ttf");
setTypeface(tf, 1);

}
}

4) Now comes the tricky part. Create a folder called /anim in your /res directory. In the folder, you’ll want to create four XML files to represent the four transitions we’ll require. Spend a few minutes looking at the x delta values, so you’re sure you understand the effect we are hoping to accomplish.
out_to_left.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%" android:toXDelta="-100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400"/>
</set>
out_to_right.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%" android:toXDelta="100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400"/>
</set>
in_from_left.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="-100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400" />
</set>
in_from_right.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400" />
</set>





please click here to download the code ViewFlipper Code

No comments:

Post a Comment