kotlinlang #compose

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 👇🏼

👏 4

🔥 12

👍 8

🙏🏽 3

❤️ 16

Socheat KHAUV

10/22/2020, 7:21 AM

Copy code

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)
        }
    )
}

Socheat KHAUV

10/22/2020, 7:51 AM

@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

Copy code

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.

🪲 1

Halil Ozercan

10/22/2020, 8:23 AM

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?

Daniele B

10/22/2020, 9:47 AM

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 ?

William Barbosa

10/22/2020, 11:24 AM

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

👀 1

Chethan

10/22/2020, 11:46 AM

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

Copy code

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))
        }
    }
}

Screen_recording.mov

József Szilvási

10/22/2020, 12:13 PM

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.

Daniele B

10/22/2020, 12:23 PM

There is something I don’t understand about Theming. I have defined my own typography:

Copy code

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

Copy code

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:

Copy code

Text(text = row.nome, style = typography.body1, fontWeight = FontWeight.Bold)

How is it supposed to work?

Dylan

10/22/2020, 12:27 PM

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

👀 2

Grigorii Yurkov

10/22/2020, 12:54 PM

Please, help, what do I do wrong? I'm trying to make simple switch

alorma

10/22/2020, 2:01 PM

With Scaffold, is possible to create a drawer that opens from END?

jaqxues

10/22/2020, 2:37 PM

Switches are not supposed to look like this, are they?

Grigorii Yurkov

10/22/2020, 3:02 PM

I have MyScreen Composable function. I want to load some data from server when this screen appears. In usual android I would use

onResume()

and what I supposed to do now.

P.J.

10/22/2020, 3:44 PM

On a similar note, how to handle navigating to a screen that is not the

startDestination

when the main activity is launched from a notification and was destroyed before?

onNewIntent()

isn't called and the navigation graph doesn't exist yet. Appreciate any ideas.

mattinger

10/22/2020, 4:10 PM

Hey all. I’m a little confused as to how to do certain things to test compose layouts. I see the rules available in the test module, however a typical test would use ID values and validate the contents of the view (such as it’s visibility, it’s content, etc..). Based on the documentation it doesn’t look like you can do that. Selecting nodes based on their text content seems problematic at best (which is why we avoid in current espresso tests). I’m also trying to figure out how to do robolectric testing using FragmentScenario, since we would typically find views of the fragment object that’s being spun up. I’m wondering if layoutId on modifier is the way to do this?

Jeisson Sáchica

10/22/2020, 5:40 PM

Hey guys! I have a question. Is there a reason why creating a custom shape that uses the Outline.Rect where width or height are zero draws it with the whole width and height? Ex:

Copy code

@Stable
val EmptyRectangleShape: Shape = object: Shape {
    override fun createOutline(size: Size, density: Density): Outline =
        Outline.Rectangle(Rect.Zero)
}

Alexander Sitnikov

10/22/2020, 5:53 PM

I want to create a card flip animation (

like this▾

), and the only way I found is using

Modifier.drawLayer(rotationY = someValue)

, but this animation looks too distorted (

like this▾

). View has

setCameraDistance()

method, and RenderNode has this method too, but Compose doesn't use any of them. It seems to me that

rotationY

parameter is kinda useless without camera distance. Is there any way to create this card flip animation other than

drawLayer

? Or maybe there's plans to include support for camera distance in future versions of Compose?

Grigorii Yurkov

10/22/2020, 7:21 PM

I can't find

LiveData<T>.observeAsState()

function. Where is it located?

P.J.

10/22/2020, 7:53 PM

Copy code

java.lang.NoClassDefFoundError: Failed resolution of: Landroidx/compose/runtime/savedinstancestate/RestorableStateHolderKt;
        at androidx.navigation.compose.NavHostKt.NavHost(NavHost.kt:104)
        at androidx.navigation.compose.NavHostKt.NavHost(NavHost.kt:58)

Currently getting this on latest snapshot build when

NavHost()

is called, was trying out deep links/args with compose navigation. Anyone else or is this on my end? Edit: Seems to be happening when going from build 6921995 to 6922573

Grigorii Yurkov

10/22/2020, 8:49 PM

I am not sure, is this code effective?

Copy code

@Composable
fun Test() {
    var checked by remember { mutableStateOf(isMyServiceRunning()) }
    if (checked) {
        startMyService()
    } else {
        stopMyService()
    }
    Switch(checked = checked, onCheckedChange = { checked = it})
    // ... A lot of others composable functions
}

As far as I understand, one switch will cause recomposition of entire

Test()

function, won't it?

alorma

10/23/2020, 9:16 AM

Is there a "tab" or GridLayout for compose?

Mayank Saini

10/23/2020, 9:28 AM

Hi everyone, How can I make

Text

marquee? Any ideas?

✔️ 1

Irving

10/23/2020, 9:43 AM

Hello everyone.How could I start the

animatedValue

animation.I could start the

animate

animation by supply a different

target

.And I also try it for

animatedValue

animatedFloat

but it doesn't work.

jaqxues

10/23/2020, 5:16 PM

Why is there no

EmphasisLevel.Low

? The difference and contrast between High and Medium is pretty stark if you want to fine tune the Emphasis. So why not simply add a

Low

when there is

High

and

Medium

👍 2

Luke

10/23/2020, 5:49 PM

Hi, I have a

FloatingActionButton

over a

LazyColumnFor

and I’m trying to add bottom padding on the content of the column so the last element is not hidden by the FAB, like this:

Copy code

LazyColumnFor(
    items = itemList, 
    contentPadding = PaddingValues(bottom = 88.dp),
    ...
) { ... }

It works almost perfectly, but the items appear in the padding suddenly as they reach the column content frame. I would prefer them being drawn even if they are only visible in the padding. I guess I’m looking for an equivalent to

android:clipToPadding="false"

. Any tips?

Grigorii Yurkov

10/23/2020, 6:31 PM

I am trying to make toolbar without menu icon.

Copy code

@Preview
@Composable
fun MyToolbar() {
    Text(
        text = "My Toolbar",
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp,
        modifier = Modifier.background(MaterialTheme.colors.primary).height(56.dp).fillMaxWidth(),
        textAlign = TextAlign.Left,
        color = Color.White
    )
}

I decided to use

Text

, but it doesn't want to align left

Gabriel

10/23/2020, 7:09 PM

I'm using one of the snapshots of compose for playing with navigation, but I'm not sure how to pass arguments through, for eg I have a list of images, I click on one and want to be taken through to the next screen but with the id or something of the image passed through

Daniels Šatcs

10/23/2020, 9:44 PM

I'm trying to use a Scaffold layout, with a modal drawer and a ScrollableColumn as bodyContent and experiencing some gesture issues.

Copy code

@Composable
fun drawer() {
    val scrollState = rememberScrollState()
    Scaffold(
            drawerContent = {},
    ) {
        ScrollableColumn(scrollState = scrollState) {
            1.until(1000).forEach {
                Text(modifier = Modifier.padding(8.dp).fillMaxWidth(), text = it.toString())
            }
        }
    }
}

For some reason scrolling the list right after the drawer is closed does not seem to work. Waiting half a second before scrolling works, but that's not how a user would expect it to behave. My guess is that the drawer's scrim is blocking the touch events from coming through. Is this a known issue or is this in any way the intended behavior? Attaching a video

20-10-24-00-28-35.mp4

Guy Bieber

10/23/2020, 9:54 PM

Architecture question. I have a model, view, viewmodel setup. Since those terms can be misinterpreted I will give you my summary: model -> state that drives the view and outside interactions view -> composables driven by the model and with hooks for viewmodel actions viewmodel -> changes the model to change the view. handles view actions. handles outside actions. I have an application that has a pager that drives the rest of the logged in view, which in my case is a tabcontroller. Should I have pre-created views for all the page selections or just create views on the fly when a new page is selected. More concretely there is a horizontal pager that picks a vehicle to control. There are performance tradeoffs I am sure, but what would be best practice. Likely, the number of pages is relatively low (under 10). Thoughts?