Scribd
Upload
34 views

MobII Lab1

This document provides instructions for creating an animated gradient background in an Android application. It involves 4 steps: 1) Creating XML files for different gradient colors with angles and colors defined, 2) Creating an animation list XML file to define the gradients and durations, 3) Setting the animation list as the background in the activity XML layout file, and 4) Starting the animation using the AnimationDrawable class in the main activity Java code and setting the durations. This creates a smooth transition between multiple gradients as the background of the Android app.

Uploaded by

Domara E. Dawdoka
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views

MobII Lab1

This document provides instructions for creating an animated gradient background in an Android application. It involves 4 steps: 1) Creating XML files for different gradient colors with angles and colors defined, 2) Creating an animation list XML file to define the gradients and durations, 3) Setting the animation list as the background in the activity XML layout file, and 4) Starting the animation using the AnimationDrawable class in the main activity Java code and setting the durations. This creates a smooth transition between multiple gradients as the background of the Android app.

Uploaded by

Domara E. Dawdoka
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Mobile Application Development

Animated Gradient in Android


Lab 1
Asst.Prof.Dr.Raghad Z.Yousif
IT & CS 4th
Spring 2023
Introduction

In this article, we are going to learn how to create


AnimatedGradient in android. It can be used in the
background of our app. In this, we add different color
gradients and animate them. Even in the older versions of
Instagram, the developers used AnimatedGradient for the
background of the login screen to make the layout look
attractive.
Create A New Project
New xml and Java files
Step 1: Create different gradient xml

Create different gradient xml files which are to be changed in the background. These files include startColor which is
shown in above part, endColor which is shown in lower part and angle of the horizontal line which divides both the part.
Here we create three gradient xml files.

1. Create a gradient_one.xml file in the Drawable folder and add the following code.
Create A New XML
gradient_one.xml
Add code to xml file
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/andr
oid">
<gradient
android:angle="225"
android:endColor="#09CCC8"
android:startColor="#ffd6d3" />
</shape>
2.Create a gradient_two.xml Create a gradient_two.xml file in the Drawable folder
and add the following code.
Create 2nd XML
gradient_two.xml
Create a gradient_three.xml file in the Drawable folder
3.Create a gradient_three.xml
gradient_three.xml
gradient_two ,three.xml
gradient_three.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="135"
android:endColor="#26F30F" gradient_two.xml
android:startColor="#F6F8F0" /> <?xml version="1.0" encoding="utf-8"?>
</shape> <shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="45"
android:endColor="#FD7BCE"
android:startColor="#A4DDF8" />
</shape>
Step 2: Create a gradient_list.xml file in the drawable folder
and add the following code. In this file we add all our
Step 2: Create a gradient_list.xml gradient xml files that we want to display and their duration.
gradient_list.xml
gradient_list.xml
gradient_list.xml

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


<animation-list
xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/gradient_one"
android:duration="3000"/>

<item android:drawable="@drawable/gradient_three"
android:duration="3000"/>

<item android:drawable="@drawable/gradient_two"
android:duration="3000"/>
</animation-list>
Step 3: Now add the following code in the activity_main.xml

Step 3: activity_main.xml file. In this file we add our gradient_list to the background of
our layout. activity_main.xml
activity_main.xml <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/layout"
android:background="@drawable/gradient_list"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textStyle="bold"
android:textColor="#219806"
android:text=“Catholic University –IT CS Dep"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now add the following code in the MainActivity.java file. From

Step 4: MainActivity.java the class AnimatedDrawable, functions such as


setEnterFadeDuration and setExitFadeDuration are used to set
fading duration and finally start function is used to start the
animation. MainActivity.java
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ConstraintLayout layout = findViewById(R.id.layout);

//With the help of AnimatedDrawable class, we can set


//the duration to our background and then call the
//function start at the end.
AnimationDrawable animationDrawable = (AnimationDrawable)
layout.getBackground();
animationDrawable.setEnterFadeDuration(1500);
animationDrawable.setExitFadeDuration(3000);
animationDrawable.start();
}
}
Run
Run
Thank You

You might also like