ComposeScreenExample

Architecture:

Single Activity — Multi Module — Multiple Backstack — MVVM — Clean Architecture

Project uses navigation libs:

• Jetpack Navigation 80% screens covered. DEPRECATED
• Voyager 100% screens covered
• Compose Navigation 100% screens covered
• Compose Destinations 100% screens covered

To use different Navigation library need to change in build.gradle.kts from app module.

buildConfigField(    
    "com.velord.navigation.NavigationLib",
    "NAVIGATION_LIB",
    "com.velord.navigation.NavigationLib.{Voyager}" or "Jetpack" or "Destinations" or "Compose"
)

UI Features:

• Movie Demo
• Phone Number Hint Demo
• Compose Shapes
  • TicketPath
  • ArcAtBottomCenterPath
• Compose Modifiers
  • Shimmering
  • BlinkingShadow
  • Hanging
  • Swelling
• Glance Widget Demo
  • Synced Theme
  • Counter
  • Refreshable Image

Movie Demo

Movie.mp4

Shape Demo

ShapeDemo.webm

Shapes and layouts used:

1. TicketShape 2. ArcAtBottomCenterShape 3. PervasiveArcFromBottomLayout

Paths used:

• TicketPath

• ArcAtBottomCenterPath

It is the arc placed in the bottom center of the layout dependent on the progress

Modifier Demo

Modifier.Demo.2023.6.28.webm

Custom Modifiers used:

1. Modifier.shimmering()

2. Modifier.blinkingShadow()

3. Modifier.hanging()

4. Modifier.swelling()

Shimmering

1. Rainbow

.shimmering(
    gradientColorAndPosition = { animatedValue ->
        listOf(
            Color.Red to 0f,
            Color.Green to animatedValue * 0.1f,
            Color.Blue to animatedValue * 0.2f,
            Color.Yellow to animatedValue * 0.3f,
            Color.Magenta to animatedValue * 0.7f,
            Color.Cyan to animatedValue * 0.8f,
            Color.Gray to animatedValue * 0.9f,
            Color.Black to animatedValue,
            Color.White to 1f,
        )
    }
)

2. Default

.shimmering()

3. Magenta

.shimmering(
    duration = 2000,
    gradientColorAndPosition = { animatedValue ->
        listOf(
            Color.Magenta to 0f,
            Color.Cyan to animatedValue * 0.3f,
            Color.Gray to animatedValue,
            Color.Magenta to 1f,
        )
    }  
)

4. SurfaceTint

.shimmering(
    duration = 3000,
    gradientColorAndPosition = { animatedValue ->
        listOf(
            MaterialTheme.colorScheme.surfaceTint to 0f,
            MaterialTheme.colorScheme.tertiary to animatedValue,
            MaterialTheme.colorScheme.surfaceTint to 1f,
        )
    }
)

5. Reverse

.shimmering(
    duration = 3000,
    gradientColorAndPosition = { animatedValue ->
        listOf(
            MaterialTheme.colorScheme.tertiaryContainer to 0f,
            MaterialTheme.colorScheme.onTertiaryContainer to animatedValue,
            MaterialTheme.colorScheme.tertiaryContainer to 1f,
        )
    },
    reverse = true
)

6. ReverseRainbow

.shimmering(
    duration = 3000,
    gradientColorAndPosition = { animatedValue ->
        listOf(
            Color.Green to 0f,
            Color.Yellow to animatedValue * 0.1f,
            Color.DarkGray to animatedValue * 0.2f,
            Color.Magenta to animatedValue * 0.3f,
            Color.Cyan to animatedValue * 0.35f,
            Color.Transparent to animatedValue * 0.7f,
            Color.Gray to animatedValue * 0.8f,
            Color.Black to animatedValue * 0.85f,
            Color.White to animatedValue * 0.9f,
            Color.LightGray to animatedValue * 0.95f,
            Color.Red to animatedValue,
            Color.Blue to 1f
        )
    },
    reverse = true
)

Blinking Shadow

1. GreenReverse

.blinkingShadow(
    elevationMax = 64.dp,
    shape = CardDefaults.shape,
    duration = 3000,
    spotColor = Color.Green
)

2. RedReverse

.blinkingShadow(
    elevationMax = 16.dp,
    shape = CardDefaults.shape,
    duration = 500,
    spotColor = Color.Red
)

3. CyanRestart

.blinkingShadow(
    elevationMax = 32.dp,
    shape = shape,
    spotColor = Color.Cyan,
    repeatMode = RepeatMode.Restart
)

Hanging

1. Default

.hanging()

2. SmallLeft

.hanging(
    shift = HangingDefaults.shift(
        startRotationAngle = 5,
        endRotationAngle = -20
    ),
    animation = HangingDefaults.animation(duration = 2000)
)

3. FullRotation

.hanging(
    shift = HangingDefaults.shift(startRotationAngle = 180),
    animation = HangingDefaults.animation(3000)
)

4. HangingOnRightSide

.hanging(pivotPoint = HangingPivotPoint.Right)

5. QuickHangingOnLeftSide

.hanging(
    shift = HangingDefaults.shift(10),
    animation = HangingDefaults.animation(300),
    pivotPoint = HangingPivotPoint.Left
)

6. EpilepsyAtBottom

.hanging(
    shift = HangingDefaults.shift(
        startRotationAngle = 5,
        endRotationAngle = -10
    ),
    animation = HangingDefaults.animation(duration = 80),
    pivotPoint = HangingPivotPoint.Bottom
)

7. HangingOnCenter

.hanging(
    animation = HangingDefaults.animation(duration = 4300),
    pivotPoint = HangingDefaults.pivot(
        pivotFractionX = 0.5f,
        pivotFractionY = 0.5f
    )
)

Swelling

1. Default

.swelling()

2. OneAndAHalf

.swelling(targetScale = 1.5f)

3. HalfToOnePointTwo

.swelling(
    initialScale = 0.5f,
    targetScale = 1.2f,
    duration = 2000
)

4. Bounce

.swelling(
    initialScale = 0.7f,
    targetScale = 1.1f,
    duration = 3000,
    easing = EaseInBounce
)

Glance Widget Demo

Glance.Widget.mp4

• Synced Theme with App

synced.theme.mp4

• Counter

Counter.Widget.mp4

• Refreshable Image

Image.Widget.mp4

Phone Number Hint Demo

Phone.Number.Hint.mp4