[Compose] Add support for images
diff --git a/.idea/misc.xml b/.idea/misc.xml
index c3085c1..d72f78c 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -26,6 +26,8 @@
<entry key="../../../../layout/compose-model-1615661124216.xml" value="0.28631756756756754" />
<entry key="../../../../layout/compose-model-1615661338631.xml" value="1.0" />
<entry key="../../../../layout/compose-model-1615661344364.xml" value="0.28607594936708863" />
+ <entry key="../../../../layout/custom_preview.xml" value="1.0" />
+ <entry key="issue-repro/src/main/res/layout/issue_repro_activity.xml" value="0.2545289855072464" />
</map>
</option>
</component>
diff --git a/.idea/modules.xml b/.idea/modules.xml
index 2590511..ec33ca5 100644
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -4,6 +4,7 @@
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/lottie-android.iml" filepath="$PROJECT_DIR$/.idea/lottie-android.iml" />
<module fileurl="file://$PROJECT_DIR$/.idea/modules/issue-repro/lottie-android.issue-repro.iml" filepath="$PROJECT_DIR$/.idea/modules/issue-repro/lottie-android.issue-repro.iml" />
+ <module fileurl="file://$PROJECT_DIR$/.idea/modules/issue-repro-compose/lottie-android.issue-repro-compose.iml" filepath="$PROJECT_DIR$/.idea/modules/issue-repro-compose/lottie-android.issue-repro-compose.iml" />
<module fileurl="file://$PROJECT_DIR$/.idea/modules/lottie/lottie-android.lottie.iml" filepath="$PROJECT_DIR$/.idea/modules/lottie/lottie-android.lottie.iml" />
<module fileurl="file://$PROJECT_DIR$/.idea/modules/lottie-compose/lottie-android.lottie-compose.iml" filepath="$PROJECT_DIR$/.idea/modules/lottie-compose/lottie-android.lottie-compose.iml" />
<module fileurl="file://$PROJECT_DIR$/.idea/modules/sample/lottie-android.sample.iml" filepath="$PROJECT_DIR$/.idea/modules/sample/lottie-android.sample.iml" />
diff --git a/issue-repro-compose/build.gradle b/issue-repro-compose/build.gradle
new file mode 100755
index 0000000..72f8700
--- /dev/null
+++ b/issue-repro-compose/build.gradle
@@ -0,0 +1,41 @@
+apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
+
+android {
+ compileSdkVersion 30
+ defaultConfig {
+ applicationId "com.airbnb.lottie.issues.compose"
+ minSdkVersion 21
+ targetSdkVersion 30
+ versionCode 1
+ versionName "1.0"
+ testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+ }
+
+ compileOptions {
+ sourceCompatibility JavaVersion.VERSION_1_8
+ targetCompatibility JavaVersion.VERSION_1_8
+ }
+ kotlinOptions {
+ jvmTarget = '1.8'
+ }
+
+ buildFeatures {
+ compose true
+ }
+ composeOptions {
+ kotlinCompilerExtensionVersion composeVersion
+ kotlinCompilerVersion kotlinVersion
+ }
+}
+
+dependencies {
+ implementation project(':lottie-compose')
+ implementation 'androidx.appcompat:appcompat:1.3.0-beta01'
+ implementation 'androidx.activity:activity-compose:1.3.0-alpha04'
+ implementation "androidx.compose.ui:ui:$composeVersion"
+ implementation "androidx.compose.material:material:$composeVersion"
+ implementation "androidx.compose.material:material-icons-extended:$composeVersion"
+ implementation "androidx.compose.ui:ui-tooling:$composeVersion"
+}
diff --git a/issue-repro-compose/src/main/AndroidManifest.xml b/issue-repro-compose/src/main/AndroidManifest.xml
new file mode 100755
index 0000000..3a75e49
--- /dev/null
+++ b/issue-repro-compose/src/main/AndroidManifest.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+ package="com.airbnb.lottie.issues.compose">
+
+ <application
+ android:icon="@mipmap/ic_launcher"
+ android:label="@string/app_name"
+ android:theme="@style/Theme.AppCompat.Light.NoActionBar">
+ <activity android:name=".ComposeIssueReproActivity">
+ <intent-filter>
+ <action android:name="android.intent.action.MAIN" />
+ <category android:name="android.intent.category.LAUNCHER" />
+ </intent-filter>
+ </activity>
+ </application>
+</manifest>
\ No newline at end of file
diff --git a/issue-repro-compose/src/main/java/com/airbnb/lottie/issues/compose/ComposeIssueReproActivity.kt b/issue-repro-compose/src/main/java/com/airbnb/lottie/issues/compose/ComposeIssueReproActivity.kt
new file mode 100755
index 0000000..4e55a5d
--- /dev/null
+++ b/issue-repro-compose/src/main/java/com/airbnb/lottie/issues/compose/ComposeIssueReproActivity.kt
@@ -0,0 +1,19 @@
+package com.airbnb.lottie.issues.compose
+
+import android.os.Bundle
+import androidx.activity.compose.setContent
+import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.runtime.Composable
+
+class ComposeIssueReproActivity : AppCompatActivity() {
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+ setContent {
+ Content()
+ }
+ }
+
+ @Composable
+ fun Content() {
+ }
+}
diff --git a/issue-repro-compose/src/main/res/mipmap-hdpi/ic_launcher.png b/issue-repro-compose/src/main/res/mipmap-hdpi/ic_launcher.png
new file mode 100755
index 0000000..898f3ed
--- /dev/null
+++ b/issue-repro-compose/src/main/res/mipmap-hdpi/ic_launcher.png
Binary files differ
diff --git a/issue-repro-compose/src/main/res/mipmap-mdpi/ic_launcher.png b/issue-repro-compose/src/main/res/mipmap-mdpi/ic_launcher.png
new file mode 100755
index 0000000..64ba76f
--- /dev/null
+++ b/issue-repro-compose/src/main/res/mipmap-mdpi/ic_launcher.png
Binary files differ
diff --git a/issue-repro-compose/src/main/res/mipmap-xhdpi/ic_launcher.png b/issue-repro-compose/src/main/res/mipmap-xhdpi/ic_launcher.png
new file mode 100755
index 0000000..e5ed465
--- /dev/null
+++ b/issue-repro-compose/src/main/res/mipmap-xhdpi/ic_launcher.png
Binary files differ
diff --git a/issue-repro-compose/src/main/res/mipmap-xxhdpi/ic_launcher.png b/issue-repro-compose/src/main/res/mipmap-xxhdpi/ic_launcher.png
new file mode 100755
index 0000000..b0907ca
--- /dev/null
+++ b/issue-repro-compose/src/main/res/mipmap-xxhdpi/ic_launcher.png
Binary files differ
diff --git a/issue-repro-compose/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/issue-repro-compose/src/main/res/mipmap-xxxhdpi/ic_launcher.png
new file mode 100755
index 0000000..2c18de9
--- /dev/null
+++ b/issue-repro-compose/src/main/res/mipmap-xxxhdpi/ic_launcher.png
Binary files differ
diff --git a/issue-repro-compose/src/main/res/values/strings.xml b/issue-repro-compose/src/main/res/values/strings.xml
new file mode 100755
index 0000000..dd8717f
--- /dev/null
+++ b/issue-repro-compose/src/main/res/values/strings.xml
@@ -0,0 +1,3 @@
+<resources>
+ <string name="app_name">Lottie Issue</string>
+</resources>
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/ImageAssetDelegateSetter.kt b/lottie-compose/src/main/java/com/airbnb/lottie/ImageAssetDelegateSetter.kt
new file mode 100644
index 0000000..222e45d
--- /dev/null
+++ b/lottie-compose/src/main/java/com/airbnb/lottie/ImageAssetDelegateSetter.kt
@@ -0,0 +1,10 @@
+package com.airbnb.lottie
+
+import com.airbnb.lottie.manager.ImageAssetManager
+
+/**
+ * Proxy for this internal API.
+ */
+internal fun LottieDrawable.setImageAssetManager(imageAssetManager: ImageAssetManager?) {
+ this.setImageAssetManager(imageAssetManager)
+}
\ No newline at end of file
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
index a242575..57feaa7 100644
--- a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
+++ b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
@@ -13,6 +13,8 @@
import com.airbnb.lottie.LottieComposition
import com.airbnb.lottie.LottieCompositionFactory
import com.airbnb.lottie.LottieDrawable
+import com.airbnb.lottie.manager.ImageAssetManager
+import com.airbnb.lottie.setImageAssetManager
import java.io.FileInputStream
import java.util.concurrent.TimeUnit
import java.util.zip.ZipInputStream
@@ -80,6 +82,16 @@
modifier: Modifier = Modifier,
) {
val drawable = remember { LottieDrawable() }
+ var imageAssetManager: ImageAssetManager? by remember { mutableStateOf(null) }
+
+ if (composition?.hasImages() == true) {
+ val context = LocalContext.current
+ LaunchedEffect(context, composition, state.imageAssetsFolder, state.imageAssetDelegate) {
+ imageAssetManager = ImageAssetManager(context, state.imageAssetsFolder, state.imageAssetDelegate, composition.images)
+ }
+ } else {
+ imageAssetManager = null
+ }
SideEffect {
drawable.composition = composition
@@ -119,10 +131,8 @@
.maintainAspectRatio(composition)
) {
drawIntoCanvas { canvas ->
- drawable.progress = state.progress
- drawable.setOutlineMasksAndMattes(state.outlineMasksAndMattes)
- drawable.isApplyingOpacityToLayersEnabled = state.applyOpacityToLayers
- drawable.enableMergePathsForKitKatAndAbove(state.enableMergePaths)
+ state.applyTo(drawable)
+ drawable.setImageAssetManager(imageAssetManager)
withTransform({
scale(size.width / composition.bounds.width().toFloat(), size.height / composition.bounds.height().toFloat(), Offset.Zero)
}) {
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
index b410285..6801bd0 100644
--- a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
+++ b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
@@ -1,10 +1,8 @@
package com.airbnb.lottie.compose
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
+import com.airbnb.lottie.ImageAssetDelegate
+import com.airbnb.lottie.LottieDrawable
/**
* Create a [LottieAnimationState] and remember it
@@ -13,13 +11,18 @@
* @param repeatCount Initial value for [LottieAnimationState.repeatCount]
* @param initialProgress Initial value for [LottieAnimationState.progress]
* @param enableMergePaths Initial value for [LottieAnimationState.enableMergePaths]
+ * @param imageAssetsFolder Initial value for [LottieAnimationState.imageAssetsFolder]
+ * @param imageAssetDelegate Initial value for [LottieAnimationState.imageAssetDelegate]
*/
@Composable
fun rememberLottieAnimationState(
autoPlay: Boolean = true,
repeatCount: Int = 0,
initialProgress: Float = 0f,
- enableMergePaths: Boolean = true
+ enableMergePaths: Boolean = true,
+ imageAssetsFolder: String? = null,
+ imageAssetDelegate: ImageAssetDelegate? = null,
+
): LottieAnimationState {
// Use rememberSavedInstanceState so you can pause/resume animations
return remember(repeatCount, autoPlay) {
@@ -27,7 +30,9 @@
isPlaying = autoPlay,
repeatCount = repeatCount,
initialProgress = initialProgress,
- enableMergePaths = enableMergePaths
+ enableMergePaths = enableMergePaths,
+ imageAssetsFolder = imageAssetsFolder,
+ imageAssetDelegate = imageAssetDelegate,
)
}
}
@@ -39,6 +44,8 @@
* @param repeatCount Initial value for [repeatCount]
* @param initialProgress Initial value for [progress]
* @param enableMergePaths Initial value for [enableMergePaths]
+ * @param imageAssetsFolder Initial value for [LottieAnimationState.imageAssetsFolder]
+ * @param imageAssetDelegate Initial value for [LottieAnimationState.imageAssetDelegate]
*
* @see rememberLottieAnimationState
*/
@@ -46,7 +53,9 @@
isPlaying: Boolean,
repeatCount: Int = 0,
initialProgress: Float = 0f,
- enableMergePaths: Boolean = true
+ enableMergePaths: Boolean = true,
+ imageAssetsFolder: String? = null,
+ imageAssetDelegate: ImageAssetDelegate? = null,
) {
var progress by mutableStateOf(initialProgress)
@@ -100,6 +109,35 @@
*/
var enableMergePaths by mutableStateOf(enableMergePaths)
+ /**
+ * If you use image assets, you must explicitly specify the folder in assets/ in which they are
+ * located because bodymovin uses the name filenames across all compositions (img_#).
+ * Do NOT rename the images themselves.
+ * <p>
+ * If your images are located in src/main/assets/airbnb_loader/ then set this to "airbnb_loader".
+ * <p>
+ * <p>
+ * Be wary if you are using many images, however. Lottie is designed to work with vector shapes
+ * from After Effects. If your images look like they could be represented with vector shapes,
+ * see if it is possible to convert them to shape layers and re-export your animation. Check
+ * the documentation at https://airbnb.io/lottie for more information about importing shapes from
+ * Sketch or Illustrator to avoid this.
+ */
+ var imageAssetsFolder by mutableStateOf(imageAssetsFolder)
+
+ /**
+ * Use this if you can't bundle images with your app. This may be useful if you download the
+ * animations from the network or have the images saved to an SD Card. In that case, Lottie
+ * will defer the loading of the bitmap to this delegate.
+ * <p>
+ * Be wary if you are using many images, however. Lottie is designed to work with vector shapes
+ * from After Effects. If your images look like they could be represented with vector shapes,
+ * see if it is possible to convert them to shape layers and re-export your animation. Check
+ * the documentation at https://airbnb.io/lottie for more information about importing shapes from
+ * Sketch or Illustrator to avoid this.
+ */
+ var imageAssetDelegate by mutableStateOf(imageAssetDelegate)
+
internal fun updateFrame(frame: Int) {
_frame.value = frame
}
@@ -107,4 +145,11 @@
fun toggleIsPlaying() {
isPlaying = !isPlaying
}
+
+ internal fun applyTo(drawable: LottieDrawable) {
+ drawable.progress = progress
+ drawable.setOutlineMasksAndMattes(outlineMasksAndMattes)
+ drawable.isApplyingOpacityToLayersEnabled = applyOpacityToLayers
+ drawable.enableMergePathsForKitKatAndAbove(enableMergePaths)
+ }
}
\ No newline at end of file
diff --git a/lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java b/lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java
index 8bfecd9..14ff5ac 100644
--- a/lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java
+++ b/lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java
@@ -23,6 +23,7 @@
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;
+import androidx.annotation.RestrictTo;
import com.airbnb.lottie.manager.FontAssetManager;
import com.airbnb.lottie.manager.ImageAssetManager;
@@ -75,6 +76,15 @@
}
}
};
+
+ /**
+ * ImageAssetManager created externally. By Compose, for example.
+ */
+ @Nullable
+ private ImageAssetManager imageAssetManagerOverride;
+ /**
+ * ImageAssetManager created automatically by Lottie for views.
+ */
@Nullable
private ImageAssetManager imageAssetManager;
@Nullable
@@ -1095,7 +1105,18 @@
return null;
}
+ /**
+ * Use by Lottie internally when outside of a normal View tree such as for Jetpack Compose.
+ */
+ @RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
+ void setImageAssetManager(@Nullable ImageAssetManager imageAssetManager) {
+ this.imageAssetManagerOverride = imageAssetManager;
+ }
+
private ImageAssetManager getImageAssetManager() {
+ if (imageAssetManagerOverride != null) {
+ return imageAssetManagerOverride;
+ }
if (getCallback() == null) {
// We can't get a bitmap since we can't get a Context from the callback.
return null;
diff --git a/lottie/src/main/java/com/airbnb/lottie/manager/ImageAssetManager.java b/lottie/src/main/java/com/airbnb/lottie/manager/ImageAssetManager.java
index 7182b70..833cf61 100644
--- a/lottie/src/main/java/com/airbnb/lottie/manager/ImageAssetManager.java
+++ b/lottie/src/main/java/com/airbnb/lottie/manager/ImageAssetManager.java
@@ -24,16 +24,16 @@
private static final Object bitmapHashLock = new Object();
private final Context context;
- private String imagesFolder;
+ private final String imagesFolder;
@Nullable private ImageAssetDelegate delegate;
private final Map<String, LottieImageAsset> imageAssets;
public ImageAssetManager(Drawable.Callback callback, String imagesFolder,
ImageAssetDelegate delegate, Map<String, LottieImageAsset> imageAssets) {
- this.imagesFolder = imagesFolder;
- if (!TextUtils.isEmpty(imagesFolder) &&
- this.imagesFolder.charAt(this.imagesFolder.length() - 1) != '/') {
- this.imagesFolder += '/';
+ if (!TextUtils.isEmpty(imagesFolder) && imagesFolder.charAt(imagesFolder.length() - 1) != '/') {
+ this.imagesFolder = imagesFolder + '/';
+ } else {
+ this.imagesFolder = imagesFolder;
}
if (!(callback instanceof View)) {
@@ -48,6 +48,17 @@
setDelegate(delegate);
}
+ public ImageAssetManager(Context context, String imagesFolder, ImageAssetDelegate delegate, Map<String, LottieImageAsset> imageAssets) {
+ this.context = context;
+ if (!TextUtils.isEmpty(imagesFolder) && imagesFolder.charAt(imagesFolder.length() - 1) != '/') {
+ this.imagesFolder = imagesFolder + '/';
+ } else {
+ this.imagesFolder = imagesFolder;
+ }
+ this.imageAssets = imageAssets;
+ setDelegate(delegate);
+ }
+
public void setDelegate(@Nullable ImageAssetDelegate assetDelegate) {
this.delegate = assetDelegate;
}
diff --git a/sample-compose/build.gradle b/sample-compose/build.gradle
index 6c57c64..8b6535d 100644
--- a/sample-compose/build.gradle
+++ b/sample-compose/build.gradle
@@ -56,20 +56,20 @@
implementation 'androidx.core:core-ktx:1.3.2'
implementation 'androidx.multidex:multidex:2.0.1'
implementation 'androidx.activity:activity-ktx:1.2.1'
- implementation 'androidx.activity:activity-compose:1.3.0-alpha03'
+ implementation 'androidx.activity:activity-compose:1.3.0-alpha04'
implementation 'androidx.appcompat:appcompat:1.3.0-beta01'
implementation 'com.google.android.material:material:1.3.0'
implementation "androidx.compose.ui:ui:$composeVersion"
implementation "androidx.compose.material:material:$composeVersion"
implementation "androidx.compose.material:material-icons-extended:$composeVersion"
implementation "androidx.compose.ui:ui-tooling:$composeVersion"
- implementation "androidx.navigation:navigation-compose:1.0.0-alpha08"
+ implementation "androidx.navigation:navigation-compose:1.0.0-alpha09"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.0'
implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.0'
implementation "androidx.navigation:navigation-ui-ktx:2.3.4"
- implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.2'
+ implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.3'
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.4.2'
implementation "com.google.dagger:dagger:$daggerVersion"
@@ -77,7 +77,7 @@
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-moshi:2.9.0'
- implementation "dev.chrisbanes.accompanist:accompanist-coil:0.6.0"
+ implementation "dev.chrisbanes.accompanist:accompanist-coil:0.6.1"
implementation 'com.airbnb.android:mavericks:2.1.0'
implementation 'com.airbnb.android:mavericks-compose:2.1.0-alpha01'
diff --git a/settings.gradle b/settings.gradle
index 428b963..a895a44 100644
--- a/settings.gradle
+++ b/settings.gradle
@@ -3,3 +3,4 @@
include ':sample'
include ':sample-compose'
include ':issue-repro'
+include ':issue-repro-compose'
