I'm making something that has descriptions, that can sometimes contain URLs. How can I make those URLs be made clickable?

Anyone knows why setting

fillMaxSize

is ignored if specified below

verticalScroll

Modifier?

Why we have ProvideTextStyle() and not also ProvideShape() and ProvideColors()? We access theme values from within the theme object (MaterialTheme object), so why do we need to use ProvideTextStyle(value){content()} in the first place?

Say i have a Composable which, makes use of

stringResource

and maps from one object to another. I should be marking it as

@ReadOnlyComposable

? More in 🧵

I recently tried Compose Compiler Metrics and have a question regarding the Stability of Compose. Thanks for a very clear and simple tool! https://github.com/androidx/androidx/blob/androidx-main/compose/compiler/design/compiler-metrics.md Since Compose treats classes in another module as Unstable even if they are Immutable, if a class in another module has parameters in its arguments, even if the parameters have not changed, are they not skipped and subject to Recompose? I would like to know because it could considerably affect the design of the application using Compose. app module

@Composable
fun Composable1(articles: Articles) {
  Text(text = "Hello $articles!")
}

@Stable
data class UiModel(val articles: Articles)

@Composable
fun Composable2(uiModel: UiModel) {
  Text(text = "Hello $uiModel!")
  uiModel.articles.articles.forEach {
    Composable3(it)
  }
}

@Composable
fun Composable3(article: Article) {
  Text(text = "Hello $article!")
}

model module

data class Articles(val articles: List<Article>)
data class Article(val title: String)

app_release-composables.txt

restartable fun Composable1(
  unstable articles: Articles
)
restartable skippable fun Composable2(
  stable uiModel: UiModel
)
restartable fun Composable3(
  unstable article: Article
)

source code https://github.com/takahirom/compose-multi-module-stability

Hello, I am currently writing some tests for pagination in compose, and I noticed that

performScrollToIndex

method in compose ui test library provided for scrolling an item to a particular index, scroll that item index to the very top position. This behaviour is different from the

recyclerView.scrollToPosition

method we have currently in the old view system which scrolls the item just enough to make that item visible at the bottom. Can someone tell me is there an API for tests in compose to have that similar behaviour of scrolling the item just enough to make it visible at the bottom instead of at the top?

Why aren't text transformations (such as all-caps) part of

TextStyle

? Most designers see those as part of the text styling but in compose we are forced to handle them via code. Is there any plan to include text transformations in text style so that we can manage them in themes? In some project I created my own Text widgets to add this behavior, but I think it should be part of Compose handling of Texts.

I’m writing a custom layout using

Layout

but the algorithm to compute the placement of the children composables (i.e. to compute both the constraints of the measurables and the x,y of the placeables) turns out to be O(n^2). Is it possible to handle this computation in a background coroutine or similar, but still while inside the composable

Layout()

function? Are there any patterns in compose to help with such cases?

Hello. Is there a stable way to disable interaction with a whole sub-tree in a parent? E.g. I have the following function:

@Composable
fun Foo(content: @Composable () -> Unit) {
    var enabled by remember { mutableStateOf(true) }
    
    Box(
        modifier = Modifier // Disable the sub-tree if not enabled
    ) {
        content()
    }
}

How can I disable the

content

? So far I discovered

Modifier.pointerInteropFilter { true }

which seems working, but it is marked as experimental with level

ERROR

.

I am trying to add pagination to my

LazyColumn

using Paging3 (with its compose library). I now show the paginated list by converting the

PagingData

into a

LazyPagigItems

object. My issue is that I cannot find a way to show any state other than the success state like showing the loading indicator or showing an error when the loading of a page fails. I have done this outside Compose using RecyclerViews but I cant find anything useful for it in Compose.

I’m trying to implement a

Modifier

that, when the element it modifies is “selected” (in a sense I define), it automatically makes it focused.

fun Modifier.focusedWhenSelected(): Modifier = this.then(FocusedWhenSelected)

object FocusedWhenSelected: Modifier.Element{

    fun implementingModifier(modifier: Modifier, isSelected: Boolean): Modifier{
        val hasFocusedWhenSelected = modifier.any { it == FocusedWhenSelected }
        if (!hasFocusedWhenSelected)
            return Modifier

        return Modifier.composed {
            val focusRequester = remember { FocusRequester() }
            if (isSelected) {
                LaunchedEffect(Unit) {
                    focusRequester.requestFocus()
                }
            }

            Modifier
                .focusRequester(focusRequester)
                .focusable()
        }
    }
}

and then, in the code that actually defines

isSelected

, I do:

Box(
    modifier = FocusedWhenSelected.implementingModifier(modifier, isSelected)
){
...
}

Does this look right? I’m somewhat worried that I’m creating a new

Modifier.composed

every time.

I'm trying to create LazyColumn of Images. I want it to fill width and take a height that preserves its aspect ratio. Everything I've tried has zero height, no visible images. Eg:

Image(
    painter = ..., contentDescription = null,
    contentScale = ContentScale.Fit, // ???
    modifier = Modifier.fillMaxWidth() 
)

Wondering if anyone has any advice on how I can do an overlay like this? I currently have it working using this code:

overlay = {
                    if (it.isSelected) {
                        Box(
                            Modifier
                                .size(if (it.rentalLength != null) 245.dp else 222.dp)
                                .alpha(0.6f)
                                .background(DownpourTheme.colors.primary)
                        )
                    }
                }
            )

but the size being hardcoded is obviously not ideal. Wondering if there’s an easy way to measure the size of the card my box is trying to overlay?

Is there a way to convert a composable canvas into png and save it on the device? I want to make a small “Art” app where the user can create shapes etc and then extract them as png to use them elsewere. Is compose even able to do such things?

Does anyone use the accompanist library in the product app? The library version is less than 1.0, so I’m worried, is it okay to use it in production level?

Simplifying a lot, so forgive me if the use-case doesn’t make much sense. I’m trying to implement a

Column

where each row “knows” its index, like so:

@Composable
fun IndexedColumn(
    content: @Composable IndexedColumnScope.() -> Unit
){
    Column {
        content.invoke(IndexedColumnScope())
    }
}

class IndexedColumnScope{

    var index = 0

    @Composable
    fun row(
        rowContent: @Composable IndexedRowScope.() -> Unit
    ){
        val rowIndex = remember { index++ }
        rowContent.invoke(IndexedRowScope(rowIndex))
    }

}

class IndexedRowScope(
    val rowIndex: Int
)

@Composable
fun UseIndexedColumn(){
    IndexedColumn{
        repeat(5) {
            row{
                Text("Row $rowIndex")
            }
        }
    }
}

The problem is with the

var index

— when a row changes,

row

is called again (not recomposition, but regular composition) and

index

increases again. So if I had at the beginning

Row 0
Row 1
Row 2
Row 3
Row 4

and then row 2 changes from

Text

to

BasicTextField

, I’d have

Row 0
Row 1
Row 5  <-- BasicTextField
Row 3
Row 4

Hi guys, I've a design question. I want to position a FAB and I don't know what way is the most suitable for that. Code in Thread ...

Hi guys, I'm trying to customize TextField to center its content. Everything else is okay except the cursor, i don’t know if there is a way to center it. Thanks for your help!!! 🙇

I have a logic to show animated composable sliding in from top. I was wondering if there's a better way to achieve what i have, the

Side-effect

part? More in 🧵

To convert Bitmaps to ImageBitmaps we use

.asImageBitmap()

. But is there a way to convert ImageBitmaps to Bitmaps? I want to save the ImageBitmap as a .png on the internal storage and/or upload it to my cloud storage

Hello. I'm trying to add swipe-to-refresh to my WebView, using Accompanist's

SwipeRefresh

. Simple example:

var isRefreshing by remember { mutableStateOf(false) }
var isLoaded by remember { mutableStateOf(false) }

SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing),
    onRefresh = { isRefreshing = true }) {
    AndroidView(
        factory = {
            WebView(it).apply {
                webViewClient = WebViewClient()
            }
        }
    ) { webView ->
        if (!isLoaded) {
            webView.loadUrl("<https://www.android.com/>")
            isLoaded = true
        }

        if (isRefreshing) {
            webView.reload()
            isRefreshing = false
        }
    }
}

This does not work because

SwipeRefresh

needs scrollable child. By adding

verticalScroll

modifier to AndroidView,

SwipeRefresh

works, but WebView gets infinite height and content does not rendered as expected. Is there any way to notify legacy View's scroll events to parent Composable?

Can I have overlapping composables in a

Row

? I'm looking for something like

Modifier.offset(x = 8.dp)

, which correctly moves my item to overlap the next one, but does not modify the size of the outer

Row

. I have two items in the

Row

.

how to implement overscroll refresh ? something like this

I am running a simple Test on `LaunchedEffect`:

@Test
fun testSomeState() {
    composeTestRule.setContent {
        SomeComposable {
            println("click $it")
        }
    }
    composeTestRule.onNodeWithTag("Zivi")
        .performClick()
        .assertExists()
}

@Composable
fun SomeComposable(onClick: (Int) -> Unit) {
    var someState by remember { mutableStateOf(0) }

    Button(modifier = Modifier.testTag("Zivi").pointerInteropFilter {
        someState = when (it.action) {
            MotionEvent.ACTION_DOWN -> { 1 }
            MotionEvent.ACTION_UP -> { 2 }
            else -> { someState  }
        }
        true

    }, onClick = { }) {}

    LaunchedEffect(someState) {
        println("LaunchedEffect someState $someState") // prints "LaunchedEffect someState 0" 
                                                       // and then "LaunchedEffect someState 2"
        if (someState == 2) { onClick(someState) }
    }
}

------------ This works well, however, if i change

Button

to a

Box

, like this: ------------

@Composable
fun SomeComposable(onClick: (Int) -> Unit) {
    var someState by remember { mutableStateOf(0) }

    Box(modifier = Modifier.testTag("Zivi").pointerInteropFilter {
        someState = when (it.action) {
            MotionEvent.ACTION_DOWN -> { 1 }
            MotionEvent.ACTION_UP -> { 2 }
            else -> { someState  }
        }
        true

    }) {}

    LaunchedEffect(someState) {
        println("LaunchedEffect someState $someState") // prints "LaunchedEffect someState 0"
        if (someState == 2) { onClick(someState) }
    }
}

Then the

LaunchedEffect

is not called on

performClick

, can anyone help me understand why?

While migrating some screen from Views to Compose there was an inconsistency regarding the background color that I’d like to hear more about. Basically we’ve in some places relied on the functionality of the

OutlinedButton

style having a transparent background. This doesn’t seem to be the case in the compose version as it defines the

surface

color of the

MaterialTheme

as its background instead. I would love to hear more about what is the idea behind it? More often than not, when using an

Outlined

button, one would like to have it show the text and the outline but blend in with whatever is in the background by basically having no background. That is since what’s behind it often is not a

surface

. It could be for an image or some color close to surface not not quite the same. My guess would be that this was done to ensure a proper pair of surface/onSurface color to ensure accessibility, so it this the reason? Anything else I’m missing? We’re considering altering our design system’s outlined button to always have a transparent background (while still using onSurface for the content) and I would basically like to hear more about this to see why we may want/not want to do this. Assuming we’re taking care of making the content legible on a per-case basis of course.

I'm getting some really bizarre behaviour in an android application where I'm trying to integrate compose. It seems like a nice way to dip our toe in is to use

ComposeView

inside a

Fragment

- it works well with our current navigation system, but we're noticing things like

TextField

will not update consistently on text entry. The exact same composable in a

ComponentActivity

works as expected. Is there some particular stuff I need to be wary of when using JC with Fragments?

Hi all, I feel stuck. I have a MainScreen-Composable that contains a scaffold with a fab that is changing it's actions depending on the current screen shown in Scaffold-Content. One of those screens is the AddItem-Screen Composable that contains some TextFields. When I click on the FAB (in MainScreen-Composable) I want to keep the AddItem-Screen-State (the Text-Fields-Input) and call the AddItemViewModel.onFabSaveClicked() method (both in AdddItemScreen-Viemodel). It would be a no-brainer if the scaffold was inside AddItem-Screen-Composable but now I don't know how trigger AddItemViewModel.onFabSavedClicked() from the Fab in the MainScreen-Composable.

I have a

Row

component that has two slots for text. Both texts can be of varying length, and I’m having a hard time getting the component to balance the text’s width so that the longest text takes the rest of the available space, and also weigh them equally if both texts are long. The closest I’ve been able to get is using equal values of

Modifier.weight()

, but that does not solve the case where one text is longer than the other. The first image is using

weight()

, and the second is what I’m trying to achieve. Code and more examples in thread 🧵

Are modal screens (dialogs or bottom sheet from accompanist) expected to not stay in the back stack after navigating away from them? I've had issues opened on my library about this and I'm not sure if this is expected. At the moment they are not kept unless we navigate to another modal screen. So is this intended or should I open an issue?