Iyatsu
Iyatsu

Reputation: 37

How to load an animation as background in LinearLayout?

Im trying to load one of my own animations (like a gif) as a background for my LinearLayout in Android Studio. I know that if it was a normal image I could just put it in drawable folder and do this:

android:background="@drawable/image"

But how would I accomplish this for an animation like a gif?

The LinearLayout is just a normal LinearLayout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:layout_width="match_parent"
    android:background="how would I put animation here?"
    android:layout_height="match_parent">

</LinearLayout>

Upvotes: 2

Views: 2266

Answers (2)

Adarsh Anurag
Adarsh Anurag

Reputation: 660

I had used the following approach in order to give animation in my application. There can be many other ways. I had done this...

Do this in xml.

<RelativeLayout
android:id="@+id/gradient_rl"        
android:layout_width="match_parent"        
android:layout_height="match_parent"
android:background="@drawable/profile_gradient4">

<!-- place your child views here-->

<Relativelayout/>

In drawable make a xml layout.

profile_gradient4.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:drawable="@drawable/profile_gradient1"
    android:duration="7500"/>
<item
    android:drawable="@drawable/profile_gradient2"
    android:duration="7500"/>
<item
    android:drawable="@drawable/profile_gradient3"
    android:duration="7500"/>
</animation-list>

You can get code for profile_gradient1, 2, 3 from here ->My app which runs a smooth animation in background. Those xml are present in drawable folder. You may even use normal images instead of these 3 xml layouts.

In java code inside your activty:

private void runGradient() {
    //method is used to give gradient color animation to the bottom of profile screen
    RelativeLayout relativeLayout = findViewById(R.id.gradient_rl);
    AnimationDrawable animationDrawable = (AnimationDrawable) relativeLayout.getBackground();
    animationDrawable.setEnterFadeDuration(5000);
    animationDrawable.setExitFadeDuration(7500);
    animationDrawable.start();
}

What was I doing above?

  1. The relative layout I made will have the background for my child views.

  2. In profile_gradient4.xml, I made an animation list consisting of 3 other drawables. They are profile_gradient1, 2 and 3.

  3. Then inside my activity, I got my animation list using AnimatonDrawable, gave entry and exit fade animation time and started the animation of profile_gradient1, 2 and 3.

You can use and run my app from GitHub link above.

Edit : Other suggestive approaches ->

If you want a gif animation to be your background, this article might help you->adding-gif-image-in-an-imageview-in-android.

You can also use some libraries like glide to display gif. Make that gif view span the size of its parent view and then draw other child views above that gif view.

Upvotes: 2

POMAIIIUK
POMAIIIUK

Reputation: 509

Create your background frames and animation list in folder drawable.

Example (animation list)background_animation:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/background_animation_0"
        android:duration="250"/>
    <item
        android:drawable="@drawable/background_animation_1"
        android:duration="250"/>
    <item
        android:drawable="@drawable/background_animation_2"
        android:duration="250"/>
    <item
        android:drawable="@drawable/background_animation_3"
        android:duration="250"/>

</animation-list>

Example (frame)background_animation_0:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="@color/colorAnimationBlue"
        android:centerColor="@color/colorAnimationBlue"
        android:endColor="@color/colorAnimationPink"
        android:angle="270"/>

</shape>

Add this to your layout:

android:background="@drawable/background_animation"

Add this to your Activity:

LinearLayout layout = findViewById(R.id.Layout);

BackgroundAnimation backgroundAnimation = (AnimationDrawable) layout.getBackground();
backgroundAnimation.setEnterFadeDuration(3700);
backgroundAnimation.setExitFadeDuration(3700);
backgroundAnimation.start();

Upvotes: 0

Related Questions