Menambahkan animasi gradient background di aplikasi Anda bisa dibilang cukup mudah, Anda cukup menggunakan xml dan java code sederhana. Animasi gradient ini bergerak diantara gradient yang seolah-olah bertubrukan dan berjalan beriringan sehingga membuat tampilan yang menarik. Anda mungkin dapat melihat jenis animasi background ini di halaman login aplikasi mobile Instagram, Instagram menjaga tranformasi warna gradient satu ke warna gradient lain sehingga tampak cantik. Nah kali ini kita akan coba terapkan itu di aplikasi kita sendiri.
Mari Kita Kerjakan!
Pada tutorial ini kita akan belajar bagaimana membuat pergerakan gradient background, nah untuk bisa benar benar memahaminya maka Anda perlu buat dulu project khusus latihan ini, Anda juga bisa mendownloadnya di SINI.
1. Buat Project Baru
Seperti biasa buat project baru dengan klik file >> new project, isi persyaratan informasi sesuai dengan topik kita kali ini, jangan lupa tetap gunakan Empty Activity.
2. Definisikan Strings, Warna & Styles
Tambahkan kode di bawah ini ke file strings.xml yang berlokasi di res/values/strings.xml
<resources>
<string name="app_name">Animated Gradient Background</string>
<string name="text_logo">Android Tutorials Hub</string>
<string name="text_hint_email">Email</string>
<string name="text_hint_password">Password</string>
<string name="text_login">Login</string>
</resources>
Lalu, tambahkan kode warna di bawah ini ke file colors.xml yang berlokasi di res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FFFFFF</color>
<!-- 1st Gradient color -->
<color name="colorPurple_A400">#D500F9</color>
<color name="colorPurple_900">#4A148C</color>
<!-- ./ 1st Gradient color -->
<!-- 2nd Gradient color -->
<color name="colorAmber_A400">#FFC400</color>
<color name="colorAmber_900">#FF6F00</color>
<!-- ./ 2nd Gradient color -->
<!-- 3rd Gradient color -->
<color name="colorGreen_A400">#00E676</color>
<color name="colorGreen_900">#1B5E20</color>
<!-- ./ 3rd Gradient color -->
<!-- 4th Gradient color -->
<color name="colorRed_A400">#FF1744</color>
<color name="colorRed_900">#B71C1C</color>
<!-- ./ 4th Gradient color -->
</resources>
Lalu, tambahkan kode style di bawah ini ke file styles.xml yang berlokasi di res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
3. Menambahkan Gradient Drawable
Sebelum membuat layout, kita perlu buat dulu custom gradient drawable-nya, ini nanti sebagai background layout-nya. Kita perlu membuat 4 drawable resource yang masing-masing mempunyai warna berbeda, caranya klik kanan -> drawable -> new -> drawable, lalu namai masing-masing file beserta isi kodenya sesuai dengan yang ada di bawah ini.
3.1. drawable_purple_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="@color/colorPurple_A400"
android:startColor="@color/colorPurple_900" />
</shape>
3.2. drawable_amber_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="135"
android:endColor="@color/colorAmber_A400"
android:startColor="@color/colorAmber_900" />
</shape>
3.3. drawable_green_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="0"
android:endColor="@color/colorGreen_A400"
android:startColor="@color/colorGreen_900" />
</shape>
3.4. drawable_red_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="45"
android:endColor="@color/colorRed_A400"
android:startColor="@color/colorRed_900" />
</shape>
4. Menambahkan List Animasi
Sekali lagi kita pelru buat drawable file dengan cara klik kanan drawable -> new -> drawable, berinama filenya beserta isi kodenya sesuai dengna di bawah ini.
drawable_gradient_animation_list.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/drawable_purple_gradient"
android:duration="6000" />
<item
android:drawable="@drawable/drawable_amber_gradient"
android:duration="6000" />
<item
android:drawable="@drawable/drawable_green_gradient"
android:duration="6000" />
<item
android:drawable="@drawable/drawable_red_gradient"
android:duration="6000" />
</animation-list>
5. Modifikasi Layout activity_main.xml
Ketika Anda membuat aktivity baru dengan template Empty Activity, maka otomatis akan menggenerate file MainActivity.java dan file activity_main.xml, maka replace code yang ada dengan code di bawah ini, maka akan tercipta tampilan halaman login.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/drawable_gradient_animation_list"
tools:context="com.androidtutorialshub.animatedgradientbackground.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/text_logo"
android:textColor="@color/colorAccent"
android:textSize="30sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:backgroundTint="@color/colorAccent"
android:hint="@string/text_hint_email"
android:inputType="textEmailAddress"
android:textColor="@color/colorAccent"
android:textColorHint="@color/colorAccent" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:backgroundTint="@color/colorAccent"
android:fontFamily="sans-serif"
android:hint="@string/text_hint_password"
android:inputType="textPassword"
android:textColor="@color/colorAccent"
android:textColorHint="@color/colorAccent" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="@color/colorAccent"
android:text="@string/text_login"
android:textColor="@color/colorPrimary" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
6. Create MainActivity class
Sekarang replace code yang ada di dalam class MainActivity dengan code di bawah ini, silakan Anda sesuaikan sendiri.
import android.graphics.drawable.AnimationDrawable;
import android.support.constraint.ConstraintLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
private ConstraintLayout constraintLayout;
private AnimationDrawable animationDrawable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();
// init constraintLayout
constraintLayout = (ConstraintLayout) findViewById(R.id.constraintLayout);
// initializing animation drawable by getting background from constraint layout
animationDrawable = (AnimationDrawable) constraintLayout.getBackground();
// setting enter fade animation duration to 5 seconds
animationDrawable.setEnterFadeDuration(5000);
// setting exit fade animation duration to 2 seconds
animationDrawable.setExitFadeDuration(2000);
}
@Override
protected void onResume() {
super.onResume();
if (animationDrawable != null && !animationDrawable.isRunning()) {
// start the animation
animationDrawable.start();
}
}
@Override
protected void onPause() {
super.onPause();
if (animationDrawable != null && animationDrawable.isRunning()) {
// stop the animation
animationDrawable.stop();
}
}
}
Oke, sekarang silakan jalan aplikasi Anda di emulator.
