• v

    Vinay Gaba

    1 year ago
    Hello wonderful people of #compose, I’m excited to introduce another addition to JetpackCompose.app! There’s a ton exciting development happening in Compose land but there’s no easy way to discover it 😞 Compose Catalog makes it easy to discover the latest and greatest in Jetpack Compose 💥 In order to make it easy to contribute, I also finally open sourced the site - https://github.com/vinaygaba/JetpackCompose.app Demo in the thread 👇🏼
    v
    Ash
    +2
    10 replies
    Copy to Clipboard
  • s

    Socheat KHAUV

    1 year ago
    ConstraintLayout {
        val (imageRef: ConstrainedLayoutReference,
            text1Ref: ConstrainedLayoutReference,
            text2Ref: ConstrainedLayoutReference,
            text3Ref: ConstrainedLayoutReference) = createRefs()
        Image(
            asset = imageResource(id = R.drawable.hq720),
            modifier = Modifier.constrainAs(
                imageRef
            ) {
                top.linkTo(anchor = parent.top, margin = 0.dp)
                start.linkTo(anchor = parent.start, margin = 0.dp)
            } then Modifier.preferredWidth(100.dp)
        )
        Text(
            text = "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30",
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            style = MaterialTheme.typography.subtitle1.copy(fontSize = 12.sp),
            color = Color.White,
            modifier = Modifier.constrainAs(
                text1Ref
            ) {
                start.linkTo(anchor = imageRef.end, margin = 0.dp)
                end.linkTo(anchor = parent.end, margin = 0.dp)
                top.linkTo(anchor = parent.top, margin = 0.dp)
            }
        )
        Text(
            text = "Simply Nailogica!",
            style = MaterialTheme.typography.caption.copy(fontSize = 7.sp),
            color = Color.White,
            modifier = Modifier.constrainAs(
                text2Ref
            ) {
                start.linkTo(anchor = imageRef.end, margin = 0.dp)
                end.linkTo(anchor = parent.end, margin = 0.dp)
                top.linkTo(anchor = text1Ref.bottom, margin = 0.dp)
            }
        )
        Text(
            text = "2 views 31/08/2020 * Stream",
            style = MaterialTheme.typography.caption.copy(fontSize = 6.sp),
            color = Color.White,
            modifier = Modifier.constrainAs(
                text3Ref
            ) {
                start.linkTo(imageRef.end)
                end.linkTo(parent.end)
                bottom.linkTo(imageRef.bottom)
            }
        )
    }
    s
    t
    5 replies
    Copy to Clipboard
  • s

    Socheat KHAUV

    1 year ago
    @Vinay Gaba - I checked your constraint layout example from github (https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example) and see this file "ConstraintLayoutActivity.kt" and this function "SimpleConstraintLayoutComponent" if I change the title text to the following
    Text(
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            text = "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30", style = TextStyle(
            fontFamily = FontFamily.Serif,
            fontWeight =
            FontWeight.W900,
            fontSize = 14.sp,
    )
    then the title text will look become weird, I am not sure it is constraint layout bug or I missed out something.
    s
    t
    2 replies
    Copy to Clipboard
  • Halil Ozercan

    Halil Ozercan

    1 year ago
    Hey everyone, this question is directed to the compose team or anyone else who might be interested in. Recently I got reminded of

    https://youtu.be/PaPUkxYHDUw

    , clock challenge for flutter. It was awesome to see all those creative designs coming to life using Flutter. Is there any competition like that also planned for compose in the future? Or is there anyone else who might be interested in organizing something unofficial?
    Halil Ozercan
    1 replies
    Copy to Clipboard
  • d

    Daniele B

    1 year ago
    The
    Text
    composable seems to only accept
    sp
    font-sizes, and not
    dp
    . There are some situations, where using
    sp
    (i.e. allowing the system to adjust the text size according to user general settings) is going to break a layout. So you want to couple the text to the layout (e.g. when you want to display a text on just one line, which has a limited width). On the traditional Android view system, it was possible to use
    dp
    instead of
    sp
    for text. How can I deal with this in JetpackCompose ?
    d
    c
    +2
    16 replies
    Copy to Clipboard
  • w

    William Barbosa

    1 year ago
    What's the compose equivalent of Autofill annotations that trigger a password manager prompt? Googling for this is hell on earth because there's a jetpack library called autofill x_x
    w
    Bryan Herbst
    +1
    5 replies
    Copy to Clipboard
  • Chethan

    Chethan

    1 year ago
    I came across this situation , I have ScrollableColumn and having many clickable items , along with a Textfield.  editing textfield and dismissing emulator keypad leading into a situation where I unable to click exact button, it takes input some where else, Although buttons are clickable, it takes click some where else . I am afraid I am the only one facing this ? I am guessing that TextField function recomposing under ScrollableColumn, it could be the case where the position of other views on the screen got changed every time TextField recomposes under scrollable column. Could you help here ? below is complete code to reproduce
    import androidx.compose.foundation.ScrollableColumn
    import androidx.compose.foundation.Text
    import androidx.compose.foundation.background
    import androidx.compose.foundation.border
    import androidx.compose.foundation.layout.*
    import androidx.compose.foundation.selection.selectable
    import androidx.compose.foundation.shape.CircleShape
    import androidx.compose.material.OutlinedTextField
    import androidx.compose.material.ripple.RippleIndication
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.text.TextStyle
    import androidx.compose.ui.text.input.KeyboardType
    import androidx.compose.ui.text.style.TextAlign
    import androidx.compose.ui.unit.Dp
    import androidx.compose.ui.unit.dp
    import androidx.compose.ui.unit.sp
    import androidx.ui.tooling.preview.Preview
    
    @Preview
    @Composable
    fun Preview() {
        ScrollableColumn(modifier = Modifier.fillMaxWidth().background(Color.DarkGray)) {
            (1..10).forEach {
                Button(50.dp, 16)
            }
    
            var text = remember { mutableStateOf("") }
            OutlinedTextField(
                value = text.value,
                keyboardType = KeyboardType.Text,
                onValueChange = { text.value = it },
    
                )
        }
    }
    
    @Composable
    fun Button(buttonSize: Dp, fontSize: Int) {
        Row(
            modifier = Modifier.wrapContentWidth().wrapContentHeight().padding(top = 10.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
    
            val toggleIndex = remember { mutableStateOf(0) }
            (1..5).forEach { index ->
                val isSelected = toggleIndex.value == index
    
                Box(
                    modifier = Modifier
                        .border(
                            1.dp,
                            color = if (isSelected) Color.Black else Color.White,
                            CircleShape
                        )
                        .background(
                            color = if (isSelected) Color.Black else Color.White,
                            shape = CircleShape
                        )
                        .selectable(
                            enabled = true,
                            selected = true,
                            onClick = { toggleIndex.value = index },
                            indication = RippleIndication(bounded = true, radius = 24.dp)
                        ).preferredSize(buttonSize)
                ) {
    
                    Text(
                        text = index.toString(),
                        style = TextStyle(
                            color = if (isSelected) Color.White else Color.Black,
                            fontSize = fontSize.sp,
                            textAlign = TextAlign.Center
                        ),
                        modifier = Modifier.align(Alignment.Center)
    
                    )
                }
    
                Spacer(modifier = Modifier.width(10.dp))
            }
        }
    }
    Chethan
    t
    +1
    6 replies
    Copy to Clipboard
  • József Szilvási

    József Szilvási

    1 year ago
    Hey, I want to create a simple OTP/PIN layout, any ideas how to do it easily? Jumping one TextField to another doesn't seem like a pretty solution to me, but I have no other idea ATM.
    József Szilvási
    s
    +1
    5 replies
    Copy to Clipboard
  • d

    Daniele B

    1 year ago
    There is something I don’t understand about Theming. I have defined my own typography:
    val typography = Typography(
        body1 = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 20.sp,
            letterSpacing = 0.5.sp
        )
    )
    If I change the fontsize on my own typography, it also seems to affect Texts where I specify a
    MaterialTheme
    style
    Text(text = row.nome, style = MaterialTheme.typography.body1, fontWeight = FontWeight.Bold)
    I was expecting it would only affect Text where my own typography is specified:
    Text(text = row.nome, style = typography.body1, fontWeight = FontWeight.Bold)
    How is it supposed to work?
    d
    Halil Ozercan
    +1
    6 replies
    Copy to Clipboard
  • d

    Dylan

    1 year ago
    Hey there, I just created a small library for Jetpack Compose which allows you to easily create edge-to-edge apps. I'd love to know what you think about it! Let me know if you have any suggestions 🙂 https://github.com/evowizz/compose-to-edge
    d
    Colton Idle
    2 replies
    Copy to Clipboard