Hello everyone, I built a youtube-like videoplayer using 100% Compose. This was my initial challenge to get a hang of Compose for the first time. Foremost, I want to thank everyone in this channel who created a very welcoming and helpful environment. It was a blast getting to understand some fundamental concepts like states, ambients, and composition callbacks. Also, implementing a SeekBar sent me down a very low level journey on gesture detection in compose. I'm planning to open source the app when I'm confident with the code (best practices were not applied all the time 🙂 )

Above snippet is the drawerContent in the BottomDrawerLayout)

Is there any way to rotate a component?

Are the source code for

1.4.0-dev-withExperimentalGoogleExtensions-20200720

kotlin-compiler available online anywhere?

Can I make a composable function that will show up some content on top of its children?

@Horv The plugin itself or the extensions in the compiler?

I am trying to make a child composable non-interactive under certain conditions. I don’t know anything about the child composable and can’t change its definition either(so can’t simply pass a modifier to it). So I was trying to wrap it inside a Box and then applying the

rawPressStartGestureFilter

to it. This actually works but it also ends up interfering with the scroll of the screen that these composables are on (this is expected as this is how you’d expect this gesture filter to work). Is there a better way to accomplish this? Just using

tap

or

clickable

on the parent composable still propagates the touch to the child composable so I need a better way to intercept the touch while keeping the scroll functionality intact.

I noticed that there isn’t a

Modifier.margin

in compose. Is there a way to achieve something similar to margin?

Consider the Box:

Box(backgroundColor = Color.Blue) {
   Text("Foo")
}

Without specifying any height or width constraints, the

Box

will automatically size to be the size of the Text (picture 1). Now, consider picture 2. The text

Foo

is not a child of the left box, or the right one. Therefore a possible implementation of that would use a

Stack

.

Stack {
        Row {
            Box(Modifier.weight(1f).fillMaxWidth(), backgroundColor = Color.Blue)
            Box(Modifier.weight(1f).fillMaxWidth(), backgroundColor = Color.Red)
        }
        Text(text = "foo", textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth())
    }

The problem now though, is that

Box

has no children, and would have a height of 0. Here's another attempt using `ConstraintLayout`:

ConstraintLayout {
    val (left,right,text) = createRefs()
    Box(backgroundColor = Color.Blue, modifier = Modifier.weight(1f).constrainAs(left){
        linkTo(start = parent.start, end = right.start)
    })
    Box(backgroundColor = Color.Red,modifier = Modifier.weight(1f).constrainAs(right){
        linkTo(start = left.start, end = parent.end)
    })

    Text(text = "foo", modifier = Modifier.constrainAs(text){
        linkTo(start = left.start, end = right.end, bottom = left.bottom, top = left.top)
    })
}

This has the same reult as the

Stack

approach, with the boxes not showing at all. So how do I communicate to compose that the boxes should be at least the size of the text? The aim is to not hardcode constraints such as

Modifier.height()

.

Do the

Preview

functions get stripped out during compile or does it just rely on r8/proguard to strip the unused code?

Does kotlin 1.4.0-rc support Compose 0.1.0-dev15?

is preview working in dev15?

Is it possible to use multiplatform gradle plugin to try @Composable functions ?

plugins {
    id("com.android.library")
    kotlin("multiplatform")
}

instead of

plugins {
    id("com.android.library")
    id("kotlin-android")
}

What should I do if displaying a few items in a

LazyColumnItems

lags the screen for like 0.5 seconds when displayed? Is this perhaps because this is a preview, or do I have some way of profiling where the device spends its time?

var state by savedInstanceState{0}
Button(onClick ={state++}) {
    Text(text = "Increase $state")
}

Am I right in thinking

state

should be saved when I restart the app? Because it doesn't do that

class UserViewModel : ViewModel() {
    private val _username = MutableLiveData<String>()
    val username: LiveData<String>
        get() = _username

    private val _password = MutableLiveData<String>()
    val password: LiveData<String>
        get() = _password

    init {
        setUsername("")
        setPassword("")
    }

    fun setUsername(username: String) {
        _username.value = username
    }

    fun setPassword(password: String) {
        _password.value = password
    }

}

@Composable
fun LoginView(userViewModel: UserViewModel) {
    val context = ContextAmbient.current

    Column(
        modifier = Modifier.fillMaxWidth().padding(top = Dp(50.0F)),
        horizontalGravity = Alignment.CenterHorizontally
    ) {
        FilledTextField(
            value = userViewModel.username.toString(),
            onValueChange = { it: String ->
                userViewModel.setUsername(it)
            },
            label = { Text(stringResource(id = R.string.username_label)) },
            backgroundColor = Color.Transparent,
            placeholder = { Text(stringResource(id = R.string.username_placeholder)) },
            keyboardType = KeyboardType.Email,
            activeColor = colorResource(id = R.color.mastery_main)
        )

        FilledTextField(
            value = userViewModel.password.toString(),
            onValueChange = { it: String ->
                userViewModel.setPassword(it)
            },
            label = { Text(stringResource(id = R.string.password_label)) },
            backgroundColor = Color.Transparent,
            visualTransformation = PasswordVisualTransformation(),
            keyboardType = KeyboardType.Password,
            activeColor = colorResource(id = R.color.mastery_main)
        )
    }
}

I have something like this for my login view and believe I’m using the LiveData correctly but I am seeing the object reference in the field and not the string value of username or password, thoughts?

I have been trying to play around

state

in Compose dev15. So, if create a state like

val numState by state { 0 }

, and use this in any composable like Text, it works good and fine. On doing

numState++

, the Text updates. But, if I use some custom data class like this below code:

data class Point(val x:Int = 0, val y:Int = 0)

And using this class to create state like

val pointState by state { Point(3,4) }

, and now if I update this like

pointState.x++

, then the Composables using this state aren't recomposed and updated. I don't understand how am I supposed to use state?

Just getting into Compose, struggling a bit with styling and themes. What's the best practice way to set text color? I'd imagined Text-komponent would pick some color from my Theme's colors but that doesn't seem to be the case?

Does anyone have a Flow<> example with Compose for observing a list?

My Android Studio Kotlin plugin updated however now I’m getting errors for all my Compose code saying it was compiled using a pre-released version of Kotlin. Perhaps related to https://kotlinlang.slack.com/archives/CJLTWPH7S/p1595908172474900 🤔

Maybe I’m misunderstanding the first parameter of

state

but it seems like it makes it so writes to the variable somehow get ignored, so I would change the value but after the recomposition the value is the same as it was before. I can’t really give a complete example since its in a middle of a lot of things and this only happens in exactly the second instance of this state variable. But the magical nature of remember {} and such make it impossible to debug. At this point it seems it would be easier to roll out my own implementation of state.

Pulling this out of the thread to avoid derailing it… What does this mean for

savedInstanceState

? Looks like it’s stuck around for now?

About

@Preview

, will the @Preview marked method be removed (or changed) when assembling release build?

I'm creating a "Sign in with Google"-button for my Android app and looking at https://developers.google.com/identity/branding-guidelines for guidence. However, when adding the icon it seems the image get's some sort of border/shadow. How do I remove that?

Button(
                    onClick = {
                        Log.d("Login", "ButtonClicked!")
                        handleLoginButtonPress(loginFragment, context)
                    },
                    backgroundColor = Color.White,
                    padding = InnerPadding(8.dp)
                ) {
                    Image(
                        asset = imageResource(id = R.drawable.btn_google_light_normal_hdpi),
                        modifier = Modifier.height(40.dp)
                            .padding(0.dp)
                            .absolutePadding(0.dp, 0.dp, 0.dp, 0.dp)
                            .drawShadow(0.dp),
                        contentScale = ContentScale.Inside
                    )
                    Text(
                        "Sign in with Google",
                        color = Color(75, 75, 75),
                        fontFamily = fontFamily(listOf(font(R.font.roboto_medium))),
                        modifier = Modifier.padding(24.dp, 0.dp, 0.dp, 0.dp)
                    )
                }

Hi! I have heard a lot about Jetpack Compose from Google's devs, and it really seems to me like it's going to be a big change to how we view UI, as developers. Google has hinted multiple times that it was technically possible to run it on other platforms (web, desktop) but they're not planning (at least at the moment) on making that leap. I guess it's quite a big commitment and they'd rather be sure that it's working perfectly before adding a lot of work on their plates ^^ Well, I think that probably means it should be a community effort. I'd like to know if there's already an open source project working on this, or some other way I can contribute to make this a reality. I think Compose and Kotlin Multiplatform are the perfect blend that will finally make it possible to write a UI once for everything :)

Isn't

Modifier

the new

LayoutParams

in a way?

Random q: UI Components, Widgets, Views Is there anything on the list or elsewhere that you’ll use interchangeably with “Composable function”? I personally like “UI Component” when I’m speaking about a Composable function but wondering what this group thinks.

What was the function to check if we are currently in a

@Preview

? I remember there was one but I can't find it. Something like

Something.isInPreview()

How do we load images from the web? I thought I saw a Composable to do that, with a temporary image (placeholder)…