Android ViewSwitcher with Animation Example Tutorial

How to create ViewSwitcher widget inside android application to switch between two views coding example.

ViewSwitcher is one of the most oldest switcher view widget in android application and used to switch views on its next – previous events. The ViewSwitcher widget gives us the facility to swipe between two widgets with slide in and slide out animation but it can only contain two widgets and more then two widget is not allowed. So here is the complete step by step tutorial for Android ViewSwitcher with Animation Example Tutorial.

android-project-download-code-button

Live Demo :

Android ViewSwitcher with Animation Example Tutorial.

Code for MainActivity.java file.

package com.android_examples.viewswitcher_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ViewSwitcher;

public class MainActivity extends AppCompatActivity {

    Button buttonNext, buttonPrevious ;
    ViewSwitcher viewSwitcher ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonNext = (Button)findViewById(R.id.button3);
        buttonPrevious = (Button)findViewById(R.id.button2);
        viewSwitcher = (ViewSwitcher)findViewById(R.id.viewSwitcher1);

        buttonNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                viewSwitcher.showNext();

            }
        });

        buttonPrevious.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                viewSwitcher.showPrevious();

            }
        });

    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.viewswitcher_android_examplescom.MainActivity"
    android:id="@+id/relativelayout1"
    android:background="#FFF3E0">


    <Button
        android:text="Previous"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:text="Next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/button3" />

    <ViewSwitcher
        android:id="@+id/viewSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:inAnimation="@android:anim/slide_in_left"
        android:outAnimation="@android:anim/slide_out_right">

        <TextView
            android:text="This is the First View Widget"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:id="@+id/textView2"
            android:textSize="25dp"
            android:gravity="center"
            android:textColor="#000000"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageview1"
            android:src="@drawable/sample_viewswitcher_image"/>

        </ViewSwitcher>

</RelativeLayout>

Screenshots:

viewswitcher-2

 

viewswitcher-1

Click here to download Android ViewSwitcher with Animation Example Tutorial project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *