playground: jetpack compose album images thumbs

album_thumbs.kt

package com.example.playground_bottomnavbar_api

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.*
import androidx.compose.animation.core.tween
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.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import coil.annotation.ExperimentalCoilApi
import coil.compose.ImagePainter
import coil.compose.rememberImagePainter

import com.example.playground_bottomnavbar_api.ui.BottomNavigationItem
import com.example.playground_bottomnavbar_api.ui.student_activities.StudentActivitiesScreen
import com.example.playground_bottomnavbar_api.ui.components.BottomNavigationBar
import com.example.playground_bottomnavbar_api.ui.components.TopBar
import com.example.playground_bottomnavbar_api.ui.screens.*
import com.example.playground_bottomnavbar_api.ui.student_activities.ComposableFun
import com.example.playground_bottomnavbar_api.ui.theme.Playground_BottomNavBar_APITheme
import com.google.accompanist.pager.ExperimentalPagerApi

import kotlinx.coroutines.InternalCoroutinesApi
import kotlin.math.absoluteValue

class MainActivity : ComponentActivity() {
    @ExperimentalCoilApi
    @InternalCoroutinesApi
    @ExperimentalAnimationApi
    @ExperimentalMaterialApi
    @ExperimentalPagerApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Playground_BottomNavBar_APITheme {
                // A surface container using the 'background' color from the theme
                MainScreen()
            }
        }
    }
}

@ExperimentalCoilApi
@InternalCoroutinesApi
@ExperimentalAnimationApi
@ExperimentalMaterialApi
@ExperimentalPagerApi
@Composable
fun MainScreen() {

    val navController = rememberNavController()
    val scaffoldState = rememberScaffoldState()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = { TopBar() },
        bottomBar = { BottomNavigationBar(navController) },
        backgroundColor = colorResource(id = R.color.colorDimWhiteBackground),
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            ImageAlbumsView(
                urls = listOf(
                    "https://images.pexels.com/photos/462205/pexels-photo-462205.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
                    "https://images.pexels.com/photos/4462780/pexels-photo-4462780.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
                    "https://images.pexels.com/photos/1010079/pexels-photo-1010079.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=1024"
                )
            )
        }
    }
}


@ExperimentalAnimationApi
@ExperimentalCoilApi
@InternalCoroutinesApi
@Composable
@Preview(showBackground = true)
fun ImageAlbumsView(urls: List<String> = emptyList()) {

    val alphas = listOf(0.6f, 0.8f, 1f)
    val rotations = listOf(-15f, 17f, 0f)

    Card(
        modifier = Modifier
            .background(Color.LightGray)
            .padding(all = 24.dp)
            .width(512.dp)
            .height(512.dp)

    ) {

        val elevation = 0.dp
        val roundness = 8.dp

        val imageHeight = 256.dp
        val imageModifier = Modifier
            .height(imageHeight)
            .width(imageHeight)

        urls.forEachIndexed { index, _url ->
            Surface(
                modifier = Modifier
                    .rotate(rotations[ index % rotations.size])
                    .wrapContentSize(Alignment.Center)
                    .alpha(alphas[index % alphas.size]),
                shape = RoundedCornerShape(roundness),
                elevation = elevation,
            ) {
                LoadingImage(
                    url = _url,
                    imageModifier,
                    Modifier.wrapContentSize(Alignment.Center)
                )
            }
        }
    }
}

@ExperimentalCoilApi
@ExperimentalAnimationApi
@Composable
fun LoadingImage(
    url: String,
    imageModifier: Modifier = Modifier,
    containerModifier: Modifier = Modifier.fillMaxSize(),
    placeholder: ComposableFun = {
        Icon(
            painterResource(id = R.drawable.ic_gallery),
            contentDescription = null,
            tint = Color.LightGray.copy(alpha = 0.5f),
            modifier = Modifier
                .wrapContentSize(Alignment.Center)
                .width(128.dp)
                .height(128.dp),
        )
    }
) {

    val painter = rememberImagePainter(
        data = url,
        onExecute = ImagePainter.ExecuteCallback { _, _ -> true },
        builder = {}
    )

    ConstraintLayout(modifier = containerModifier) {
        val image = createRef()
        Image(
            painter = painter,
            contentScale = ContentScale.Crop,
            contentDescription = null,
            modifier = imageModifier
        )
        AnimatedVisibility(
            visible = !(painter.state is ImagePainter.State.Success),
            enter = fadeIn(),
            exit = fadeOut(animationSpec = tween(1000)),
        ) {
            Box(
                modifier = imageModifier
                    .background(Color.White)
                    .fillMaxWidth()
            ) {

            }
        }
        AnimatedVisibility(
            visible = !(painter.state is ImagePainter.State.Success),
            enter = fadeIn(),
            exit = fadeOut(animationSpec = tween(1000)),
            modifier = Modifier.constrainAs(image) {
                centerHorizontallyTo(parent)
                centerVerticallyTo(parent)
            }
        ) {
            placeholder()
        }
    }

}

Preview: