Step-by-Step Tutorial to create an Android Application with Transition Animation presented through Light Bulb

Demo of the App that will get created by following below tutorial

Step 1:- Create a new project and set the background of RelativeLayout in activity_main.xml as black.

Step 2:- Now download  an image file as shown below and separate the lighted and un-lighted bulb using Microsoft Office Picture Manager.

Step 3:- Paste them in “drawable” folder and make a new drawable resource file of name “trans_on”.

Step 4:- Now in trans_on.xml,

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/unlightedbulb "/>
    <item android:drawable="@drawable/lightedbulb"/>

</transition>

Step 5:- Similarly in trans_off.xml,

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

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



<item android:drawable="@drawable/lightedbulb"/>

<item android:drawable="@drawable/unlightedbulb"/>



</transition>

Step 6:- Now in activity_main.xml,

<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"

    android:background="#000000"

    tools:context="com.example.user.lightswitchapp.MainActivity">



    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/imgView"

        android:src="@drawable/trans_on"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"/>



    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="ON"

        android:textColor="#ffffff"

        android:background="#1dc60b"

        android:id="@+id/button"

        android:textSize="18sp"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true" />





</RelativeLayout>

Step 7:- Now in MainActivity.java,

import android.graphics.Color;

import android.graphics.drawable.TransitionDrawable;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;



public class MainActivity extends AppCompatActivity {



    ImageView imageView;

    Button button;



    boolean turnedOn = false;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        imageView = (ImageView) findViewById(R.id.imgView);



        button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {



                if (!turnedOn)

                {

                    imageView.setImageResource(R.drawable.trans_on);

                    ((TransitionDrawable) imageView.getDrawable()).startTransition(3000);

                    turnedOn = true;

                    button.setText("OFF");

                    button.setBackgroundColor(Color.RED);

                }

                else {

                    imageView.setImageResource(R.drawable.trans_off);

                    ((TransitionDrawable) imageView.getDrawable()).startTransition(3000);

                    turnedOn = false;

                    button.setText("ON");

                    button.setBackgroundColor(Color.GREEN);

                }





            }

        });



    }

}