update: demo

Author: hamdiwanis

demo/app/App_Resources/Android/app.gradle

@@ -1,16 +1,27 @@
-// Add your native dependencies here:
+android {
+  compileSdkVersion 27
+  defaultConfig {
+    targetSdkVersion 27
+    generatedDensities = []
+    applicationId = "org.nativescript.demo"
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}
 
-// Uncomment to add recyclerview-v7 dependency
-//dependencies {
-//	compile 'com.android.support:recyclerview-v7:+'
-//}
+def settingsGradlePath
+
+if(project.hasProperty("appResourcesPath")){
+    settingsGradlePath = "$project.appResourcesPath/Android/settings.gradle";
+} else {
+    settingsGradlePath = "$rootDir/../../app/App_Resources/Android/settings.gradle";
+}
+
+def settingsGradleFile = new File(settingsGradlePath);
+
+if(settingsGradleFile.exists())
+{
+    apply from: settingsGradleFile;
+}
 
-android {  
-  defaultConfig {  
-    generatedDensities = []
-    applicationId = "org.nativescript.demo"  
-  }  
-  aaptOptions {  
-    additionalParameters "--no-version-vectors"  
-  }  
-} 

demo/app/main-page.xml

@@ -1,11 +1,11 @@
 <Page 
-    xmlns="http://schemas.nativescript.org/tns.xsd" 
+    xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:Lottie="nativescript-lottie" navigatingTo="navigatingTo" class="page">
     <Page.actionBar>
         <ActionBar title="Airbnb Lottie" icon="" class="action-bar"></ActionBar>
     </Page.actionBar>
     <ScrollView>
-        <GridLayout rows="auto, auto, auto, auto" columns="*" class="p-10">
+        <GridLayout rows="auto, auto, auto, auto, auto" columns="*" class="p-10">
             <Label row="0" col="0" text="Yea... NativeScript supports Lottie - Thanks Airbnb!!!" class="h3" textWrap="true"></Label>
             <StackLayout row="1" orientation="vertical">
                 <Lottie:LottieView src="{{ src }}" height="150" width="auto" loop="{{ loop }}" autoPlay="{{ autoPlay }}" loaded="{{ lottieLoaded }}" />
@@ -17,6 +17,23 @@
                 <Button text="Start animation" class="p-10 btn btn-primary" tap="{{ startOrStopAnimation }}"></Button>
                 <Button text="Stop animation" class="p-10 btn btn-primary" tap="{{ startOrStopAnimation }}"></Button>
             </StackLayout>
+
+            <StackLayout row="4">
+                <Lottie:LottieView src="AndroidWave.json" theme="{{ theme }}" height="400" width="auto" loop="true" autoPlay="true"/>
+
+                <WrapLayout height="120" width="100%">
+                    <StackLayout height="50%" width="20%" backgroundColor="red" tap="{{ setTheme('red') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="gold" tap="{{ setTheme('gold') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="green" tap="{{ setTheme('green') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="orange" tap="{{ setTheme('orange') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="gray" tap="{{ setTheme('gray') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="#191970" tap="{{ setTheme('#191970') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="#00bfff" tap="{{ setTheme('#00bfff') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="#8b008b" tap="{{ setTheme('#8b008b') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="#2f4f4f" tap="{{ setTheme('#2f4f4f') }}"/>
+                    <StackLayout height="50%" width="20%" backgroundColor="#8b4513" tap="{{ setTheme('#8b4513') }}"/>
+                </WrapLayout>
+            </StackLayout>
         </GridLayout>
     </ScrollView>
 </Page>

demo/app/main-view-model.ts

@@ -10,6 +10,7 @@ export class HelloWorldModel extends Observable {
   public src: string;
   public loop: boolean;
   public autoPlay: boolean;
+  public theme;
 
   constructor() {
     super();
@@ -56,4 +57,13 @@ export class HelloWorldModel extends Observable {
   public toggleLoop() {
     this._myLottie.loop = !this._myLottie.loop;
   }
+
+  setTheme = color => () => {
+    let theme = [
+      {keyPath: ['Shirt', 'Group 5', 'Fill 1'], value: color},
+      {keyPath: ['LeftArmWave', 'LeftArm','Group 6', 'Fill 1'], value: color},
+      {keyPath: ['RightArm', 'Group 6', 'Fill 1'], value: color}
+    ];
+    this.set('theme', theme);
+  }
 }