I have a composable button, which can display a text or a loader, depending on state
enum class State { NORMAL, LOADING }
#Composable
fun MyButton(onClick: () -> Unit, text: String, state: State) {
Button(onClick, Modifier.height(60.dp)) {
if (state == State.NORMAL) {
Text(text, fontSize = 32.sp)
} else {
CircularProgressIndicator(color = Color.Yellow)
}
}
}
and I use it like this:
MyButton(
onClick = {
state = if (state == State.NORMAL) State.LOADING else State.NORMAL
},
"hello",
state
)
But the button shrinks when going to loading state. How can I measure it in normal state, to assign this measured width in loading state later?
Assuming that the normal state comes before the loading state, you can use the onGloballyPositioned modifier to get the size of Text and apply it to the CircularProgressIndicator.
Something like:
#Composable
fun MyButton(onClick: () -> Unit, text: String, state: State) {
var sizeText by remember { mutableStateOf(IntSize.Zero) }
Button(onClick, Modifier.height(60.dp)) {
if (state == State.NORMAL) {
Text(text, fontSize = 32.sp,
modifier = Modifier.onGloballyPositioned {
sizeText = it.size
})
} else {
Box(Modifier.size(with(LocalDensity.current){ (sizeText.width).toDp()},with(LocalDensity.current){ (sizeText.height).toDp()}),
contentAlignment = Alignment.Center
) {
CircularProgressIndicator(color = Color.Yellow)
}
}
}
}
You can use a custom layout - this works both when you start with Loading or Normal:
#Composable
fun CustomContainer(
modifier: Modifier = Modifier,
state: State,
content: #Composable () -> Unit,
) {
Layout(
modifier = modifier,
content = content,
) { measurables, constraints ->
check(measurables.size == 2) { "This composable requires 2 children" }
val first = measurables[0]
val second = measurables[1]
val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)
val firstPlaceable = first.measure(looseConstraints)
val secondPlaceable = second.measure(looseConstraints)
val requiredWidth = max(firstPlaceable.width, secondPlaceable.width)
val requiredHeight = max(firstPlaceable.height, secondPlaceable.height)
layout(
requiredWidth,
requiredHeight
) {
when (state) {
State.LOADING -> {
firstPlaceable.place(
x = (requiredWidth - firstPlaceable.width) / 2,
y = (requiredHeight - firstPlaceable.height) / 2,
)
}
State.NORMAL -> {
secondPlaceable.place(
x = (requiredWidth - secondPlaceable.width) / 2,
y = (requiredHeight - secondPlaceable.height) / 2,
)
}
}
}
}
}
#Preview
#Composable
fun CustomButtonPreview() {
SampleTheme {
var state by remember {
mutableStateOf(State.LOADING)
}
Button(
onClick = {
state = when (state) {
State.NORMAL -> State.LOADING
State.LOADING -> State.NORMAL
}
},
Modifier.height(60.dp)
) {
CustomContainer(state = state) {
CircularProgressIndicator(color = Color.Yellow)
Text("Text here", fontSize = 32.sp)
}
}
}
}
You could create a variable (nullable) named size. Just wrap your Text in a BoxWithConstraints, then assign the size to the variable. Remeber this value through recompositions, and you should be good.
you could check the width of the button after it's been displayed and save it to use for later, here is a working solution using that way.
#Composable
fun MyButton(onClick: () -> Unit, text: String, state: State) {
val currentContext= LocalContext.current
var textWidth by remember{ mutableStateOf(0)}
val textModifier= if(textWidth ==0)Modifier else Modifier.width(textWidth.dp)
Button(onClick, textModifier.height(60.dp).onGloballyPositioned {
textWidth= it.size.width.toDp(currentContext)
}) {
if (state == State.NORMAL) {
Text(text, fontSize = 32.sp)
} else {
CircularProgressIndicator(color = Color.Yellow)
}
}
}
fun Int.toDp(context: Context): Int = (this / context.resources.displayMetrics.density).toInt()
Related
How can a selected option from a single choice menu be passed to a different composable to that it is displayed in a Text object? Would I need to modify the selectedOption value in some way?
#Composable
fun ScreenSettings(navController: NavController) {
Scaffold(
topBar = {...},
content = {
LazyColumn(...) {
item {
ComposableSettingTheme()
}
}
},
containerColor = ...
)
}
#Composable
fun ComposableSettingTheme() {
val singleDialog = remember { mutableStateOf(false)}
Column(modifier = Modifier
.fillMaxWidth()
.clickable(onClick = {
singleDialog.value = true
})) {
Text(text = "Theme")
Text(text = selectedOption) // selected theme name should be appearing here
if (singleDialog.value) {
AlertSingleChoiceView(state = singleDialog)
}
}
}
#Composable
fun CommonDialog(
title: String?,
state: MutableState<Boolean>,
content: #Composable (() -> Unit)? = null
) {
AlertDialog(
onDismissRequest = {
state.value = false
},
title = title?.let {
{
Column( Modifier.fillMaxWidth() ) {
Text(text = title)
}
}
},
text = content,
confirmButton = {
TextButton(onClick = { state.value = false }) { Text("OK") }
},
dismissButton = {
TextButton(onClick = { state.value = false }) { Text("Cancel") }
}
)
}
#Composable
fun AlertSingleChoiceView(state: MutableState<Boolean>) {
CommonDialog(title = "Theme", state = state) { SingleChoiceView(state = state) }
}
#Composable
fun SingleChoiceView(state: MutableState<Boolean>) {
val radioOptions = listOf("Day", "Night", "System default")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[2]) }
Column(
Modifier.fillMaxWidth()
) {
radioOptions.forEach { themeOption ->
Row(
Modifier
.clickable(onClick = { })
.selectable(
selected = (text == selectedOption),
onClick = {onOptionSelected(text)}
)
) {
RadioButton(
selected = (text == selectedOption),
onClick = { onOptionSelected(text) }
)
Text(text = themeOption)
}
}
}
}
Update
According to official documentation, you should use state hoisting pattern.
Thus:
Just take out selectedOption local variable to the "highest point of it's usage" (you use it in SingleChoiceView and ComposableSettingTheme methods) - ScreenSettings method.
Then, add selectedOption: String and onSelectedOptionChange: (String) -> Unit parameters to SingleChoiceView and ComposableSettingTheme (You can get more info in documentation).
Refactor your code using this new parameters:
Pass selectedOption local variable from ScreenSettings
into SingleChoiceView and ComposableSettingTheme.
Write logic of onSelectedOptionChange - change local variable to new passed value
Hope I helped you!
I know that I can track the moment when lottie animation is completed using progress.
But the problem is that I want to start a new screen at the moment when the animation is completely finished.
Here is the code of my animation
#Composable
fun AnimatedScreen(
modifier: Modifier = Modifier,
rawId: Int
) {
Box(
contentAlignment = Alignment.Center,
modifier = modifier.fillMaxSize()
) {
val compositionResult: LottieCompositionResult = rememberLottieComposition(
spec = LottieCompositionSpec.RawRes(rawId)
)
AnimatedScreenAnimation(compositionResult = compositionResult)
}
}
#Composable
fun AnimatedScreenAnimation(compositionResult: LottieCompositionResult) {
val progress by animateLottieCompositionAsState(composition = compositionResult.value)
Column {
if (progress < 1) {
Text(text = "Progress: $progress")
} else {
Text(
modifier = Modifier.clickable { },
text = "Animation is done"
)
}
LottieAnimation(
composition = compositionResult.value,
progress = progress,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.FillBounds
)
}
}
And here is code of my screen where i want to wait for the end of the animation and then go to a new screen:
#Composable
fun SplashScreen(
navController: NavController,
modifier: Modifier = Modifier,
viewModel: SplashScreenViewModel = getViewModel()
) {
val resIdState = viewModel.splashScreenResId.collectAsState()
val resId = resIdState.value
if (resId != null) {
AnimatedScreen(modifier = modifier, rawId = resId)
}
LaunchedEffect(true) {
navigate("onboarding_route") {
popUpTo(0)
}
}
}
I used the progress & listened to it's updates & as soon as it reaches 1f I'll call my function.
Example:
#Composable
fun Splash() {
LottieTest {
// Do something here
}
}
#Composable
fun LottieTest(onComplete: () -> Unit) {
val composition: LottieCompositionResult =
rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.camera))
val progress by animateLottieCompositionAsState(
composition.value,
iterations = 1,
)
LaunchedEffect(progress) {
Log.d("MG-progress", "$progress")
if (progress >= 1f) {
onComplete()
}
}
LottieAnimation(
composition.value,
progress,
)
}
Note: This is just the way I did it. The best way is still unknown(to me atleast). I feel it lacks the samples for that.
Also, You can modify a lot from this & just concentrate on the core flow.
I am trying to do pagination in my application. First, I'm fetching 20 item from Api (limit) and every time i scroll down to the bottom of the screen, it increase this number by 20 (nextPage()). However, when this function is called, the screen goes to the top, but I want it to continue where it left off. How can I do that?
Here is my code:
CharacterListScreen:
#Composable
fun CharacterListScreen(
characterListViewModel: CharacterListViewModel = hiltViewModel()
) {
val state = characterListViewModel.state.value
val limit = characterListViewModel.limit.value
Box(modifier = Modifier.fillMaxSize()) {
val listState = rememberLazyListState()
LazyColumn(modifier = Modifier.fillMaxSize(), state = listState) {
itemsIndexed(state.characters) { index, character ->
characterListViewModel.onChangeRecipeScrollPosition(index)
if ((index + 1) >= limit) {
characterListViewModel.nextPage()
}
CharacterListItem(character = character)
}
}
if (state.error.isNotBlank()) {
Text(
text = state.error,
color = MaterialTheme.colors.error,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 20.dp)
.align(Alignment.Center)
)
}
if (state.isLoading) {
CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
}
}
}
CharacterListViewModel:
#HiltViewModel
class CharacterListViewModel #Inject constructor(
private val characterRepository: CharacterRepository
) : ViewModel() {
val state = mutableStateOf(CharacterListState())
val limit = mutableStateOf(20)
var recipeListScrollPosition = 0
init {
getCharacters(limit.value, Constants.HEADER)
}
private fun getCharacters(limit : Int, header : String) {
characterRepository.getCharacters(limit, header).onEach { result ->
when(result) {
is Resource.Success -> {
state.value = CharacterListState(characters = result.data ?: emptyList())
}
is Resource.Error -> {
state.value = CharacterListState(error = result.message ?: "Unexpected Error")
}
is Resource.Loading -> {
state.value = CharacterListState(isLoading = true)
}
}
}.launchIn(viewModelScope)
}
private fun incrementLimit() {
limit.value = limit.value + 20
}
fun onChangeRecipeScrollPosition(position: Int){
recipeListScrollPosition = position
}
fun nextPage() {
if((recipeListScrollPosition + 1) >= limit.value) {
incrementLimit()
characterRepository.getCharacters(limit.value, Constants.HEADER).onEach {result ->
when(result) {
is Resource.Success -> {
state.value = CharacterListState(characters = result.data ?: emptyList())
}
is Resource.Error -> {
state.value = CharacterListState(error = result.message ?: "Unexpected Error")
}
is Resource.Loading -> {
state.value = CharacterListState(isLoading = true)
}
}
}.launchIn(viewModelScope)
}
}
}
CharacterListState:
data class CharacterListState(
val isLoading : Boolean = false,
var characters : List<Character> = emptyList(),
val error : String = ""
)
I think the issue here is that you are creating CharacterListState(isLoading = true) while loading. This creates an object with empty list of elements. So compose renders an empty LazyColumn here which resets the scroll state. The easy solution for that could be state.value = state.value.copy(isLoading = true). Then, while loading, the item list can be preserved (and so is the scroll state)
Not sure if you are using the LazyListState correctly. In your viewmodel, create an instance of LazyListState:
val lazyListState: LazyListState = LazyListState()
Pass that into your composable and use it as follows:
#Composable
fun CharacterListScreen(
characterListViewModel: CharacterListViewModel = hiltViewModel()
) {
val limit = characterListViewModel.limit.value
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(modifier = Modifier.fillMaxSize(), state = characterListViewModel.lazyListState) {
itemsIndexed(state.characters) { index, character ->
}
}
}
}
I want to build this awesome button animation pressed from the AirBnB App with Jetpack Compose
Unfortunately, the Animation/Transition API was changed recently and there's almost no documentation for it. Can someone help me get the right approach to implement this button press animation?
Edit
Based on #Amirhosein answer I have developed a button that looks almost exactly like the Airbnb example
Code:
#Composable
fun AnimatedButton() {
val boxHeight = animatedFloat(initVal = 50f)
val relBoxWidth = animatedFloat(initVal = 1.0f)
val fontSize = animatedFloat(initVal = 16f)
fun animateDimensions() {
boxHeight.animateTo(45f)
relBoxWidth.animateTo(0.95f)
// fontSize.animateTo(14f)
}
fun reverseAnimation() {
boxHeight.animateTo(50f)
relBoxWidth.animateTo(1.0f)
//fontSize.animateTo(16f)
}
Box(
modifier = Modifier
.height(boxHeight.value.dp)
.fillMaxWidth(fraction = relBoxWidth.value)
.clip(RoundedCornerShape(8.dp))
.background(Color.Black)
.clickable { }
.pressIndicatorGestureFilter(
onStart = {
animateDimensions()
},
onStop = {
reverseAnimation()
},
onCancel = {
reverseAnimation()
}
),
contentAlignment = Alignment.Center
) {
Text(text = "Explore Airbnb", fontSize = fontSize.value.sp, color = Color.White)
}
}
Video:
Unfortunately, I cannot figure out how to animate the text correctly as It looks very bad currently
Are you looking for something like this?
#Composable
fun AnimatedButton() {
val selected = remember { mutableStateOf(false) }
val scale = animateFloatAsState(if (selected.value) 2f else 1f)
Column(
Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(
onClick = { },
modifier = Modifier
.scale(scale.value)
.height(40.dp)
.width(200.dp)
.pointerInteropFilter {
when (it.action) {
MotionEvent.ACTION_DOWN -> {
selected.value = true }
MotionEvent.ACTION_UP -> {
selected.value = false }
}
true
}
) {
Text(text = "Explore Airbnb", fontSize = 15.sp, color = Color.White)
}
}
}
Here's the implementation I used in my project. Seems most concise to me.
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val sizeScale by animateFloatAsState(if (isPressed) 0.5f else 1f)
Button(
onClick = { },
modifier = Modifier
.wrapContentSize()
.graphicsLayer(
scaleX = sizeScale,
scaleY = sizeScale
),
interactionSource = interactionSource
) { Text(text = "Open the reward") }
Use pressIndicatorGestureFilter to achieve this behavior.
Here is my workaround:
#Preview
#Composable
fun MyFancyButton() {
val boxHeight = animatedFloat(initVal = 60f)
val boxWidth = animatedFloat(initVal = 200f)
Box(modifier = Modifier
.height(boxHeight.value.dp)
.width(boxWidth.value.dp)
.clip(RoundedCornerShape(4.dp))
.background(Color.Black)
.clickable { }
.pressIndicatorGestureFilter(
onStart = {
boxHeight.animateTo(55f)
boxWidth.animateTo(180f)
},
onStop = {
boxHeight.animateTo(60f)
boxWidth.animateTo(200f)
},
onCancel = {
boxHeight.animateTo(60f)
boxWidth.animateTo(200f)
}
), contentAlignment = Alignment.Center) {
Text(text = "Utforska Airbnb", color = Color.White)
}
}
The default jetpack compose Button consumes tap gestures in its onClick event and pressIndicatorGestureFilter doesn't receive taps. That's why I created this custom button
You can use the Modifier.pointerInput to detect the tapGesture.
Define an enum:
enum class ComponentState { Pressed, Released }
Then:
var toState by remember { mutableStateOf(ComponentState.Released) }
val modifier = Modifier.pointerInput(Unit) {
detectTapGestures(
onPress = {
toState = ComponentState.Pressed
tryAwaitRelease()
toState = ComponentState.Released
}
)
}
// Defines a transition of `ComponentState`, and updates the transition when the provided [targetState] changes
val transition: Transition<ComponentState> = updateTransition(targetState = toState, label = "")
// Defines a float animation to scale x,y
val scalex: Float by transition.animateFloat(
transitionSpec = { spring(stiffness = 50f) }, label = ""
) { state ->
if (state == ComponentState.Pressed) 1.25f else 1f
}
val scaley: Float by transition.animateFloat(
transitionSpec = { spring(stiffness = 50f) }, label = ""
) { state ->
if (state == ComponentState.Pressed) 1.05f else 1f
}
Apply the modifier and use the Modifier.graphicsLayer to change also the text dimension.
Box(
modifier
.padding(16.dp)
.width((100 * scalex).dp)
.height((50 * scaley).dp)
.background(Color.Black, shape = RoundedCornerShape(8.dp)),
contentAlignment = Alignment.Center) {
Text("BUTTON", color = Color.White,
modifier = Modifier.graphicsLayer{
scaleX = scalex;
scaleY = scaley
})
}
Here is the ScalingButton, the onClick callback is fired when users click the button and state is reset when users move their finger out of the button area after pressing the button and not releasing it. I'm using Modifier.pointerInput function to detect user inputs:
#Composable
fun ScalingButton(onClick: () -> Unit, content: #Composable RowScope.() -> Unit) {
var selected by remember { mutableStateOf(false) }
val scale by animateFloatAsState(if (selected) 0.7f else 1f)
Button(
onClick = onClick,
modifier = Modifier
.scale(scale)
.pointerInput(Unit) {
while (true) {
awaitPointerEventScope {
awaitFirstDown(false)
selected = true
waitForUpOrCancellation()
selected = false
}
}
}
) {
content()
}
}
OR
Another approach without using an infinite loop:
#Composable
fun ScalingButton(onClick: () -> Unit, content: #Composable RowScope.() -> Unit) {
var selected by remember { mutableStateOf(false) }
val scale by animateFloatAsState(if (selected) 0.75f else 1f)
Button(
onClick = onClick,
modifier = Modifier
.scale(scale)
.pointerInput(selected) {
awaitPointerEventScope {
selected = if (selected) {
waitForUpOrCancellation()
false
} else {
awaitFirstDown(false)
true
}
}
}
) {
content()
}
}
If you want to animated button with different types of animation like scaling, rotating and many different kind of animation then you can use this library in jetpack compose. Check Here
As seen in code below I have a callback where I want to collect the VerticalScroller's position, but if I do so, the VerticalScrollers widget will not scroll anymore, because in the source code to VerticalScroller, the initial callback has a call to VerticalScroller 's scrollerPosition. This value is not reachable from the callback where I want to use it. Is there a quick way to call the scrollerPosition or make the scrollbehavior continue ? (without creating a recursive "race" condition ?)
#Composable
fun StationsScreen(deviceLocation: LocationData, openDrawer: () -> Unit)
{
var scrollPosition = ScrollPosition(0.px,0.px)
FlexColumn {
inflexible {
TopAppBar(
title = {Text(text = "Stations")},
navigationIcon = {
VectorImageButton(id = R.drawable.ic_baseline_menu_24) {
openDrawer()
}
}
)
}
inflexible {
Column (
mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand
){
LocationWidget(deviceLocation)
}
}
inflexible {
Column(
mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand
){
PushWidget(){
deviceLocation.lat++
deviceLocation.lng++
}
}
}
inflexible{
Column(
mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand
) {
ScrollPosWidget(scrollPosition = scrollPosition)
}
}
flexible(flex = 1f)
{
VerticalScroller (onScrollPositionChanged = { px: Px, px1: Px ->
scrollPosition.posX = px
scrollPosition.maxX = px1
}){
Column {
for(i in 0..20) {
HeightSpacer(16.dp)
imageBank.forEach { imageItem: ImageItem ->
Text(text = imageItem.title ?: "<Empty>")
Divider()
}
}
}
}
}
}
}
--- definition of the VerticalScroller Widget in compose source code:
#Composable
fun VerticalScroller(
scrollerPosition: ScrollerPosition = +memo { ScrollerPosition() },
onScrollPositionChanged: (position: Px, maxPosition: Px) -> Unit = { position, _ ->
scrollerPosition.value = position
},
isScrollable: Boolean = true,
#Children child: #Composable() () -> Unit
) {
Scroller(scrollerPosition, onScrollPositionChanged, true, isScrollable, child)
}
Actually I found a solution for my problem... (I was sometime taught to think out of the box...) So...
In my #Compose function I actually need to create my own scrollerPosition instance and use that in my call to VerticalScroller to change the poisition. I was afraid that this could cause a recursive "race" call situation, but that dependends on when the onScrolledPostionChanged is called in the Scroller's logic. If onScrolledPositionChanged is called when scrollerPosition.position changes value, you may get the recursive "race" condition. But apparently not.
So my changes are basicly like this:
#Composable
fun StationsScreen(deviceLocation: LocationData, openDrawer: () -> Unit)
{
var scrollPosition = ScrollPosition(0.px,0.px)
var myScrollerPosition = +memo{ ScrollerPosition ()} //<--- make my own scrollerPosition
FlexColumn {
inflexible {
TopAppBar(
title = {Text(text = "Stations")},
navigationIcon = {
VectorImageButton(id = R.drawable.ic_baseline_menu_24) {
openDrawer()
}
}
)
}
inflexible {
Column (
mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand
){
LocationWidget(deviceLocation)
}
}
inflexible {
Column(
mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand
){
PushWidget(){
deviceLocation.lat++
deviceLocation.lng++
}
}
}
inflexible{
Column(
mainAxisSize = LayoutSize.Expand,
crossAxisSize = LayoutSize.Expand
) {
ScrollPosWidget(scrollPosition = scrollPosition)
}
}
flexible(flex = 1f)
{
VerticalScroller (
scrollerPosition = myScrollerPosition,
onScrollPositionChanged = { px: Px, px1: Px ->
scrollPosition.posX = px
scrollPosition.maxX = px1
myScrollerPosition.value = px //<-- remember to set the new value here
// You can now use the difference of maxX and posX to load
// new items into the list...
}){
Column {
for(i in 0..20) {
HeightSpacer(16.dp)
imageBank.forEach { imageItem: ImageItem ->
Text(text = imageItem.title ?: "<Empty>")
Divider()
}
}
}
}
}
}
}
#Composable
fun LocationWidget(locationData: LocationData){
Surface {
Padding(padding = 8.dp) {
Text(text = "${locationData.lat}, ${locationData.lng}")
}
}
}
#Composable
fun PushWidget(action: () -> Unit){
Surface {
Padding(padding = 8.dp) {
Button(text = "Click Me!", onClick = action)
}
}
}
#Composable
fun ScrollPosWidget(scrollPosition: ScrollPosition){
Surface {
Padding(padding = 8.dp) {
Text(text = "posX=${scrollPosition.posX}, maxX=${scrollPosition.maxX}")
}
}
}
RG