ساخت بک گراند مانند اینستاگرام در اندروید

در این مقاله قصد داریم یک سورس آموزشی قرار دهیم که یک بک گراند مثل اینستاگرام ایجاد نماییم که رنگ های آن مانند یک رنگین کمان عوض می شود و تغییر رنگ می دهد سورس آن را برای شما قرار می دهیم.

ساخت بک گراند مانند اینستاگرام در اندروید

در این جا از یک انیمیشن ما استفاده می کنیم که رنگ ها را شیب می دهد و هر کدام از آن ها در حال عوض شدن است.

ابتدا یک پروژه ی جدید اضافه می نماییم.

روی این پوشه راست کلیک نماییم drawable folder –>New -> Drawable Resource File

حالا باید 3 تا فایل xml را ایجاد نماییم:

کد مربوط به xml اول:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="225"
        android:startColor="#4facfe"
        android:endColor="#00f2fe"/>
</shape>

کد مربوط به xml دوم

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="45"
        android:startColor="#43e97b"
        android:endColor="#38f9d7"/>
</shape>

کد مربوط به xml سوم:

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

در قسمت فوتر هم باید قطعه کد زیر را قرار دهید:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/first_gradient"
        android:duration="3500" />

    <item
        android:drawable="@drawable/second_gradient"
        android:duration="3500" />

    <item
        android:drawable="@drawable/third_gradient"
        android:duration="3500" />

</animation-list>

حالا در قسمت main قطعه کد زیر را قرا دهید:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.animatedgradientbackground_android_examplescom.MainActivity"
    android:background="@drawable/root_calling_gradient"
    android:id="@+id/MainRootLayout"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android Animated Gradient Background Tutorial"
        android:textColor="#fff"
        android:textStyle="bold"
        android:textSize="20dp"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

در کلاس جاوا هم باید دو شی زیر را ایجاد نمایید:

ConstraintLayout constraintLayout;
AnimationDrawable animationDrawable ;

و باید به لایه ی مربوطه Asign کرد

constraintLayout = (ConstraintLayout) findViewById(R.id.MainRootLayout);
animationDrawable = (AnimationDrawable) constraintLayout.getBackground();

animationDrawable.setEnterFadeDuration(2500);

animationDrawable.setExitFadeDuration(4500);

animationDrawable.start();

کد کامل مربوطه به کلاس

package com.android_examples.animatedgradientbackground_android_examplescom;
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 {

    ConstraintLayout constraintLayout;
    AnimationDrawable animationDrawable ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        constraintLayout = (ConstraintLayout) findViewById(R.id.MainRootLayout);

        animationDrawable = (AnimationDrawable) constraintLayout.getBackground();

        animationDrawable.setEnterFadeDuration(2500);

        animationDrawable.setExitFadeDuration(4500);

        animationDrawable.start();

    }
}

کد کامل مربوط به لایه:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.animatedgradientbackground_android_examplescom.MainActivity"
    android:background="@drawable/root_calling_gradient"
    android:id="@+id/MainRootLayout"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android Animated Gradient Background Tutorial"
        android:textColor="#fff"
        android:textStyle="bold"
        android:textSize="20dp"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

خروجی کار به صورت زیر است:

فایل های ضمیمه