Skip to content

Commit

Permalink
changes: add slide animation with controller
Browse files Browse the repository at this point in the history
  • Loading branch information
MadFlasheroo7 committed Aug 23, 2024
1 parent 79f76d5 commit e23aa85
Show file tree
Hide file tree
Showing 15 changed files with 860 additions and 14 deletions.
4 changes: 4 additions & 0 deletions .idea/inspectionProfiles/Project_Default.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 2 additions & 5 deletions app/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ android {
}

dependencies {
implementation(libs.commonmodule)
implementation(libs.cascade)
implementation(libs.cascade.compose)
implementation(libs.lottie)
Expand All @@ -65,15 +66,11 @@ dependencies {
implementation(libs.compose.material)
implementation(libs.compose.material3)
implementation(libs.navigation.compose)
// implementation(libs.coil.kt)
implementation(libs.coil.kt)
implementation(libs.coil.kt.compose)
testImplementation(libs.junit)
androidTestImplementation(libs.androidx.test.ext.junit)
androidTestImplementation(libs.espresso.core)
// migrate deprecated deps
// implementation("com.google.accompanist:accompanist-navigation-animation:0.29.1-alpha")
implementation(libs.commonmodule)
implementation("com.google.accompanist:accompanist-systemuicontroller:0.29.1-alpha")
androidTestImplementation(platform(libs.compose.bom))
androidTestImplementation(libs.android.test.compose.ui.test.junit4)
debugImplementation(libs.compose.ui.tooling)
Expand Down
4 changes: 1 addition & 3 deletions app/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
xmlns:tools="http://schemas.android.com/tools">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE" />

<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:enableOnBackInvokedCallback="true"

android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
Expand All @@ -21,10 +21,8 @@
android:theme="@style/Theme.Animations">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ import pro.jayeshseth.animations.ui.screens.AnimatedTransition
import pro.jayeshseth.animations.ui.screens.BouncyRope
import pro.jayeshseth.animations.ui.screens.HomeScreen
import pro.jayeshseth.animations.ui.screens.InfiniteRotation
import pro.jayeshseth.animations.ui.screens.ItemPlacementAnimation
import pro.jayeshseth.animations.ui.screens.SlideItemPlacement
import pro.jayeshseth.animations.ui.screens.SwipeRefresh
import pro.jayeshseth.animations.ui.screens.TrippyBlinders
import pro.jayeshseth.animations.ui.screens.VisibilityAnimation

@Composable
Expand All @@ -29,7 +32,8 @@ fun NavGraph() {
navToAnimateInfiniteRotation = { navController.navigate("INFINITE_ROTATION") },
navToSwipeRefresh = { navController.navigate("SWIPE_REFRESH") },
navToBouncyRopes = { navController.navigate("BOUNCY_ROPE") },
navToAnimateValueAsState = { navController.navigate("ANIMATE_VALUE_AS_STATE") }
navToAnimateValueAsState = { navController.navigate("ANIMATE_VALUE_AS_STATE") },
navToAnimatedListItemPlacement = { navController.navigate("ITEM_PLACEMENT_ANIMATION") }
)
}
composable("ANIMATE_VISIBILITY") {
Expand All @@ -56,5 +60,17 @@ fun NavGraph() {
composable("ANIMATE_VALUE_AS_STATE") {
AnimateValueAsState()
}
composable("SLIDE_IN_OUT") {
SlideItemPlacement()
}
composable("ITEM_PLACEMENT_ANIMATION") {
ItemPlacementAnimation(
navToTrippyBlinders = { navController.navigate("TRIPPY_BLINDER") },
navToSlideInOut = { navController.navigate("SLIDE_IN_OUT") }
)
}
composable("TRIPPY_BLINDER") {
TrippyBlinders()
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
package pro.jayeshseth.animations.ui.composables

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ControllerTemplate(
title: @Composable () -> Unit,
content: @Composable () -> Unit,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier,
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.fillMaxWidth()
) {
title()
}
content()
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
package pro.jayeshseth.animations.ui.composables

import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.MenuAnchorType
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DropDownTemplate(
value: String,
expanded: Boolean,
onExpandedChange: (Boolean) -> Unit,
title: @Composable () -> Unit,
onDismissRequest: () -> Unit,
content: @Composable ColumnScope.() -> Unit,
modifier: Modifier = Modifier
) {
ControllerTemplate(
modifier = modifier,
title = title,
content = {
ExposedDropdownMenuBox(
expanded = expanded,
onExpandedChange = onExpandedChange,
) {
TextField(
modifier = Modifier
.fillMaxWidth()
.menuAnchor(MenuAnchorType.PrimaryNotEditable),
value = value,
onValueChange = {},
readOnly = true,
singleLine = true,
shape = RoundedCornerShape(50.dp),
trailingIcon = {
ExposedDropdownMenuDefaults.TrailingIcon(
expanded = expanded
)
},
colors = ExposedDropdownMenuDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
),
)
ExposedDropdownMenu(
expanded = expanded,
onDismissRequest = onDismissRequest,
shape = RoundedCornerShape(25.dp),
content = content,
)
}
}
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
package pro.jayeshseth.animations.ui.composables

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlin.math.roundToInt

@Composable
fun SliderTemplate(
title: String,
value: Float,
step: Float,
onValueChange: (Float) -> Unit,
valueRange: ClosedFloatingPointRange<Float>
) {
val sliderValue = rememberUpdatedState(value)
ControllerTemplate(
title = {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.fillMaxWidth()
) {
Text(
text = title,
color = MaterialTheme.colorScheme.onBackground,
)
CompositionLocalProvider(
LocalContentColor provides MaterialTheme.colorScheme.onBackground,
) {
val snappedValue = snapSliderValue(valueRange.start, sliderValue.value, step)
Text(
text = "${snappedValue.roundToInt()}",
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
},
content = {
Slider(
value = sliderValue.value,
onValueChange = onValueChange,
onValueChangeFinished = { },
valueRange = valueRange,
steps = getSteps(valueRange, step),
modifier = Modifier
.padding(top = 2.dp, bottom = 12.dp)
.height(24.dp),
)
}
)
}

private fun getSteps(valueRange: ClosedFloatingPointRange<Float>, step: Float): Int {
if (step == 0f) return 0
val start = valueRange.start
val end = valueRange.endInclusive
val steps = ((end - start) / step).toInt()
require(start + step * steps == end) {
"value range must be a multiple of step"
}
return steps - 1
}

private fun snapSliderValue(start: Float, value: Float, step: Float): Float {
if (step == 0f) return value
val distance = value - start
val stepsFromStart = (distance / step).roundToInt()
val snappedDistance = stepsFromStart * step
return start + snappedDistance
}

@Preview(showBackground = true)
@Composable
private fun Preview() {
val value = remember {
mutableFloatStateOf(0f)
}
SliderTemplate(
title = "title",
value = value.floatValue,
step = 0.1f,
onValueChange = {
value.floatValue = it
},
valueRange = 0f..100f
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
package pro.jayeshseth.animations.ui.composables

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun Toggler(
title: String,
checked: Boolean,
onCheckedChanged: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true
) {
Row(
modifier = modifier,
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(text = title)
Spacer(modifier = Modifier.padding(8.dp))
Switch(
checked = checked,
onCheckedChange = onCheckedChanged,
enabled = enabled
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,17 @@ fun HomeScreen(
navToAnimateInfiniteRotation: () -> Unit,
navToSwipeRefresh: () -> Unit,
navToBouncyRopes: () -> Unit,
navToAnimateValueAsState: () -> Unit
navToAnimateValueAsState: () -> Unit,
navToAnimatedListItemPlacement: () -> Unit
) {
val scrollState = rememberScrollState()
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
HomeScaffold(
innerScrollState = scrollState,
verticalScrollState = scrollState,
topAppBarScrollBehavior = scrollBehavior,
title = {
Text(
text = "Animations in Jetpack Compose",
text = "Animations",
fontSize = 25.sp,
fontWeight = FontWeight.Bold
)
Expand All @@ -51,6 +52,10 @@ fun HomeScreen(
text = "Animate Visibility",
onClick = navToAnimateVisibility,
)
InteractiveButton(
text = "Animated List Item Placement",
onClick = navToAnimatedListItemPlacement,
)
InteractiveButton(
text = "Animated Content",
onClick = navToAnimateContent,
Expand Down Expand Up @@ -79,6 +84,10 @@ fun HomeScreen(
text = "Bouncy Ropes",
onClick = navToBouncyRopes
)
InteractiveButton(
text = "About",
onClick = navToBouncyRopes
)
}
}
}
Loading

0 comments on commit e23aa85

Please sign in to comment.