ViewFlipper

             A ViewFlipper is used to animate the movement between 2 or more different views. This is generally used to improve the visual and make the app appear smooth.

So in this post I have created a small and simple app using the ViewFlipper control. The flow of the app is given below –

1) The first screen will have a text indicating the screen on which the user is present and it will have a button through which the user can go to the second screen.

2) When the user clicks on the button in screen 1 the first screen will move to right and the second screen will move in from left.

3) The second screen will be similar to the first screen but the button will redirect the user to the first screen.

If you haven’t got the flow, go to the bottom of the post where I have included the snapshot of the output.

Now lets get on with the coding part. Create a new project, once you have created a new project you need to create a new folder in res (resource) call it anim (you can name the folder anything you like. Here I have named it as anim). In this folder create new xml files which will define the animation of the screen. Create 2 new xml called transition_in_left and transition_out_left.

Ok here I will deviate from the topic a bit, since we need to understand what animation is all about.  As you know animation is making simple transformation or loading of different images to make an object livelier. In android there are 2 kinds of animation \

1) Property Animation – Creates animation by modifying the property of the image.

2) View Animation – Creates animation by showing sequence of image in sequence.

In this post I am using View animation, which in turn has 2 types

1) Tween Animation – Animation by performing series of transformation on an image.

2) Frame Animation – Animation by showing sequence of images in a particular order.

In this post I will be using Tween animation and will use the translate property of it, given below is a very brief description of the same.

It has 4 main elements,

1) alpha – provides fade in and fade out animations.

2) scale – provides the ability to increase or decrease the size.

3) translate – provides the ability to make horizontal or vertical movement.

4) rotate – provides the ability to rotate the image

So open the transition_in_left.xml file and use the code below. The below code will case the screen to move from left to right as you can see the fromdelta value changes from -100% to 0.

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

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

 android:interpolator="@android:anim/decelerate_interpolator">

<translate

 android:fromXDelta="-100%"

 android:toXDelta="0%"

 android:duration="500" />

</set>

Similarly create open another xml file transition_in_left.xml and add the property as shown below –

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

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

 android:interpolator="@android:anim/decelerate_interpolator">

<translate

 android:fromXDelta="0%"

 android:toXDelta="100%"

 android:duration="500" />

</set>

Now that we are done with the definition of the animator, lets define the main layout. Open main.xml layout in resà layout folder. Remove the existing text box and add a new textbox which will have a text called “View Flipper Demo”. Then add the fiew flipper such that it spans the entire length and width of the screen. Then add the LinearLayout which will have a text which indicates the screen which you are in and a button which will cause the second screen to appear with animation. Add one more LinearLayout and add the same contents as in screen 1.

With the UI and the animation done, we need to add action part. So go to the src folder and open the java file in it. As you can see the basic features are already present.

We need to bind the viewflipper, buttons , animations and assign action to the buttons. The code below does the same

The below code defines the ViewFlipper and buttons used.

        final ViewFlipper vf=(ViewFlipper) findViewById(R.id.viewFlipper1);

        Button firstScreenButton=(Button) findViewById(R.id.buttonfirstscreen);

        Button secondScreenButton=(Button) findViewById(R.id.buttonsecondscreen);

 

Then you need to define the animations. The below code does the same

        Animation inanimation=AnimationUtils.loadAnimation(this,R.anim.transition_in_left);

        Animation outanimation=AnimationUtils.loadAnimation(this, R.anim.transition_out_left);

 Now we need to assign the animation to in and out movements.

        vf.setInAnimation(inanimation);

        vf.setOutAnimation(outanimation);

  

Since we need the animations to appear when button is clicked we need to assign action to the onClickListener as shown below. In the below code we assign action to button in Screen1.

        firstScreenButton.setOnClickListener(new Button.OnClickListener(){

                   @Override

                   public void onClick(View arg0) {

                   vf.showNext();

                   }});

  

Similarly we need to assign action for the button in screen2.

        secondScreenButton.setOnClickListener(new Button.OnClickListener(){

                   @Override

                   public void onClick(View arg0) {

                   vf.showPrevious();

                   }});

The entire file will look in the snapshot shown below.

Now run the application in an emulator or a device. When the application runs the first screen that appears is given below. 

Click on the button and you can see the screen 1 appears to move out and screen 2 appears to move in from left replacing screen1 as shown below.

Now that you are in screen 2 it will be as shown in the snapshot shown below. Click on the button and it should take you back to the first Screen.

SeekBar

A seekbar is just like a progress bar with a dragger in it which the user can set. In this post I have just created a simple seekbar which shows the value in a text below and shows if the tracking is on if the touch is present over the tracker.

First create a new project. Then open file main.xml under resà layouts. Remove the default text there and add a text which will show if the tracking is on or not. Below that add the seekbar control. Below this add one more text which will show the value to which the slider has been dragged to. The layout will look as shown in the snapshot below.

Then we need to bind the functionality with the UI controls so open the java file under src à your package. You can see already there will be basic code is already there. The class will by default extend Activity you need to implement OnSeekBarChangeListener, once you do this you will need to override other functions onProgressChanged, onStartTrackingTouch, onStopTrackingTouch. Then declare the seekbar and the 2 text views which will show the tracking status and the value.

Then create a seekbar and create a listener for that as shown below-

sb=(SeekBar) findViewById(R.id.seekBar1);

sb.setOnSeekBarChangeListener(this);

Then you need to declare and bind the textboxes. Once this is done you need to add functionality when the seekbar position is changed, when the tracking has started, when the tracking has stopped as shown below.

@Override

public void onProgressChanged(SeekBar arg0, int progress, boolean TouchStart) {

                                sv.setText("Progress="+String.valueOf(progress));

}

@Override

public void onStartTrackingTouch(SeekBar arg0) {

                                title.setText("Tracking On");

}

@Override

public void onStopTrackingTouch(SeekBar arg0) {

                                title.setText("Tracking Off");

}

 Once this is done we are done and the file will look as in the snapshot given below.

Now run the project in your emulator or mobile. Drag the slider and the text above the seekbar should change to Tracking On and when u stop it should say Tracking off and the value in the textbox below the seekbar should show value at which the slider has been dragged to as show in the snapshot given below.