diff --git a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt index 1103c5d..d4c7a95 100644 --- a/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt +++ b/app/src/main/java/dev/baseio/composeplayground/MainActivity.kt @@ -8,12 +8,18 @@ import android.view.Window import android.view.WindowManager import androidx.activity.ComponentActivity import androidx.activity.compose.setContent +import androidx.compose.foundation.border import androidx.compose.foundation.layout.* +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material.Divider import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface +import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.core.view.ViewCompat import androidx.core.view.WindowInsetsCompat @@ -28,9 +34,14 @@ import dev.baseio.composeplayground.ui.animations.anmolverma.GramophoneDisc import dev.baseio.composeplayground.ui.animations.anmolverma.ShootingStarsAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.SlackAnimation import dev.baseio.composeplayground.ui.animations.anmolverma.googleio2022.GoogleIO +import dev.baseio.composeplayground.ui.animations.anmolverma.loadingindicators.LoadingAnimation +import dev.baseio.composeplayground.ui.animations.anmolverma.loadingindicators.LoadingIndicator +import dev.baseio.composeplayground.ui.animations.anmolverma.loadingindicators.Size +import dev.baseio.composeplayground.ui.animations.anmolverma.loadingindicators.Speed import dev.baseio.composeplayground.ui.animations.anmolverma.planetarysystem.PlanetarySystem import dev.baseio.composeplayground.ui.animations.anmolverma.pulltorefresh.PullToRefreshOne import dev.baseio.composeplayground.ui.theme.ComposePlaygroundTheme +import dev.baseio.composeplayground.ui.theme.Typography class MainActivity : ComponentActivity() { @OptIn(ExperimentalPagerApi::class) @@ -72,91 +83,141 @@ class MainActivity : ComponentActivity() { ) { HorizontalPager( modifier = Modifier.fillMaxSize(), - count = 18, state = pagerState, + count = 19, state = pagerState, ) { page -> - // Our page content - when (page) { - 4 -> { - PullToRefreshOne() - } - 7 -> { - Box(Modifier.fillMaxSize()) { - GlowingRingLoader(Modifier.align(Alignment.Center)) - } - } - 6 -> { - Box(Modifier.fillMaxSize()) { - YahooWeatherAndSun(Modifier.align(Alignment.Center)) - } - } - 10 -> { - Box(modifier = Modifier.fillMaxSize()) { - IOSSleepSchedule() - } - } - 12 -> { - TwitterSplashAnimation() - } - 13 -> { - AndroidMadSkills() - } - 16 -> { - ShootingStarsAnimation() - } - 0 -> { - GoogleIO() - } - 17 -> { - NetflixIntroAnimation() - } - 11 -> { - Box(modifier = Modifier.fillMaxSize()) { - Github404(Modifier) - } - } - 9 -> { - Box(modifier = Modifier.fillMaxSize()) { - ScalingRotatingLoader() - } - } - 8 -> { - Box(Modifier.fillMaxSize()) { - PlanetarySystem(Modifier.align(Alignment.Center)) - } - } - 15 -> { - Box(Modifier.fillMaxSize()) { - LikeAnimation(Modifier.align(Alignment.Center)) - } - } - 1 -> { - SlackAnimation() - } - 2 -> { - GramophoneDisc() - } - 14 -> { - Box(Modifier.fillMaxSize()) { - ChatMessageReactions(Modifier.align(Alignment.Center)) - } - } - 3 -> { - Box(Modifier.fillMaxSize()) { - MenuToClose(Modifier.align(Alignment.Center)) - } - } - 5 -> { - Box(Modifier.fillMaxSize()) { - BellAnimation(Modifier.align(Alignment.Center)) - } + // Our page content + when (page) { + 0 -> { + GoogleIO() + } + 1 -> { + SlackAnimation() + } + 2 -> { +// GramophoneDisc() + } + 3 -> { + Box(Modifier.fillMaxSize()) { + MenuToClose(Modifier.align(Alignment.Center)) + } + } + 4 -> { + PullToRefreshOne() + } + 5 -> { + Box(Modifier.fillMaxSize()) { + BellAnimation(Modifier.align(Alignment.Center)) + } + } + 6 -> { + Box(Modifier.fillMaxSize()) { + YahooWeatherAndSun(Modifier.align(Alignment.Center)) + } + } + 7 -> { + Box(Modifier.fillMaxSize()) { + GlowingRingLoader(Modifier.align(Alignment.Center)) + } + } + 8 -> { + Box(Modifier.fillMaxSize()) { + PlanetarySystem(Modifier.align(Alignment.Center)) + } + } + 9 -> { + Box(modifier = Modifier.fillMaxSize()) { + ScalingRotatingLoader() + } + } + + + 10 -> { + Box(modifier = Modifier.fillMaxSize()) { + IOSSleepSchedule() + } + } + 11 -> { + Box(modifier = Modifier.fillMaxSize()) { + Github404(Modifier) + } + } + 12 -> { + TwitterSplashAnimation() + } + 13 -> { + AndroidMadSkills() + } + 14 -> { + Box(Modifier.fillMaxSize()) { + ChatMessageReactions(Modifier.align(Alignment.Center)) + } + } + 15 -> { + Box(Modifier.fillMaxSize()) { + LikeAnimation(Modifier.align(Alignment.Center)) + } + } + 16 -> { + ShootingStarsAnimation() + } + 17 -> { + NetflixIntroAnimation() + } + 18 -> { + Column( + Modifier + .verticalScroll(rememberScrollState()) + .padding(24.dp) + ) { + Column { + Text( + text = "Sizes", + style = Typography.subtitle1.copy(fontWeight = FontWeight.Bold) + ) + + Size.values().forEach { size -> + Column( + Modifier + .border(1.dp, androidx.compose.ui.graphics.Color.Black) + .padding(8.dp) + ) { + LoadingIndicator( + LoadingAnimation.threeBallsBouncing, + size.factor, + Speed.normal.factor + ) + Text(size.toString(), style = Typography.caption) + } + } + } + Divider() + Text( + text = "Speeds", + style = Typography.subtitle1.copy(fontWeight = FontWeight.Bold) + ) + Speed.values().forEach { speed -> + Column( + Modifier + .border(1.dp, androidx.compose.ui.graphics.Color.Black) + .padding(8.dp) + ) { + LoadingIndicator( + LoadingAnimation.threeBallsBouncing, + Size.medium.factor, + speed.factor + ) + Text(speed.toString(), style = Typography.caption) + } + } + } + } } - } } HorizontalPagerIndicator( pagerState = pagerState, modifier = Modifier - .align(Alignment.BottomCenter) - .padding(16.dp) + .align(Alignment.BottomCenter) + .padding(16.dp) ) } } diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingIndicator.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingIndicator.kt index 8909fd1..5e39f63 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingIndicator.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingIndicator.kt @@ -5,12 +5,17 @@ import androidx.compose.ui.graphics.Color @Composable fun LoadingIndicator( - animation: LoadingAnimation, + animation: LoadingAnimation = LoadingAnimation.threeBallsBouncing, size: Int, speed: Double, color: Color = Color.Black ) { when (animation) { LoadingAnimation.threeBalls -> LoadingThreeBalls(color = color, size = size, speed = speed) + LoadingAnimation.threeBallsBouncing -> LoadingThreeBallsBouncing( + color = color, + size = size, + speed = speed + ) /*LoadingAnimation.threeBallsRotation -> LoadingThreeBallsRotation( color = color, size = size, diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingPreviewView.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingPreviewView.kt index 41ba40b..832b464 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingPreviewView.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingPreviewView.kt @@ -30,7 +30,7 @@ fun LoadingPreviewView() { Size.values().forEach { size -> Column(Modifier.border(1.dp, Color.Black).padding(8.dp)) { - LoadingIndicator(LoadingAnimation.threeBalls, size.factor, Speed.normal.factor) + LoadingIndicator(LoadingAnimation.threeBallsBouncing, size.factor, Speed.normal.factor) Text(size.toString(), style = Typography.caption) } } @@ -39,7 +39,7 @@ fun LoadingPreviewView() { Text(text = "Speeds", style = Typography.subtitle1.copy(fontWeight = FontWeight.Bold)) Speed.values().forEach { speed -> Column(Modifier.border(1.dp, Color.Black).padding(8.dp)) { - LoadingIndicator(LoadingAnimation.threeBalls, Size.medium.factor, speed.factor) + LoadingIndicator(LoadingAnimation.threeBallsBouncing, Size.medium.factor, speed.factor) Text(speed.toString(), style = Typography.caption) } } diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingThreeBalls.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingThreeBalls.kt index 12c6fd6..a22f631 100644 --- a/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingThreeBalls.kt +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingThreeBalls.kt @@ -39,7 +39,6 @@ fun LoadingThreeBalls(color: Color = Color.Black, size: Int = 50, speed: Double EachCircle(size, counter, index, color) } } - } @Composable diff --git a/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingThreeBallsBouncing.kt b/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingThreeBallsBouncing.kt new file mode 100644 index 0000000..43fa483 --- /dev/null +++ b/app/src/main/java/dev/baseio/composeplayground/ui/animations/anmolverma/loadingindicators/LoadingThreeBallsBouncing.kt @@ -0,0 +1,59 @@ +package dev.baseio.composeplayground.ui.animations.anmolverma.loadingindicators + +import androidx.compose.animation.core.animateDpAsState +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch + +@Composable +fun LoadingThreeBallsBouncing(color: Color, size: Int, speed: Double) { + val maxCounter = 3 + val frame = Offset(x = size.toFloat(), y = size.toFloat() ) + var counter by remember { + mutableStateOf(0) + } + + val scope = rememberCoroutineScope() + + LaunchedEffect(key1 = speed, block = { + scope.launch { + while (true) { + delay(speed.times(1000).toLong()) + counter = if (counter == (maxCounter - 1)) 0 else counter + 1 + } + } + }) + + Row(Modifier, verticalAlignment = Alignment.CenterVertically) { + repeat(maxCounter) { index -> + EachBouncingCircle(size, counter, index, color,frame) + } + } +} + +@Composable +fun EachBouncingCircle(size: Int, counter: Int, index: Int, color: Color, frame : Offset) { + val bounce by animateDpAsState(targetValue = ((if (counter == index) -frame.y / 5 else frame.y / 5).dp)) + + Box( + modifier = Modifier + .size(size.dp) + .offset( + x = 0.dp, + y = bounce + ) + .background(color, shape = CircleShape) + ) +}