Skip to content

Commit 90c34d0

Browse files
UrAvgCodeUrAvgCode
committed
add animated chooser preview
1 parent ca018e1 commit 90c34d0

File tree

9 files changed

+248
-9
lines changed

9 files changed

+248
-9
lines changed

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/ModePage.kt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
77
import androidx.compose.animation.graphics.vector.AnimatedImageVector
88
import androidx.compose.foundation.BorderStroke
99
import androidx.compose.foundation.Image
10-
import androidx.compose.foundation.background
1110
import androidx.compose.foundation.layout.Arrangement
1211
import androidx.compose.foundation.layout.Column
1312
import androidx.compose.foundation.layout.Row
@@ -18,7 +17,6 @@ import androidx.compose.foundation.layout.size
1817
import androidx.compose.foundation.shape.RoundedCornerShape
1918
import androidx.compose.material3.Card
2019
import androidx.compose.material3.CardColors
21-
import androidx.compose.material3.CardDefaults
2220
import androidx.compose.material3.Icon
2321
import androidx.compose.material3.MaterialTheme
2422
import androidx.compose.material3.Text

‎app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/WelcomePage.kt‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,44 @@
11
package com.uravgcode.chooser.tutorial.presentation.page
22

3+
import androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi
4+
import androidx.compose.animation.graphics.res.animatedVectorResource
5+
import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
6+
import androidx.compose.animation.graphics.vector.AnimatedImageVector
7+
import androidx.compose.foundation.Image
38
import androidx.compose.foundation.layout.Arrangement
49
import androidx.compose.foundation.layout.Column
510
import androidx.compose.foundation.layout.Spacer
6-
import androidx.compose.foundation.layout.fillMaxSize
11+
import androidx.compose.foundation.layout.aspectRatio
712
import androidx.compose.foundation.layout.fillMaxWidth
813
import androidx.compose.foundation.layout.height
914
import androidx.compose.foundation.layout.padding
10-
import androidx.compose.material.icons.Icons
11-
import androidx.compose.material.icons.filled.TouchApp
12-
import androidx.compose.material3.Icon
1315
import androidx.compose.material3.MaterialTheme
1416
import androidx.compose.material3.Text
1517
import androidx.compose.runtime.Composable
18+
import androidx.compose.runtime.LaunchedEffect
19+
import androidx.compose.runtime.getValue
20+
import androidx.compose.runtime.mutableStateOf
21+
import androidx.compose.runtime.remember
22+
import androidx.compose.runtime.setValue
1623
import androidx.compose.ui.Alignment
1724
import androidx.compose.ui.Modifier
25+
import androidx.compose.ui.layout.ContentScale
1826
import androidx.compose.ui.text.style.TextAlign
1927
import androidx.compose.ui.unit.dp
28+
import com.uravgcode.chooser.R
29+
import kotlinx.coroutines.delay
2030

2131
@Composable
32+
@OptIn(ExperimentalAnimationGraphicsApi::class)
2233
fun WelcomePage() {
34+
val image = AnimatedImageVector.animatedVectorResource(R.drawable.chooser_preview_animated)
35+
var atEnd by remember { mutableStateOf(false) }
36+
37+
LaunchedEffect(Unit) {
38+
delay(300)
39+
atEnd = true
40+
}
41+
2342
Column(
2443
modifier = Modifier
2544
.fillMaxWidth()
@@ -39,10 +58,13 @@ fun WelcomePage() {
3958
textAlign = TextAlign.Center
4059
)
4160

42-
Icon(
43-
imageVector = Icons.Default.TouchApp,
61+
Image(
62+
painter = rememberAnimatedVectorPainter(image, atEnd),
4463
contentDescription = null,
45-
modifier = Modifier.fillMaxSize(0.5f),
64+
modifier = Modifier
65+
.fillMaxWidth()
66+
.aspectRatio(1f),
67+
contentScale = ContentScale.Crop
4668
)
4769

4870
Text(

‎app/src/main/res/animator/fade_in_growing_1.xml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<set xmlns:android="http://schemas.android.com/apk/res/android">
3+
<objectAnimator
4+
android:duration="250"
5+
android:interpolator="@android:interpolator/linear"
6+
android:propertyName="scaleX"
7+
android:valueFrom="0.0"
8+
android:valueTo="1.0"
9+
android:valueType="floatType" />
10+
<objectAnimator
11+
android:duration="250"
12+
android:interpolator="@android:interpolator/linear"
13+
android:propertyName="scaleY"
14+
android:valueFrom="0.0"
15+
android:valueTo="1.0"
16+
android:valueType="floatType" />
17+
</set>

‎app/src/main/res/animator/fade_in_growing_2.xml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<set xmlns:android="http://schemas.android.com/apk/res/android">
3+
<objectAnimator
4+
android:duration="250"
5+
android:interpolator="@android:interpolator/linear"
6+
android:propertyName="scaleX"
7+
android:startOffset="500"
8+
android:valueFrom="0.0"
9+
android:valueTo="1.0"
10+
android:valueType="floatType" />
11+
<objectAnimator
12+
android:duration="250"
13+
android:interpolator="@android:interpolator/linear"
14+
android:propertyName="scaleY"
15+
android:startOffset="500"
16+
android:valueFrom="0.0"
17+
android:valueTo="1.0"
18+
android:valueType="floatType" />
19+
</set>

‎app/src/main/res/animator/fade_in_growing_3.xml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<set xmlns:android="http://schemas.android.com/apk/res/android">
3+
<objectAnimator
4+
android:duration="250"
5+
android:interpolator="@android:interpolator/linear"
6+
android:propertyName="scaleX"
7+
android:startOffset="1000"
8+
android:valueFrom="0.0"
9+
android:valueTo="1.0"
10+
android:valueType="floatType" />
11+
<objectAnimator
12+
android:duration="250"
13+
android:interpolator="@android:interpolator/linear"
14+
android:propertyName="scaleY"
15+
android:startOffset="1000"
16+
android:valueFrom="0.0"
17+
android:valueTo="1.0"
18+
android:valueType="floatType" />
19+
</set>

‎app/src/main/res/animator/fade_in_growing_4.xml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<set xmlns:android="http://schemas.android.com/apk/res/android">
3+
<objectAnimator
4+
android:duration="250"
5+
android:interpolator="@android:interpolator/linear"
6+
android:propertyName="scaleX"
7+
android:startOffset="1500"
8+
android:valueFrom="0.0"
9+
android:valueTo="1.0"
10+
android:valueType="floatType" />
11+
<objectAnimator
12+
android:duration="250"
13+
android:interpolator="@android:interpolator/linear"
14+
android:propertyName="scaleY"
15+
android:startOffset="1500"
16+
android:valueFrom="0.0"
17+
android:valueTo="1.0"
18+
android:valueType="floatType" />
19+
</set>

‎app/src/main/res/drawable/chooser_preview.xml‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="108dp"
3+
android:height="108dp"
4+
android:viewportWidth="108"
5+
android:viewportHeight="108">
6+
<group
7+
android:name="red_circle"
8+
android:pivotX="13"
9+
android:pivotY="13"
10+
android:rotation="270"
11+
android:translateX="20"
12+
android:translateY="8">
13+
<path
14+
android:fillColor="@color/red"
15+
android:pathData="M13,13m-8.5,0a8.5,8.5 0,1 1,17 0a8.5,8.5 0,1 1,-17 0" />
16+
<path
17+
android:pathData="M1.15,13a11.85,11.85 0,1 0,23.7 0a11.85,11.85 0,1 0,-23.7 0z"
18+
android:strokeWidth="2.3"
19+
android:strokeColor="@color/red" />
20+
<path
21+
android:pathData="m18.197,18.197a7.35,7.35 0,0 1,-10.395 0,7.35 7.35,0 0,1 0,-10.395"
22+
android:strokeWidth="2.3"
23+
android:strokeAlpha="0.3"
24+
android:strokeColor="@color/white"
25+
android:strokeLineCap="round"
26+
android:strokeLineJoin="round" />
27+
<path
28+
android:pathData="M4.621,4.621A11.85,11.85 0,0 1,16.067 1.554,11.85 11.85,0 0,1 24.446,9.933 11.85,11.85 0,0 1,21.379 21.379"
29+
android:strokeWidth="2.3"
30+
android:strokeAlpha="0.3"
31+
android:strokeColor="@color/white"
32+
android:strokeLineCap="round"
33+
android:strokeLineJoin="round" />
34+
</group>
35+
<group
36+
android:name="blue_circle"
37+
android:pivotX="13"
38+
android:pivotY="13"
39+
android:translateX="62"
40+
android:translateY="28">
41+
<path
42+
android:fillColor="@color/blue"
43+
android:pathData="M13,13m-8.5,0a8.5,8.5 0,1 1,17 0a8.5,8.5 0,1 1,-17 0" />
44+
<path
45+
android:pathData="M1.15,13a11.85,11.85 0,1 0,23.7 0a11.85,11.85 0,1 0,-23.7 0z"
46+
android:strokeWidth="2.3"
47+
android:strokeColor="@color/blue" />
48+
<path
49+
android:pathData="m18.197,18.197a7.35,7.35 0,0 1,-10.395 0,7.35 7.35,0 0,1 0,-10.395"
50+
android:strokeWidth="2.3"
51+
android:strokeAlpha="0.3"
52+
android:strokeColor="@color/white"
53+
android:strokeLineCap="round"
54+
android:strokeLineJoin="round" />
55+
<path
56+
android:pathData="M4.621,4.621A11.85,11.85 0,0 1,16.067 1.554,11.85 11.85,0 0,1 24.446,9.933 11.85,11.85 0,0 1,21.379 21.379"
57+
android:strokeWidth="2.3"
58+
android:strokeAlpha="0.3"
59+
android:strokeColor="@color/white"
60+
android:strokeLineCap="round"
61+
android:strokeLineJoin="round" />
62+
</group>
63+
<group
64+
android:name="green_circle"
65+
android:pivotX="13"
66+
android:pivotY="13"
67+
android:rotation="90"
68+
android:translateX="20"
69+
android:translateY="54">
70+
<path
71+
android:fillColor="@color/green"
72+
android:pathData="M13,13m-8.5,0a8.5,8.5 0,1 1,17 0a8.5,8.5 0,1 1,-17 0" />
73+
<path
74+
android:pathData="M1.15,13a11.85,11.85 0,1 0,23.7 0a11.85,11.85 0,1 0,-23.7 0z"
75+
android:strokeWidth="2.3"
76+
android:strokeColor="@color/green" />
77+
<path
78+
android:pathData="m18.197,18.197a7.35,7.35 0,0 1,-10.395 0,7.35 7.35,0 0,1 0,-10.395"
79+
android:strokeWidth="2.3"
80+
android:strokeAlpha="0.3"
81+
android:strokeColor="@color/white"
82+
android:strokeLineCap="round"
83+
android:strokeLineJoin="round" />
84+
<path
85+
android:pathData="M4.621,4.621A11.85,11.85 0,0 1,16.067 1.554,11.85 11.85,0 0,1 24.446,9.933 11.85,11.85 0,0 1,21.379 21.379"
86+
android:strokeWidth="2.3"
87+
android:strokeAlpha="0.3"
88+
android:strokeColor="@color/white"
89+
android:strokeLineCap="round"
90+
android:strokeLineJoin="round" />
91+
</group>
92+
<group
93+
android:name="yellow_circle"
94+
android:pivotX="13"
95+
android:pivotY="13"
96+
android:rotation="180"
97+
android:translateX="62"
98+
android:translateY="74">
99+
<path
100+
android:fillColor="@color/yellow"
101+
android:pathData="M13,13m-8.5,0a8.5,8.5 0,1 1,17 0a8.5,8.5 0,1 1,-17 0" />
102+
<path
103+
android:pathData="M1.15,13a11.85,11.85 0,1 0,23.7 0a11.85,11.85 0,1 0,-23.7 0z"
104+
android:strokeWidth="2.3"
105+
android:strokeColor="@color/yellow" />
106+
<path
107+
android:pathData="m18.197,18.197a7.35,7.35 0,0 1,-10.395 0,7.35 7.35,0 0,1 0,-10.395"
108+
android:strokeWidth="2.3"
109+
android:strokeAlpha="0.3"
110+
android:strokeColor="@color/white"
111+
android:strokeLineCap="round"
112+
android:strokeLineJoin="round" />
113+
<path
114+
android:pathData="M4.621,4.621A11.85,11.85 0,0 1,16.067 1.554,11.85 11.85,0 0,1 24.446,9.933 11.85,11.85 0,0 1,21.379 21.379"
115+
android:strokeWidth="2.3"
116+
android:strokeAlpha="0.3"
117+
android:strokeColor="@color/white"
118+
android:strokeLineCap="round"
119+
android:strokeLineJoin="round" />
120+
</group>
121+
</vector>

‎app/src/main/res/drawable/chooser_preview_animated.xml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:drawable="@drawable/chooser_preview">
3+
<target
4+
android:name="green_circle"
5+
android:animation="@animator/fade_in_growing_1" />
6+
<target
7+
android:name="blue_circle"
8+
android:animation="@animator/fade_in_growing_2" />
9+
<target
10+
android:name="yellow_circle"
11+
android:animation="@animator/fade_in_growing_3" />
12+
<target
13+
android:name="red_circle"
14+
android:animation="@animator/fade_in_growing_4" />
15+
</animated-vector>

‎app/src/main/res/values/colors.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<resources>
3+
<color name="black">#000</color>
4+
<color name="white">#fff</color>
5+
<color name="blue">#2196f3</color>
6+
<color name="red">#ce2949</color>
7+
<color name="green">#4caf50</color>
8+
<color name="yellow">#ffeb3b</color>
9+
</resources>

0 commit comments

Comments
 (0)