--wip-- [skip ci]
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
new file mode 100644
index 0000000..488a812
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
@@ -0,0 +1,51 @@
+package com.airbnb.lottie.sample.compose.composables
+
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.preferredSize
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import dev.chrisbanes.accompanist.coil.CoilImage
+
+@Composable
+fun AnimationRow(
+ title: String,
+ previewUrl: String,
+ previewBackgroundColor: Color,
+ onClick: () -> Unit
+) {
+ Surface(
+ modifier = Modifier.clickable(onClick = onClick)
+ ) {
+ Row(
+ verticalGravity = Alignment.CenterVertically,
+ modifier = Modifier
+ .padding(8.dp)
+ .fillMaxWidth()
+ ) {
+ CoilImage(
+ data = previewUrl,
+ modifier = Modifier
+ .preferredSize(40.dp)
+ .background(color = previewBackgroundColor)
+ .padding(end = 16.dp)
+ )
+ Text(
+ title,
+ fontSize = 16.sp,
+ overflow = TextOverflow.Ellipsis
+ )
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Loader.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Loader.kt
new file mode 100644
index 0000000..ee35bdc
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Loader.kt
@@ -0,0 +1,19 @@
+package com.airbnb.lottie.sample.compose.composables
+
+import androidx.compose.foundation.layout.preferredSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.airbnb.lottie.sample.compose.R
+
+@Composable
+fun Loader(
+ modifier: Modifier = Modifier
+) {
+ LottieAnimation(
+ LottieAnimationSpec.RawRes(R.raw.loading),
+ modifier = Modifier
+ .preferredSize(100.dp)
+ .then(modifier)
+ )
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Marquee.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Marquee.kt
new file mode 100644
index 0000000..8ab28bd
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Marquee.kt
@@ -0,0 +1,23 @@
+package com.airbnb.lottie.sample.compose.composables
+
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.airbnb.lottie.sample.compose.ui.textColorDark
+
+@Composable
+fun Marquee(text: String) {
+ Text(
+ text,
+ fontSize = 32.sp,
+ color = textColorDark,
+ fontWeight = FontWeight.Bold,
+ modifier = Modifier
+ .padding(vertical = 24.dp, horizontal = 16.dp)
+ )
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Scaffold.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Scaffold.kt
index 691bb1b..6589a23 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Scaffold.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/Scaffold.kt
@@ -3,14 +3,27 @@
import android.content.Context
import android.util.Log
import android.view.View
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Icon
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.BottomAppBar
+import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Providers
+import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.res.imageResource
+import androidx.compose.ui.res.vectorResource
import androidx.fragment.app.Fragment
+import androidx.navigation.NavOptions
+import androidx.navigation.NavOptionsBuilder
import androidx.navigation.fragment.findNavController
import com.airbnb.lottie.sample.compose.NavControllerAmbient
+import com.airbnb.lottie.sample.compose.R
import com.airbnb.lottie.sample.compose.ui.LottieTheme
fun Fragment.LottieComposeScaffoldView(context: Context, Content: @Composable () -> Unit): View {
@@ -18,11 +31,39 @@
setContent {
Providers(NavControllerAmbient provides findNavController()) {
LottieTheme {
- Surface(color = MaterialTheme.colors.background) {
+ Scaffold(
+ bottomBar = {
+ BottomAppBar{
+ Row(
+ horizontalArrangement = Arrangement.SpaceAround,
+ modifier = Modifier.fillMaxWidth()
+ ) {
+ BottomBarButton(R.drawable.ic_showcase) {
+ findNavController().navigate(R.id.showcase)
+ }
+
+ BottomBarButton(R.drawable.ic_lottie_files) {
+ findNavController().navigate(R.id.lottie_files)
+ }
+ BottomBarButton(R.drawable.ic_device) {
+ }
+ BottomBarButton(R.drawable.ic_learn) {
+ }
+ }
+ }
+ }
+ ){
Content()
}
}
}
}
}
+}
+
+@Composable
+fun BottomBarButton(@DrawableRes iconRes: Int, onClick: () -> Unit) {
+ IconButton(onClick = onClick) {
+ Icon(vectorResource(iconRes))
+ }
}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
new file mode 100644
index 0000000..af39716
--- /dev/null
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
@@ -0,0 +1,120 @@
+package com.airbnb.lottie.sample.compose.lottiefiles
+
+import android.graphics.drawable.shapes.RoundRectShape
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.StringRes
+import androidx.compose.foundation.Box
+import androidx.compose.foundation.ScrollableColumn
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.preferredHeight
+import androidx.compose.foundation.layout.preferredWidth
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Divider
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.onPositioned
+import androidx.compose.ui.platform.ConfigurationAmbient
+import androidx.compose.ui.platform.DensityAmbient
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.fragment.app.Fragment
+import com.airbnb.lottie.sample.compose.R
+import com.airbnb.lottie.sample.compose.composables.LottieComposeScaffoldView
+import com.airbnb.lottie.sample.compose.composables.Marquee
+
+class LottieFilesFragment : Fragment() {
+ override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
+ return LottieComposeScaffoldView(requireContext()) {
+ LottieFilesPage()
+ }
+ }
+}
+
+enum class LottieFilesTab(@StringRes val stringRes: Int) {
+ Recent(R.string.tab_recent),
+ Popular(R.string.tab_popular),
+ Search(R.string.tab_search)
+}
+
+@Composable
+fun LottieFilesPage() {
+ val tab = remember { mutableStateOf(LottieFilesTab.Recent) }
+
+ ScrollableColumn {
+ Marquee("LottieFiles")
+ LottieFilesTabBar(
+ selectedTab = tab.value,
+ onTabSelected = { tab.value = it },
+ )
+ }
+
+}
+
+@Composable
+fun LottieFilesTabBar(
+ selectedTab: LottieFilesTab,
+ onTabSelected: (LottieFilesTab) -> Unit,
+ modifier: Modifier = Modifier
+) {
+ Row(
+ modifier = Modifier.fillMaxWidth().then(modifier),
+ horizontalArrangement = Arrangement.Start
+ ) {
+ for (tab in LottieFilesTab.values()) {
+ LottieFilesTabBarTab(
+ text = stringResource(tab.stringRes),
+ isSelected = tab == selectedTab,
+ onClick = { onTabSelected(tab) }
+ )
+ }
+ }
+}
+
+@Composable
+fun LottieFilesTabBarTab(
+ text: String,
+ isSelected: Boolean,
+ onClick: () -> Unit
+) {
+ val textWidth = remember { mutableStateOf(0) }
+ val pxRatio = with(DensityAmbient.current) { 1.dp.toPx() }
+ Column(
+ modifier = Modifier
+ .clickable(onClick = onClick)
+ .padding(horizontal = 16.dp, vertical = 8.dp)
+ ) {
+ Text(
+ text,
+ maxLines = 1,
+ modifier = Modifier
+ .onPositioned { textWidth.value = it.size.width }
+ .wrapContentWidth()
+ )
+ if (isSelected) {
+ Box(
+ modifier = Modifier
+ .preferredHeight(3.dp)
+ .background(MaterialTheme.colors.primary)
+ .preferredWidth((textWidth.value / pxRatio).dp)
+ )
+ }
+ }
+}
\ No newline at end of file
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
index 21de3de..d2872ab 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
@@ -9,7 +9,6 @@
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.layout.*
import androidx.compose.material.Divider
-import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Providers
import androidx.compose.runtime.ambientOf
@@ -17,22 +16,13 @@
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.viewinterop.viewModel
import androidx.fragment.app.Fragment
import androidx.ui.tooling.preview.Preview
import com.airbnb.lottie.sample.compose.R
-import com.airbnb.lottie.sample.compose.api.FeaturedAnimationsResponse
-import com.airbnb.lottie.sample.compose.composables.LottieAnimation
-import com.airbnb.lottie.sample.compose.composables.LottieAnimationSpec
-import com.airbnb.lottie.sample.compose.composables.LottieComposeScaffoldView
+import com.airbnb.lottie.sample.compose.composables.*
import com.airbnb.lottie.sample.compose.findNavController
import com.airbnb.lottie.sample.compose.ui.LottieTheme
-import com.airbnb.lottie.sample.compose.ui.textColorDark
import com.airbnb.mvrx.*
-import dev.chrisbanes.accompanist.coil.CoilImage
val ShowcaseStateAmbient = ambientOf { ShowcaseState() }
@@ -83,62 +73,6 @@
}
}
-@Composable
-fun Marquee(text: String) {
- Text(
- text,
- fontSize = 16.sp,
- color = textColorDark,
- modifier = Modifier
- .padding(vertical = 24.dp, horizontal = 16.dp)
- )
-}
-
-@Composable
-fun Loader(
- modifier: Modifier = Modifier
-) {
- LottieAnimation(
- LottieAnimationSpec.RawRes(R.raw.loading),
- modifier = Modifier
- .preferredSize(100.dp)
- .then(modifier)
- )
-}
-
-@Composable
-fun AnimationRow(
- title: String,
- previewUrl: String,
- previewBackgroundColor: Color,
- onClick: () -> Unit
-) {
- Surface(
- modifier = Modifier.clickable(onClick = onClick)
- ) {
- Row(
- verticalGravity = Alignment.CenterVertically,
- modifier = Modifier
- .padding(8.dp)
- .fillMaxWidth()
- ) {
- CoilImage(
- data = previewUrl,
- modifier = Modifier
- .preferredSize(40.dp)
- .background(color = previewBackgroundColor)
- .padding(end = 16.dp)
- )
- Text(
- title,
- fontSize = 16.sp,
- overflow = TextOverflow.Ellipsis
- )
- }
-
- }
-}
-
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
diff --git a/sample-compose/src/main/res/drawable/ic_device.xml b/sample-compose/src/main/res/drawable/ic_device.xml
new file mode 100644
index 0000000..d8bcbb4
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_device.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24.0"
+ android:viewportHeight="24.0">
+ <path
+ android:fillColor="#FF4C4C4C"
+ android:pathData="M17,1.01L7,1c-1.1,0 -1.99,0.9 -1.99,2v18c0,1.1 0.89,2 1.99,2h10c1.1,0 2,-0.9 2,-2V3c0,-1.1 -0.9,-1.99 -2,-1.99zM17,19H7V5h10v14z"/>
+</vector>
diff --git a/sample-compose/src/main/res/drawable/ic_learn.xml b/sample-compose/src/main/res/drawable/ic_learn.xml
new file mode 100644
index 0000000..bfebdd4
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_learn.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24"
+ android:tint="?attr/colorControlNormal">
+ <path
+ android:fillColor="@android:color/white"
+ android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM13,19h-2v-2h2v2zM15.07,11.25l-0.9,0.92C13.45,12.9 13,13.5 13,15h-2v-0.5c0,-1.1 0.45,-2.1 1.17,-2.83l1.24,-1.26c0.37,-0.36 0.59,-0.86 0.59,-1.41 0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2L8,9c0,-2.21 1.79,-4 4,-4s4,1.79 4,4c0,0.88 -0.36,1.68 -0.93,2.25z"/>
+</vector>
diff --git a/sample-compose/src/main/res/drawable/ic_lottie_files.xml b/sample-compose/src/main/res/drawable/ic_lottie_files.xml
new file mode 100644
index 0000000..fc847b3
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_lottie_files.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24"
+ android:tint="?attr/colorControlNormal">
+ <path
+ android:fillColor="@android:color/white"
+ android:pathData="M19.36,10.04C18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,10.91 0,14c0,3.31 2.69,6 6,6h13c2.76,0 5,-2.24 5,-5 0,-2.64 -2.05,-4.78 -4.64,-4.96z"/>
+</vector>
diff --git a/sample-compose/src/main/res/drawable/ic_showcase.xml b/sample-compose/src/main/res/drawable/ic_showcase.xml
new file mode 100644
index 0000000..ee61005
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_showcase.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24.0"
+ android:viewportHeight="24.0">
+ <path
+ android:fillColor="#FF000000"
+ android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM16.23,18L12,15.45 7.77,18l1.12,-4.81 -3.73,-3.23 4.92,-0.42L12,5l1.92,4.53 4.92,0.42 -3.73,3.23L16.23,18z"/>
+</vector>
diff --git a/sample-compose/src/main/res/navigation/nav_graph.xml b/sample-compose/src/main/res/navigation/nav_graph.xml
index 9aa1733..8fb8859 100644
--- a/sample-compose/src/main/res/navigation/nav_graph.xml
+++ b/sample-compose/src/main/res/navigation/nav_graph.xml
@@ -10,4 +10,8 @@
<fragment
android:id="@+id/showcase"
android:name="com.airbnb.lottie.sample.compose.showcase.ShowcaseFragment" />
+
+ <fragment
+ android:id="@+id/lottie_files"
+ android:name="com.airbnb.lottie.sample.compose.lottiefiles.LottieFilesFragment" />
</navigation>
\ No newline at end of file
diff --git a/sample-compose/src/main/res/values/strings.xml b/sample-compose/src/main/res/values/strings.xml
index a7e068d..54037d2 100644
--- a/sample-compose/src/main/res/values/strings.xml
+++ b/sample-compose/src/main/res/values/strings.xml
@@ -1,3 +1,7 @@
<resources>
<string name="app_name">LottieCompose</string>
+
+ <string name="tab_recent">Recent</string>
+ <string name="tab_popular">Popular</string>
+ <string name="tab_search">Search</string>
</resources>
\ No newline at end of file
