Kotlin Background Gradient Animation (KBGA)


KBGA:   SOLD       



Adding a gradient background animation to your application is fairly easy, you just need to use simple xml and java code. This gradient animation moves between gradients that seem to collide and run side by side, creating an attractive display.

You may see this type of background animation on the login page of the Instagram mobile application, Instagram maintains the transformation of one gradient color to another gradient color so that it looks beautiful. Well this time we will try to apply it in our own application.

https://youtu.be/RRtWlcgPsdo

Let's Get to Work!

In this tutorial we will learn how to create a gradient background movement, so to really understand it you need to create a special project for this exercise, you can also download it  HERE .

1. Create a New Project

As usual, create a new project by clicking file >> new project, fill in the information requirements according to our topic this time, don't forget to keep using Empty Activity.

2. Define Strings, Colors & Styles

Add the code below to the strings.xml file located at 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>

Then, add the color code below to the colors.xml file located at 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>

Then, add the style code below to the styles.xml file located at 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. Adding Gradient Drawable

Before creating a layout, we need to create a custom gradient drawable first, this will be the background of the layout. We need to create 4 drawable resources, each with a different color, by right-clicking -> drawable -> new -> drawable, then name each file and fill in the code as below.

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. Adding Animation List

Once again we need to create a drawable file by right-clicking drawable -> new -> drawable, naming the file and filling in the code as below.

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. Modify the activity_main.xml layout

When you create a new activity with the Empty Activity template, it will automatically generate the MainActivity.java file and the activity_main.xml file, so replace the existing code with the code below, then the login page display will be created.

<?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

Now replace the code in the MainActivity class with the code below, please adjust it yourself.

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();
        }
    }
}

Okay, now please run your application in the emulator.

Comments

Bro, how do you transfer Java to Smali?

Answer

When you code an app, the apk file contains a file  .dex that contains binary Dalvik bytecode. This is a format that is actually understood by the machine. However, it is not easy to read or modify the binary code, so there are tools out there that can be used to convert it to a human-readable representation. The most common human-readable format is known as  Smali  as you mentioned. This is basically the same as a disassembler.

However, you can't just copy and paste bytecode/smali from one method to another. At a minimum, you'll need to fix the registers, and that can get even more complicated if you need to allocate more registers.

Compiling java code to smali is a good way to learn, but don't expect to be able to copy and paste the bytecode as is.

You can use it  dx to convert class files java to  dex.

javac Blah.java
dx --dex --output=classes.dex Blah.class

After that, you can run it  baksmali to  class.dex disassemble it into code  smali.

baksmali classes.dex

Example

Let's say you have a line of Java code like this.

int x = 42

Assuming this is the first variable, then the code  dex for the method will most likely contain hexadecimal sequences.

13 00 2A 00

If you run the command  baksmali, you will get a text file containing lines like this.

const/16 v0, 42

Which is obviously much easier to read than binary code. But the platform/engine doesn't know anything about  smali, it's just a tool to make it easier to work with  bytecode.

Dalvik  and  ART  both take the files  .dex that contain  bytecode dalvik. This is completely transparent to the application developer, the only difference between the two is what happens behind the scenes when the application is installed and run.


Post a Comment

Previous Next

نموذج الاتصال