Android Example [B4X]How to Implement Lottie in B4XPages (AXrLottie B4A and iLotttie B4i)

This is B4XPages example for LOTTIE implementation on Android and iOS

B4A Implementation
Uses AXrLottie. Download the library and dependencies here: https://www.b4x.com/android/forum/threads/axrlottie.126248/

1. Libraries to Add:
AxrLottie
Appcompat

2. Add this to MAIN

    #Extends :  androidx.appcompat.app.AppCompatActivity

And this

#If java
 static {
     // load native rlottie library
    System.loadLibrary("jlottie");
 }
#End If

3. Add Appcompat Theme in Manifest

SetApplicationAttribute(android:theme,"@style/AppTheme")
CreateResource(values,styles.xml,
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#3F51B5</item>
        <item name="colorPrimaryDark">#303F9F</item>
        <item name="colorAccent">#FF4081</item>
    </style>
</resources>)

4. Declare your Lottie and LottieView and Initialise

    Dim AXrLottie As AXrLottie
    Dim LottieView As AXrLottieImageView

5. Initialise the lottieview and add it to Root or any panel you like and Display

    LottieView.Initialize("")
    pnlLottie.AddView(LottieView,0,0,pnlLottie.Width,pnlLottie.Height)
    Dim Drawable As AXrLottieDrawableBuilder
    Drawable.InitializeFromFile(File.DirInternal,"emoji_simple.json") _
                .SetAutoRepeat(Drawable.AUTO_REPEAT_INFINITE) _
                .SetAutoStart(True) _
                .SetCacheEnabled(False)
    LottieView.SetLottieDrawable(Drawable.Build)

NOTE: Make sure to copy the lottie files (json) to Directory internal before you can use. It does not work form DirAssets

 

[mcqueccu]

B4i Implementation:

Depends on iLottie Download the iLottie Library by @Biswajit from Here:

Lottie (Render After Effects Animations Natively)

This is a wrapper for this Github project. Click here for the B4A wrapper by @DonManfred Here you can find free Lottie animations. Remember to download as Lottie JSON. iLottie Author: @Biswajit Version: 1 iLottie Events: AnimationFinished (Completed As Boolean) Fields: AnimationView As...

www.b4x.com

1. Add the Library in the libraries tab and Declare it in Class_Globals

Dim iLottie As iLottie

2. Initialize in B4XPage_created

iLottie.Initialize("lottie",Me)

3. Load your lottie Json and play

    iLottie.AnimationFromfile(directory,"emoji_simple.json")
    iLottie.ContentMode = iLottie.ASPECT_FIT_CONTENT
    pnlLottie.AddView(iLottie.AnimationView,0,0,pnlLottie.Width,pnlLottie.Height)
    iLottie.LoopAnimation = True
    iLottie.Play

 

[mcqueccu]

B4J Implementation:
Thanks to @jkhazraji for the B4J Implementation.

Steps
1. Get the Library from here and add the Jar and XML file to your Additional Libraries folder

Lottie animation

This is an attempt to bring lottie files to b4j. The .jar and .xml are there to be used. Put them in the additional libraries folder. Call from inside b4j (LottieView) as a custom view in the designer then set the path of the lottie file (.json) which is either -a local file must be in Objects...

www.b4x.com

2. Refresh your Libraries Tab.
3. Search and Tick/Select LOTTIEVIEW from the libraries Tab.
4. Open the Designer - UNDER CUSTOMVIEW, you will see Lottieview, Add it to your Form (layout)

NOTE: THE LOTTIE FILES CAN BE LOADED FROM EITHER OBJECTS FOLDER OR ONLINE URL. Check the Original Example


OPTIONS IN DESIGNER
Copy your Local Lottie File into Objects folder
1. Lottie Path: Enter the Name of the Lottie Json file in the path section (or the online path)
2. The Default options are okay, as you can see below. but you can change it to your liking example Autoplay, speed, etc.
3. Declare the View

4. RUN