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
B4X:
    #Extends :  androidx.appcompat.app.AppCompatActivity

And this

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

3. Add Appcompat Theme in Manifest

B4X:
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
B4X:
    Dim AXrLottie As AXrLottie
    Dim LottieView As AXrLottieImageView

5. Initialise the lottieview and add it to Root or any panel you like and Display
B4X:
    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
 

Attachments

  • LottieB4XExample.zip
    102 KB · Views: 215
Last edited:

mcqueccu

Well-Known Member
Licensed User
Longtime User
B4i Implementation:

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

1. Add the Library in the libraries tab and Declare it in Class_Globals
B4X:
Dim iLottie As iLottie

2. Initialize in B4XPage_created
B4X:
iLottie.Initialize("lottie",Me)

3. Load your lottie Json and play

B4X:
    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

Well-Known Member
Licensed User
Longtime User
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

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
1732814782497.png
 
Top