<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/SwipeToDelete.kt<|end_filename|>
package com.jetpack.compose.learning.animation

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.calculateTargetValue
import androidx.compose.animation.splineBasedDecay
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.horizontalDrag
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.Composable
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.input.pointer.consumePositionChange
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.input.pointer.positionChange
import androidx.compose.ui.input.pointer.util.VelocityTracker
import androidx.compose.ui.res.stringArrayResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.R
import kotlin.math.absoluteValue
import kotlin.math.roundToInt
import kotlinx.coroutines.coroutineScope
import kotlinx.coroutines.launch

/**
 * Shows the entire screen.
 */
@Composable
fun SwipeToDelete() {
    // String resources.
    val allTasks = stringArrayResource(R.array.tasks)

    // Holds all the tasks currently shown on the task list.
    val tasks = remember { mutableStateListOf(*allTasks) }

    val lazyListState = rememberLazyListState()

    Scaffold {
        LazyColumn(
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 16.dp),
            state = lazyListState
        ) {
            // Tasks
            item { Header(title = stringResource(R.string.tasks)) }
            item { Spacer(modifier = Modifier.height(16.dp)) }
            if (tasks.isEmpty()) {
                item {
                    TextButton(onClick = { tasks.clear(); tasks.addAll(allTasks) }) {
                        Text(stringResource(R.string.add_tasks))
                    }
                }
            }
            items(count = tasks.size) { i ->
                val task = tasks.getOrNull(i)
                if (task != null) {
                    key(task) {
                        TaskRow(task = task, onRemove = { tasks.remove(task) })
                    }
                }
            }
        }
    }
}

/**
 * Shows a separator for topics.
 */
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun TopicRowSpacer(visible: Boolean) {
    AnimatedVisibility(visible = visible) {
        Spacer(modifier = Modifier.height(8.dp))
    }
}

/**
 * Shows a row for one task.
 *
 * @param task The task description.
 * @param onRemove Called when the task is swiped away and removed.
 */
@Composable
private fun TaskRow(task: String, onRemove: () -> Unit) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .swipeToDismiss(onRemove), elevation = 5.dp
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Icon(
                imageVector = Icons.Default.Check, contentDescription = null
            )
            Spacer(modifier = Modifier.width(16.dp))
            Text(
                text = task, style = MaterialTheme.typography.body1
            )
        }
    }
}

/**
 * The modified element can be horizontally swiped away.
 *
 * @param onDismissed Called when the element is swiped to the edge of the screen.
 */
private fun Modifier.swipeToDismiss(
    onDismissed: () -> Unit
): Modifier = composed {
    // This `Animatable` stores the horizontal offset for the element.
    val offsetX = remember { Animatable(0f) }
    pointerInput(Unit) {
        // Used to calculate a settling position of a fling animation.
        val decay = splineBasedDecay<Float>(this)
        // Wrap in a coroutine scope to use suspend functions for touch events and animation.
        coroutineScope {
            while (true) {
                // Wait for a touch down event.
                val pointerId = awaitPointerEventScope { awaitFirstDown().id }
                // Interrupt any ongoing animation.
                offsetX.stop()
                // Prepare for drag events and record velocity of a fling.
                val velocityTracker = VelocityTracker()
                // Wait for drag events.
                awaitPointerEventScope {
                    horizontalDrag(pointerId) { change ->
                        // Record the position after offset
                        val horizontalDragOffset = offsetX.value + change.positionChange().x
                        launch {
                            // Overwrite the `Animatable` value while the element is dragged.
                            offsetX.snapTo(horizontalDragOffset)
                        }
                        // Record the velocity of the drag.
                        velocityTracker.addPosition(change.uptimeMillis, change.position)
                        // Consume the gesture event, not passed to external
                        change.consumePositionChange()
                    }
                }
                // Dragging finished. Calculate the velocity of the fling.
                val velocity = velocityTracker.calculateVelocity().x
                // Calculate where the element eventually settles after the fling animation.
                val targetOffsetX = decay.calculateTargetValue(offsetX.value, velocity)
                // The animation should end as soon as it reaches these bounds.
                offsetX.updateBounds(
                    lowerBound = -size.width.toFloat(), upperBound = size.width.toFloat()
                )
                launch {
                    if (targetOffsetX.absoluteValue <= size.width) {
                        // Not enough velocity; Slide back to the default position.
                        offsetX.animateTo(targetValue = 0f, initialVelocity = velocity)
                    } else {
                        // Enough velocity to slide away the element to the edge.
                        offsetX.animateDecay(velocity, decay)
                        // The element was swiped away.
                        onDismissed()
                    }
                }
            }
        }
    }
        // Apply the horizontal offset to the element.
        .offset { IntOffset(offsetX.value.roundToInt(), 0) }
}

@Preview
@Composable
private fun PreviewHome() {
    SwipeToDelete()
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/theme/Theme.kt<|end_filename|>
package com.jetpack.compose.learning.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.Colors
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

// dark palettes
private val DarkPinkColorPalette = darkColors(
    primary = pink200,
    primaryVariant = pink500,
    secondary = teal200,
    background = Color.Black,
    surface = Color.Black,
    onPrimary = Color.Black,
    onSecondary = Color.White,
    onBackground = Color.White,
    onSurface = Color.White,
    error = Color.Red,
)

private val DarkGreenColorPalette = darkColors(
    primary = green200,
    primaryVariant = green700,
    secondary = teal200,
    background = Color.Black,
    surface = Color.Black,
    onPrimary = Color.Black,
    onSecondary = Color.White,
    onBackground = Color.White,
    onSurface = Color.White,
    error = Color.Red,
)

private val DarkPurpleColorPalette = darkColors(
    primary = purple200,
    primaryVariant = purple700,
    secondary = teal200,
    background = Color.Black,
    surface = Color.Black,
    onPrimary = Color.Black,
    onSecondary = Color.White,
    onBackground = Color.White,
    onSurface = Color.White,
    error = Color.Red,
)

private val DarkBlueColorPalette = darkColors(
    primary = blue200,
    primaryVariant = blue700,
    secondary = teal200,
    background = Color.Black,
    surface = Color.Black,
    onPrimary = Color.Black,
    onSecondary = Color.White,
    onBackground = Color.White,
    onSurface = Color.White,
    error = Color.Red,
)

private val DarkOrangeColorPalette = darkColors(
    primary = orange200,
    primaryVariant = orange700,
    secondary = teal200,
    background = Color.Black,
    surface = Color.Black,
    onPrimary = Color.Black,
    onSecondary = Color.White,
    onBackground = Color.White,
    onSurface = Color.White,
    error = Color.Red,
)

private val DarkRedColorPalette = darkColors(
    primary = red200,
    primaryVariant = red500,
    secondary = teal200,
    surface = Color.Black
)

private val DarkYellowColorPalette = darkColors(
    primary = yellow200,
    primaryVariant = yellow500,
    secondary = teal200,
    surface = Color.Black
)

private val DarkBrownColorPalette = darkColors(
    primary = brown200,
    primaryVariant = brown500,
    secondary = teal200,
    surface = Color.Black
)

private val DarkGreyColorPalette = darkColors(
    primary = grey200,
    primaryVariant = grey500,
    secondary = teal200,
    surface = Color.Black
)

private val DarkIndigoColorPalette = darkColors(
    primary = indigo200,
    primaryVariant = indigo500,
    secondary = teal200,
    surface = Color.Black
)

// Light pallets
private val LightPinkColorPalette = lightColors(
    primary = pink500,
    primaryVariant = pink700,
    secondary = teal200,
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
)

private val LightGreenColorPalette = lightColors(
    primary = green500,
    primaryVariant = green700,
    secondary = teal200,
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
)

private val LightPurpleColorPalette = lightColors(
    primary = purple500,
    primaryVariant = purple700,
    secondary = teal200,
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
)

private val LightBlueColorPalette = lightColors(
    primary = blue500,
    primaryVariant = blue700,
    secondary = teal200,
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
)

private val LightOrangeColorPalette = lightColors(
    primary = orange500,
    primaryVariant = orange700,
    secondary = teal200,
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
)

private val LightRedColorPalette = lightColors(
    primary = red500,
    primaryVariant = red700,
    secondary = teal200,
    surface = Color.White
)

private val LightYellowColorPalette = lightColors(
    primary = yellow500,
    primaryVariant = yellow700,
    secondary = teal200,
    surface = Color.White
)

private val LightBrownColorPalette = lightColors(
    primary = brown500,
    primaryVariant = brown700,
    secondary = teal200,
    surface = Color.White
)

private val LightGreyColorPalette = lightColors(
    primary = grey500,
    primaryVariant = grey700,
    secondary = teal200,
    surface = Color.White
)

private val LightIndigoColorPalette = lightColors(
    primary = indigo500,
    primaryVariant = indigo700,
    secondary = teal200,
    surface = Color.White
)

enum class ColorPalette {
    PINK, PURPLE, GREEN, ORANGE, BLUE, RED, INDIGO, BROWN, GREY
}

@Composable
fun ComposeCookBookTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    colorPalette: ColorPalette = ColorPalette.GREEN,
    content: @Composable() () -> Unit
) {

    val colors = colorPalette.getMaterialColors(darkTheme)

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

@Composable
fun BaseView(
    appThemeState: AppThemeState,
    systemUiController: SystemUiController?,
    content: @Composable () -> Unit
) {

    val color = appThemeState.pallet.getMaterialColor()

    systemUiController?.setStatusBarColor(color = color, darkIcons = appThemeState.darkTheme)
    ComposeCookBookTheme(darkTheme = appThemeState.darkTheme, colorPalette = appThemeState.pallet) {
        content()
    }
}

fun ColorPalette.getMaterialColors(darkTheme: Boolean): Colors {
    return when (this) {
        ColorPalette.GREEN -> if (darkTheme) DarkGreenColorPalette else LightGreenColorPalette
        ColorPalette.PURPLE -> if (darkTheme) DarkPurpleColorPalette else LightPurpleColorPalette
        ColorPalette.ORANGE -> if (darkTheme) DarkOrangeColorPalette else LightOrangeColorPalette
        ColorPalette.BLUE -> if (darkTheme) DarkBlueColorPalette else LightBlueColorPalette
        ColorPalette.RED -> if (darkTheme) DarkRedColorPalette else LightRedColorPalette
        ColorPalette.PINK -> if (darkTheme) DarkPinkColorPalette else LightPinkColorPalette
        ColorPalette.INDIGO -> if (darkTheme) DarkIndigoColorPalette else LightIndigoColorPalette
        ColorPalette.BROWN -> if (darkTheme) DarkBrownColorPalette else LightBrownColorPalette
        ColorPalette.GREY -> if (darkTheme) DarkGreyColorPalette else LightGreyColorPalette
    }
}

fun ColorPalette.getMaterialColor(): Color {
    return when (this) {
        ColorPalette.GREEN -> green700
        ColorPalette.BLUE -> blue700
        ColorPalette.ORANGE -> orange700
        ColorPalette.PURPLE -> purple700
        ColorPalette.RED -> red700
        ColorPalette.PINK -> pink700
        ColorPalette.INDIGO -> indigo700
        ColorPalette.BROWN -> brown700
        ColorPalette.GREY -> grey700
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/Header.kt<|end_filename|>
package com.jetpack.compose.learning.animation

import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics

/**
 * Shows the header label.
 *
 * @param title The title to be shown.
 */
@Composable
fun Header(
    title: String
) {
    Text(
        text = title,
        modifier = Modifier.semantics { heading() },
        style = MaterialTheme.typography.h5
    )
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/pulltorefresh/CustomViewPullToRefreshActivity.kt<|end_filename|>
package com.jetpack.compose.learning.pulltorefresh

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.LinearProgressIndicator
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.google.accompanist.swiperefresh.SwipeRefresh
import com.google.accompanist.swiperefresh.SwipeRefreshState
import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import kotlinx.coroutines.delay

class CustomViewPullToRefreshActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @Preview
    @Composable
    fun MainContent() {

        val items = remember { mutableStateListOf<Int>() }
        items.addAll(0..10)
        var isRefreshing by remember { mutableStateOf(false) }
        val swipeRefreshState = rememberSwipeRefreshState(isRefreshing)


        Scaffold(topBar = {
            TopAppBar(
                    title = { Text("Custom View Pull To Refresh") },
                    navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    }
            )
        }) {
            Column() {
                SwipeRefresh(
                        state = swipeRefreshState,
                        onRefresh = {
                            isRefreshing = true
                        },
                        indicator = { state, trigger ->
                            CustomPullRefreshView(state, trigger)
                        }) {
                    LazyColumn(
                            contentPadding = PaddingValues(10.dp),
                            verticalArrangement = Arrangement.spacedBy(10.dp)
                    ) {
                        items(items.size) {
                            ColumnItem(number = items[it])
                        }
                    }
                    LaunchedEffect(isRefreshing) {
                        if (isRefreshing) {
                            delay(1000L)
                            items.clear()
                            items.addAll((1..10).map { (0..100).random() })
                            isRefreshing= false
                        }
                    }
                }
            }
        }
    }

    @Composable
    fun ColumnItem(number: Int) {
        Column(
                modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(MaterialTheme.colors.background)
                        .border(1.dp, MaterialTheme.colors.primary),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally

        ) {
            Text(text = "Item Number $number", color = MaterialTheme.colors.primary)
        }
    }

    @Composable
    fun CustomPullRefreshView(
            swipeRefreshState: SwipeRefreshState,
            refreshTriggerDistance: Dp,
            color: Color = MaterialTheme.colors.primary,
    ) {
        Box(
                Modifier
                        .drawWithCache {
                            onDrawBehind {
                                val distance = refreshTriggerDistance.toPx()
                                val progress = (swipeRefreshState.indicatorOffset / distance).coerceIn(0f, 1f)
                                // We draw a translucent glow
                                val brush = Brush.verticalGradient(
                                        0f to color.copy(alpha = 0.45f),
                                        1f to color.copy(alpha = 0f)
                                )
                                // And fade the glow in/out based on the swipe progress
                                drawRect(brush = brush, alpha = FastOutSlowInEasing.transform(progress))
                            }
                        }
                        .fillMaxWidth()
                        .height(80.dp)
        ) {
            if (swipeRefreshState.isRefreshing) {
                // If we're refreshing, show an indeterminate progress indicator
                LinearProgressIndicator(Modifier.fillMaxWidth())
            } else {
                // Otherwise we display a determinate progress indicator with the current swipe progress
                val trigger = with(LocalDensity.current) { refreshTriggerDistance.toPx() }
                val progress = (swipeRefreshState.indicatorOffset / trigger).coerceIn(0f, 1f)
                LinearProgressIndicator(
                        progress = progress,
                        modifier = Modifier.fillMaxWidth(),
                )
            }
        }
    }

}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/appbar/TopAppBarActivity.kt<|end_filename|>
package com.jetpack.compose.learning.appbar

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class TopAppBarActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                Scaffold(topBar = {
                    TopAppBar(
                        title = { Text("App Bar") },
                        navigationIcon = {
                            IconButton(onClick = { onBackPressed() }) {
                                Icon(Icons.Filled.ArrowBack, contentDescription = null)
                            }
                        }
                    )
                }) {
                    AppBar()
                }
            }
        }
    }

    @Preview
    @Composable
    private fun AppBar() {

        Column {

            Spacer(modifier = Modifier.height(80.dp))

            // Simple App Bar with no actions
            TopAppBar(
                title = { Text("Simple App Bar") },
            )

            Spacer(modifier = Modifier.height(20.dp))

            // App Bar with Left icon action
            TopAppBar(
                title = { Text("Left Action App Bar") },
                navigationIcon = {
                    IconButton(onClick = {
                        Toast.makeText(
                            applicationContext,
                            "Menu Icon Clicked",
                            Toast.LENGTH_SHORT
                        ).show()
                    }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = null)
                    }
                }
            )

            Spacer(modifier = Modifier.height(20.dp))

            // App Bar with Right icon action
            TopAppBar(
                title = { Text("Right Action App Bar") },
                actions = {
                    IconButton(onClick = {
                        Toast.makeText(
                            applicationContext,
                            "Search Icon Clicked",
                            Toast.LENGTH_SHORT
                        ).show()
                    }) {
                        Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                    }
                }
            )

            Spacer(modifier = Modifier.height(20.dp))

            // App Bar with Right amd Left icon action
            TopAppBar(
                title = { Text("Multiple Actions App Bar") },
                navigationIcon = {
                    IconButton(onClick = {
                        Toast.makeText(
                            applicationContext,
                            "Menu Icon Clicked",
                            Toast.LENGTH_SHORT
                        ).show()
                    }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = null)
                    }
                },
                actions = {
                    IconButton(onClick = {
                        Toast.makeText(
                            applicationContext,
                            "Search Icon Clicked",
                            Toast.LENGTH_SHORT
                        ).show()
                    }) {
                        Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                    }
                }
            )

            Spacer(modifier = Modifier.height(20.dp))

            // App Bar with multiple Right icon action
            TopAppBar(
                title = { Text("Multiple Right Actions App Bar") },
                actions = {
                    IconButton(onClick = {
                        Toast.makeText(
                            applicationContext,
                            "Search Icon Clicked",
                            Toast.LENGTH_SHORT
                        ).show()
                    }) {
                        Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                    }

                    Spacer(modifier = Modifier.width(10.dp))

                    IconButton(onClick = {
                        Toast.makeText(
                            applicationContext,
                            "Refresh Icon Clicked",
                            Toast.LENGTH_SHORT
                        ).show()
                    }) {
                        Icon(imageVector = Icons.Filled.Refresh, contentDescription = null)
                    }
                }
            )

            Spacer(modifier = Modifier.height(20.dp))

            // Custom App Bar with Left icon action and Title text in Center
            TopAppBar(modifier = Modifier.fillMaxWidth()) {

                //TopAppBar Content
                Box(Modifier.height(32.dp)) {

                    // Navigation Icon
                    IconButton(
                        onClick = {
                            Toast.makeText(
                                applicationContext,
                                "Custom Refresh Icon Clicked",
                                Toast.LENGTH_SHORT
                            ).show()
                        },
                        enabled = true,
                        modifier = Modifier.width(60.dp),
                    ) {
                        Icon(
                            imageVector = Icons.Default.Refresh,
                            contentDescription = "Refresh",
                        )
                    }

                    //Title
                    Row(
                        Modifier.fillMaxSize(),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
                            modifier = Modifier.fillMaxWidth(),
                            textAlign = TextAlign.Center,
                            maxLines = 1,
                            text = "Custom App bar",
                            fontSize = 20.sp
                        )
                    }

                    //Action
                    Row(
                        Modifier
                            .fillMaxHeight()
                            .fillMaxWidth(),
                        horizontalArrangement = Arrangement.End,
                        verticalAlignment = Alignment.CenterVertically,
                        content = {
                            IconButton(
                                onClick = {
                                    Toast.makeText(
                                        applicationContext,
                                        "Custom Search Icon Clicked",
                                        Toast.LENGTH_SHORT
                                    ).show()
                                },
                                enabled = true,
                                modifier = Modifier.width(60.dp),
                            ) {
                                Icon(
                                    imageVector = Icons.Default.Search,
                                    contentDescription = "Refresh",
                                )
                            }
                        }
                    )
                }
            }

        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/navigationdrawer/BottomDrawerActivity.kt<|end_filename|>
package com.jetpack.compose.learning.navigationdrawer

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Info
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.SystemUiController
import com.jetpack.compose.learning.theme.BaseView
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

class BottomDrawerActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterialApi::class)
    lateinit var drawerState: BottomDrawerState
    lateinit var scope: CoroutineScope

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                BottomDrawerSample()
            }
        }
    }

    @OptIn(ExperimentalMaterialApi::class)
    @Preview
    @Composable
    fun BottomDrawerSample() {
        drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed)
        scope = rememberCoroutineScope()
        val (isGestureEnable, toggleGesturesEnabled) = remember { mutableStateOf(true) }
        Column(Modifier.background(MaterialTheme.colors.background)) {
            TopAppBar(
                title = { Text("Bottom Drawer Sample") },
                navigationIcon = {
                    IconButton(onClick = { finish() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
            Spacer(Modifier.requiredHeight(10.dp))
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .toggleable(
                        value = isGestureEnable,
                        onValueChange = toggleGesturesEnabled
                    ),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Center
            ) {
                Checkbox(
                    checked = isGestureEnable, onCheckedChange = null,
                    colors = CheckboxDefaults.colors(
                        checkedColor = MaterialTheme.colors.primaryVariant,
                        uncheckedColor = Color.DarkGray,
                        checkmarkColor = Color.White
                    )
                )
                Text(
                    text = "Enable swipe up/down gesture",
                    Modifier.padding(start = 5.dp),
                    fontSize = 16.sp
                )
            }
            BottomDrawer(
                gesturesEnabled = isGestureEnable,
                drawerState = drawerState,
                drawerContent = {
                    Button(
                        modifier = Modifier
                            .align(Alignment.CenterHorizontally)
                            .padding(top = 16.dp),
                        onClick = { scope.launch { drawerState.close() } },
                        content = { Text("Close Drawer") }
                    )
                    LazyColumn {
                        items(25) {
                            ListItem(
                                text = { Text("Item ${it + 1}") },
                                icon = {
                                    Icon(
                                        Icons.Default.Info,
                                        contentDescription = "Description"
                                    )
                                }
                            )
                        }
                    }
                },
                content = {
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Button(onClick = { scope.launch { drawerState.open() } }) {
                            Text("Click to open Bottom Drawer", fontSize = 16.sp)
                        }
                    }
                })
        }
    }

    @OptIn(ExperimentalMaterialApi::class)
    override fun onBackPressed() {
        if (drawerState.isOpen) {
            scope.launch { drawerState.close() }
        } else {
            super.onBackPressed()
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/constraintlayout/GuidelineActivity.kt<|end_filename|>
package com.jetpack.compose.learning.constraintlayout

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class GuidelineActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                GuidelineSample()
            }
        }
    }

    @Preview
    @Composable
    fun GuidelineSample() {

        Column(Modifier.background(MaterialTheme.colors.background)) {
            TopAppBar(
                title = { Text("Guideline") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )

            ConstraintLayout(Modifier.fillMaxSize()) {

                val (text1, text2, text3) = createRefs()
                val topGuideline = createGuidelineFromTop(0.3f)
                val startQuarterGuideline = createGuidelineFromStart(0.25f)
                val startHalfGuideline = createGuidelineFromStart(0.5f)

                Text(text = "Quarter\n(25% from Start)",
                    color = Color.White,
                    fontSize = 16.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .constrainAs(text1) {
                            top.linkTo(topGuideline)
                            start.linkTo(startQuarterGuideline)
                        }
                        .background(colorResource(R.color.blue))
                        .padding(10.dp)
                )
                Text(text = "Center Horizontal",
                    color = Color.White,
                    fontSize = 16.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .constrainAs(text2) {
                            top.linkTo(text1.bottom, margin = 16.dp)
                            centerHorizontallyTo(parent)
                        }
                        .background(colorResource(R.color.pink))
                        .padding(10.dp)
                )
                Text(text = "Half\n(50% from Start)",
                    color = Color.White,
                    fontSize = 16.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .constrainAs(text3) {
                            top.linkTo(text2.bottom, margin = 16.dp)
                            start.linkTo(startHalfGuideline)
                        }
                        .background(colorResource(R.color.fruit))
                        .padding(10.dp)
                )
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/constraintlayout/BarrierActivity.kt<|end_filename|>
package com.jetpack.compose.learning.constraintlayout

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class BarrierActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                BarrierSample()
            }
        }
    }

    @Preview
    @Composable
    fun BarrierSample() {

        Column(Modifier.background(MaterialTheme.colors.background)) {
            TopAppBar(
                title = { Text("Barrier") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(20.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                ConstraintLayout {

                    val (text1, text2, text3) = createRefs()
                    val barrier = createEndBarrier(text1)

                    Text(text = "Created Barrier view",
                        color = Color.White,
                        fontSize = 16.sp,
                        modifier = Modifier
                            .constrainAs(text1) {
                                top.linkTo(parent.top, margin = 16.dp)
                            }
                            .background(colorResource(R.color.blue))
                            .padding(10.dp)
                    )
                    Text(text = "Left to Barrier",
                        fontSize = 16.sp,
                        color = Color.White,
                        modifier = Modifier
                            .constrainAs(text2) {
                                top.linkTo(text1.bottom, margin = 16.dp)
                                end.linkTo(barrier)
                            }
                            .background(colorResource(R.color.fruit))
                            .padding(10.dp)
                    )
                    Text(text = "Right to Barrier",
                        fontSize = 16.sp,
                        color = Color.White,
                        modifier = Modifier
                            .constrainAs(text3) {
                                top.linkTo(parent.top, margin = 16.dp)
                                start.linkTo(barrier)
                            }
                            .background(colorResource(R.color.pink))
                            .padding(10.dp)
                    )
                }
            }
        }
    }

}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/contentAnimation/ContentIconAnimationActivity.kt<|end_filename|>
package com.jetpack.compose.learning.animation.contentAnimation

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.with
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Phone
import androidx.compose.material.primarySurface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class ContentIconAnimationActivity : ComponentActivity() {

    @OptIn(ExperimentalAnimationApi::class, ExperimentalMaterialApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                InitView()
            }
        }
    }

    @ExperimentalMaterialApi
    @ExperimentalAnimationApi
    @Composable
    fun InitView() {
        Column(Modifier.background(MaterialTheme.colors.background)) {
            TopAppBar(title = { Text(text = "Content Animation", color = Color.White) },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                })
            Spacer(Modifier.height(16.dp))

            ContentWithIconAnimation()

            Scaffold(floatingActionButton = {
                FabButtonWithContentAnimation()
            }) {
                ContentAnimation()
            }
        }
    }

    @ExperimentalMaterialApi
    @ExperimentalAnimationApi
    @Composable
    fun ContentWithIconAnimation() {
        var expanded by remember { mutableStateOf(false) }
        Surface(
            onClick = { expanded = !expanded },
            border = BorderStroke(1.dp, MaterialTheme.colors.primaryVariant),
            shape = RoundedCornerShape(10.dp),
            elevation = 8.dp,
            modifier = Modifier.padding(10.dp)
        ) {
            AnimatedContent(targetState = expanded, transitionSpec = {
                fadeIn(
                    animationSpec = tween(
                        150, 150
                    )
                ) with fadeOut(animationSpec = tween(150)) using SizeTransform { initialSize, targetSize ->
                    if (targetState) {
                        keyframes {
                            // Expand horizontally first.
                            IntSize(targetSize.width, initialSize.height) at 150
                            durationMillis = 300
                        }
                    } else {
                        keyframes {
                            // Shrink vertically first.
                            IntSize(initialSize.width, targetSize.height) at 150
                            durationMillis = 300
                        }
                    }
                }
            }) { targetExpanded ->
                if (targetExpanded) {
                    Text(
                        text = getString(R.string.expand_text), modifier = Modifier.padding(15.dp)
                    )
                } else {
                    Icon(
                        imageVector = Icons.Default.Phone,
                        contentDescription = "Phone",
                        Modifier.size(50.dp)
                    )
                }
            }
        }
    }

    @Composable
    private fun FabButtonWithContentAnimation() {
        var expanded by remember { mutableStateOf(false) }

        TabFloatingActionButton(extended = expanded, onClick = {
            expanded = !expanded
        })
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/AdvanceListActivity.kt<|end_filename|>
package com.jetpack.compose.learning.list

import android.content.Context
import android.net.ConnectivityManager
import android.net.NetworkCapabilities
import android.os.Build
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.tooling.preview.Preview
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.list.advancelist.MovieList
import com.jetpack.compose.learning.list.advancelist.viewmodel.MovieViewModel
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class AdvanceListActivity : ComponentActivity() {

    private val movieViewModel: MovieViewModel by viewModels()

    @OptIn(ExperimentalFoundationApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @ExperimentalFoundationApi
    @Preview
    @Composable
    fun MainContent() {
        Scaffold(topBar = {
            TopAppBar(
                title = { Text("Advance List") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
        }) {
            Column {
                if (checkForInternet(this@AdvanceListActivity)) {
                    MovieList(viewModel = movieViewModel, context = this@AdvanceListActivity)
                } else {
                    Toast.makeText(
                        this@AdvanceListActivity,
                        getString(R.string.connection_alert),
                        Toast.LENGTH_SHORT
                    ).show()
                }
            }
        }
    }

    fun checkForInternet(context: Context): Boolean {

        // register activity with the connectivity manager service
        val connectivityManager =
            context.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {

            val network = connectivityManager.activeNetwork ?: return false

            val activeNetwork = connectivityManager.getNetworkCapabilities(network) ?: return false

            return when {
                // Indicates this network uses a Wi-Fi transport,
                // or WiFi has network connectivity
                activeNetwork.hasTransport(NetworkCapabilities.TRANSPORT_WIFI) -> true

                // Indicates this network uses a Cellular transport. or
                // Cellular has network connectivity
                activeNetwork.hasTransport(NetworkCapabilities.TRANSPORT_CELLULAR) -> true

                // else return false
                else -> false
            }
        } else {
            // if the android version is below M
            @Suppress("DEPRECATION")
            val networkInfo = connectivityManager.activeNetworkInfo ?: return false

            @Suppress("DEPRECATION")
            return networkInfo.isConnected
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/snackbar/SnackBarActivity.kt<|end_filename|>
package com.jetpack.compose.learning.snackbar

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme.typography
import androidx.compose.material.Scaffold
import androidx.compose.material.ScaffoldState
import androidx.compose.material.Snackbar
import androidx.compose.material.SnackbarDuration
import androidx.compose.material.SnackbarResult
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.rememberScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import kotlinx.coroutines.launch

class SnackBarActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainContent()
        }
    }

    @Preview
    @Composable
    private fun MainContent() {
        val systemUiController = remember { SystemUiController(window) }
        val appTheme = remember { mutableStateOf(AppThemeState()) }
        BaseView(appTheme.value, systemUiController) {
            val scaffoldState = rememberScaffoldState()
            Scaffold(
                topBar = {
                    TopAppBar(title = { Text("Snackbars") }, navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    })
                }, scaffoldState = scaffoldState
            ) {
                SnackBarExample(scaffoldState)
            }
        }
    }

    @Composable
    private fun SnackBarExample(scaffoldState: ScaffoldState) {

        val spaceModifier = Modifier.height(30.dp)

        Column {

            val coroutineScope = rememberCoroutineScope()

            Spacer(modifier = spaceModifier)

            Text(text = "Snackbars", style = typography.h6, modifier = Modifier.padding(8.dp))

            // Basic Snackbar
            Snackbar(modifier = Modifier.padding(4.dp)) {
                Text(text = "Basic snackbar")
            }

            Spacer(modifier = spaceModifier)

            // Snackbar with action button
            Snackbar(modifier = Modifier.padding(4.dp), action = {
                TextButton(onClick = {
                    Toast.makeText(
                        applicationContext,
                        "This is Snackbar with action button",
                        Toast.LENGTH_SHORT
                    ).show()
                }) {
                    Text(text = "Click Me", color = Color.White)
                }
            }) {
                Text(text = "Snackbar with action button")
            }

            Spacer(modifier = spaceModifier)

            // Snackbar with action button on new line
            Snackbar(modifier = Modifier.padding(4.dp), actionOnNewLine = true, action = {
                TextButton(onClick = {
                    Toast.makeText(
                        applicationContext,
                        "This is Snackbar with action button on new line",
                        Toast.LENGTH_SHORT
                    ).show()
                }) {
                    Text(text = "ClickMe", color = Color.White)
                }
            }) {
                Text(text = "Action button on new line")
            }

            Spacer(modifier = spaceModifier)

            // Snackbar with custom background color
            Snackbar(modifier = Modifier.padding(4.dp), backgroundColor = Color.White, action = {
                TextButton(onClick = {
                    Toast.makeText(
                        applicationContext,
                        "This is Snackbar with custom color background",
                        Toast.LENGTH_SHORT
                    ).show()
                }) {
                    Text(text = "ClickMe")
                }
            }) {
                Text(text = "Custom color background", color = Color.Black)
            }

            Spacer(modifier = spaceModifier)

            // Custom snackbar with action buttons
            Snackbar(modifier = Modifier.padding(4.dp), action = {
                TextButton(onClick = {
                    Toast.makeText(
                        applicationContext,
                        "This is Custom Snackbar with action button",
                        Toast.LENGTH_SHORT
                    ).show()
                }) {
                    Text(text = "ClickMe", color = Color.White)
                }
            }) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    IconButton(onClick = {
                        Toast.makeText(
                            applicationContext,
                            "Edit action button Clicked",
                            Toast.LENGTH_SHORT
                        ).show()
                    }, modifier = Modifier.height(30.dp)) {
                        Icon(imageVector = Icons.Filled.Edit, contentDescription = "")
                    }
                    Spacer(modifier = Modifier.width(5.dp))
                    Text(
                        text = "Custom Content SnackBar",
                        color = Color.White,
                        modifier = Modifier.wrapContentSize(Alignment.Center)
                    )
                }
            }

            Spacer(modifier = spaceModifier)

            // Show snackbar on Button Click
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentSize(Alignment.Center)
            ) {
                Button(onClick = {
                    coroutineScope.launch {
                        when (scaffoldState.snackbarHostState.showSnackbar(
                            "Hi this is snackbar",
                            "ClickMe",
                            SnackbarDuration.Short
                        )) {
                            SnackbarResult.Dismissed -> Toast.makeText(
                                applicationContext,
                                "Snackbar Dismissed",
                                Toast.LENGTH_SHORT
                            ).show()
                            SnackbarResult.ActionPerformed -> Toast.makeText(
                                applicationContext,
                                "Action button clicked and dismissed",
                                Toast.LENGTH_SHORT
                            ).show()
                        }
                    }
                }) {
                    Text(text = "Click me to show a snackbar")
                }
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/advancelist/viewmodel/MovieViewModel.kt<|end_filename|>
package com.jetpack.compose.learning.list.advancelist.viewmodel

import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import androidx.paging.Pager
import androidx.paging.PagingConfig
import androidx.paging.PagingData
import androidx.paging.cachedIn
import com.jetpack.compose.learning.list.advancelist.model.Movie
import com.jetpack.compose.learning.list.advancelist.retrofit.MovieSource
import kotlinx.coroutines.flow.Flow

class MovieViewModel : ViewModel() {
    val user: Flow<PagingData<Movie>> = Pager(PagingConfig(pageSize = 6, prefetchDistance = 2)) {
        MovieSource()
    }.flow.cachedIn(viewModelScope)
}


<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/basic/RotateViewAnimation.kt<|end_filename|>
package com.jetpack.compose.learning.animation.basic

import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun RotatingSquareComponent() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        content = {
            // rememberInfiniteTransition is used to create a transition that uses infinite
            // child animations. Animations typically get invoked as soon as they enter the
            // composition so don't need to be explicitly started.
            val infiniteTransition = rememberInfiniteTransition()

            // Create a value that is altered by the transition based on the configuration. We use
            // the animated float value the returns and updates a float from the initial value to
            // target value and repeats it (as its called on the infiniteTransition).
            val rotation by infiniteTransition.animateFloat(
                initialValue = 0f,
                targetValue = 360f,
                animationSpec = infiniteRepeatable(
                    animation = tween(
                        durationMillis = 3000,
                        easing = FastOutLinearInEasing,
                    ),
                )
            )
            // We use the Canvas composable that gives you access to a canvas that you can draw
            // into. We also pass it a modifier.

            // You can think of Modifiers as implementations of the decorators pattern that are used
            // to modify the composable that its applied to. In this example, we assign a size
            // of 200dp to the Canvas using Modifier.preferredSize(200.dp).
            Canvas(modifier = Modifier.size(200.dp)) {
                // As the Transition is changing the interpolating the value of the animated float
                // "rotation", you get access to all the values including the intermediate values as
                // its  being updated. The value of "rotation" goes from 0 to 360 and transitions
                // infinitely due to the infiniteRepeatable animationSpec used above.
                rotate(rotation) {
                    drawRect(color = Color(255, 178, 198))
                }
            }
        })
}

@Preview
@Composable
fun RotatingSquareComponentPreview() {
    RotatingSquareComponent()
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/bottomnav/UserModel.kt<|end_filename|>
package com.jetpack.compose.learning.bottomnav

// Dummy User Model
data class UserModel(
    val userName: String? = "",
    val id: Int? = 0
)


<|start_filename|>app/src/main/java/com/jetpack/compose/learning/swipetodelete/SwipeToDeleteDirectionActivity.kt<|end_filename|>
package com.jetpack.compose.learning.swipetodelete

import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

@ExperimentalMaterialApi
class SwipeToDeleteDirectionActivity: ComponentActivity() {

    var swipeDirection: SwipeDirection? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        swipeDirection = intent.extras?.get("SwipeDirection") as? SwipeDirection
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @Preview
    @Composable
    fun MainContent() {
        val context = LocalContext.current
        val items = remember { mutableStateListOf<Int>() }
        items.addAll(0..10)

        Scaffold(topBar = {
            TopAppBar(
                title = { Text(when (swipeDirection) {
                    SwipeDirection.LEFT -> "Swipe Left"
                    SwipeDirection.RIGHT -> "Swipe Right"
                    else -> "Swipe Left + Right"
                }) },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
        }) {
            Column {
                LazyColumn(
                    contentPadding = PaddingValues(10.dp),
                    verticalArrangement = Arrangement.spacedBy(10.dp)
                ) {
                    items(items.size) {
                        cellItem(number = items[it], context)
                    }
                }
            }
        }
    }

    @Composable
    fun cellItem(number: Int, context: Context) {
        SwipeAbleItemCell(number = number, swipeDirection = swipeDirection ?: SwipeDirection.BOTH, onEditClick = {
            Toast.makeText(context, "Edit button clicked. Position :- $it", Toast.LENGTH_SHORT).show()
        }, onDeleteClicked = {
            Toast.makeText(context, "Delete button clicked. Position :- $it", Toast.LENGTH_SHORT).show()
        })
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/checkbox/CheckBoxActivity.kt<|end_filename|>
package com.jetpack.compose.learning.checkbox

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material.Checkbox
import androidx.compose.material.CheckboxDefaults
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class CheckBoxActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                CheckBoxSample()
            }
        }
    }

    @Composable
    fun CheckBoxSample() {

        /* Here Create State of checkbox */
        val mItemsList = remember {
            mutableStateOf(
                listOf(
                    Profession("Android"),
                    Profession("iOS"),
                    Profession("Angular"),
                    Profession("Python"),
                    Profession("Electron")
                )
            )
        }

        val (isClick, toggleClick) = remember { mutableStateOf(true) }

        Column(Modifier.background(MaterialTheme.colors.background).fillMaxHeight()) {
            TopAppBar(title = { Text("Checkbox") }, navigationIcon = {
                IconButton(onClick = { onBackPressed() }) {
                    Icon(Icons.Filled.ArrowBack, contentDescription = null)
                }
            })
            Column(Modifier.padding(20.dp)) {
                Text("Select your interested area :", style = MaterialTheme.typography.h6)
                Spacer(Modifier.requiredHeight(24.dp))
                mItemsList.value.forEachIndexed { index, items ->
                    Row(
                        modifier = Modifier.padding(bottom = 10.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Checkbox(
                            checked = mItemsList.value[index].value.value,
                            onCheckedChange = { mItemsList.value[index].value.value = it },
                            enabled = true,
                            colors = CheckboxDefaults.colors(
                                checkedColor = MaterialTheme.colors.primaryVariant,
                                uncheckedColor = Color.DarkGray,
                                checkmarkColor = Color.White
                            )
                        )
                        Text(
                            text = items.text,
                            modifier = Modifier.padding(start = 10.dp),
                            fontSize = 16.sp
                        )
                    }
                }
                Spacer(Modifier.requiredHeight(24.dp))
                Text("Clickable label checkbox :", style = MaterialTheme.typography.h6)
                Row(
                    modifier = Modifier
                        .padding(top = 16.dp)
                        .toggleable(
                            value = isClick, onValueChange = toggleClick
                        ),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Checkbox(
                        checked = isClick, onCheckedChange = null,
                        colors = CheckboxDefaults.colors(
                            checkedColor = MaterialTheme.colors.primaryVariant,
                            uncheckedColor = Color.DarkGray,
                            checkmarkColor = Color.White
                        )
                    )
                    Text(
                        text = "Checkbox label", Modifier.padding(start = 5.dp), fontSize = 16.sp
                    )
                }
            }
        }
    }

    @Preview
    @Composable
    private fun PreviewCheckBox() {
        CheckBoxSample()
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/basic/VisibilityAnimation.kt<|end_filename|>
package com.jetpack.compose.learning.animation.basic

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp

// Experimental APIs can change in the future or may be removed entirely.
@ExperimentalAnimationApi
@Composable
fun AnimatedVisibilityDemo(withFadeIn: Boolean) {
    var visible by remember { mutableStateOf(true) }
    val density = LocalDensity.current

    Column(
        modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Button(onClick = { visible = !visible }) {
            Text(text = if (visible) "Hide" else "Show")
        }

        Spacer(modifier = Modifier.height(16.dp))

        if (withFadeIn) {
            AnimatedVisibility(
                visible = visible, enter = slideInVertically(
                    // Slide in from 40 dp from the top.
                    initialOffsetY = { with(density) { -10.dp.roundToPx() } }) + expandVertically(
                    // Expand from the top.
                    expandFrom = Alignment.Top
                ) + fadeIn(
                    // Fade in with the initial alpha of 0.3f.
                    initialAlpha = 0.3f
                ), exit = slideOutVertically() + shrinkVertically() + fadeOut()
            ) {
                Box(
                    modifier = Modifier
                        .size(120.dp)
                        .background(Color.Black)
                )
            }
        } else {
            AnimatedVisibility(visible) {
                Box(
                    modifier = Modifier
                        .size(120.dp)
                        .background(Color.Black)
                )
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/dialog/DialogActivity.kt<|end_filename|>
package com.jetpack.compose.learning.dialog

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.KeyboardArrowRight
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.DialogProperties
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class DialogActivity : ComponentActivity() {

    // it is use to set our state of dialog box to open as true.
    lateinit var openAlertDialog: MutableState<Boolean>
    lateinit var openCustomAlertDialog: MutableState<Boolean>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                DialogTypes()
            }
        }
    }

    @Preview
    @Composable
    fun DialogTypes() {
        openAlertDialog = remember { mutableStateOf(false) }
        openCustomAlertDialog = remember { mutableStateOf(false) }

        val (isDismissOnBackPress, setDismissOnBackPress) = remember { mutableStateOf(true) }
        val (isDismissOnClickOutside, setDismissOnClickOutside) = remember { mutableStateOf(true) }

        val spaceHeight = 24.dp
        Column(Modifier.background(MaterialTheme.colors.background).fillMaxHeight()) {
            TopAppBar(
                title = { Text("Dialog") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
            Column(Modifier.padding(20.dp)) {
                Text(text = "Dialog Types : ", style = MaterialTheme.typography.h6)
                Spacer(Modifier.requiredHeight(spaceHeight))
                DialogItem(
                    dialogTypeText = "Alert Dialog Sample",
                    onClickEvent = {
                        openAlertDialog.value = true
                    })
                Spacer(Modifier.requiredHeight(spaceHeight))
                DialogItem(
                    dialogTypeText = "Custom Alert Dialog Sample",
                    onClickEvent = {
                        openCustomAlertDialog.value = true
                    })
                Spacer(Modifier.requiredHeight(spaceHeight))
                DialogPropertyCheckboxItem(
                    propertyName = "Close Dialog on Backpress",
                    isDismiss = isDismissOnBackPress,
                    onToggleChange = {
                        setDismissOnBackPress(!isDismissOnBackPress)
                    })
                Spacer(Modifier.requiredHeight(spaceHeight))
                DialogPropertyCheckboxItem(
                    propertyName = "Close Dialog on Click Outside",
                    isDismiss = isDismissOnClickOutside,
                    onToggleChange = {
                        setDismissOnClickOutside(!isDismissOnClickOutside)
                    })
            }
        }

        if (openAlertDialog.value) {
            AlertDialogSample(isDismissOnBackPress, isDismissOnClickOutside)
        }

        if (openCustomAlertDialog.value) {
            CustomAlertDialogSample(isDismissOnBackPress, isDismissOnClickOutside)
        }
    }

    @Composable
    @OptIn(ExperimentalMaterialApi::class)
    fun DialogItem(dialogTypeText: String, onClickEvent: () -> Unit) {
        Card(
            modifier = Modifier.fillMaxWidth(),
            shape = RoundedCornerShape(10.dp),
            border = BorderStroke(1.dp, Color.LightGray),
            elevation = 5.dp,
            onClick = onClickEvent,
            indication = rememberRipple()
        ) {
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .padding(10.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(dialogTypeText, Modifier.weight(1f), fontSize = 16.sp)
                Icon(Icons.Default.KeyboardArrowRight, "", Modifier.size(24.dp))
            }
        }
    }

    @Composable
    fun DialogPropertyCheckboxItem(
        propertyName: String,
        isDismiss: Boolean,
        onToggleChange: (Boolean) -> Unit
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 20.dp)
                .toggleable(
                    value = isDismiss,
                    onValueChange = onToggleChange
                ),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Checkbox(
                checked = isDismiss, onCheckedChange = null,
                colors = CheckboxDefaults.colors(
                    checkedColor = MaterialTheme.colors.primaryVariant,
                    uncheckedColor = Color.DarkGray,
                    checkmarkColor = Color.White
                )
            )
            Text(
                text = propertyName,
                Modifier.padding(start = 5.dp),
                fontSize = 16.sp
            )
        }
    }

    @Composable
    @OptIn(ExperimentalComposeUiApi::class)
    fun AlertDialogSample(closeOnBackPress: Boolean, closeOnOutsideClick: Boolean) {
        AlertDialog(
            properties = DialogProperties(
                dismissOnBackPress = closeOnBackPress,
                dismissOnClickOutside = closeOnOutsideClick
            ),
            onDismissRequest = {
                openAlertDialog.value = false
            },
            title = {
                Text("Alert Dialog Title")
            },
            text = {
                Text("Here is a description of the alert dialog")
            },
            confirmButton = {
                TextButton(onClick = {
                    openAlertDialog.value = false
                    Toast.makeText(this, "Clicked on Confirm", Toast.LENGTH_SHORT).show()
                }) {
                    Text("Confirm")
                }
            },
            dismissButton = {
                TextButton(onClick = {
                    openAlertDialog.value = false
                    Toast.makeText(this, "Clicked on Dismiss", Toast.LENGTH_SHORT).show()
                }) {
                    Text("Dismiss")
                }
            }
        )
    }

    @Composable
    fun CustomAlertDialogSample(closeOnBackPress: Boolean, closeOnOutsideClick: Boolean) {
        AlertDialog(
            properties = DialogProperties(
                dismissOnBackPress = closeOnBackPress,
                dismissOnClickOutside = closeOnOutsideClick
            ),
            onDismissRequest = {
                openCustomAlertDialog.value = false
            },
            title = {
                Text("Custom Alert Dialog Title")
            },
            text = {
                Text("Here is a description of the custom alert dialog")
            },
            buttons = {
                Row(
                    modifier = Modifier.padding(10.dp),
                    horizontalArrangement = Arrangement.Center
                ) {
                    Button(
                        modifier = Modifier.fillMaxWidth(),
                        onClick = {
                            openCustomAlertDialog.value = false
                            Toast.makeText(
                                this@DialogActivity,
                                "Clicked on Dismiss",
                                Toast.LENGTH_SHORT
                            ).show()
                        }
                    ) {
                        Text("Dismiss")
                    }
                }
            }
        )
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/BasicAnimation.kt<|end_filename|>
package com.jetpack.compose.learning.animation

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.animation.basic.AnimateAsStateChangeColor
import com.jetpack.compose.learning.animation.basic.AnimateAsStateChangeColorWithSize
import com.jetpack.compose.learning.animation.basic.AnimatedVisibilityDemo
import com.jetpack.compose.learning.animation.basic.RotatingSquareComponent
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class BasicAnimation : ComponentActivity() {

    @OptIn(ExperimentalAnimationApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                InitView()
            }
        }
    }

    @ExperimentalAnimationApi
    @Composable
    fun InitView() {
        Column(Modifier.background(MaterialTheme.colors.background)) {
            TopAppBar(title = { Text(text = "Basic Animation", color = Color.White) },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                })
            Spacer(Modifier.height(16.dp))

            LazyColumn {
                item {
                    // Change only box color with animation
                    AnimateAsStateChangeColor()

                    Spacer(Modifier.height(30.dp))

                    // Change box color and size with animation
                    AnimateAsStateChangeColorWithSize()

                    Spacer(Modifier.height(30.dp))

                    // View visible/hide without fadIn animation
                    // Experimental APIs can change in the future or may be removed entirely. (AnimatedVisibility)
                    AnimatedVisibilityDemo(false)

                    Spacer(Modifier.height(30.dp))

                    // View visible/hide with fadIn animation
                    // Experimental APIs can change in the future or may be removed entirely. (AnimatedVisibility)
                    AnimatedVisibilityDemo(true)

                    Spacer(Modifier.height(50.dp))

                    RotatingSquareComponent()

                    Spacer(Modifier.height(20.dp))
                }
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/constraintlayout/ChainActivity.kt<|end_filename|>
package com.jetpack.compose.learning.constraintlayout

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ChainStyle
import androidx.constraintlayout.compose.ConstraintLayout
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class ChainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                ChainSample()
            }
        }
    }

    @Preview
    @Composable
    fun ChainSample() {
        val spaceHeight = 24.dp
        Column(Modifier.background(MaterialTheme.colors.background).fillMaxHeight()) {
            TopAppBar(
                title = { Text("Chain") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
            Spacer(Modifier.requiredHeight(spaceHeight))
            Text(
                text = "Packed : ",
                style = MaterialTheme.typography.h6,
                modifier = Modifier.padding(20.dp)
            )
            HorizontalPackedChain()
            Spacer(Modifier.requiredHeight(spaceHeight))
            Text(
                text = "Spread : ",
                style = MaterialTheme.typography.h6,
                modifier = Modifier.padding(20.dp)
            )
            HorizontalSpreadChain()
            Spacer(Modifier.requiredHeight(spaceHeight))
            Text(
                text = "SpreadInside : ",
                style = MaterialTheme.typography.h6,
                modifier = Modifier.padding(20.dp)
            )
            HorizontalSpreadInsideChain()
        }
    }

    @Composable
    fun HorizontalPackedChain() {
        ConstraintLayout(Modifier.fillMaxWidth()) {
            val (text1, text2, text3) = createRefs()

            createHorizontalChain(text1, text2, text3, chainStyle = ChainStyle.Packed)

            Text(text = "View 1",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text1) {
                    }
                    .background(colorResource(R.color.blue))
                    .padding(10.dp)
            )
            Text(text = "View 2",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text2) {
                    }
                    .background(colorResource(R.color.pink))
                    .padding(10.dp)
            )
            Text(text = "View 3",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text3) {
                    }
                    .background(colorResource(R.color.fruit))
                    .padding(10.dp)
            )
        }
    }

    @Composable
    fun HorizontalSpreadChain() {
        ConstraintLayout(Modifier.fillMaxWidth()) {
            val (text1, text2, text3) = createRefs()

            createHorizontalChain(text1, text2, text3, chainStyle = ChainStyle.Spread)

            Text(text = "View 1",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text1) {
                    }
                    .background(colorResource(R.color.blue))
                    .padding(10.dp)
            )
            Text(text = "View 2",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text2) {
                    }
                    .background(colorResource(R.color.pink))
                    .padding(10.dp)
            )
            Text(text = "View 3",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text3) {
                    }
                    .background(colorResource(R.color.fruit))
                    .padding(10.dp)
            )
        }
    }

    @Composable
    fun HorizontalSpreadInsideChain() {
        ConstraintLayout(Modifier.fillMaxWidth()) {
            val (text1, text2, text3) = createRefs()

            createHorizontalChain(text1, text2, text3, chainStyle = ChainStyle.SpreadInside)

            Text(text = "View 1",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text1) {
                    }
                    .background(colorResource(R.color.blue))
                    .padding(10.dp)
            )
            Text(text = "View 2",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text2) {
                    }
                    .background(colorResource(R.color.pink))
                    .padding(10.dp)
            )
            Text(text = "View 3",
                color = Color.White,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .constrainAs(text3) {
                    }
                    .background(colorResource(R.color.fruit))
                    .padding(10.dp)
            )
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/demosamples/instagramdemo/components/InstagramStoriesItem.kt<|end_filename|>
package com.jetpack.compose.learning.demosamples.instagramdemo.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.demosamples.instagramdemo.data.Items

@Composable
fun InstagramStoriesItem(post: Items) {

    val blue = Color(0xFF515BD4)
    val purple = Color(0xFF8134AF)
    val orange = Color(0xFFF58529)
    val yellow = Color(0xFFFEDA77)
    val pink = Color(0xFFDD2A7B)

    val imageModifier =
        Modifier
            .padding(8.dp)
            .size(60.dp)
            .clip(CircleShape)
            .border(
                width = 3.dp,
                brush = Brush.linearGradient(listOf(orange, yellow, pink, purple, blue)),
                shape = CircleShape
            )

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            painter = painterResource(id = post.profilePic),
            contentDescription = null,
            modifier = imageModifier,
            contentScale = ContentScale.Crop
        )
        Text(text = post.title)
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/swipetodelete/SwipeDirection.kt<|end_filename|>
package com.jetpack.compose.learning.swipetodelete

enum class SwipeDirection {
    LEFT, RIGHT, BOTH
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/dropdownmenu/DropDownMenuActivity.kt<|end_filename|>
package com.jetpack.compose.learning.dropdownmenu

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.Divider
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.ArrowCircleDown
import androidx.compose.material.icons.filled.ArrowCircleUp
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import com.jetpack.compose.learning.theme.pink700

class DropDownMenuActivity: ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @Preview
    @Composable
    fun MainContent() {
        var isTopBarExpanded by remember { mutableStateOf(false) }
        val optionsList = listOf("Refresh", "Aboutus", "More")
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Dropdown") },
                    navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    },
                    // Show dropdown on Navigation Action clicked
                    actions = {
                        IconButton(onClick = { isTopBarExpanded = true }) {
                            Icon(Icons.Filled.MoreVert, contentDescription = null)
                        }
                        DropdownMenu(
                            expanded = isTopBarExpanded,
                            onDismissRequest = { isTopBarExpanded = false }
                        ) {
                            optionsList.forEach {
                                DropdownMenuItem(onClick = {
                                    showToast("$it Clicked")
                                    isTopBarExpanded = false
                                }) {
                                    Text(it)
                                }
                            }
                        }
                    }
                )
            }
        ) {
            DropDownContents()
        }
    }

    @Composable
    fun DropDownContents() {
        var isSimpleDropDownExpanded by remember { mutableStateOf(false) }
        var isCustomBackgroundDropDownExpanded by remember { mutableStateOf(false) }
        var isCustomDropDownExpanded by remember { mutableStateOf(false) }
        var isDisabledDropDownExpanded by remember { mutableStateOf(false) }
        var simpleCountry by remember { mutableStateOf("") }
        var customBackgroundCountry by remember { mutableStateOf("") }
        var customCountry by remember { mutableStateOf("") }
        var disabledCountry by remember { mutableStateOf("") }
        val countryList = listOf("USA", "INDIA", "JAPAN", "CHINA")

        Column(modifier = Modifier
            .fillMaxWidth()
            .wrapContentSize(Alignment.Center),
        horizontalAlignment = Alignment.CenterHorizontally) {

            Spacer(modifier = Modifier.height(30.dp))

            // Simple dropdown
            Box {
                OutlinedTextField(
                    value = simpleCountry,
                    onValueChange = { },
                    placeholder = { Text(text = "Simple Dropdown") },
                    enabled = false,
                    modifier = Modifier
                        .clickable {
                            isSimpleDropDownExpanded = true
                        }
                        .fillMaxWidth(0.8f),
                    textStyle = TextStyle(color = Color.Black)
                )

                DropdownMenu(
                    expanded = isSimpleDropDownExpanded,
                    onDismissRequest = { isSimpleDropDownExpanded = false },
                    modifier = Modifier.fillMaxWidth(0.8f),
                ) {
                    countryList.forEach {
                        DropdownMenuItem(onClick = {
                            simpleCountry = it
                            isSimpleDropDownExpanded = false
                        }, modifier = Modifier.fillMaxWidth(0.8f)) {
                            Text(it)
                        }
                    }
                }
            }

            Spacer(modifier = Modifier.height(20.dp))

            // Custom background color dropdown
            Box {
                OutlinedTextField(
                    value = customBackgroundCountry,
                    onValueChange = { },
                    placeholder = { Text(text = "Custom Background Dropdown") },
                    enabled = false,
                    modifier = Modifier
                        .clickable {
                            isCustomBackgroundDropDownExpanded = true
                        }
                        .fillMaxWidth(0.8f),
                    textStyle = TextStyle(color = Color.Black)
                )

                DropdownMenu(
                    expanded = isCustomBackgroundDropDownExpanded,
                    onDismissRequest = { isCustomBackgroundDropDownExpanded = false },
                    modifier = Modifier
                        .fillMaxWidth(0.8f)
                        .background(color = pink700),
                ) {
                    countryList.forEachIndexed { index, country ->
                        DropdownMenuItem(onClick = {
                            customBackgroundCountry = country
                            isCustomBackgroundDropDownExpanded = false
                        }) {
                            Text(country, color = Color.White)
                        }
                    }
                }
            }

            Spacer(modifier = Modifier.height(20.dp))

            // Custom dropdown with icons in dropdown item
            Box {
                OutlinedTextField(
                    value = customCountry,
                    onValueChange = { },
                    placeholder = { Text(text = "Custom Dropdown") },
                    enabled = false,
                    modifier = Modifier
                        .clickable {
                            isCustomDropDownExpanded = true
                        }
                        .fillMaxWidth(0.8f),
                    textStyle = TextStyle(color = Color.Black),
                    trailingIcon = { Icon(imageVector = Icons.Default.ArrowCircleDown, "") }
                )

                DropdownMenu(
                    expanded = isCustomDropDownExpanded,
                    onDismissRequest = { isCustomDropDownExpanded = false },
                    modifier = Modifier
                        .fillMaxWidth(0.8f)
                ) {
                    countryList.forEachIndexed {index, selectedCountry ->
                        DropdownMenuItem(onClick = {
                            customCountry = selectedCountry
                            isCustomDropDownExpanded = false
                        }) {
                            Modifier.fillMaxWidth()
                            Text(selectedCountry)
                            Row(horizontalArrangement = Arrangement.End, modifier = Modifier.fillMaxWidth()) {
                                Icon(imageVector = Icons.Default.ArrowCircleUp, contentDescription = null)
                            }
                        }
                        if (index != countryList.lastIndex)
                            Divider(Modifier.background(Color.Black))
                    }
                }
            }

            Spacer(modifier = Modifier.height(20.dp))

            // Disable selection dropdown
            Box {
                OutlinedTextField(
                    value = disabledCountry,
                    onValueChange = { },
                    placeholder = { Text(text = "Disable selection dropdown") },
                    enabled = false,
                    modifier = Modifier
                        .clickable {
                            isDisabledDropDownExpanded = true
                        }
                        .fillMaxWidth(0.8f),
                    textStyle = TextStyle(color = Color.Black)
                )

                DropdownMenu(
                    expanded = isDisabledDropDownExpanded,
                    onDismissRequest = { isDisabledDropDownExpanded = false },
                    modifier = Modifier
                        .fillMaxWidth(0.8f)
                ) {
                    countryList.forEachIndexed { index, selectedCountry ->
                        DropdownMenuItem(onClick = {
                            disabledCountry = selectedCountry
                            isDisabledDropDownExpanded = false
                        },
                        enabled = false) {
                            Modifier.fillMaxWidth()
                            Text(selectedCountry)
                        }
                    }
                }
            }
        }
    }

    private fun showToast(message: String) {
        Toast.makeText(applicationContext, message, Toast.LENGTH_SHORT).show()
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/bottomnav/ScreenType.kt<|end_filename|>
package com.jetpack.compose.learning.bottomnav

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Search
import androidx.compose.ui.graphics.vector.ImageVector

sealed class ScreenType(val icon: ImageVector, var route: String, val resourceId: String) {
    object Home : ScreenType(Icons.Filled.Home, "home", "Home")
    object Search : ScreenType(Icons.Filled.Search, "search", "Search")
    object Notifications : ScreenType(Icons.Filled.Notifications, "notifications", "Notifications")
    object Profile : ScreenType(Icons.Filled.Person, "profile", "Profile")
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/timepicker/TimePickerActivity.kt<|end_filename|>
package com.jetpack.compose.learning.timepicker

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import com.google.android.material.datepicker.MaterialDatePicker
import com.google.android.material.timepicker.MaterialTimePicker
import com.google.android.material.timepicker.TimeFormat
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import java.text.SimpleDateFormat
import java.util.*

class TimePickerActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainContent()
        }
    }

    @Composable
    private fun MainContent() {
        var datePicked: String? by remember {
            mutableStateOf(null)
        }
        val updatedTime = { hour: String, min: String, time: String ->
            datePicked = "$hour:$min $time"
        }
        val systemUiController = remember { SystemUiController(window) }
        val appTheme = remember { mutableStateOf(AppThemeState()) }
        BaseView(appTheme.value, systemUiController) {
            Scaffold(
                topBar = {
                    TopAppBar(title = { Text("TimePicker") }, navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    })
                }
            ) {
                DatePickerView(datePicked, updatedTime)
            }
        }
    }

    @Preview
    @Composable
    fun DatePickerView(
        datePicked: String?,
        updatedDate: (hour: String, min: String, time: String) -> Unit,
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .wrapContentSize(Alignment.Center)
                .padding(horizontal = 25.dp)
                .border(
                    0.5.dp,
                    MaterialTheme.colors.onSurface.copy(alpha = 0.5f),
                    shape = RoundedCornerShape(5.dp)
                )
                .clickable {
                    showDatePicker(updatedDate)
                },
        ) {
            ConstraintLayout(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .align(Alignment.Center)
            ) {
                val (lable, iconView) = createRefs()
                Text(
                    text = datePicked ?: "Select Time",
                    color = MaterialTheme.colors.onSurface,
                    modifier = Modifier
                        .fillMaxWidth()
                        .constrainAs(lable) {
                            top.linkTo(parent.top)
                            bottom.linkTo(parent.bottom)
                            start.linkTo(parent.start)
                            end.linkTo(iconView.start)
                            width = Dimension.fillToConstraints
                        }
                )

                Icon(
                    imageVector = Icons.Default.Timer,
                    contentDescription = null,
                    modifier = Modifier
                        .size(20.dp, 20.dp)
                        .constrainAs(iconView) {
                            end.linkTo(parent.end)
                            top.linkTo(parent.top)
                            bottom.linkTo(parent.bottom)
                        },
                    tint = MaterialTheme.colors.onSurface
                )

            }

        }
    }

    private fun showDatePicker(updatedDate: (hour: String, min: String, time: String) -> Unit) {
        val materialTimePicker = MaterialTimePicker.Builder()
            .setTimeFormat(TimeFormat.CLOCK_12H)
            .setMinute(timeFormatter("mm").toInt())
            .setHour(timeFormatter("HH").toInt())
            .build()
        materialTimePicker.addOnPositiveButtonClickListener {
            updatedDate(
                getHour(materialTimePicker.hour).toString(), materialTimePicker.minute.toString(),
                getAmPm(materialTimePicker.hour)
            )
        }
        materialTimePicker.show(supportFragmentManager, "fragment_tag")
    }

    private fun timeFormatter(formate: String?): String {
        val formatter = SimpleDateFormat(formate, Locale.US)
        val calendar: Calendar = Calendar.getInstance()
        return formatter.format(calendar.time)
    }

    private fun getAmPm(hour: Int): String {
        return if (hour < 12) "AM" else "PM"
    }

    private fun getHour(hour: Int): Int {
        return when {
            hour == 0 -> {
                hour + 12
            }
            hour > 12 -> {
                hour - 12
            }
            else -> {
                hour
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/contentAnimation/FabButtonWithContent.kt<|end_filename|>
package com.jetpack.compose.learning.animation.contentAnimation

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.R

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun TabFloatingActionButton(
    extended: Boolean, onClick: () -> Unit
) {
    // Use `FloatingActionButton` rather than `ExtendedFloatingActionButton` for full control on
    // how it should animate.
    FloatingActionButton(onClick = onClick) {
        Row(
            modifier = Modifier.padding(horizontal = 16.dp)
        ) {
            Icon(
                imageVector = Icons.Default.Edit, contentDescription = null
            )
            // Toggle the visibility of the content with animation.
            AnimatedVisibility(visible = extended) {
                Text(
                    text = stringResource(R.string.edit),
                    modifier = Modifier.padding(start = 8.dp, top = 3.dp)
                )
            }
        }
    }
}

@Preview
@Composable
private fun PreviewFab() {
    TabFloatingActionButton(false, onClick = {})
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/textstyle/SimpleTextActivity.kt<|end_filename|>
package com.jetpack.compose.learning.textstyle

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
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.graphics.Shadow
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import com.jetpack.compose.learning.theme.pink200
import com.jetpack.compose.learning.theme.pink700

@ExperimentalFoundationApi
class SimpleTextActivity : ComponentActivity() {

    val fontSize = 18.sp

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                Column(Modifier.background(MaterialTheme.colors.background)) {
                    TopAppBar(
                        title = { Text("Text") },
                        navigationIcon = {
                            IconButton(onClick = { onBackPressed() }) {
                                Icon(Icons.Filled.ArrowBack, contentDescription = null)
                            }
                        }
                    )
                    TextExamples()
                }
            }
        }
    }


    @Preview
    @Composable
    fun TextExamples() {
        Column(
            modifier = Modifier.padding(16.dp).fillMaxHeight(),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            SimpleText()
            TextFromResource()
            ColorText()
            TextColorFromResource()
            DifferentFonts()
            TextUnderLine()
            TextLineThrough()
            TextUnderLineWithLineThrough()
            OverFlowText()
            MultipleStylesInText()
            SelectableText()
            ClickableText()
            BackGroundText()
            ShadowText()
        }
    }

    @Composable
    fun SimpleText() {
        // Text composable is used to display some text
        Text(text = "This is Simple Text", Modifier.padding(bottom = 10.dp), fontSize = 15.sp)
    }

    @Composable
    fun TextFromResource() {
        // Text composable is used to display some text
        Text(
            stringResource(R.string.text_from_resource),
            Modifier.padding(bottom = 10.dp),
            fontSize = fontSize
        )
    }

    @Composable
    fun ShadowText() {
        // Text composable is used to display some text
        Text(
            "Shadow on text",
            Modifier.padding(bottom = 10.dp),
            fontSize = fontSize, style = TextStyle(
                shadow = Shadow(
                    color = pink700, blurRadius = 5f,
                    offset = Offset(2f, 2f)
                )
            )
        )

    }

    @Composable
    fun BoldText() {
        Text(
            "Text style is bold",
            Modifier.padding(bottom = 10.dp),
            fontWeight = FontWeight.Bold,
            fontSize = fontSize
        )
    }

    @Composable
    fun ColorText() {
        Text(
            "Text color is Blue ",
            Modifier.padding(bottom = 10.dp),
            color = Color.Blue,
            fontSize = fontSize
        )
    }

    @Composable
    fun TextColorFromResource() {
        Text(
            "Text color from colors.xml ",
            color = Color(R.color.teal_700),
            fontSize = fontSize,
            modifier = Modifier.padding(bottom = 10.dp)
        )
    }

    @Composable
    fun DifferentFonts() {
        Column {
            Text(
                "This is FontFamily.Serif",
                fontSize = fontSize,
                fontFamily = FontFamily.Serif,
                modifier = Modifier.padding(bottom = 10.dp)
            )
        }
    }

    @Composable
    fun TextLineThrough() {
        Column {
            Text(
                "This is text with Line Through",
                textDecoration = TextDecoration.LineThrough,
                fontSize = fontSize,
                fontFamily = FontFamily.Serif,
                modifier = Modifier.padding(bottom = 10.dp)
            )
        }
    }

    @Composable
    fun TextUnderLine() {
        Column {
            Text(
                "This is text with Underline",
                textDecoration = TextDecoration.Underline,
                fontSize = fontSize,
                fontFamily = FontFamily.Serif,
                modifier = Modifier.padding(bottom = 10.dp)
            )
        }
    }

    @Composable
    fun TextUnderLineWithLineThrough() {
        Column {
            Text(
                "This is text with Underline and LineThrough",
                textDecoration = TextDecoration.Underline.plus(TextDecoration.LineThrough),
                fontSize = fontSize,
                fontFamily = FontFamily.Serif,
                modifier = Modifier.padding(bottom = 10.dp)
            )
        }
    }

    @Composable
    fun OverFlowText() {
        Column {
            // Overflow text

            //Clip (Clip the overflowing text to fix its container.)
            Text(
                "This is Overflow text with Clip property. This is Overflow text with Clip property. This is Overflow text with Clip property.",
                fontSize = fontSize,
                overflow = TextOverflow.Clip,
                fontFamily = FontFamily.Serif,
                maxLines = 1,
                modifier = Modifier.padding(bottom = 10.dp)
            )

            //Ellipsis (Use an ellipsis to indicate that the text has overflowed.)
            Text(
                "This is Overflow text with Ellipsis property. This is Overflow text with Ellipsis property. This is Overflow text with Ellipsis property.",
                fontSize = fontSize,
                overflow = TextOverflow.Ellipsis,
                fontFamily = FontFamily.Serif,
                maxLines = 1,
                modifier = Modifier.padding(bottom = 10.dp)
            )

            //Visible (When overflow is visible, text may be rendered outside the bounds of the composable displaying the text)
            Text(
                "This is Overflow text with Visible property. This is Overflow text with Visible property. This is Overflow text with Visible property.",
                fontSize = fontSize,
                overflow = TextOverflow.Visible,
                fontFamily = FontFamily.Serif,
                maxLines = 1,
                modifier = Modifier.padding(bottom = 10.dp)
            )
        }
    }

    @Composable
    fun MultipleStylesInText() {
        Text(
            buildAnnotatedString {
                withStyle(style = SpanStyle(color = pink200)) {
                    append("Different")
                }
                append(" Color")
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold,
                        color = Color.Gray,
                    )
                ) {
                    append(" Same ")
                }
                append(" TEXT")
            },
            modifier = Modifier.padding(bottom = 10.dp), fontSize = fontSize,
        )
    }

    @Composable
    fun SelectableText() {
        SelectionContainer {
            Text(
                "Only this text is selectable",
                modifier = Modifier.padding(bottom = 10.dp),
                fontSize = fontSize
            )
        }
    }

    @Composable
    fun ClickableText() {
        Text(
            "Click this text",
            modifier = Modifier
                .padding(bottom = 10.dp)
                .clickable {
                    showToast("Clickable text")
                },
            fontSize = fontSize
        )

        Text(
            "Long Press this text",
            modifier = Modifier
                .padding(bottom = 10.dp)
                .combinedClickable(
                    onClick = { },
                    onLongClick = { showToast("Long Click text") }
                ),
            fontSize = fontSize
        )

        Text(
            "Double Click this text",
            modifier = Modifier
                .padding(bottom = 10.dp)
                .combinedClickable(
                    onClick = { },
                    onDoubleClick = { showToast("Double Click text") }
                ),
            fontSize = fontSize
        )
    }

    @Composable
    fun BackGroundText() {
        Text(
            "This text field has background",
            modifier = Modifier
                .padding(bottom = 10.dp)
                .background(pink200),
            fontSize = fontSize,
        )
    }

    private fun showToast(message: String) {
        Toast.makeText(applicationContext, message, Toast.LENGTH_SHORT).show()
    }
}


<|start_filename|>app/src/main/java/com/jetpack/compose/learning/radiobutton/RadioButtonActivity.kt<|end_filename|>
package com.jetpack.compose.learning.radiobutton

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.RadioButton
import androidx.compose.material.RadioButtonDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import com.jetpack.compose.learning.theme.pink200
import com.jetpack.compose.learning.theme.pink700

val spaceModifier = Modifier.height(20.dp)

class RadioButtonActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @Preview
    @Composable
    fun MainContent() {
        Scaffold(topBar = {
            TopAppBar(
                title = { Text("Radio Button") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
        }) {
            Column(
                Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.TopCenter)
                    .padding(top = 10.dp)
            ) {
                RadioButtonsWithProperties()
                RadioGroupSample()
            }
        }
    }

    @Composable
    private fun RadioButtonsWithProperties() {

        var simpleRadioButtonSelectionState by remember { mutableStateOf(false) }
        var simpleRadioButtonWithLabelSelectionState by remember { mutableStateOf(false) }
        var customSelectedColorRadioButton by remember { mutableStateOf(false) }
        var customUnSelectedColorRadioButton by remember { mutableStateOf(false) }

        Card(
            backgroundColor = MaterialTheme.colors.primary.copy(0.04f),
            modifier = Modifier
                .padding(10.dp)
                .fillMaxWidth(),
            elevation = 0.dp,
            shape = RoundedCornerShape(8.dp),
            border = BorderStroke(2.dp, MaterialTheme.colors.primary.copy(0.5f)),
        ) {
            Column(Modifier.padding(10.dp)) {

                Text(
                    text = "Radio Button with different properties:",
                    style = MaterialTheme.typography.h6
                )

                Spacer(modifier = spaceModifier)

                // Simple Radio Button with Label
                Row {
                    RadioButton(selected = simpleRadioButtonWithLabelSelectionState, onClick = {
                        simpleRadioButtonWithLabelSelectionState =
                            !simpleRadioButtonWithLabelSelectionState
                    }, Modifier.padding(end = 5.dp))
                    Text(
                        text = "Simple Radio button with label",
                        Modifier.clickable {
                            simpleRadioButtonWithLabelSelectionState =
                                !simpleRadioButtonWithLabelSelectionState
                        })
                }

                Spacer(modifier = spaceModifier)

                // Disabled Radio Button
                Row {
                    RadioButton(
                        selected = false, onClick = {
                            simpleRadioButtonWithLabelSelectionState =
                                !simpleRadioButtonWithLabelSelectionState
                        },
                        enabled = false, modifier = Modifier.padding(end = 5.dp)
                    )
                    Text(text = "Disabled unselected Radio button")
                }

                Spacer(modifier = spaceModifier)

                // Disabled selected Radio Button
                Row {
                    RadioButton(selected = true, onClick = {
                        simpleRadioButtonSelectionState = !simpleRadioButtonSelectionState
                    }, enabled = false, modifier = Modifier.padding(end = 5.dp))
                    Text(text = "Disabled selected Radio button")
                }

                Spacer(modifier = spaceModifier)

                // Custom selected color Radio Button
                Row {
                    RadioButton(
                        selected = customSelectedColorRadioButton,
                        onClick = {
                            customSelectedColorRadioButton = !customSelectedColorRadioButton
                        },
                        colors = RadioButtonDefaults.colors(selectedColor = MaterialTheme.colors.primaryVariant),
                        modifier = Modifier.padding(end = 5.dp)
                    )
                    Text(text = "Custom selected color Radio button",
                        Modifier.clickable {
                            customSelectedColorRadioButton = !customSelectedColorRadioButton
                        })
                }

                Spacer(modifier = spaceModifier)

                // Custom unselected color Radio Button
                Row {
                    RadioButton(
                        selected = customUnSelectedColorRadioButton,
                        onClick = {
                            customUnSelectedColorRadioButton = !customUnSelectedColorRadioButton
                        },
                        colors = RadioButtonDefaults.colors(unselectedColor = MaterialTheme.colors.primaryVariant),
                        modifier = Modifier.padding(end = 5.dp)
                    )
                    Text(text = "Custom unselected color Radio button",
                        Modifier.clickable {
                            customUnSelectedColorRadioButton = !customUnSelectedColorRadioButton
                        })
                }
            }
        }
    }

    @Composable
    private fun RadioGroupSample() {
        /* Here Create List for radioButton */
        val radioOptions = listOf("Red Color", "Blue Color", "Black Color", "White Color")
        /* Here Create State of radioButton */
        var selectedOption by remember { mutableStateOf("") }

        Card(
            backgroundColor = MaterialTheme.colors.primary.copy(0.04f),
            modifier = Modifier
                .padding(10.dp)
                .fillMaxWidth(),
            elevation = 0.dp,
            shape = RoundedCornerShape(8.dp),
            border = BorderStroke(2.dp, MaterialTheme.colors.primary.copy(0.5f)),
        ) {

            Column(Modifier.padding(10.dp)) {

                Text(
                    text = "Radio Group example :",
                    style = MaterialTheme.typography.h6
                )

                Spacer(spaceModifier)

                radioOptions.forEach { text ->
                    Row(Modifier
                        .padding(bottom = 10.dp)
                        .wrapContentSize()
                        .selectable(
                            selected = (text == selectedOption),
                            onClick = {
                                selectedOption = text
                                showToast("$selectedOption selected")
                            }
                        )
                    ) {
                        RadioButton(
                            selected = (text == selectedOption),
                            onClick = {
                                selectedOption = text
                                showToast("$selectedOption selected")
                            },
                            colors = RadioButtonDefaults.colors(selectedColor = MaterialTheme.colors.primaryVariant)
                        )
                        Text(
                            text = text,
                            modifier = Modifier.padding(start = 10.dp, end = 20.dp),
                            textAlign = TextAlign.Center,
                            fontSize = 15.sp
                        )
                    }
                }
            }
        }
    }

    private fun showToast(message: String) {
        Toast.makeText(applicationContext, message, Toast.LENGTH_SHORT).show()
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/demosamples/instagramdemo/data/DataProvider.kt<|end_filename|>
package com.jetpack.compose.learning.demosamples.instagramdemo.data

import com.jetpack.compose.learning.R

object DataProvider {

    var itemList = listOf(
        Items(
            id = 1,
            title = "icecampus",
            subTitle = "2013 film",
            image = R.drawable.wp1,
            profilePic = R.drawable.dp1
        ),
        Items(
            id = 2,
            title = "tasteecho",
            subTitle = "2020 film",
            image = R.drawable.wp2,
            profilePic = R.drawable.dp2
        ),
        Items(
            id = 3,
            title = "clamexercise",
            subTitle = "2019 film",
            image = R.drawable.wp3,
            profilePic = R.drawable.dp3
        ),
        Items(
            id = 4,
            title = "glandford",
            subTitle = "2018 film",
            image = R.drawable.wp4,
            profilePic = R.drawable.dp4
        ),
        Items(
            id = 5,
            title = "worldbus",
            subTitle = "2002 film",
            image = R.drawable.wp5,
            profilePic = R.drawable.dp5
        ),
        Items(
            id = 6,
            title = "cheesays",
            subTitle = "2001 film",
            image = R.drawable.wp6,
            profilePic = R.drawable.dp6
        ),
        Items(
            id = 7,
            title = "skimaker",
            subTitle = "2001 film",
            image = R.drawable.wp7,
            profilePic = R.drawable.dp7
        ),
        Items(
            id = 8,
            title = "playroofer",
            subTitle = "2001 film",
            image = R.drawable.wp8,
            profilePic = R.drawable.dp8
        ),
        Items(
            id = 9,
            title = "seekerrisk",
            subTitle = "2001 film",
            image = R.drawable.wp9,
            profilePic = R.drawable.dp9
        ),
        Items(
            id = 10,
            title = "poetrylove",
            subTitle = "2001 film",
            image = R.drawable.wp10,
            profilePic = R.drawable.dp10
        ),
        Items(
            id = 11,
            title = "foodish",
            subTitle = "2001 film",
            image = R.drawable.wp11,
            profilePic = R.drawable.dp11
        ),
        Items(
            id = 12,
            title = "wanderlust",
            subTitle = "2001 film",
            image = R.drawable.wp12,
            profilePic = R.drawable.dp12
        ),
        Items(
            id = 13,
            title = "dualipa",
            subTitle = "2001 film",
            image = R.drawable.wp13,
            profilePic = R.drawable.dp13
        ),
        Items(
            id = 14,
            title = "billie",
            subTitle = "2001 film",
            image = R.drawable.wp14,
            profilePic = R.drawable.dp14
        ),
        Items(
            id = 15,
            title = "foundreturn",
            subTitle = "2001 film",
            image = R.drawable.wp15,
            profilePic = R.drawable.dp15
        )
    )
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/ui/theme/Color.kt<|end_filename|>
package com.jetpack.compose.learning.animation.ui.theme

import androidx.compose.ui.graphics.Color

val colorPrimaryDark = Color(0xFF262A33)
val colorPrimary = Color(0xFF515866)
val colorPrimaryVariant = Color(0xFF8A8F99)

val pinkColorDark = Color(0xFFEB495C)
val pinkColor = Color(0xFFAE868B)
val pinkColorVariant = Color(0xFFE4A8AF)

val ShimmerColorShades = listOf(
    colorPrimaryDark.copy(0.9f),
    colorPrimaryDark.copy(0.2f),
    colorPrimaryDark.copy(0.9f)
)

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/pulltorefresh/CustomBackgroundPullToRefreshActivity.kt<|end_filename|>
package com.jetpack.compose.learning.pulltorefresh

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.accompanist.swiperefresh.SwipeRefresh
import com.google.accompanist.swiperefresh.SwipeRefreshIndicator
import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import kotlinx.coroutines.delay

class CustomBackgroundPullToRefreshActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @Preview
    @Composable
    fun MainContent() {

        val items = remember { mutableStateListOf<Int>() }
        items.addAll(0..10)
        var isRefreshing by remember { mutableStateOf(false) }
        val swipeRefreshState = rememberSwipeRefreshState(isRefreshing)

        Scaffold(topBar = {
            TopAppBar(
                    title = { Text("Custom Background Pull To Refresh") },
                    navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    }
            )
        }) {
            Column() {
                SwipeRefresh(
                        state = swipeRefreshState,
                        onRefresh = {
                            isRefreshing = true
                        },
                        indicator = { state, trigger ->
                            SwipeRefreshIndicator(
                                    state = state,
                                    refreshTriggerDistance = trigger,
                                    scale = true,
                                    backgroundColor = MaterialTheme.colors.primary,
                                    contentColor = Color.White,
                                    shape = CircleShape,
                            )
                        }) {
                    LazyColumn(
                            contentPadding = PaddingValues(10.dp),
                            verticalArrangement = Arrangement.spacedBy(10.dp)
                    ) {
                        items(items.size) {
                            ColumnItem(number = items[it])
                        }
                    }
                    LaunchedEffect(isRefreshing) {
                        if (isRefreshing) {
                            delay(1000L)
                            items.clear()
                            items.addAll((1..10).map { (0..100).random() })
                            isRefreshing= false
                        }
                    }
                }
            }
        }
    }

    @Composable
    fun ColumnItem(number: Int) {
        Column(
                modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(MaterialTheme.colors.background)
                        .border(1.dp, MaterialTheme.colors.primary),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally

        ) {
            Text(text = "Item Number $number", color = MaterialTheme.colors.primary)
        }
    }

}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/demosamples/instagramdemo/InstagramHomeActivity.kt<|end_filename|>
package com.jetpack.compose.learning.demosamples.instagramdemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.demosamples.instagramdemo.components.InstaGramPostItem
import com.jetpack.compose.learning.demosamples.instagramdemo.components.InstagramStoriesItem
import com.jetpack.compose.learning.demosamples.instagramdemo.data.DataProvider

class InstagramHomeActivity: ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(modifier = Modifier.fillMaxSize()) {
                InstagramHomeScreen()
            }
        }
    }

    @Composable
    fun InstagramHomeScreen() {

        Column {
            InstagramHeader()
            Divider()
            InstagramStories()
            Divider()
            InstagramPost()
        }
    }

    @Composable
    fun InstagramHeader() {
        Row(
            modifier = Modifier.padding(8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_logo_instagram_text),
                contentDescription = null,
                modifier =
                Modifier
                    .size(width = 150.dp, height = 50.dp)
                    .weight(1f),
                alignment = Alignment.TopStart
            )
            Icon(painter = painterResource(id = R.drawable.ic_collapse_plus), contentDescription = null, modifier = Modifier
                .padding(8.dp)
                .size(25.dp))
            Icon(painter = painterResource(id = R.drawable.ic_instagram_share), contentDescription = null, modifier = Modifier.padding(8.dp))
        }
    }

    @Composable
    fun InstagramStories() {
        val post = remember { DataProvider.itemList }
        LazyRow(
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
        ) {
            items(
                items = post,
                itemContent = {
                    InstagramStoriesItem(it)
                }
            )
        }
    }

    @Composable
    fun InstagramPost() {
        val movies = remember { DataProvider.itemList }
        LazyColumn(
            contentPadding = PaddingValues(vertical = 8.dp)
        ) {
            items(
                items = movies,
                itemContent = {
                    InstaGramPostItem(it)
                }
            )
        }
    }
}


<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/LazyColumnRowActivity.kt<|end_filename|>
package com.jetpack.compose.learning.list

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
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.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class LazyColumnRowActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @Preview
    @Composable
    fun MainContent() {
        Scaffold(topBar = {
            TopAppBar(
                title = { Text("List") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
        }) {
            Column() {
                Text(
                    "Lazy Row :",
                    modifier = Modifier.padding(20.dp),
                    style = MaterialTheme.typography.h6
                )
                LazyRowExample()
                Text(
                    "Lazy Column :",
                    modifier = Modifier.padding(20.dp),
                    style = MaterialTheme.typography.h6
                )
                LazyColumnExample()
            }
        }
    }

    @Composable
    fun LazyColumnExample() {
        val itemsList = (0..20).toList()
        LazyColumn(
            contentPadding = PaddingValues(10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items(itemsList.size) {
                ColumnItem(number = it)
            }
        }
    }

    @Composable
    fun ColumnItem(number: Int) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .background(MaterialTheme.colors.background)
                .border(1.dp, MaterialTheme.colors.primary),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally

        ) {
            Text(text = "Item Number $number", color = MaterialTheme.colors.primary)
        }
    }

    @Composable
    fun LazyRowExample() {
        val itemsList = (0..20).toList()
        LazyRow(
            contentPadding = PaddingValues(10.dp),
            horizontalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items(itemsList.size) {
                RowItem(number = it)
            }
        }
    }

    @Composable
    fun RowItem(number: Int) {
        Row(
            modifier = Modifier
                .size(100.dp)
                .background(MaterialTheme.colors.background)
                .border(1.dp, MaterialTheme.colors.primary),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {
            Text(
                text = "Item Number $number",
                color = MaterialTheme.colors.primary,
                textAlign = TextAlign.Center
            )
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/zoomview/ZoomViewActivity.kt<|end_filename|>
package com.jetpack.compose.learning.zoomview

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.calculatePan
import androidx.compose.foundation.gestures.calculateZoom
import androidx.compose.foundation.gestures.forEachGesture
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class ZoomViewActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainContent()
        }
    }

    @Composable
    private fun MainContent() {
        val systemUiController = remember { SystemUiController(window) }
        val appTheme = remember { mutableStateOf(AppThemeState()) }
        BaseView(appTheme.value, systemUiController) {
            Scaffold(
                topBar = {
                    TopAppBar(title = { Text("ZoomView") }, navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    })
                }
            ) {
                ZoomViewComposable()
            }
        }
    }

    @Composable
    fun ZoomViewComposable() {
        // Reacting to state changes is the core behavior of Compose. We use the state composable
        // that is used for holding a state value in this composable for representing the current
        // value scale(for zooming in the image) & translation(for panning across the image). Any
        // composable that reads the value of counter will be recomposed any time the value changes.
        // This ensures that only the composables that depend on this will be redraw while the
        // rest remain unchanged. This ensures efficiency and is a performance optimization. It
        // is inspired from existing frameworks like React.
        var scale by remember { mutableStateOf(1f) }
        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(0f) }

        // Column is a composable that places its children in a vertical sequence. You
        // can think of it similar to a LinearLayout with the vertical orientation.
        // In addition we also pass a few modifiers to it.

        // You can think of Modifiers as implementations of the decorators pattern that are used to
        // modify the composable that its applied to. In the example below, we make the Column composable
        // zoomable by leveraging the Modifier.pointerInput modifier
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .pointerInput(Unit) {
                    forEachGesture {
                        awaitPointerEventScope {
                            awaitFirstDown()
                            do {
                                val event = awaitPointerEvent()
                                scale *= event.calculateZoom()
                                val offset = event.calculatePan()
                                offsetX += offset.x
                                offsetY += offset.y
                            } while (event.changes.any { it.pressed })
                        }
                    }
                }
        ) {
            // There are multiple methods available to load an image resource in Compose.
            // However, it would be advisable to use the painterResource method as it loads
            // an image resource asynchronously
            val imagepainter = painterResource(id = R.drawable.jetpack)
            // Image is a pre-defined composable that lays out and draws a given [ImageBitmap].
            // We use the graphicsLayer modifier to modify the scale & translation of the image.
            // This is read from the state properties that we created above.
            Image(
                modifier = Modifier.fillMaxSize().graphicsLayer(
                    scaleX = scale,
                    scaleY = scale,
                    translationX = offsetX,
                    translationY = offsetY
                ),
                painter = imagepainter,
                contentDescription = "Landscape Image"
            )
        }
    }

    @Preview
    @Composable
    fun ZoomViewComposablePreview() {
        ZoomViewComposable()
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/basic/ChangeColorAnimationWithState.kt<|end_filename|>
package com.jetpack.compose.learning.animation.basic

import androidx.compose.animation.animateColor
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun AnimateAsStateChangeColor() {
    var blue by remember { mutableStateOf(true) }
    val color by animateColorAsState(if (blue) Color.Black else Color.Red)

    Column(
        modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Button(onClick = { blue = !blue }) {
            Text(text = "Change Color")
        }

        Spacer(modifier = Modifier.height(16.dp))

        Box(
            modifier = Modifier
                .size(120.dp)
                .background(color)
        )
    }
}

@Composable
fun AnimateAsStateChangeColorWithSize() {
    var boxState by remember { mutableStateOf(BoxState.Small) }
    val transition = updateTransition(targetState = boxState, label = "")
    val color by transition.animateColor(label = "color") { state ->
        when (state) {
            BoxState.Small -> Color.Black
            BoxState.Large -> Color.Red
        }
    }
    val size by transition.animateDp(
        label = "dp",
    ) { state ->
        when (state) {
            BoxState.Small -> 64.dp
            BoxState.Large -> 128.dp
        }
    }

    Column(
        modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Button(onClick = {
            boxState = when (boxState) {
                BoxState.Small -> BoxState.Large
                BoxState.Large -> BoxState.Small
            }
        }) {
            Text(text = "Change Color and Size")
        }

        Spacer(modifier = Modifier.height(16.dp))

        Box(
            modifier = Modifier
                .size(size)
                .background(color)
        )
    }
}

private enum class BoxState {
    Small, Large
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/GestureAnimationActivity.kt<|end_filename|>
package com.jetpack.compose.learning.animation

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class GestureAnimationActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                Column(Modifier.background(MaterialTheme.colors.background)) {
                    TopAppBar(title = { Text(text = "Gesture Animation", color = Color.White) },
                        navigationIcon = {
                            IconButton(onClick = { onBackPressed() }) {
                                Icon(Icons.Filled.ArrowBack, contentDescription = null)
                            }
                        })
                    Spacer(Modifier.height(16.dp))

                    SwipeToDelete()
                }
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/demosamples/instagramdemo/InstagramLoginActivity.kt<|end_filename|>
package com.jetpack.compose.learning.demosamples.instagramdemo

import android.content.Intent
import android.os.Bundle
import androidx.compose.ui.graphics.Color
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.R

class InstagramLoginActivity: ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(modifier = Modifier.fillMaxSize()) {
                LoginScreen()
            }
        }
    }

    @Composable
    fun LoginScreen() {
        val context = LocalContext.current
        val email = remember { mutableStateOf(TextFieldValue()) }
        val password = remember { mutableStateOf(TextFieldValue()) }
        val emptyEmailError = remember { mutableStateOf(false) }
        val emptyPasswordError = remember { mutableStateOf(false) }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            verticalArrangement = Arrangement.Center,
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_logo_instagram_text),
                contentDescription = "Instagram",
                modifier = Modifier
                    .width(200.dp)
                    .align(alignment = Alignment.CenterHorizontally),
            )
            Spacer(Modifier.size(25.dp))
            OutlinedTextField(
                value = email.value,
                onValueChange = {
                    if (emptyEmailError.value) {
                        emptyEmailError.value = false
                    }
                    email.value = it
                },
                modifier = Modifier.fillMaxWidth(),
                label = {
                    Text(text = "Email")
                },
                isError = emptyEmailError.value,
                colors = TextFieldDefaults.outlinedTextFieldColors(
                    focusedBorderColor = Color(android.graphics.Color.parseColor("#0095F6")),
                    cursorColor = Color(android.graphics.Color.parseColor("#0095F6")),
                    focusedLabelColor = Color(android.graphics.Color.parseColor("#0095F6")))
            )
            if (emptyEmailError.value) {
                Text(text = "Email is Required", color = Color.Red)
            }

            Spacer(Modifier.size(16.dp))
            val passwordVisibility = remember { mutableStateOf(true) }

            OutlinedTextField(
                value = password.value,
                onValueChange = {
                    if (emptyPasswordError.value) {
                        emptyPasswordError.value = false
                    }
                    password.value = it
                },
                modifier = Modifier.fillMaxWidth(),
                label = {
                    Text(text = "Password")
                },
                trailingIcon = {
                    IconButton(onClick = {
                        passwordVisibility.value = !passwordVisibility.value
                    }) {
                        Icon(
                            imageVector = if (passwordVisibility.value) Icons.Default.VisibilityOff else Icons.Default.Visibility,
                            contentDescription = "visibility"
                        )
                    }
                },
                visualTransformation = if (passwordVisibility.value) PasswordVisualTransformation() else VisualTransformation.None,
                colors = TextFieldDefaults.outlinedTextFieldColors(
                    focusedBorderColor = Color(android.graphics.Color.parseColor("#0095F6")),
                    cursorColor = Color(android.graphics.Color.parseColor("#0095F6")),
                    focusedLabelColor = Color(android.graphics.Color.parseColor("#0095F6")))
            )
            if (emptyPasswordError.value) {
                Text(text = "Password is Required", color = Color.Red)
            }

            Spacer(Modifier.size(25.dp))

            Button(
                onClick = {
                    when {
                        email.value.text.isEmpty() -> {
                            emptyEmailError.value = true
                        }
                        password.value.text.isEmpty() -> {
                            emptyPasswordError.value = true
                        }
                        else -> {
                            context.startActivity(Intent(context, InstagramHomeActivity::class.java))
                        }
                    }
                },
                content = {
                    Text(text = "Login", color = Color.White)
                },
                modifier = Modifier
                    .height(height = 45.dp)
                    .fillMaxWidth(),
                colors = ButtonDefaults.buttonColors(backgroundColor = Color(android.graphics.Color.parseColor("#0095F6")))
            )

            Spacer(Modifier.size(8.dp))

            Text(
                text = "Forget your login details? Get Help logging in",
                color = Color.Gray,
                modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
            )

            Spacer(Modifier.size(16.dp))

            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                Divider(Modifier.fillMaxWidth(0.45f), color = Color.Gray, thickness = 1.dp)
                Spacer(Modifier.size(8.dp))
                Text(text = "OR", color = Color.Gray, fontWeight = FontWeight.Bold)
                Spacer(Modifier.size(8.dp))
                Divider(Modifier.fillMaxWidth(), color = Color.Gray, thickness = 1.dp)
            }

            Spacer(Modifier.size(24.dp))

            Text(
                text = "Login With Facebook",
                color = Color(android.graphics.Color.parseColor("#0095F6")),
                fontWeight = FontWeight.Bold,
                modifier = Modifier.align(alignment = Alignment.CenterHorizontally),
            )
        }
        
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(bottom = 16.dp),
            verticalArrangement = Arrangement.Bottom,
        ) {
            Text(text = "Don't have account? Signup", color = Color.Gray, modifier = Modifier.align(alignment = Alignment.CenterHorizontally))
        }
    }

    @Preview
    @Composable
    fun PreviewLogin() {
        LoginScreen()
    }
}


<|start_filename|>app/src/main/java/com/jetpack/compose/learning/swipetodelete/SwipeableItemCell.kt<|end_filename|>
package com.jetpack.compose.learning.swipetodelete

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.rememberSwipeableState
import androidx.compose.material.swipeable
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import kotlin.math.roundToInt

@ExperimentalMaterialApi
@Composable
fun SwipeAbleItemCell(number: Int, onEditClick: (String) -> (Unit), onDeleteClicked: (String) -> (Unit), swipeDirection: SwipeDirection) {

    val squareSize = if (swipeDirection == SwipeDirection.BOTH) 60.dp else 120.dp
    val swipeAbleState = rememberSwipeableState(initialValue = 0)
    val sizePx = with(LocalDensity.current) { squareSize.toPx() }
    val anchors = when(swipeDirection) {
        SwipeDirection.LEFT -> mapOf(0f to 0, -sizePx to 1)
        SwipeDirection.RIGHT -> mapOf(0f to 0, sizePx to 1)
        else -> mapOf(0f to 0, sizePx to 1, -sizePx to 2)
    }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
    ) {
        Column(
            modifier = Modifier
                .background(Color.White)
                .padding(end = 10.dp, top = 10.dp, start = 10.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(MaterialTheme.colors.primary)
                    .swipeable(
                        state = swipeAbleState,
                        anchors = anchors,
                        thresholds = { _, _ ->
                            FractionalThreshold(0.3f)
                        },
                        orientation = Orientation.Horizontal
                    ),
            ) {
                Row (
                    horizontalArrangement = when (swipeDirection) {
                        SwipeDirection.BOTH -> Arrangement.SpaceBetween
                        SwipeDirection.LEFT -> Arrangement.End
                        else -> Arrangement.Start
                    },
                        modifier = Modifier.fillMaxWidth()
                ) {
                    IconButton(
                        onClick = {
                            onEditClick("$number")
                        },
                        modifier = Modifier
                            .size(50.dp)
                    ) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Edit",
                            tint = Color.White
                        )
                    }

                    Spacer(modifier = Modifier.width(10.dp))

                    IconButton(
                        onClick = {
                            onDeleteClicked("$number")
                        },
                        modifier = Modifier
                            .size(50.dp)
                    ) {
                        Icon(
                            Icons.Filled.Delete,
                            contentDescription = "Delete",
                            tint = Color.White
                        )
                    }
                }

                Box(
                    modifier = Modifier
                        .offset {
                            IntOffset(
                                swipeAbleState.offset.value.roundToInt(), 0
                            )
                        }
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(MaterialTheme.colors.background)
                        .border(1.dp, MaterialTheme.colors.primary)
                        .align(Alignment.CenterStart)
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                            .background(MaterialTheme.colors.background)
                            .border(1.dp, MaterialTheme.colors.primary),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally

                    ) {
                        Text(text = "Item Number $number", color = MaterialTheme.colors.primary)
                    }
                }
            }
        }
    }
}



<|start_filename|>app/src/main/java/com/jetpack/compose/learning/checkbox/Profession.kt<|end_filename|>
package com.jetpack.compose.learning.checkbox

import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf

data class Profession(var text: String, var value: MutableState<Boolean> = mutableStateOf(false))

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/InfiniteTransitionActivity.kt<|end_filename|>
package com.jetpack.compose.learning.animation

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class InfiniteTransitionActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                Column(Modifier.background(MaterialTheme.colors.background)) {
                    TopAppBar(title = { Text(text = "Infinite Animation", color = Color.White) },
                        navigationIcon = {
                            IconButton(onClick = { onBackPressed() }) {
                                Icon(Icons.Filled.ArrowBack, contentDescription = null)
                            }
                        })
                    Spacer(Modifier.height(16.dp))

                    InfiniteAnimation()
                }
            }
        }
    }

    @Composable
    fun InfiniteAnimation() {
        val infiniteTransition = rememberInfiniteTransition()
        val color by infiniteTransition.animateColor(
            initialValue = Color.Red, targetValue = Color.Blue, animationSpec = infiniteRepeatable(
                animation = tween(1000, easing = LinearEasing), repeatMode = RepeatMode.Reverse
            )
        )

        Box(
            Modifier
                .fillMaxSize()
                .background(color)
        )
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/textfield/TextFieldActivity.kt<|end_filename|>
package com.jetpack.compose.learning.textfield

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.material.TextFieldDefaults
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.OffsetMapping
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TransformedText
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

@ExperimentalComposeUiApi
class TextFieldActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                Scaffold(topBar = {
                    TopAppBar(title = { Text("Text fields") }, navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    })
                }) {
                    TextFieldExamples()
                }
            }
        }
    }

    @Preview
    @Composable
    private fun TextFieldExamples() {

        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .wrapContentSize(Alignment.TopCenter)
        ) {
            var simpleText by remember { mutableStateOf("") }
            var basicText by remember { mutableStateOf("This is a Basic Textfield") }
            var emailText by remember { mutableStateOf("") }
            var phoneNumberText by remember { mutableStateOf("") }
            var passwordText by remember { mutableStateOf("") }
            var differentColorText by remember { mutableStateOf("") }
            var passwordVisibility: Boolean by remember { mutableStateOf(false) }
            var showError: Boolean by remember { mutableStateOf(false) }
            val focusManager = LocalFocusManager.current
            val (simple, differentColor, email, phoneNumber, password) = remember { FocusRequester.createRefs() }

            Spacer(modifier = Modifier.height(50.dp))

            // Basic Textfield which does not contain placeholder or any decorations
            BasicTextField(
                value = basicText,
                onValueChange = {
                    basicText = it
                },
                modifier = Modifier
                    .fillMaxWidth(0.75f)
                    .height(50.dp)
                    .align(Alignment.CenterHorizontally)
                    .padding(10.dp),
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Text, imeAction = ImeAction.Next
                ),
                keyboardActions = KeyboardActions(onNext = { simple.requestFocus() })
            )

            Spacer(modifier = Modifier.height(20.dp))

            // Simple textfield
            // With label and placeholder
            TextField(
                value = simpleText,
                onValueChange = { simpleText = it },
                label = { Text("Simple TextField") }, // It will be shown on the top when focussed
                placeholder = { Text("Placeholder text") }, // It will be shown as hint when nothing is typed
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Text, imeAction = ImeAction.Next
                ),
                isError = showError,
                modifier = Modifier.focusRequester(simple),
                keyboardActions = KeyboardActions(onNext = { differentColor.requestFocus() })
            )

            Spacer(modifier = Modifier.height(20.dp))

            // Textfield with different coloured text input
            TextField(
                value = differentColorText,
                onValueChange = { differentColorText = it },
                label = { Text("TextField with Annotated text") },
                placeholder = { Text("PlaceHolder text") },
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Text, imeAction = ImeAction.Next
                ),
                visualTransformation = if (differentColorText == "") VisualTransformation.None else ColorsTransformation(),
                isError = showError,
                modifier = Modifier.focusRequester(differentColor),
                keyboardActions = KeyboardActions(onNext = { email.requestFocus() })
            )

            Spacer(modifier = Modifier.height(20.dp))

            // Simple Outlined textfield
            // without placeholder
            OutlinedTextField(
                value = emailText,
                onValueChange = { emailText = it },
                label = { Text("Enter email") },
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Email, imeAction = ImeAction.Next
                ),
                leadingIcon = { Icon(imageVector = Icons.Filled.Email, contentDescription = "") },
                isError = showError,
                modifier = Modifier.focusRequester(email),
                keyboardActions = KeyboardActions(onNext = { phoneNumber.requestFocus() })
            )

            Spacer(modifier = Modifier.height(20.dp))

            // Phone number textfield with max length as 10
            OutlinedTextField(
                value = phoneNumberText,
                onValueChange = {
                    if (it.length <= 10) phoneNumberText = it
                },
                label = { Text("Enter phonenumber") },
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Phone, imeAction = ImeAction.Next
                ),
                isError = showError,
                modifier = Modifier.focusRequester(phoneNumber),
                keyboardActions = KeyboardActions(onNext = { password.requestFocus() })
            )

            Spacer(modifier = Modifier.height(20.dp))

            // Outlined Password textfield
            // Without label
            OutlinedTextField(
                value = passwordText,
                onValueChange = { passwordText = it },
                placeholder = { Text("Outlined password TextField") },
                singleLine = true,
                isError = showError,
                colors = TextFieldDefaults.outlinedTextFieldColors(disabledBorderColor = if (showError) Color.Red else Color.Gray),
                trailingIcon = {
                    val image = if (passwordVisibility) Icons.Filled.Visibility
                    else Icons.Filled.VisibilityOff
                    IconButton({ passwordVisibility = !passwordVisibility }) {
                        Icon(imageVector = image, "")
                    }
                },
                modifier = Modifier.focusRequester(password),
                visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
                keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() })
            )

            Spacer(modifier = Modifier.height(20.dp))

            Row {
                Button(
                    onClick = {
                        showError = true
                    },
                    Modifier
                        .wrapContentSize(Alignment.Center)
                        .padding(5.dp)
                ) {
                    Text(text = "Show Error")
                }
                Button(
                    onClick = {
                        showError = false
                    },
                    Modifier
                        .wrapContentSize(Alignment.Center)
                        .padding(5.dp)
                ) {
                    Text(text = "Remove Error")
                }
            }
        }

    }

}

class ColorsTransformation : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        return TransformedText(
            buildAnnotatedStringWithColors(text.toString()), OffsetMapping.Identity
        )
    }

    private fun buildAnnotatedStringWithColors(text: String): AnnotatedString {
        val words: List<String> = text.split("\\s+".toRegex())// splits by whitespace
        val colors = listOf(Color.Magenta, Color.Red, Color.Blue, Color.Black)
        var count = 0
        val builder = AnnotatedString.Builder()
        for (word in words) {
            builder.withStyle(style = SpanStyle(color = colors[count % 4])) {
                append("$word ")
            }
            count++
        }
        return builder.toAnnotatedString()
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/model/Component.kt<|end_filename|>
package com.jetpack.compose.learning.model

data class Component(
    var componentName: String,
    var className: Class<*>
)

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/theme/AppThemeState.kt<|end_filename|>
package com.jetpack.compose.learning.theme

data class AppThemeState(
    var darkTheme: Boolean = false,
    var pallet: ColorPalette = ColorPalette.PINK
)

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/tabarlayout/TabBarLayoutActivity.kt<|end_filename|>
package com.jetpack.compose.learning.tabarlayout

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.debugInspectorInfo
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class TabBarLayoutActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainContent()
        }
    }

    @Composable
    private fun MainContent() {
        val systemUiController = remember { SystemUiController(window) }
        val appTheme = remember { mutableStateOf(AppThemeState()) }
        BaseView(appTheme.value, systemUiController) {
            Scaffold(
                topBar = {
                    TopAppBar(title = { Text("Tab Bar") }, navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    })
                }
            ) {
                TabBarSample()
            }
        }
    }

    @Preview
    @Composable
    private fun TabBarSample() {
        Column {
            AddSpaceBetweenTab()
            /** simple text tabBar */
            SimpleTabBar()
            AddSpaceBetweenTab()

            /** simple Icon tabBar with indicator */
            TabBarWithIndicator()
            AddSpaceBetweenTab()

            /** tabBar with text,icon,indicator and divider */
            TabBarWithTextIconIndicationDivider()
            AddSpaceBetweenTab()

            /** scrollable icon tabBar */
            ScrollableTabBar()
            AddSpaceBetweenTab()

            /** scrollable tabBar with text,icon and divider */
            ScrollableTabBarWithTextIconIndicationDivider()
        }
    }

    @Composable
    private fun AddSpaceBetweenTab() {
        Spacer(Modifier.requiredHeight(50.dp))
    }

    @Composable
    private fun SimpleTabBar() {
        Row {
            var tabIndex by remember { mutableStateOf(0) }
            val tabData = listOf(
                "C#",
                "Python",
                "Swift",
                "Kotlin",
            )
            TabRow(selectedTabIndex = tabIndex) {
                tabData.forEachIndexed { index, text ->
                    Tab(selected = tabIndex == index, onClick = {
                        tabIndex = index
                    }, text = {
                        Text(text = text)
                    })
                }
            }
        }
    }

    @Composable
    private fun TabBarWithIndicator() {
        Row {
            var tabIndex by remember { mutableStateOf(0) }
            //simple icon tabBar
            val tabIcon = listOf(
                Icons.Filled.Home,
                Icons.Filled.Favorite,
                Icons.Filled.Person,
                Icons.Filled.Settings,
            )
            TabRow(selectedTabIndex = tabIndex,
                indicator = { tabPositions ->
                    TabRowDefaults.Indicator(
                        modifier = Modifier.indicatorSetUp(tabPositions[tabIndex]),
                        height = 5.dp,
                        color = Color.DarkGray
                    )
                }) {
                tabIcon.forEachIndexed { index, icon ->
                    Tab(selected = tabIndex == index, onClick = {
                        tabIndex = index
                    }, icon = {
                        Icon(imageVector = icon, contentDescription = null)
                    })
                }
            }
        }
    }

    @Composable
    private fun TabBarWithTextIconIndicationDivider() {
        Row {
            var tabIndex by remember { mutableStateOf(0) }
            val tabData = listOf(
                "HOME" to Icons.Filled.Home,
                "GAME" to Icons.Filled.Games,
                "USER" to Icons.Filled.Person,
                "SETTING" to Icons.Filled.Settings,
            )
            TabRow(selectedTabIndex = tabIndex,
                divider = {
                    TabRowDefaults.Divider(
                        thickness = 5.dp,
                        color = MaterialTheme.colors.primaryVariant
                    )
                },
                indicator = { tabPositions ->
                    TabRowDefaults.Indicator(
                        modifier = Modifier.indicatorSetUp(tabPositions[tabIndex]),
                        height = 5.dp,
                        color = Color.White
                    )
                }) {
                tabData.forEachIndexed { index, pair ->
                    Tab(selected = tabIndex == index, onClick = {
                        tabIndex = index
                    }, text = {
                        Text(text = pair.first)
                    }, icon = {
                        Icon(imageVector = pair.second, contentDescription = null)
                    })
                }
            }
        }
    }

    @Composable
    private fun ScrollableTabBar() {
        Row {
            var tabIndex by remember { mutableStateOf(0) }
            //simple icon tabBar
            val tabIcon = listOf(
                Icons.Filled.Home,
                Icons.Filled.Favorite,
                Icons.Filled.GetApp,
                Icons.Filled.AddAPhoto,
                Icons.Filled.Headset,
                Icons.Filled.Person,
                Icons.Filled.Settings,
            )
            ScrollableTabRow(selectedTabIndex = tabIndex) {
                tabIcon.forEachIndexed { index, icon ->
                    Tab(selected = tabIndex == index, onClick = {
                        tabIndex = index
                    }, icon = {
                        Icon(imageVector = icon, contentDescription = null)
                    })
                }
            }
        }
    }

    @Composable
    private fun ScrollableTabBarWithTextIconIndicationDivider() {
        Row {
            var tabIndex by remember { mutableStateOf(0) }
            val tabData = listOf(
                "HOME" to Icons.Filled.Home,
                "FAVORITE" to Icons.Filled.Favorite,
                "DOWNLOAD" to Icons.Filled.GetApp,
                "PICTURES" to Icons.Filled.AddAPhoto,
                "MUSIC" to Icons.Filled.Headset,
                "USER" to Icons.Filled.Person,
                "SETTING" to Icons.Filled.Settings,
            )
            ScrollableTabRow(selectedTabIndex = tabIndex,
                divider = {
                    TabRowDefaults.Divider(
                        thickness = 5.dp,
                        color = MaterialTheme.colors.primaryVariant
                    )
                }) {
                tabData.forEachIndexed { index, pair ->
                    Tab(selected = tabIndex == index, onClick = {
                        tabIndex = index
                    }, text = {
                        Text(text = pair.first)
                    }, icon = {
                        Icon(imageVector = pair.second, contentDescription = null)
                    })
                }
            }
        }
    }

    private fun Modifier.indicatorSetUp(currentTabPosition: TabPosition): Modifier = composed(
        inspectorInfo = debugInspectorInfo {
            name = "tabIndicator"
            value = currentTabPosition
        }
    ) {
        val indicatorWidth = 32.dp
        val currentTabWidth = currentTabPosition.width
        val indicatorOffset by animateDpAsState(
            targetValue = currentTabPosition.left + currentTabWidth / 2 - indicatorWidth / 2,
            animationSpec = tween(durationMillis = 1000, easing = FastOutSlowInEasing)
        )
        fillMaxWidth()
            .wrapContentSize(Alignment.BottomStart)
            .offset(x = indicatorOffset)
            .width(indicatorWidth)
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/MainActivity.kt<|end_filename|>
package com.jetpack.compose.learning

import android.content.Intent
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.OutlinedButton
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.animation.AnimationActivity
import com.jetpack.compose.learning.appbar.TopAppBarActivity
import com.jetpack.compose.learning.bottomnav.BottomNavigationActivity
import com.jetpack.compose.learning.button.ButtonActivity
import com.jetpack.compose.learning.checkbox.CheckBoxActivity
import com.jetpack.compose.learning.constraintlayout.ConstraintLayoutActivity
import com.jetpack.compose.learning.datepicker.DatePickerActivity
import com.jetpack.compose.learning.demosamples.SampleUIActivity
import com.jetpack.compose.learning.dialog.DialogActivity
import com.jetpack.compose.learning.dropdownmenu.DropDownMenuActivity
import com.jetpack.compose.learning.floatingactionbutton.FloatingActionButtonActivity
import com.jetpack.compose.learning.imagepicker.ImagePickerActivity
import com.jetpack.compose.learning.list.LazyListActivity
import com.jetpack.compose.learning.model.Component
import com.jetpack.compose.learning.navigationdrawer.NavigationDrawerTypesActivity
import com.jetpack.compose.learning.parallaxeffect.ParallaxEffectActivity
import com.jetpack.compose.learning.pulltorefresh.PullToRefreshActivity
import com.jetpack.compose.learning.radiobutton.RadioButtonActivity
import com.jetpack.compose.learning.slider.SliderActivity
import com.jetpack.compose.learning.snackbar.SnackBarActivity
import com.jetpack.compose.learning.swipetodelete.SwipeToDeleteListActivity
import com.jetpack.compose.learning.switch.SwitchActivity
import com.jetpack.compose.learning.tabarlayout.TabBarLayoutActivity
import com.jetpack.compose.learning.textfield.TextFieldActivity
import com.jetpack.compose.learning.textstyle.SimpleTextActivity
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import com.jetpack.compose.learning.theme.ThemeActivity
import com.jetpack.compose.learning.zoomview.ZoomViewActivity
import com.jetpack.compose.learning.timepicker.TimePickerActivity

@ExperimentalComposeUiApi
@ExperimentalFoundationApi
@ExperimentalMaterialApi
class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainScreen()
            }
        }
    }

    @Preview
    @Composable
    fun MainScreen() {
        Column(Modifier.background(MaterialTheme.colors.background)) {
            TopAppBar(
                title = { Text(text = "ComposeCookBook", color = Color.White) },
            )
            LazyColumn {
                items(getComponents()) {
                    ButtonComponent(it.componentName, it.className)
                }
            }
        }
    }

    @Composable
    fun ButtonComponent(buttonText: String, className: Class<*>) {
        var context = LocalContext.current
        OutlinedButton(
            onClick = {
                context.startActivity(Intent(applicationContext, className))
            },
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            shape = RoundedCornerShape(8.dp),
            colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary.copy(0.04f)),
            border = BorderStroke(2.dp, MaterialTheme.colors.primary.copy(0.5f)),
        ) {
            Text(
                modifier = Modifier
                    .padding(8.dp),
                text = buttonText,
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
                color = MaterialTheme.colors.primary
            )
        }
    }

    private fun getComponents(): List<Component> = listOf<Component>(
        Component("Animation", AnimationActivity::class.java),
        Component("App Bar", TopAppBarActivity::class.java),
        Component("Bottom Navigation", BottomNavigationActivity::class.java),
        Component("Button", ButtonActivity::class.java),
        Component("Checkbox", CheckBoxActivity::class.java),
        Component("Constraint Layout", ConstraintLayoutActivity::class.java),
        Component("DatePicker", DatePickerActivity::class.java),
        Component("Dialog", DialogActivity::class.java),
        Component("Dropdown menu", DropDownMenuActivity::class.java),
        Component("Floating Action Buttons", FloatingActionButtonActivity::class.java),
        Component("ImagePicker", ImagePickerActivity::class.java),
        Component("List", LazyListActivity::class.java),
        Component("Navigation Drawer", NavigationDrawerTypesActivity::class.java),
        Component("Parallax effect", ParallaxEffectActivity::class.java),
        Component("Pull To Refresh", PullToRefreshActivity::class.java),
        Component("Radio Button", RadioButtonActivity::class.java),
        Component("Sample UI", SampleUIActivity::class.java),
        Component("Slider", SliderActivity::class.java),
        Component("Snackbar", SnackBarActivity::class.java),
        Component("Swipe To Delete", SwipeToDeleteListActivity::class.java),
        Component("Switch", SwitchActivity::class.java),
        Component("Tab Bar", TabBarLayoutActivity::class.java),
        Component("Text", SimpleTextActivity::class.java),
        Component("TextField", TextFieldActivity::class.java),
        Component("Theme", ThemeActivity::class.java),
        Component("TimePicker", TimePickerActivity::class.java),
        Component("ZoomView", ZoomViewActivity::class.java)
    )
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/advancelist/retrofit/RetrofitClient.kt<|end_filename|>
package com.jetpack.compose.learning.list.advancelist.retrofit

import com.jetpack.compose.learning.BuildConfig
import okhttp3.OkHttpClient
import okhttp3.logging.HttpLoggingInterceptor
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object RetrofitClient {

    private fun getClient(): Retrofit {
        return Retrofit.Builder()
            .baseUrl(BuildConfig.BASE_URL_MOVIEDB)
            .client(getOkHttpClient())
            .addConverterFactory(GsonConverterFactory.create())
            .build()
    }

    val apiService: RetrofitService = getClient().create(RetrofitService::class.java)

    private fun getLoggingInterceptor() =
        HttpLoggingInterceptor().setLevel(HttpLoggingInterceptor.Level.BASIC)

    private fun getOkHttpClient() =
        OkHttpClient.Builder().addInterceptor(getLoggingInterceptor()).build()
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/demosamples/instagramdemo/components/InstaGramPostItem.kt<|end_filename|>
package com.jetpack.compose.learning.demosamples.instagramdemo.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.demosamples.instagramdemo.data.Items
import com.jetpack.compose.learning.R

@Composable
fun InstaGramPostItem(post: Items) {
    Card(
        modifier = Modifier
            .padding(horizontal = 8.dp, vertical = 8.dp)
            .fillMaxWidth(),
        elevation = 2.dp,
        backgroundColor = Color.White,
        shape = RoundedCornerShape(corner = CornerSize(16.dp))
    ) {
        Column{
            ProfileInfo(post)
            Image(
                painter = painterResource(id = post.image),
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(450.dp)
                    .padding(top = 8.dp, bottom = 8.dp),
                contentScale = ContentScale.Crop

            )
            IconSection()
            LikedBySection(post)
            Text(
                text = "View all 6 comments",
                style = MaterialTheme.typography.caption,
                modifier = Modifier.padding(start = 8.dp, top = 4.dp),
                color = Color.Gray
            )
            AddCommentSection(post)
            Text(
                text = "10 min ago",
                style = MaterialTheme.typography.caption,
                modifier = Modifier.padding(start = 8.dp, top = 2.dp, bottom = 8.dp),
                color = Color.Gray
            )
        }
    }
}

@Composable
fun ProfileInfo(post: Items) {

    val blue = Color(0xFF515BD4)
    val purple = Color(0xFF8134AF)
    val orange = Color(0xFFF58529)
    val yellow = Color(0xFFFEDA77)
    val pink = Color(0xFFDD2A7B)

    Row(
        Modifier
            .padding(start = 8.dp, top = 8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = post.profilePic),
            contentDescription = null,
            modifier = Modifier
                .padding(end = 8.dp)
                .size(40.dp)
                .clip(CircleShape)
                .border(
                    3.dp,
                    brush = Brush.linearGradient(listOf(orange, yellow, pink, purple, blue)),
                    CircleShape
                ),
            contentScale = ContentScale.Crop
        )
        Text(text = post.title, Modifier.weight(1f))
        Icon(imageVector = Icons.Default.MoreVert, contentDescription = null, modifier = Modifier.padding(8.dp))
    }
}

@Composable
fun IconSection() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 8.dp)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Icon(
                imageVector = Icons.Default.FavoriteBorder,
                contentDescription = null,
                modifier = Modifier
                    .padding(end = 8.dp)
            )
            Icon(
                painter = painterResource(id = R.drawable.ic_instagram_comment),
                contentDescription = null,
                modifier = Modifier
                    .padding(end = 8.dp)
                    .size(20.dp)
            )
            Icon(
                painter = painterResource(id = R.drawable.ic_instagram_share),
                contentDescription = null,
                modifier = Modifier
                    .padding(end = 8.dp)
            )
        }
        Icon(
            painter = painterResource(id = R.drawable.ic_instagram_save),
            contentDescription = null,
            modifier = Modifier
                .padding(end = 8.dp)
                .align(Alignment.CenterEnd)
        )
    }

}

@Composable
fun LikedBySection(post: Items) {
    Row(
        modifier = Modifier
            .padding(start = 8.dp, top = 8.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Image(
            painter = painterResource(id = post.profilePic),
            contentDescription = null,
            modifier = Modifier
                .padding(end = 8.dp)
                .size(20.dp)
                .clip(CircleShape),
            contentScale = ContentScale.Crop
        )
        Text(text = "Liked by ${post.title} and 10 others", Modifier.weight(1f))
    }
}

@Composable
fun AddCommentSection(post: Items) {
    Row(
        modifier = Modifier
            .padding(start = 8.dp, top = 8.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Image(
            painter = painterResource(id = post.profilePic),
            contentDescription = null,
            modifier = Modifier
                .padding(end = 8.dp)
                .size(25.dp)
                .clip(CircleShape),
            contentScale = ContentScale.Crop

        )
        Text(text = "Add a comment...", Modifier.weight(1f), color = Color.LightGray)
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/advancelist/MovieList.kt<|end_filename|>
package com.jetpack.compose.learning.list.advancelist

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.paging.LoadState
import androidx.paging.PagingData
import androidx.paging.compose.LazyPagingItems
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.items
import com.jetpack.compose.learning.list.advancelist.model.Movie
import com.jetpack.compose.learning.list.advancelist.uiclass.ErrorMessage
import com.jetpack.compose.learning.list.advancelist.uiclass.LoadingNextPageItem
import com.jetpack.compose.learning.list.advancelist.uiclass.MovieItem
import com.jetpack.compose.learning.list.advancelist.uiclass.PageLoader
import com.jetpack.compose.learning.list.advancelist.viewmodel.MovieViewModel
import kotlinx.coroutines.flow.Flow

@Composable
fun MovieList(modifier: Modifier = Modifier, viewModel: MovieViewModel, context: Context) {
    MovieInfoList(modifier, userList = viewModel.user, context)
}

@Composable
fun MovieInfoList(modifier: Modifier, userList: Flow<PagingData<Movie>>, context: Context) {
    val userListItems: LazyPagingItems<Movie> = userList.collectAsLazyPagingItems()

    LazyColumn {

        items(userListItems) { item ->
            item?.let {
                MovieItem(data = it, onClick = {
                    Toast.makeText(
                        context,
                        item.original_title,
                        Toast.LENGTH_SHORT
                    ).show()
                })
            }
        }

        userListItems.apply {
            when {
                loadState.refresh is LoadState.Loading -> {
                    item { PageLoader(modifier = Modifier.fillParentMaxSize()) }
                }
                loadState.append is LoadState.Loading -> {
                    item { LoadingNextPageItem(modifier) }
                }
                loadState.append is LoadState.Error -> {
                    val error = userListItems.loadState.append as LoadState.Error
                    item {
                        ErrorMessage(modifier = modifier,
                            message = error.error.localizedMessage!!,
                            onClickRetry = { retry() })
                    }
                }
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/demosamples/instagramdemo/data/Items.kt<|end_filename|>
package com.jetpack.compose.learning.demosamples.instagramdemo.data

data class Items(
    val id: Int,
    val profilePic: Int,
    val title: String,
    val subTitle: String,
    val image: Int = 0
)


<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/advancelist/retrofit/MovieSource.kt<|end_filename|>
package com.jetpack.compose.learning.list.advancelist.retrofit

import androidx.paging.PagingSource
import androidx.paging.PagingState
import com.jetpack.compose.learning.BuildConfig
import com.jetpack.compose.learning.list.advancelist.model.Movie
import java.io.IOException
import retrofit2.HttpException

class MovieSource : PagingSource<Int, Movie>() {

    override fun getRefreshKey(state: PagingState<Int, Movie>): Int? {
        return state.anchorPosition
    }

    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Movie> {
        return try {
            val nextPage = params.key ?: 1
            val userList = RetrofitClient.apiService.getMovieList(
                api_key = BuildConfig.MOVIEDB_API_KEY,
                page = nextPage
            )
            LoadResult.Page(
                data = userList.results,
                prevKey = if (nextPage == 1) null else nextPage - 1,
                nextKey = if (userList.results.isEmpty()) null else userList.page + 1
            )
        } catch (exception: IOException) {
            return LoadResult.Error(exception)
        } catch (exception: HttpException) {
            return LoadResult.Error(exception)
        }
    }

}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/imagepicker/ImagePickerActivity.kt<|end_filename|>
package com.jetpack.compose.learning.imagepicker

import android.Manifest
import android.app.Activity
import android.content.Context
import android.content.Intent
import android.content.pm.PackageManager
import android.graphics.Bitmap
import android.graphics.ImageDecoder
import android.net.Uri
import android.os.Build
import android.os.Bundle
import android.provider.MediaStore
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.compose.setContent
import androidx.activity.result.contract.ActivityResultContracts
import androidx.activity.result.launch
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.core.app.ActivityCompat
import androidx.core.content.ContextCompat
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController
import kotlinx.coroutines.launch
import java.io.ByteArrayOutputStream
import java.util.*

@ExperimentalMaterialApi

class ImagePickerActivity : ComponentActivity() {

    private val PIC_CROP = 2
    var isCameraSelected = false
    var imageUri: Uri? = null
    var bitmap: Bitmap? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                Scaffold(topBar = {
                    TopAppBar(
                        title = { Text("ImagePicker") },
                        navigationIcon = {
                            IconButton(onClick = { onBackPressed() }) {
                                Icon(Icons.Filled.ArrowBack, contentDescription = null)
                            }
                        }
                    )
                }) {
                    MainContent(bitmap)
                }
            }
        }
    }

    @Composable
    private fun MainContent(bitmap: Bitmap?) {

        val context = LocalContext.current
        val bottomSheetModalState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
        val coroutineScope = rememberCoroutineScope()

        val galleryLauncher = rememberLauncherForActivityResult(
            contract = ActivityResultContracts.GetContent()
        ) { uri: Uri? ->
            //startCrop(uri)
            this.imageUri = uri
            this.bitmap = null
        }

        val cameraLauncher = rememberLauncherForActivityResult(
            contract = ActivityResultContracts.TakePicturePreview()
        ) { btm: Bitmap? ->
            //startCrop(it?.let { it1 -> getImageUri(context = context, inImage = it1) })
            this.bitmap = btm
            this.imageUri = null
        }

        val permissionLauncher = rememberLauncherForActivityResult(
            ActivityResultContracts.RequestPermission()
        ) { isGranted: Boolean ->
            if (isGranted) {
                // Permission Accepted: Do something
                if (isCameraSelected) {
                    cameraLauncher.launch()
                } else {
                    galleryLauncher.launch("image/*")
                }
                coroutineScope.launch {
                    bottomSheetModalState.hide()
                }
            } else {
                // Permission Denied: Do something
                Toast.makeText(context, "User denied", Toast.LENGTH_SHORT).show()
            }
        }

        ModalBottomSheetLayout(
            sheetState = bottomSheetModalState,
            sheetContent = {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .background(MaterialTheme.colors.primary.copy(0.08f))
                ) {
                    Column(
                        Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.SpaceEvenly,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Button(
                            content = { Text(text = "Select camera", color = Color.White) },
                            onClick = {
                                when (PackageManager.PERMISSION_GRANTED) {
                                    ContextCompat.checkSelfPermission(
                                        context,
                                        Manifest.permission.CAMERA
                                    ) -> {
                                        cameraLauncher.launch()
                                        coroutineScope.launch {
                                            bottomSheetModalState.hide()
                                        }
                                    }
                                    else -> {
                                        // Asking for permission
                                        isCameraSelected = true
                                        permissionLauncher.launch(Manifest.permission.CAMERA)

                                    }
                                }
                            }
                        )

                        Button(
                            content = { Text(text = "Select Gallery", color = Color.White) },
                            onClick = {
                                when (PackageManager.PERMISSION_GRANTED) {
                                    ContextCompat.checkSelfPermission(
                                        context,
                                        Manifest.permission.READ_EXTERNAL_STORAGE
                                    ) -> {
                                        galleryLauncher.launch("image/*")
                                        coroutineScope.launch {
                                            bottomSheetModalState.hide()
                                        }
                                    }
                                    else -> {
                                        // Asking for permission
                                        isCameraSelected = false
                                        permissionLauncher.launch(Manifest.permission.READ_EXTERNAL_STORAGE)
                                    }
                                }
                            }
                        )

                        Button(
                            content = { Text(text = "None", color = Color.White) },
                            onClick = {
                                coroutineScope.launch {
                                    bottomSheetModalState.hide()
                                }
                            }
                        )
                    }
                }
            },
            sheetShape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp),
            modifier = Modifier.background(MaterialTheme.colors.background)

        ) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier.fillMaxSize()
            ) {
                Button(
                    onClick = {
                        coroutineScope.launch {
                            if (!bottomSheetModalState.isVisible) {
                                bottomSheetModalState.show()
                            } else {
                                bottomSheetModalState.hide()
                            }
                        }
                    },
                    modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth(),
                    shape = RoundedCornerShape(8.dp)
                ) {
                    Text(
                        modifier = Modifier.padding(8.dp),
                        text = "Upload Images",
                        textAlign = TextAlign.Center,
                        color = Color.White
                    )
                }
            }
        }

        imageUri?.let {
            if (!isCameraSelected) {
                this.bitmap = if (Build.VERSION.SDK_INT < 28) {
                    MediaStore.Images.Media.getBitmap(context.contentResolver, it)
                } else {
                    val source = ImageDecoder.createSource(context.contentResolver, it)
                    ImageDecoder.decodeBitmap(source)
                }
            }

            // Remove after crop functionality is completed
            this.bitmap?.let { btm ->
                Image(
                    bitmap = btm.asImageBitmap(),
                    contentDescription = null,
                    alignment = Alignment.TopCenter,
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(0.45f)
                        .padding(top = 10.dp)
                )
            }
        }

        bitmap?.let { btm ->
            Image(
                bitmap = btm.asImageBitmap(),
                contentDescription = null,
                alignment = Alignment.TopCenter,
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(0.45f)
                    .padding(top = 10.dp)
            )
        }
    }

    private fun startCrop(imageUri: Uri?) {
        //crop image
        val cropIntent = Intent("com.android.camera.action.CROP")
        cropIntent.setDataAndType(imageUri, "image/*")
        cropIntent.putExtra("crop", "true")
        cropIntent.putExtra("aspectX", 1)
        cropIntent.putExtra("aspectY", 1)
        cropIntent.putExtra("outputX", 800)
        cropIntent.putExtra("outputY", 800)
        cropIntent.putExtra("return-data", true)
        ActivityCompat.startActivityForResult(this, cropIntent, PIC_CROP, null)
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (resultCode == Activity.RESULT_OK) {
            val extras: Bundle? = data?.extras
            val thePic = extras?.getParcelable<Bitmap>("data")
            setContent {
                val systemUiController = remember { SystemUiController(window) }
                val appTheme = remember { mutableStateOf(AppThemeState()) }
                BaseView(appTheme.value, systemUiController) {
                    Scaffold(topBar = {
                        TopAppBar(
                            title = { Text("ImagePicker") },
                            navigationIcon = {
                                IconButton(onClick = { onBackPressed() }) {
                                    Icon(Icons.Filled.ArrowBack, contentDescription = null)
                                }
                            }
                        )
                    }) {
                        // Change bitmap value after crop functionality is completed
                        MainContent(this.bitmap)
                    }
                }
            }
        }
    }

    private fun getImageUri(context: Context, inImage: Bitmap): Uri? {
        val bytes = ByteArrayOutputStream()
        inImage.compress(Bitmap.CompressFormat.JPEG, 100, bytes)
        val path = MediaStore.Images.Media.insertImage(
            context.contentResolver,
            inImage,
            "Title",
            null
        )
        return Uri.parse(path)
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/AnimatedHeartButton.kt<|end_filename|>
package com.jetpack.compose.learning.animation

import androidx.compose.ui.unit.dp

object HeartButtonAnimation {

    enum class HeartButtonState {
        IDLE, ACTIVE
    }

    private val idleIconSize = 50.dp
    private val activeIconSize = 80.dp

    /*val heartTransitionDefinition = transitionDefinition<HeartButtonState>{

    }*/
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/ShimmerAnimationActivity.kt<|end_filename|>
package com.jetpack.compose.learning.animation

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.animation.ui.theme.ShimmerColorShades
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class ShimmerAnimationActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                InitView()
            }
        }
    }

    @Composable
    fun InitView() {
        Column(Modifier.background(MaterialTheme.colors.background)) {
            TopAppBar(title = { Text(text = "Shimmer Animation", color = Color.White) },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                })
            Spacer(Modifier.height(16.dp))

            /**
             * Lazy column as I am adding multiple items for display purpose
             * create you UI according to requirement
             */
            LazyColumn {

                /**
                 * Lay down the Shimmer Animated item 5 time
                 * [repeat] is like a loop which executes the body according to the number specified
                 */
                repeat(5) {
                    item {
                        ShimmerAnimation()
                    }
                }
            }
        }
    }

    @Composable
    fun ShimmerAnimation(
    ) {

        /**
        Create InfiniteTransition
        which holds child animation like [Transition]
        animations start running as soon as they enter
        the composition and do not stop unless they are removed
         */
        val transition = rememberInfiniteTransition()
        val translateAnim by transition.animateFloat(
            /**
            Specify animation positions,
            initial Values 0F means it starts from 0 position
             */
            initialValue = 0f, targetValue = 1000f, animationSpec = infiniteRepeatable(

                /**
                 * Tween Animates between values over specified [durationMillis]
                 */
                tween(durationMillis = 1200, easing = FastOutSlowInEasing), RepeatMode.Reverse
            )
        )

        /**
         * Create a gradient using the list of colors
         * Use Linear Gradient for animating in any direction according to requirement
         * start=specifies the position to start with in cartesian like system
         *       Offset(10f,10f) means x(10,0) , y(0,10)
         * end= Animate the end position to give the shimmer effect using the transition created above
         */
        val brush = Brush.linearGradient(
            colors = ShimmerColorShades,
            start = Offset(10f, 10f),
            end = Offset(translateAnim, translateAnim)
        )

        ShimmerItem(brush = brush)

    }

    @Composable
    fun ShimmerItem(
        brush: Brush
    ) {

        /**
         * Column composable shaped like a rectangle,
         * set the [background]'s [brush] with the brush receiving from [ShimmerAnimation]
         * which will get animated.
         * Add few more Composable to test
         */
        Column(modifier = Modifier.padding(16.dp)) {
            Spacer(
                modifier = Modifier
                    .fillMaxWidth()
                    .size(150.dp)
                    .background(
                        brush = brush
                    )
            )
            Spacer(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(30.dp)
                    .padding(vertical = 8.dp)
                    .background(brush = brush)
            )
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/floatingactionbutton/FloatingActionButtonActivity.kt<|end_filename|>
package com.jetpack.compose.learning.floatingactionbutton

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.MaterialTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class FloatingActionButtonActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainContent()
        }
    }

    @Preview
    @Composable
    private fun MainContent() {
        val systemUiController = remember { SystemUiController(window) }
        val appTheme = remember { mutableStateOf(AppThemeState()) }
        BaseView(appTheme.value, systemUiController) {
            Scaffold(topBar = {
                TopAppBar(
                    title = { Text("Floating Action Buttons") },
                    navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    }
                )
            },  //FAB Button inside Scaffold
                floatingActionButton = {
                    FloatingActionButton(onClick = { onClick("Fab Button using Scaffold") }) {
                        Icon(Icons.Filled.Add, "")
                    }
                }
            ) {
                FabButtons()
            }
        }
    }

    @Composable
    private fun FabButtons() {

        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .wrapContentSize(Alignment.Center)
        ) {
            val spaceModifier = Modifier.height(30.dp)

            //Simple FAB
            FloatingActionButton(onClick = { onClick("Simple FAB") }) {
                Icon(Icons.Filled.Add, "")
            }

            Spacer(modifier = spaceModifier)

            //FAB custom color
            FloatingActionButton(
                onClick = { onClick("Fab with custom color") },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White
            ) {
                Icon(Icons.Filled.Add, "")
            }

            Spacer(modifier = spaceModifier)

            //Square FAB
            FloatingActionButton(
                onClick = { onClick("Square FAB") },
                shape = RectangleShape
            ) {
                Icon(Icons.Filled.Add, "")
            }

            Spacer(modifier = spaceModifier)

            //Simple FAB with custom content (similar of Exntended FAB)
            FloatingActionButton(onClick = { onClick("Simple FAB with custom content") },
                contentColor = Color.White,
                backgroundColor = MaterialTheme.colors.primary,
                content = {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.padding(start = 10.dp, end = 10.dp)
                    ) {
                        Icon(Icons.Filled.Add, "")
                        Spacer(modifier = Modifier.width(5.dp))
                        Text(text = "Simple FAB with custom content")
                    }
                })

            Spacer(modifier = spaceModifier)

            //EXTENDED FAB
            ExtendedFloatingActionButton(
                text = { Text(text = "Extended FAB with icon") },
                onClick = { onClick("Extended FAB with icon") },
                icon = { Icon(Icons.Filled.Add, "") }
            )

            Spacer(modifier = spaceModifier)

            //EXTENDED FAB WITHOUT ICON
            ExtendedFloatingActionButton(
                text = {
                    Text(text = "Extended FAB without icon")
                },
                onClick = { onClick("Extended FAB without Icon") }
            )

            Spacer(modifier = spaceModifier)

            //EXTENDED FAB WITH SQUARE SHAPE
            ExtendedFloatingActionButton(
                text = {
                    Text(text = "Extended FAB with square shape")
                },
                onClick = { onClick("Extended FAB with square shape") },
                shape = RectangleShape
            )
        }
    }

    fun onClick(textMessage: String) {
        Toast.makeText(applicationContext, textMessage, Toast.LENGTH_SHORT).show()
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/theme/ThemeActivity.kt<|end_filename|>
package com.jetpack.compose.learning.theme

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class ThemeActivity : ComponentActivity() {

    lateinit var appTheme: MutableState<AppThemeState>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                ThemeSample()
            }
        }
    }

    @OptIn(ExperimentalFoundationApi::class)
    @Preview
    @Composable
    fun ThemeSample() {
        val spaceHeight = 24.dp
        Column(Modifier.background(MaterialTheme.colors.background).fillMaxHeight()) {
            TopAppBar(
                title = { Text("Theme") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
            Column(Modifier.padding(20.dp)) {
                Text(text = "Change theme of this screen : ", style = MaterialTheme.typography.h6)
                Spacer(Modifier.requiredHeight(spaceHeight))
                val colorPallet = ColorPalette.values()
                LazyVerticalGrid(cells = GridCells.Fixed(3)) {
                    items(colorPallet.size, itemContent = {
                        val isSelected = colorPallet.get(it) == appTheme.value.pallet
                        Column(horizontalAlignment = Alignment.CenterHorizontally) {
                            Box(
                                Modifier
                                    .padding(20.dp)
                                    .size(100.dp)
                                    .clip(RoundedCornerShape(10.dp))
                                    .background(
                                        colorPallet
                                            .get(it)
                                            .getMaterialColor()
                                    )
                                    .clickable {
                                        appTheme.value = AppThemeState(false, colorPallet.get(it))
                                    }
                                    .then(
                                        if (isSelected) {
                                            Modifier.border(
                                                BorderStroke(2.dp, MaterialTheme.colors.onSurface),
                                                shape = RoundedCornerShape(10.dp)
                                            )
                                        } else Modifier
                                    )
                            ) {
                                if (isSelected) {
                                    Icon(
                                        Icons.Filled.Check,
                                        contentDescription = "Theme Selected",
                                        modifier = Modifier
                                            .align(Alignment.Center)
                                            .size(40.dp),
                                        tint = Color.White
                                    )
                                }
                            }
                        }
                    })
                }
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/advancelist/uiclass/MovieItem.kt<|end_filename|>
package com.jetpack.compose.learning.list.advancelist.uiclass

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Icon
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.MaterialTheme
import androidx.compose.material.MaterialTheme.typography
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.rememberImagePainter
import com.jetpack.compose.learning.BuildConfig
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.list.advancelist.model.Movie
import com.jetpack.compose.learning.theme.amber700

@Composable
fun MovieItem(
    data: Movie, onClick: () -> Unit
) {
    Card(
        modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth()
            .clickable(onClick = onClick),
        shape = RoundedCornerShape(15.dp),
        elevation = 12.dp
    ) {
        Row(
            modifier = Modifier
                .clip(RoundedCornerShape(4.dp))
                .background(MaterialTheme.colors.surface)
        ) {
            Surface(
                modifier = Modifier.size(140.dp),
                shape = RoundedCornerShape(12.dp),
                color = MaterialTheme.colors.surface.copy(alpha = 0.2f)
            ) {
                val image = rememberImagePainter(
                    data = BuildConfig.IMAGE_URL_MOVIEDB + data.backdrop_path,
                    builder = {
                        crossfade(true)
                        placeholder(R.drawable.ic_movie_placeholder)
                    }
                )
                Image(
                    painter = image,
                    contentDescription = null,
                    modifier = Modifier
                        .fillMaxSize()
                        .clip(shape = RoundedCornerShape(12.dp)),
                    contentScale = ContentScale.Crop
                )
            }
            Column(
                modifier = Modifier
                    .padding(10.dp)
            ) {
                Text(
                    text = data.original_title,
                    style = MaterialTheme.typography.h6,
                    color = Color.Black,
                    maxLines = 2, overflow = TextOverflow.Ellipsis,
                )
                CompositionLocalProvider(
                    LocalContentAlpha provides ContentAlpha.medium
                ) {
                    var lines by remember { mutableStateOf(0) }
                    Text(
                        modifier = Modifier.padding(top = 5.dp),
                        text = data.overview,
                        style = typography.body2,
                        maxLines = 4, overflow = TextOverflow.Ellipsis,
                        onTextLayout = { res -> lines = res.lineCount })
                    for (i in lines..3) { // set minimum lines = 4
                        Text(" ", style = MaterialTheme.typography.body2)
                    }
                }
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center,
                    modifier = Modifier.padding(top = 10.dp)
                ) {
                    Icon(
                        Icons.Default.Star,
                        contentDescription = "rating icon",
                        tint = amber700
                    )
                    Text(
                        buildAnnotatedString {
                            withStyle(
                                style = SpanStyle(
                                    fontWeight = FontWeight.Bold,
                                    color = Color.Black,
                                    fontSize = 18.sp
                                )
                            ) {
                                append(data.vote_average)
                            }
                            append(" / 10")
                        },
                        modifier = Modifier.padding(start = 5.dp),
                    )
                }
            }
        }
    }
}

@Preview
@Composable
fun PageLoader(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier,
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Fetching data from server...")
        CircularProgressIndicator(Modifier.padding(top = 10.dp))
    }
}

@Composable
fun LoadingNextPageItem(modifier: Modifier) {
    CircularProgressIndicator(
        modifier = modifier
            .fillMaxWidth()
            .padding(10.dp)
            .wrapContentWidth(Alignment.CenterHorizontally)
    )
}

@Composable
fun ErrorMessage(
    message: String,
    modifier: Modifier = Modifier,
    onClickRetry: () -> Unit
) {
    Row(
        modifier = modifier.padding(10.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = message,
            color = Color.Red,
            modifier = Modifier.weight(1f),
            maxLines = 2
        )
        OutlinedButton(onClick = onClickRetry) {
            Text(text = "Retry")
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/advancelist/retrofit/RetrofitService.kt<|end_filename|>
package com.jetpack.compose.learning.list.advancelist.retrofit

import com.jetpack.compose.learning.list.advancelist.model.MovieResponse
import retrofit2.http.GET
import retrofit2.http.Query

interface RetrofitService {
    @GET("popular")
    suspend fun getMovieList(
        @Query("api_key") api_key: String,
        @Query("page") page: Int
    ): MovieResponse
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/list/advancelist/model/MovieResponse.kt<|end_filename|>
package com.jetpack.compose.learning.list.advancelist.model

data class MovieResponse(
    var page: Int,
    var results: List<Movie>
)

data class Movie(
    var id: Int,
    var poster_path: String,
    var original_language: String,
    var overview: String,
    var title: String,
    var original_title: String,
    var backdrop_path: String,
    var vote_average: String,
    var vote_count: String
)


<|start_filename|>app/src/main/java/com/jetpack/compose/learning/demosamples/SampleUIActivity.kt<|end_filename|>
package com.jetpack.compose.learning.demosamples

import android.content.Intent
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.animation.BasicAnimation
import com.jetpack.compose.learning.animation.GestureAnimationActivity
import com.jetpack.compose.learning.animation.InfiniteTransitionActivity
import com.jetpack.compose.learning.animation.ShimmerAnimationActivity
import com.jetpack.compose.learning.animation.TabBarAnimationActivity
import com.jetpack.compose.learning.animation.contentAnimation.ContentIconAnimationActivity
import com.jetpack.compose.learning.demosamples.instagramdemo.InstagramSplashActivity
import com.jetpack.compose.learning.model.Component
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class SampleUIActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                val systemUiController = remember { SystemUiController(window) }
                val appTheme = remember { mutableStateOf(AppThemeState()) }
                BaseView(appTheme.value, systemUiController) {
                    Scaffold(topBar = {
                        TopAppBar(
                            title = { Text("Sample UI") },
                            navigationIcon = {
                                IconButton(onClick = { onBackPressed() }) {
                                    Icon(Icons.Filled.ArrowBack, contentDescription = null)
                                }
                            }
                        )
                    }) {
                        Spacer(Modifier.height(16.dp))
                        LazyColumn {
                            items(getComponents()) {
                                ButtonComponent(it.componentName, it.className)
                            }
                        }
                    }
                }
            }
        }
    }

    @Composable
    fun ButtonComponent(buttonText: String, className: Class<*>) {
        val context = LocalContext.current
        Button(
            onClick = {
                startActivity(Intent(context, className))
            }, modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(), shape = RoundedCornerShape(8.dp)
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text = buttonText,
                textAlign = TextAlign.Center,
                color = Color.White
            )
        }
    }

    private fun getComponents(): List<Component> = listOf(
        Component("Instagram App", InstagramSplashActivity::class.java),
    )
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/pulltorefresh/PullToRefreshActivity.kt<|end_filename|>
package com.jetpack.compose.learning.pulltorefresh

import android.content.Intent
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class PullToRefreshActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @Preview
    @Composable
    fun MainContent() {
        val context = LocalContext.current
        Scaffold(topBar = {
            TopAppBar(
                title = { Text("Pull To Refresh") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
        }) {
            Column() {
                Button(
                        onClick = {
                            startActivity(Intent(context, SimplePullToRefresh::class.java))
                        }, modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth(), shape = RoundedCornerShape(8.dp)
                ) {
                    Text(
                            modifier = Modifier.padding(8.dp),
                            text = "Simple Pull To Refresh",
                            textAlign = TextAlign.Center,
                            color = Color.White
                    )
                }
                Button(
                        onClick = {
                            startActivity(Intent(context, CustomBackgroundPullToRefreshActivity::class.java))
                        }, modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth(), shape = RoundedCornerShape(8.dp)
                ) {
                    Text(
                            modifier = Modifier.padding(8.dp),
                            text = "Custom Background Pull To Refresh",
                            textAlign = TextAlign.Center,
                            color = Color.White
                    )
                }
                Button(
                        onClick = {
                            startActivity(Intent(context, CustomViewPullToRefreshActivity::class.java))
                        }, modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth(), shape = RoundedCornerShape(8.dp)
                ) {
                    Text(
                            modifier = Modifier.padding(8.dp),
                            text = "Custom View Pull To Refresh",
                            textAlign = TextAlign.Center,
                            color = Color.White
                    )
                }
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/button/ButtonActivity.kt<|end_filename|>
package com.jetpack.compose.learning.button

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.PersonAdd
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class ButtonActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                ButtonSample()
            }
        }
    }

    @Preview
    @Composable
    fun ButtonSample() {
        val spaceHeight = 24.dp
        val buttonPadding = 10.dp
        val textPadding = 5.dp
        Column(Modifier.background(MaterialTheme.colors.background).fillMaxHeight()) {
            TopAppBar(
                title = { Text(text = "Button") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
            Column(Modifier.padding(20.dp)) {
                Row {
                    // Simple Button
                    Button(
                        onClick = {
                            showToast("Simple Button Clicked")
                        },
                        modifier = Modifier.padding(buttonPadding)
                    ) {
                        Text(text = "Simple Button", Modifier.padding(textPadding))
                    }

                    // Button with Border
                    Button(
                        onClick = {
                            showToast("Simple Button with Border Clicked")
                        },
                        modifier = Modifier.padding(buttonPadding),
                        border = BorderStroke(width = 2.dp, Color.Black),
                    ) {
                        Text(text = "Button with Border", Modifier.padding(textPadding), fontSize = 12.sp)
                    }
                }
                Spacer(Modifier.requiredHeight(spaceHeight))
                Row {
                    // Rounded Button
                    Button(
                        onClick = {
                            showToast("Rounded Button Clicked")
                        },
                        modifier = Modifier.padding(buttonPadding),
                        shape = RoundedCornerShape(20.dp)
                    ) {
                        Text(text = "Rounded Button", Modifier.padding(textPadding))
                    }

                    // Disable Button
                    Button(
                        onClick = {
                            showToast("Simple Disable Button Clicked") // It will not show Toast as it's disabled (enabled = false)
                        }, enabled = false,
                        modifier = Modifier.padding(buttonPadding),
                        shape = MaterialTheme.shapes.large
                    ) {
                        Text(text = "Disable Button", Modifier.padding(textPadding))
                    }
                }
                Spacer(Modifier.requiredHeight(spaceHeight))
                Row {
                    // Outlined Button
                    OutlinedButton(
                        onClick = {
                            showToast("Outlined Button Clicked")
                        },
                        modifier = Modifier.padding(buttonPadding)
                    ) {
                        Text("Outlined Button", Modifier.padding(textPadding))
                    }

                    // Text Button
                    TextButton(onClick = {
                        showToast("Text Button Clicked")
                    }, modifier = Modifier.padding(buttonPadding)) {
                        Text("Text Button", Modifier.padding(textPadding))
                    }
                }
                Spacer(Modifier.requiredHeight(spaceHeight))
                Row {
                    // Icon Button
                    IconButton(
                        onClick = {
                            showToast("Icon Button Clicked")
                        },
                        modifier = Modifier.padding(buttonPadding)
                    ) {
                        Icon(
                            Icons.Filled.Favorite,
                            contentDescription = "Icon Button",
                            tint = MaterialTheme.colors.primary,
                            modifier = Modifier.size(80.dp)
                        )
                    }

                    // Icon Button
                    Button(
                        onClick = {
                            showToast("Icon Button with Text Clicked")
                        }, modifier = Modifier.padding(buttonPadding),
                        colors = ButtonDefaults.buttonColors(
                            backgroundColor = MaterialTheme.colors.primary,
                            contentColor = Color.White
                        )
                    ) {
                        Icon(
                            imageVector = Icons.Filled.PersonAdd,
                            contentDescription = "Icon with Text Button",
                            tint = Color.White,
                            modifier = Modifier.padding(all = 5.dp)
                        )
                        Text(text = "Icon Button with Text")
                    }
                }

                Spacer(Modifier.requiredHeight(spaceHeight))

                val horizontalGradientBrush = Brush.horizontalGradient(
                    colors = listOf(
                        Color(0xffD16BA5),
                        Color(0xff86A8E7),
                        Color(0xff5FFBF1)
                    )
                )
                val verticalGradientBrush = Brush.verticalGradient(
                    colors = listOf(
                        Color(0xffD16BA5),
                        Color(0xff86A8E7),
                        Color(0xff5FFBF1)
                    )
                )

                // Horizontal Gradient Button
                TextButton(onClick = {
                    showToast("Horizontal Gradient Button Clicked")
                }, Modifier.background(brush = horizontalGradientBrush)) {
                    Text(text = "Horizontal Gradient Button", color = Color.White, modifier = Modifier.padding(10.dp))
                }

                Spacer(Modifier.requiredHeight(spaceHeight))

                // Vertical Gradient Button
                TextButton(onClick = {
                    showToast("Vertical Gradient Button Clicked")
                }, Modifier.background(brush = verticalGradientBrush)) {
                    Text(text = "Vertical Gradient Button", color = Color.White, modifier = Modifier.padding(10.dp))
                }
            }
        }
    }

    private fun showToast(message: String) {
        Toast.makeText(applicationContext, message, Toast.LENGTH_SHORT).show()
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/switch/SwitchActivity.kt<|end_filename|>
package com.jetpack.compose.learning.switch

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Switch
import androidx.compose.material.SwitchDefaults
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class SwitchActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                Column(Modifier.background(Color.White)) {
                    TopAppBar(
                        title = { Text("Switch") },
                        navigationIcon = {
                            IconButton(onClick = { onBackPressed() }) {
                                Icon(Icons.Filled.ArrowBack, contentDescription = null)
                            }
                        }
                    )
                    SwitchComponents()
                }
            }
        }
    }

    @Preview
    @Composable
    private fun SwitchComponents() {

        var simpleSwitchState by remember { mutableStateOf(false) }
        var customEnableColorSwitchState by remember { mutableStateOf(true) }
        var customDisableColorSwitchState by remember { mutableStateOf(false) }
        var customEnableTrackColorSwitchState by remember { mutableStateOf(true) }
        var customDisableTrackColorSwitchState by remember { mutableStateOf(false) }

        Column(
            Modifier
                .fillMaxSize()
                .padding(top = 10.dp)
                .wrapContentSize(Alignment.TopCenter)
        ) {
            // Basic Switch
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Text(text = "Simple Switch.", modifier = Modifier.padding(end = 5.dp))
                Switch(
                    checked = simpleSwitchState,
                    onCheckedChange = { simpleSwitchState = it }
                )
            }

            // Switch with selected thumb color
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Text(text = "Custom selected thumb color.", modifier = Modifier.padding(end = 5.dp))
                Switch(
                    checked = customEnableColorSwitchState,
                    onCheckedChange = { customEnableColorSwitchState = it },
                    colors = SwitchDefaults.colors(
                        checkedThumbColor = Color.Blue
                    ),
                    modifier = Modifier.padding(5.dp)
                )
            }

            // Switch with unselected thumb color
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Text(
                    text = "Custom unselected thumb color.",
                    modifier = Modifier.padding(end = 5.dp)
                )
                Switch(
                    checked = customDisableColorSwitchState,
                    onCheckedChange = { customDisableColorSwitchState = it },
                    colors = SwitchDefaults.colors(
                        uncheckedThumbColor = Color.Black
                    ),
                    modifier = Modifier.padding(5.dp)
                )
            }

            // Switch with selected track color
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Text(text = "Custom selected track color.", modifier = Modifier.padding(end = 5.dp))
                Switch(
                    checked = customEnableTrackColorSwitchState,
                    onCheckedChange = { customEnableTrackColorSwitchState = it },
                    colors = SwitchDefaults.colors(
                        checkedTrackColor = Color.Blue
                    ),
                    modifier = Modifier.padding(5.dp)
                )
            }

            // Switch with unselected track color
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Text(
                    text = "Custom unselected track color.",
                    modifier = Modifier.padding(end = 5.dp)
                )
                Switch(
                    checked = customDisableTrackColorSwitchState,
                    onCheckedChange = { customDisableTrackColorSwitchState = it },
                    colors = SwitchDefaults.colors(
                        uncheckedTrackColor = Color.Blue
                    ),
                    modifier = Modifier.padding(5.dp)
                )
            }

            // Disabled Switch in OFF state
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Text(text = "Disabled switch in OFF state", modifier = Modifier.padding(end = 5.dp))
                Switch(
                    checked = false,
                    onCheckedChange = { },
                    enabled = false,
                    modifier = Modifier.padding(5.dp)
                )
            }

            // Disabled Switch in ON state
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Text(text = "Disabled switch in ON state.", modifier = Modifier.padding(end = 5.dp))
                Switch(
                    checked = true,
                    onCheckedChange = { },
                    enabled = false,
                    modifier = Modifier.padding(5.dp)
                )
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/constraintlayout/ConstraintLayoutActivity.kt<|end_filename|>
package com.jetpack.compose.learning.constraintlayout

import android.content.Intent
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.KeyboardArrowRight
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class ConstraintLayoutActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                ConstraintLayoutComponents()
            }
        }
    }

    @Preview
    @Composable
    fun ConstraintLayoutComponents() {
        val spaceHeight = 24.dp
        Column(Modifier.background(MaterialTheme.colors.background).fillMaxHeight()) {
            TopAppBar(
                title = { Text("Constraint Layout") },
                navigationIcon = {
                    IconButton(onClick = { onBackPressed() }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = null)
                    }
                }
            )
            Column(Modifier.padding(20.dp)) {
                ConstraintLayoutItems(
                    type = "Barrier",
                    intent = Intent(applicationContext, BarrierActivity::class.java)
                )
                Spacer(Modifier.requiredHeight(spaceHeight))
                ConstraintLayoutItems(
                    type = "Guideline",
                    intent = Intent(applicationContext, GuidelineActivity::class.java)
                )
                Spacer(Modifier.requiredHeight(spaceHeight))
                ConstraintLayoutItems(
                    type = "Chain",
                    intent = Intent(applicationContext, ChainActivity::class.java)
                )
            }
        }
    }

    @Composable
    @OptIn(ExperimentalMaterialApi::class)
    fun ConstraintLayoutItems(type: String, intent: Intent) {
        val context = LocalContext.current
        Card(
            modifier = Modifier.fillMaxWidth(),
            shape = RoundedCornerShape(10.dp),
            border = BorderStroke(1.dp, Color.LightGray),
            elevation = 5.dp,
            onClick = {
                context.startActivity(intent)
            },
            indication = rememberRipple()
        ) {
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .padding(10.dp),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(type, Modifier.weight(1f), fontSize = 16.sp)
                Icon(Icons.Default.KeyboardArrowRight, "", Modifier.size(24.dp))
            }
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/slider/SliderActivity.kt<|end_filename|>
package com.jetpack.compose.learning.slider

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.RangeSlider
import androidx.compose.material.Slider
import androidx.compose.material.SliderDefaults
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

class SliderActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                SliderExamples()
            }
        }
    }

    @Preview
    @Composable
    fun SliderExamples() {
        val headerStyle = MaterialTheme.typography.h6
        val spaceHeight = 24.dp
        Column(Modifier.background(MaterialTheme.colors.background).fillMaxHeight()) {
            TopAppBar(title = { Text("Sliders") }, navigationIcon = {
                IconButton(onClick = { onBackPressed() }) {
                    Icon(Icons.Filled.ArrowBack, contentDescription = null)
                }
            })
            Column(Modifier.padding(20.dp)) {
                Text(text = "Continuous Slider", style = headerStyle)
                SliderSample()
                Spacer(Modifier.requiredHeight(spaceHeight))
                Text(text = "Discrete Slider with custom color", style = headerStyle)
                StepsSliderSample()
                Spacer(Modifier.requiredHeight(spaceHeight))
                Text(text = "Range Continuous Slider", style = headerStyle)
                RangeSliderSample()
                Spacer(Modifier.requiredHeight(spaceHeight))
                Text(text = "Range Discrete Slider", style = headerStyle)
                StepRangeSliderSample()
            }
        }
    }

    @Composable
    fun SliderSample() {
        var sliderPosition by remember { mutableStateOf(0f) }
        Text(text = "Slider value =  $sliderPosition", fontSize = 16.sp)
        Slider(value = sliderPosition, onValueChange = { sliderPosition = it })
    }

    @Composable
    fun StepsSliderSample() {
        var sliderPosition by remember { mutableStateOf(0f) }
        Text(text = "Slider value =  $sliderPosition", fontSize = 16.sp)
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // some business logic update with the state you hold
            },
            steps = 5,
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colors.secondary,
                activeTrackColor = MaterialTheme.colors.secondary
            )
        )
    }

    @Composable
    @OptIn(ExperimentalMaterialApi::class)
    fun RangeSliderSample() {
        var sliderPosition by remember { mutableStateOf(0f..100f) }
        Text(
            text = "From range  ${sliderPosition.start}  to  ${sliderPosition.endInclusive}",
            fontSize = 16.sp
        )
        RangeSlider(
            values = sliderPosition,
            onValueChange = { it -> sliderPosition = it },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // some business logic update with the state you hold
            },
        )
    }

    @Composable
    @OptIn(ExperimentalMaterialApi::class)
    fun StepRangeSliderSample() {
        var sliderPosition by remember { mutableStateOf(0f..100f) }
        Text(
            text = "From range  ${sliderPosition.start}  to  ${sliderPosition.endInclusive}",
            fontSize = 16.sp
        )
        RangeSlider(
            steps = 5,
            values = sliderPosition,
            onValueChange = { it -> sliderPosition = it },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // some business logic update with the state you hold
            },
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colors.secondary,
                activeTrackColor = MaterialTheme.colors.secondary
            )
        )
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/contentAnimation/ContentAnimation.kt<|end_filename|>
package com.jetpack.compose.learning.animation.contentAnimation

import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringArrayResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.animation.Header
import com.jetpack.compose.learning.animation.TopicRowSpacer

@Composable
fun ContentAnimation() {

    val lazyListState = rememberLazyListState()

    val allTopics = stringArrayResource(R.array.topics).toList()

    // Holds the topic that is currently expanded to show its body.
    var expandedTopic by remember { mutableStateOf<String?>(null) }

    Scaffold {
        LazyColumn(
            modifier = Modifier.wrapContentHeight(),
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 32.dp),
            state = lazyListState
        ) {
            // Weather
            item { Spacer(modifier = Modifier.height(16.dp)) }

            // Topics
            item { Header(title = stringResource(R.string.topics)) }
            item { Spacer(modifier = Modifier.height(16.dp)) }
            items(allTopics) { topic ->
                TopicRow(topic = topic, expanded = expandedTopic == topic, onClick = {
                    expandedTopic = if (expandedTopic == topic) null else topic
                })
            }
        }
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun TopicRow(topic: String, expanded: Boolean, onClick: () -> Unit) {
    TopicRowSpacer(visible = expanded)
    Surface(
        modifier = Modifier.fillMaxWidth(), elevation = 5.dp, onClick = onClick
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
                // This `Column` animates its size when its content changes.
                .animateContentSize()
        ) {
            Row {
                Icon(
                    imageVector = Icons.Default.Info, contentDescription = null
                )
                Spacer(modifier = Modifier.width(16.dp))
                Text(
                    text = topic, style = MaterialTheme.typography.body1
                )
            }
            if (expanded) {
                Spacer(modifier = Modifier.height(8.dp))
                Text(
                    text = stringResource(R.string.lorem_ipsum), textAlign = TextAlign.Justify
                )
            }
        }
    }
    TopicRowSpacer(visible = expanded)
}

@Preview
@Composable
private fun PreviewContentAnimation() {
    ContentAnimation()
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/demosamples/instagramdemo/InstagramSplashActivity.kt<|end_filename|>
package com.jetpack.compose.learning.demosamples.instagramdemo

import android.content.Intent
import android.os.Bundle
import android.view.animation.OvershootInterpolator
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import com.jetpack.compose.learning.R
import kotlinx.coroutines.delay

class InstagramSplashActivity: ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(modifier = Modifier.fillMaxSize()) {
                SplashScreen()
            }
        }
    }

    @Composable
    fun SplashScreen() {
        val context = LocalContext.current
        val scale = remember {
            Animatable(0f)
        }
        LaunchedEffect(key1 = true) {
            scale.animateTo(
                targetValue = 0.3f,
                animationSpec = tween(
                    durationMillis = 500,
                    easing = {
                        OvershootInterpolator(2f).getInterpolation(it)
                    }
                )
            )
            delay(3000L)
            startActivity(Intent(context, InstagramLoginActivity::class.java))
            finish()
        }
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier.fillMaxSize()
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_logo_instagram),
                contentDescription = "Logo",
                modifier = Modifier.scale(scale.value)
            )
        }
    }
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/animation/Tabbar.kt<|end_filename|>
package com.jetpack.compose.learning.animation

import androidx.compose.animation.animateColor
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.Scaffold
import androidx.compose.material.TabPosition
import androidx.compose.material.TabRow
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.material.icons.filled.Home
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jetpack.compose.learning.R
import com.jetpack.compose.learning.animation.ui.theme.colorPrimaryDark
import com.jetpack.compose.learning.animation.ui.theme.pinkColor
import com.jetpack.compose.learning.animation.ui.theme.pinkColorDark
import com.jetpack.compose.learning.theme.lightBlue200

@Composable
private fun TabBar(
    backgroundColor: Color, tabPage: TabPage1, onTabSelected: (tabPage: TabPage1) -> Unit
) {
    TabRow(selectedTabIndex = tabPage.ordinal,
        backgroundColor = backgroundColor,
        indicator = { tabPositions ->
            HomeTabIndicator1(tabPositions, tabPage)
        }) {
        HomeTab(icon = Icons.Default.Home,
            title = stringResource(R.string.home),
            onClick = { onTabSelected(TabPage1.Home) })
        HomeTab(icon = Icons.Default.AccountBox,
            title = stringResource(R.string.work),
            onClick = { onTabSelected(TabPage1.Work) })
    }
}

@Composable
fun TabBarContent() {

    // The currently selected tab.
    var tabPage by remember { mutableStateOf(TabPage1.Home) }

    // The background color. The value is changed by the current tab.
    val backgroundColor by animateColorAsState(if (tabPage == TabPage1.Home) lightBlue200 else pinkColor)

    Scaffold(topBar = {
        TabBar(backgroundColor = backgroundColor,
            tabPage = tabPage,
            onTabSelected = { tabPage = it })
    }, backgroundColor = backgroundColor) {}
}

@Composable
private fun HomeTabIndicator1(
    tabPositions: List<TabPosition>, tabPage: TabPage1
) {
    val transition = updateTransition(
        tabPage, label = "Tab indicator"
    )
    val indicatorLeft by transition.animateDp(
        transitionSpec = {
            if (TabPage1.Home isTransitioningTo TabPage1.Work) {
                // Indicator moves to the right.
                // Low stiffness spring for the left edge so it moves slower than the right edge.
                spring(stiffness = Spring.StiffnessVeryLow)
            } else {
                // Indicator moves to the left.
                // Medium stiffness spring for the left edge so it moves faster than the right edge.
                spring(stiffness = Spring.StiffnessMedium)
            }
        }, label = "Indicator left"
    ) { page ->
        tabPositions[page.ordinal].left
    }
    val indicatorRight by transition.animateDp(
        transitionSpec = {
            if (TabPage1.Home isTransitioningTo TabPage1.Work) {
                // Indicator moves to the right
                // Medium stiffness spring for the right edge so it moves faster than the left edge.
                spring(stiffness = Spring.StiffnessMedium)
            } else {
                // Indicator moves to the left.
                // Low stiffness spring for the right edge so it moves slower than the left edge.
                spring(stiffness = Spring.StiffnessVeryLow)
            }
        }, label = "Indicator right"
    ) { page ->
        tabPositions[page.ordinal].right
    }
    val color by transition.animateColor(
        label = "Border color"
    ) { page ->
        if (page == TabPage1.Home) colorPrimaryDark else Color.White
    }
    Box(
        Modifier
            .fillMaxSize()
            .wrapContentSize(align = Alignment.BottomStart)
            .offset(x = indicatorLeft)
            .width(indicatorRight - indicatorLeft)
            .padding(4.dp)
            .fillMaxSize()
            .border(
                BorderStroke(2.dp, color), RoundedCornerShape(4.dp)
            )
    )
}

private enum class TabPage1 {
    Home, Work
}

@Composable
private fun HomeTab(
    icon: ImageVector, title: String, onClick: () -> Unit, modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .clickable(onClick = onClick)
            .padding(16.dp),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = icon, contentDescription = null
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(text = title)
    }
}

@Preview
@Composable
private fun PreviewTabBar() {
    TabBarContent()
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/bottomnav/NotificationScreen.kt<|end_filename|>
package com.jetpack.compose.learning.bottomnav

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.jetpack.compose.learning.R

@Composable
fun NotificationScreen(unreadNotification: Int?) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(colorResource(id = R.color.white))
    ) {
        Text(
            text = "Passing Integer in Arguments",
            fontWeight = FontWeight.Bold,
            color = Color.Black,
            modifier = Modifier.align(Alignment.CenterHorizontally),
            textAlign = TextAlign.Center,
            fontSize = 25.sp
        )

        Spacer(modifier = Modifier.fillMaxHeight(0.4f))

        Text(
            text = "You have $unreadNotification unread notifications",
            fontWeight = FontWeight.Bold,
            color = Color.Black,
            modifier = Modifier.align(Alignment.CenterHorizontally),
            textAlign = TextAlign.Center,
            fontSize = 25.sp
        )
    }
}

@Preview(showBackground = true)
@Composable
fun NotificationScreenPreview() {
    NotificationScreen(8)
}

<|start_filename|>app/src/main/java/com/jetpack/compose/learning/bottomnav/BottomNavigationActivity.kt<|end_filename|>
package com.jetpack.compose.learning.bottomnav

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import com.google.gson.Gson
import com.jetpack.compose.learning.theme.AppThemeState
import com.jetpack.compose.learning.theme.BaseView
import com.jetpack.compose.learning.theme.SystemUiController

const val NOTIFICATION_ARGUMENT_KEY = "unreadNotification"
const val PROFILE_ARGUMENT_KEY = "userModel"

class BottomNavigationActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val systemUiController = remember { SystemUiController(window) }
            val appTheme = remember { mutableStateOf(AppThemeState()) }
            BaseView(appTheme.value, systemUiController) {
                MainContent()
            }
        }
    }

    @Composable
    fun MainContent() {
        val navController = rememberNavController()
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Bottom Navigation") },
                    navigationIcon = {
                        IconButton(onClick = { onBackPressed() }) {
                            Icon(Icons.Filled.ArrowBack, contentDescription = null)
                        }
                    }
                )
            },
            bottomBar = { BottomNavBar(navController) }
        ) {
            Navigation(navController)
        }
    }

    @Composable
    fun BottomNavBar(navHostController: NavHostController) {
        val items = listOf(
            ScreenType.Home,
            ScreenType.Search,
            ScreenType.Notifications,
            ScreenType.Profile
        )
        Column() {
            BottomNavigation() {
                val navBackStackEntry by navHostController.currentBackStackEntryAsState()
                val currentRoute = navBackStackEntry?.destination?.route
                items.forEach { screen ->
                    BottomNavigationItem(
                        onClick = {
                            // to make sure that we do not on the same screen again and again
                            if (currentRoute?.contains(screen.route) == false) {

                                // removed backstack when navigated
                                navHostController.popBackStack(
                                    navHostController.graph.startDestinationId,
                                    false
                                )

                                when (screen.route) {
                                    // Redirecting to Notifications
                                    ScreenType.Notifications.route -> {
                                        navHostController.navigate("${screen.route}/?$NOTIFICATION_ARGUMENT_KEY=145") {
                                            launchSingleTop = true
                                        }
                                    }
                                    // Redirecting to Profile Screen
                                    ScreenType.Profile.route -> {
                                        val user = Gson().toJson(UserModel("Hanif", 1))
                                        navHostController.navigate(route = "${screen.route}/$user") {
                                            launchSingleTop = true
                                        }
                                    }
                                    else -> {
                                        navHostController.navigate(screen.route) {
                                            launchSingleTop = true
                                        }
                                    }
                                }
                            }
                        },
                        icon = { Icon(screen.icon, "") },
                        label = { Text(text = screen.resourceId) },
                        selected = when (screen.route) {
                            ScreenType.Profile.route -> currentRoute == screen.route.plus("/{$PROFILE_ARGUMENT_KEY}")
                            ScreenType.Notifications.route -> currentRoute == screen.route.plus("/?$NOTIFICATION_ARGUMENT_KEY={$NOTIFICATION_ARGUMENT_KEY}")
                            else -> currentRoute == screen.route
                        }
                    )
                }
            }
        }
    }

    @Composable
    fun Navigation(navController: NavHostController) {
        NavHost(navController, startDestination = ScreenType.Home.route) {
            // Home Screen
            composable(ScreenType.Home.route) {
                HomeScreen()
            }

            // Search Screen
            composable(ScreenType.Search.route) {
                SearchScreen()
            }

            // Passing args with default values
            composable(ScreenType.Notifications.route.plus("/?$NOTIFICATION_ARGUMENT_KEY={$NOTIFICATION_ARGUMENT_KEY}"),
                arguments = listOf(navArgument(NOTIFICATION_ARGUMENT_KEY) {
                    type = NavType.IntType
                    defaultValue = 50
                })) { backStackEntry ->
                NotificationScreen(backStackEntry.arguments?.getInt(NOTIFICATION_ARGUMENT_KEY))
            }

            // Passing User Model in string as an argument
            composable(ScreenType.Profile.route.plus("/{$PROFILE_ARGUMENT_KEY}")) { backStackEntry ->
                val user = Gson().fromJson(
                    backStackEntry.arguments?.getString(PROFILE_ARGUMENT_KEY),
                    UserModel::class.java
                )
                ProfileScreen(user)
            }
        }
    }
}