Tạo nền Gradient động (Animated Gradient Background) trong Android

Trước khi đi vào ví dụ, chúng ta nên biết Gradient color là gì. Theo Wikipedia, trong đồ họa máy tính, color gradient (đôi khi gọi là color ramp hoặc color progression) chỉ định một dải màu phụ thuộc vào vị trí, thường dùng để fill vùng. Ví dụ, nhiều window manager cho phép nền màn hình được chỉ định là gradient.

Ví dụ này minh họa cách tạo Animated Gradient Background trong Android.

Bước 1

Tạo một dự án mới trong Android Studio, vào File → New Project và điền đầy đủ thông tin cần thiết để tạo dự án mới.

Bước 2

Thêm mã sau vào res/layout/activity_main.xml.

<?xml version = "1.0" encoding = "utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android = "https://schemas.android.com/apk/res/android"    xmlns:app = "https://schemas.android.com/apk/res-auto"    xmlns:tools = "https://schemas.android.com/tools"    android:id = "@+id/constraintLayout"    android:layout_width = "match_parent"    android:layout_height = "match_parent"    android:background = "@drawable/gradient_animation "    tools:context = ".MainActivity">    <!-- Your layout here -->    <TextView       android:layout_width = "368dp"       android:layout_height = "520dp"       android:layout_marginBottom = "8dp"       android:layout_marginLeft = "8dp"       android:layout_marginRight = "8dp"       android:layout_marginTop = "8dp"       android:gravity = "center"       android:text = "@string/app_name"       android:textAlignment = "center"       android:textColor = "@android:color/background_light"       android:textSize = "30sp"       android:textStyle = "bold"       app:layout_constraintBottom_toBottomOf = "parent"       app:layout_constraintLeft_toLeftOf = "parent"       app:layout_constraintRight_toRightOf = "parent"       app:layout_constraintTop_toTopOf = "parent"       tools:text = "@string/app_name"/> </android.support.constraint.ConstraintLayout>

Trong mã trên, chúng ta thêm background là gradient_animation trong drawable. Bây giờ tạo file gradient_animation.xml trong thư mục drawable và thêm mã sau:

<?xml version = "1.0" encoding = "utf-8"?> <animation-list xmlns:android = "https://schemas.android.com/apk/res/android">    <item       android:drawable = "@drawable/drawable_purple_gradient"       android:duration = "3000" />    <item       android:drawable = "@drawable/drawable_amber_gradient"       android:duration = "3000" />    <item       android:drawable = "@drawable/drawable_green_gradient"       android:duration = "3000" />    <item       android:drawable = "@drawable/drawable_red_gradient"       android:duration = "3000" /> </animation-list>

Trong animation-list trên, chúng ta thêm 4 drawable con và duration cho mỗi animation view. Sau khi hết thời gian, nó sẽ đổi background. drawable_purple_gradient chứa background màu tím, nên tạo file drawable_purple_gradient.xml trong drawable và thêm mã sau:

<?xml version = "1.0" encoding = "utf-8"?> <shape xmlns:android = "https://schemas.android.com/apk/res/android">    <gradient       android:angle = "90"       android:endColor = "#D500F9"       android:startColor = "#4A148C" /> </shape>

Tương tự, tạo drawable_amber_gradient.xml, drawable_green_gradient.xml và drawable_red_gradient.xml trong thư mục Drawable và thêm mã như dưới:

drawable_amber_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?> <shape xmlns:android = "https://schemas.android.com/apk/res/android">    <gradient       android:angle = "135"       android:endColor = "#FFC400"       android:startColor = "#FF6F00" /> </shape>

drawable_green_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?> <shape xmlns:android = "https://schemas.android.com/apk/res/android">    <gradient       android:angle = "0"       android:endColor = "#00E676"       android:startColor = "#1B5E20"/> </shape>

drawable_red_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?> <shape xmlns:android = "https://schemas.android.com/apk/res/android">    <gradient       android:angle = "45"       android:endColor = "#FF1744"       android:startColor = "#B71C1C" /> </shape>

Bước 3

Thêm mã sau vào src/MainActivity.java

package com.example.andy.myapplication; 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);       constraintLayout = (ConstraintLayout) findViewById(R.id.constraintLayout);       animationDrawable = (AnimationDrawable) constraintLayout.getBackground();       animationDrawable.setEnterFadeDuration(3000);       animationDrawable.setExitFadeDuration(2000);    }    @Override    protected void onResume() {       super.onResume();       if (animationDrawable != null && !animationDrawable.isRunning()) {          animationDrawable.start();       }    }    @Override    protected void onPause() {       super.onPause();       if (animationDrawable != null && animationDrawable.isRunning()) {          animationDrawable.stop();       }    } }

Hãy thử chạy ứng dụng. Giả sử bạn đã kết nối thiết bị Android thực tế với máy tính. Để chạy ứng dụng từ Android Studio, mở một file activity của dự án và nhấn biểu tượng Run từ thanh công cụ. Chọn thiết bị di động của bạn làm tùy chọn và kiểm tra thiết bị sẽ hiển thị màn hình mặc định:

Như kết quả trên, mỗi 3 giây nó sẽ đổi màu nền.