I have updated my project to Kotlin 1.6.10, Compose 1.1.0 and compose compiler to 1.1.0
Previously I was using Kotlin 1.5.31, Compose 1.0.5 and compose compiler 1.0.5, and it running ok
#Composable
fun Test() {
var value: String? = null
Scaffold(Modifier.fillMaxSize(), backgroundColor = Color.White) {
Column(Modifier.fillMaxSize()) {
val ret = value?.let {
Box(
modifier = Modifier
.size(50.dp)
.background(color = Color.Red)
)
}
ret ?: Spacer(modifier = Modifier.height(50.dp))
Text(text = "ret = $ret")
Text(text = "KotlinVersion = ${KotlinVersion.CURRENT}")
}
}
}
The above Spacer function has never been executed
look this:
Test Preview
At first I thought it was an issue with Kotlin 1.6.10
Kotlin 1.6.10 Doc
Kotlin 1.6.10 Small Test
After check out the official documentation and run small test. I don't think it's a issue with Kotlin 1.6.10
So is this a bug in Compose 1.1.0?
Related
In Jetpack Compose, where is ScrollToTopButton coming from? It is mentioned in Google's documentation. Annoyingly, they neglect to mention the package. I have imports of foundation version 1.2.0-alpha08; also tried with 1.2.0-beta02 as well as ui and material (1.1.1). Not found. (yes did do an internet search on the term, came back empty handed).
implementation "androidx.compose.foundation:foundation:${version}"
implementation "androidx.compose.foundation:foundation-layout:${version}"
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
#Composable
fun MessageList(messages: List<Message>) {
val listState = rememberLazyListState()
// Remember a CoroutineScope to be able to launch
val coroutineScope = rememberCoroutineScope()
LazyColumn(state = listState) {
// ...
}
ScrollToTopButton(
onClick = {
coroutineScope.launch {
// Animate scroll to the first item
listState.animateScrollToItem(index = 0)
}
}
)
}
Google documentation
Edit: If this is NOT a function they offer, but rather a suggestion to create your own, shame on whoever wrote the documentation, it literally suggests being a function offered by Compose.
Edit 2: Turns out it is a custom function (see the answer). What moved the author of the documentation to write it like this? Why not just put Button? Sigh.
It's not clear from the documentation but you actually have to make your own. For example you can use this:
#Composable
fun ScrollToTopButton(onClick: () -> Unit) {
Box(
Modifier
.fillMaxSize()
.padding(bottom = 50.dp), Alignment.BottomCenter
) {
Button(
onClick = { onClick() }, modifier = Modifier
.shadow(10.dp, shape = CircleShape)
.clip(shape = CircleShape)
.size(65.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.White,
contentColor = Color.Green
)
) {
Icon(Icons.Filled.KeyboardArrowUp, "arrow up")
}
}
}
And then:
val showButton by remember{
derivedStateOf {
listState.firstVisibleItemIndex > 0
}
}
AnimatedVisibility(
visible = showButton,
enter = fadeIn(),
exit = fadeOut(),
) {
ScrollToTopButton(onClick = {
scope.launch {
listState.animateScrollToItem(0)
}
})
}
Jetpack Compose version: '1.1.0' and
Jetpack Compose component used: androidx.compose.* (base components_
Android Studio Build: 2021.2.1
Kotlin version:1.6.10
I have simple code inside activity. When i start App and start scroll with speed, i see scrolling lags :( What is wrong with this code?
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TestComposeTheme {
val list = (1..300).toList()
LazyColumn(
Modifier.fillMaxSize(),
) {
items(list) { item ->
SomeItem(
text = item.toString(),
clickListener = {}
)
Spacer(modifier = Modifier.height(16.dp))
}
}
}
}
}
#Composable
fun SomeItem(
text: String,
clickListener: (String) -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(64.dp)
.background(Color.LightGray)
.clickable { clickListener.invoke(text) }
) {
Icon(painter = painterResource(id = R.drawable.ic_back), contentDescription = "")
Spacer(modifier = Modifier.height(8.dp))
Text(
modifier = Modifier,
text = text
)
}
}
I also got laggy scroll when using lazycolumn (I'm migrating my Native Android project to Jetpack Compose, so i used "ComposeView in XML". Its not a pure Compose project.)
I don't know why the issue coming(Tried with release build also ), but i solved with below code.
Instead of using "LazyColumn", i used "rememberScrollState() with Column"
Column(
modifier = Modifier
.verticalScroll(rememberScrollState())
.padding(5.dp)
) {
list.forEachIndexed { i, _ ->
ShowItems(i)
}
}
Hope this will help some one.
Please attach if better Answer there, I will also update my project.
**
EDIT :: UPDATE
**
In release Build, somewhat better then DEBUG app.
The above case is only use for less amount of data. If we have large data there is no option we have to use "LazyColumn".
I use Android Studio Bumblebee 2021.1.1 Patch 3 built on March 16, 2022
androidx.compose.ui:ui-tooling, androidx.compose.ui:ui-tooling-preview, androidx.compose.ui:ui
are in version 1.2.0-alpha07
I want to create preview of my composable but I can't create any one. Every time I see error:
"The project needs to be compiled for the preview to be displayed"
I rebuilt, synced project and restarted Android Studio but it doesn't help.
What can be wrong?
My composable for example:
#Composable
fun DefaultProfileAvatarBox(
modifier: Modifier = Modifier
.size(60.dp),
firstLetter: String
) {
val finalModifier = modifier
.clip(CircleShape)
.background(blueAvatarBackground)
Box(
modifier = finalModifier
) {
Text(
text = firstLetter,
modifier = Modifier
.padding(bottom = 2.dp)
.align(Alignment.Center),
fontSize = 32.sp,
fontWeight = FontWeight.SemiBold,
color = Color.White,
textAlign = TextAlign.Center
)
}
}
#Preview
#Composable
fun DefaultProfileAvatarBoxPreview() {
DefaultProfileAvatarBox(firstLetter = "K")
}
I had the same problem
But when I used the stable version of activity-compose (1.4.0) !
The problem was solved.
dependencies {
// ...
implementation 'androidx.activity:activity-compose:1.4.0'
}
Use version 1.1.1 to avoid this.
I hope it helps you.
How to set elevation for material3 card? I am using new material3 card and getting error
This material API is experimental and is likely to change or to be removed in the future.
Here is code ->
#ExperimentalMaterial3Api
#Composable
fun ProfileCard(
modifier: Modifier = Modifier
) {
Card(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(all = 16.dp),
shape = RoundedCornerShape(size = 16.dp),
containerColor = MaterialTheme.colorScheme.surface,
border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.inverseOnSurface),
elevation = CardDefaults.outlinedCardElevation()
) {
...
}
}
I am not able to run app due to error caused by elevation how to set elevation?
Edit : Solved the issue by adding
elevation = CardDefaults.outlinedCardElevation(defaultElevation = 1.dp)
Why do we have to add border for CardDefaults.outlinedCardElevation why does't it show by default?
If you find the same message in the future for another reason, one option could be to add in your build.gradle file, the following:
kotlinOptions {
allWarningsAsErrors = false
freeCompilerArgs += [
'-opt-in=androidx.compose.material3.ExperimentalMaterial3Api'
]
}
In this way, after Sync Project with Gradle Files you will not see the warnings in your compose code.
AnimatedImageVector is no more present in Jetpack Compose 1.0.0-rc01
Also function animatedVectorResource is missing.
How to replace them?
As you can read in the release notes:
AnimatedImageVector was temporarily removed in order to change the module structure
UPDATE:
Starting from 1.1.0-alpha01, "AnimatedImageVector and the related APIs are now in the new
androidx.compose.animation:animation-graphics module. More detail in this commit.
val image = animatedVectorResource(drawableId)
var atEnd by remember { mutableStateOf(false) }
Image(
painter = image.painterFor(atEnd),
contentDescription = "Your content description",
modifier = Modifier.size(64.dp).clickable {
atEnd = !atEnd
}
)