Making Lamp Animations in Android Studio

0 Shares

This time we will learn to make a simple application using transition animation on Android Studio.

In this tutorial we will make a simple application, turn on and turn off the lights. when the on / off switch is pressed it will see the transition animation effect (switch) from the lamp that turns off (off) to the light that is on (on) or vice versa.

Steps :

Create a New Project

Please open the android studio and create a new project with the name Transition, specify sdk, activity and others until the finish, and the android studio workspace appears.

Add Pictures

Add two pictures, which are the lights in the off state and also the lights in the drawable state.

For pictures, you can download it HERE

Create a New Layout

Create two new layouts in the drawable directory, by right-clicking on drawable> New> Drawable resource file> fill in the Layout Name:

  • Trans_off.xml layout
  • Trans_on.xml layout
    Type the following code 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/on"/>
    <item android:drawable="@drawable/off"/>

</transition>

In trans_on.xml also type the following codes :

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

    <item android:drawable="@drawable/off"/>
    <item android:drawable="@drawable/on"/>

</transition>

Set the Main Layout

Open Activity_Main.xml

  • Change the background color to black with the following codes:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context=".MainActivity">
  • Add ImageView, for the src select trans_on.xml drawable layout with the following codes:
<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/trans_on"
        android:scaleType="centerInside"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/imageView" />
  • Add a button with the following codes:
<Button
        android:text="ON / OFF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="34dp"
        android:id="@+id/button" />
  • For details, like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/trans_on"
        android:scaleType="centerInside"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/imageView" />

    <Button
        android:text="ON / OFF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="34dp"
        android:id="@+id/button" />
</RelativeLayout>

so a simple tutorial Creating a Lamp Animation in Android Studio, hopefully useful

You May Also Like

Leave a Reply

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