Skip to content

Commit 6ae0cb8

Browse files
GurupreetGurupreet
committed
motion layout examples
1 parent 833bb61 commit 6ae0cb8

File tree

6 files changed

+225
-3
lines changed

6 files changed

+225
-3
lines changed

‎app/src/main/java/com/guru/composecookbook/ui/home/HomeScreen.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,9 @@ fun homeItemClicked(homeScreenItems: HomeScreenItems, context: Context, isDarkTh
256256
HomeScreenItems.CustomFling -> {
257257
FlingListActivity.newIntent(context = context, isDarkTheme = isDarkTheme)
258258
}
259+
HomeScreenItems.MotionLayout -> {
260+
DynamicUIActivity.newIntent(context, DynamicUiType.MOTIONLAYOUT.name, isDarkTheme)
261+
}
259262
}
260263
context.startActivity(intent)
261264
}

‎app/src/main/java/com/guru/composecookbook/ui/home/dynamic/DynamicUIActivity.kt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import com.guru.composecookbook.theme.ComposeCookBookTheme
1717
import com.guru.composecookbook.ui.home.androidviews.AndroidViews
1818
import com.guru.composecookbook.ui.home.constraintlayout.ConstraintLayoutDemos
1919
import com.guru.composecookbook.ui.home.dialogs.BottomSheetLayouts
20+
import com.guru.composecookbook.ui.home.motionlayout.MotionLayoutDemo
2021
import com.guru.composecookbook.ui.home.pullrefreshdemos.PullRefreshList
2122
import com.guru.composecookbook.ui.home.tabslayout.TabLayout
2223
import com.guru.composecookbook.ui.learnwidgets.Layouts
@@ -101,6 +102,9 @@ fun DynamicUiWrapper(uiType: String, onback: () -> Unit) {
101102
DynamicUiType.PULLRERESH.name -> {
102103
PullRefreshList(onPullRefresh = {})
103104
}
105+
DynamicUiType.MOTIONLAYOUT.name -> {
106+
MotionLayoutDemo()
107+
}
104108
}
105109
}
106110
)

‎app/src/main/java/com/guru/composecookbook/ui/home/dynamic/DynamicUiType.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@ enum class DynamicUiType {
88
CAROUSELL,
99
MODIFIERS,
1010
ANDROIDVIEWS,
11-
PULLRERESH
11+
PULLRERESH,
12+
MOTIONLAYOUT
1213
}

‎app/src/main/java/com/guru/composecookbook/ui/home/motionlayout/MotionLayoutDemo.kt‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
package com.guru.composecookbook.ui.home.motionlayout
2+
3+
import androidx.compose.animation.core.animateFloatAsState
4+
import androidx.compose.animation.core.tween
5+
import androidx.compose.foundation.Image
6+
import androidx.compose.foundation.background
7+
import androidx.compose.foundation.clickable
8+
import androidx.compose.foundation.layout.*
9+
import androidx.compose.foundation.lazy.LazyRow
10+
import androidx.compose.foundation.shape.CircleShape
11+
import androidx.compose.foundation.shape.RoundedCornerShape
12+
import androidx.compose.material.Button
13+
import androidx.compose.material.Icon
14+
import androidx.compose.material.Text
15+
import androidx.compose.material.icons.Icons
16+
import androidx.compose.material.icons.filled.Close
17+
import androidx.compose.material.icons.filled.PlayArrow
18+
import androidx.compose.runtime.*
19+
import androidx.compose.ui.Modifier
20+
import androidx.compose.ui.draw.clip
21+
import androidx.compose.ui.graphics.Color
22+
import androidx.compose.ui.layout.layoutId
23+
import androidx.compose.ui.res.painterResource
24+
import androidx.compose.ui.text.style.TextAlign
25+
import androidx.compose.ui.tooling.preview.Preview
26+
import androidx.compose.ui.unit.dp
27+
import androidx.compose.ui.unit.sp
28+
import androidx.compose.ui.zIndex
29+
import androidx.constraintlayout.compose.ConstraintSet
30+
import androidx.constraintlayout.compose.MotionLayout
31+
import androidx.constraintlayout.compose.layoutId
32+
import com.guru.composecookbook.data.AlbumsDataProvider
33+
import com.guru.composecookbook.data.DemoDataProvider
34+
import com.guru.composecookbook.moviesapp.ui.home.components.imageIds
35+
import com.guru.fontawesomecomposelib.FaIcon
36+
37+
@Preview(group = "motion7")
38+
@Composable
39+
fun MotionLayoutDemo() {
40+
Column(Modifier.background(Color.White)) {
41+
ButtonsMotionExample()
42+
Spacer(modifier = Modifier.height(200.dp))
43+
ImageMotionExample()
44+
}
45+
}
46+
47+
@Composable
48+
private fun ButtonsMotionExample() {
49+
var animateButton by remember { mutableStateOf(false) }
50+
val buttonAnimationProgress by animateFloatAsState(
51+
targetValue = if (animateButton) 1f else 0f,
52+
animationSpec = tween(1000)
53+
)
54+
Spacer(modifier = Modifier.height(16.dp))
55+
MotionLayout(
56+
ConstraintSet(
57+
""" {
58+
button1: {
59+
width: "spread",
60+
height: 60,
61+
start: ['parent', 'start', 16],
62+
end: ['parent', 'end', 16],
63+
top: ['parent', 'top', 16]
64+
},
65+
button2: {
66+
width: "spread",
67+
height: 60,
68+
start: ['parent', 'start', 16],
69+
end: ['parent', 'end', 16],
70+
top: ['button1', 'bottom', 16]
71+
},
72+
button3: {
73+
width: "spread",
74+
height: 60,
75+
start: ['parent', 'start', 16],
76+
end: ['parent', 'end', 16],
77+
top: ['button2', 'bottom', 16]
78+
}
79+
} """
80+
),
81+
ConstraintSet(
82+
""" {
83+
button1: {
84+
width: 100,
85+
height: 60,
86+
start: ['parent', 'start', 16],
87+
end: ['button2', 'start', 16]
88+
},
89+
button2: {
90+
width: 100,
91+
height: 60,
92+
start: ['button1', 'end', 16],
93+
end: ['button2', 'start', 16]
94+
},
95+
button3: {
96+
width: 100,
97+
height: 60,
98+
start: ['button2', 'end', 16],
99+
end: ['parent', 'end', 16]
100+
}
101+
} """
102+
),
103+
progress = buttonAnimationProgress,
104+
modifier = Modifier
105+
.fillMaxWidth()
106+
.wrapContentHeight()
107+
.background(Color.White)
108+
) {
109+
Button(
110+
onClick = { animateButton = !animateButton }, modifier = Modifier.layoutId
111+
("button1")
112+
) {
113+
Text(text = "Button1")
114+
}
115+
Button(
116+
onClick = { animateButton = !animateButton }, modifier = Modifier.layoutId
117+
("button2")
118+
) {
119+
Text(text = "Button2")
120+
}
121+
Button(
122+
onClick = { animateButton = !animateButton }, modifier = Modifier.layoutId
123+
("button3")
124+
) {
125+
Text(text = "Button3")
126+
}
127+
}
128+
}
129+
130+
@Composable
131+
private fun ImageMotionExample() {
132+
val albums = AlbumsDataProvider.albums.take(4)
133+
var animateImage by remember { mutableStateOf(false) }
134+
val imageAnimationProgress by animateFloatAsState(
135+
targetValue = if (animateImage) 1f else 0f,
136+
animationSpec = tween(1000)
137+
)
138+
MotionLayout(
139+
ConstraintSet(
140+
""" {
141+
image1: {
142+
width: 150,
143+
height: 150,
144+
start: ['parent', 'start', 16]
145+
},
146+
image2: {
147+
width: 150,
148+
height: 150,
149+
start: ['parent', 'start', 24]
150+
},
151+
image3: {
152+
width: 150,
153+
height: 150,
154+
start: ['parent', 'start', 32]
155+
},
156+
image4: {
157+
width: 150,
158+
height: 150,
159+
start: ['parent', 'start', 40]
160+
}
161+
} """
162+
),
163+
ConstraintSet(
164+
""" {
165+
image1: {
166+
width: 150,
167+
height: 150,
168+
start: ['parent', 'start', 16]
169+
},
170+
image2: {
171+
width: 150,
172+
height: 150,
173+
start: ['image1', 'end', 16]
174+
},
175+
image3: {
176+
width: 150,
177+
height: 150,
178+
start: ['parent', 'start', 16],
179+
top: ['image1', 'bottom', 16]
180+
},
181+
image4: {
182+
width: 150,
183+
height: 150,
184+
start: ['image1', 'end', 16],
185+
top: ['image1', 'bottom', 16]
186+
}
187+
} """
188+
),
189+
progress = imageAnimationProgress,
190+
modifier = Modifier
191+
.fillMaxSize()
192+
.background(Color.White)
193+
) {
194+
Image(painter = painterResource(id = albums[0].imageId), contentDescription = "",
195+
modifier = Modifier
196+
.layoutId("image1")
197+
.clickable { animateImage = !animateImage })
198+
Image(painter = painterResource(id = albums[1].imageId), contentDescription = "",
199+
modifier = Modifier
200+
.layoutId("image2")
201+
.clickable { animateImage = !animateImage })
202+
Image(painter = painterResource(id = albums[2].imageId), contentDescription = "",
203+
modifier = Modifier
204+
.layoutId("image3")
205+
.clickable { animateImage = !animateImage })
206+
Image(painter = painterResource(id = albums[3].imageId), contentDescription = "",
207+
modifier = Modifier
208+
.layoutId("image4")
209+
.clickable { animateImage = !animateImage })
210+
}
211+
}

‎data/src/main/java/com/guru/composecookbook/data/DemoDataProvider.kt‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -331,13 +331,14 @@ object DemoDataProvider {
331331
HomeScreenItems.ListView("Vertical"),
332332
HomeScreenItems.ListView("Horizontal"),
333333
HomeScreenItems.ListView("Grid"),
334-
HomeScreenItems.Layouts,
335334
HomeScreenItems.Modifiers,
335+
HomeScreenItems.Layouts,
336+
HomeScreenItems.ConstraintsLayout,
337+
HomeScreenItems.MotionLayout,
336338
HomeScreenItems.AdvanceLists,
337339
HomeScreenItems.CustomFling,
338340
HomeScreenItems.AndroidViews,
339341
HomeScreenItems.Carousel,
340-
HomeScreenItems.ConstraintsLayout,
341342
HomeScreenItems.Dialogs,
342343
HomeScreenItems.TabLayout,
343344
HomeScreenItems.BottomSheets,

‎data/src/main/java/com/guru/composecookbook/data/model/HomeScreenItems.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ sealed class HomeScreenItems {
1515
object AndroidViews : HomeScreenItems()
1616
object PullRefresh : HomeScreenItems()
1717
object CustomFling : HomeScreenItems()
18+
object MotionLayout: HomeScreenItems()
1819

1920
val name: String
2021
get() = when (this) {
@@ -23,6 +24,7 @@ sealed class HomeScreenItems {
2324
is Carousel -> "Carousel"
2425
is ListView -> "$type ListView"
2526
ConstraintsLayout -> "Constraint Layout"
27+
MotionLayout -> "Motion Layout"
2628
CollapsingAppBar -> "Collapsing AppBar"
2729
BottomAppBar -> "BottomAppBar"
2830
BottomSheets -> "BottomSheets"

0 commit comments

Comments
 (0)