Skip to content

Instantly share code, notes, and snippets.

@bluemix
Last active August 28, 2021 13:49
Show Gist options
  • Save bluemix/0b1ee918b184052da833096d59f1dffc to your computer and use it in GitHub Desktop.
Save bluemix/0b1ee918b184052da833096d59f1dffc to your computer and use it in GitHub Desktop.
playground: jetpack compose album images thumbs
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()
}
}
}
@bluemix
Copy link
Author

bluemix commented Aug 28, 2021

Preview:
Screenshot_2021_08_28_16_04_23_147_com_example_playground_bottomnavbar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment