kotlinlang #compose

Docs

Join the conversation Join Slack

Channels

100daysofcode

androidgithubprojects

cincinnati-user-group

competitive-programming

event21-community-content

java-to-kotlin-refactoring

jvm-ir-backend-feedback

kotlin-multiplatform-contest

kotlinultimatechallenge

myndocs-oauth2-server

naming

navigation-architecture-component

practical-functional-programming

proguard

prozis-android-backup

refactoring-to-kotlin

russian-kotlinasfirst

skia-wasm-interop-temp

stayhungrystayfoolish

swagger-gradle-codegen

tricity-kotlin-user-group

compose

amar_1995

12/23/2019, 12:27 PM

I am getting below error when using

+state

and passing into

ModelDrawerLayout

as drawerContent.

ERR: stack=java.lang.IllegalStateException: Expected a group start

But when i am not using

+state

then there will be no issue.

Bryan Lee

12/23/2019, 10:56 PM

Is it intended behavior to not be able to call a composable function from Clickable(onClick={ ComposableFoo() }){...}? I get the "Composition requires active composition context" error if I try to do this.

:yes: 2

codeslubber

12/23/2019, 11:34 PM

wait yes it does, you still have to use the +, I thought that was gone..

codeslubber

12/24/2019, 3:06 AM

Turns out a project created using the Compose Activity template does not include Foundation..

implementation("androidx.ui:ui-foundation:0.1.0-dev03")

has to be added to the gradle app file for the image stuff to work..

david.bilik

12/24/2019, 8:47 AM

👋 hi, I’m playing with JetNews sample and I was curious why the Ripple of simple Story item is not side-to-side of the screen and also why click events are not triggered when clicked on side but I cant see why is that in the code. There is no padding on the screen, the row looks like

@Composable
fun PostCardSimple(post: Post) {
    Ripple(bounded = true) {
        Clickable(onClick = {
            navigateTo(Screen.Article(post.id))
        }) {
            Row(modifier = Spacing(16.dp)) {
                PostImage(modifier = Spacing(right = 16.dp), post = post)
                Column(modifier = Flexible(1f)) {
                    PostTitle(post)
                    AuthorAndReadTime(post)
                }
                BookmarkButton(
                    isBookmarked = isFavorite(postId = post.id),
                    onBookmark = { toggleBookmark(postId = post.id) }
                )
            }
        }
    }
}

and the padding is controled via

Spacing

modifier of the

Row

. Is it possible that both

Ripple

and

Clickable

react only for inner elements and ignores padding around them?

aoriani

12/24/2019, 9:14 AM

@Composable
fun PostCardSimple(post: Post) {
    Ripple(bounded = true) {
        Clickable(onClick = {
            navigateTo(Screen.Article(post.id))
        }) {
            Container(modifier = ExpandedWidth) {
                Row(modifier = Spacing(16.dp)) {
                    PostImage(modifier = Spacing(right = 16.dp), post = post)
                    Column(modifier = Flexible(1f)) {
                        PostTitle(post)
                        AuthorAndReadTime(post)
                    }
                    BookmarkButton(
                        isBookmarked = isFavorite(postId = post.id),
                        onBookmark = { toggleBookmark(postId = post.id) }
                    )
                }
            }
        }
    }
}

dimsuz

12/24/2019, 1:28 PM

Clickable(onClick =

I wonder why Compose continued with "clicks"? Wouldnt "onTap" be more correct in the mobile world? I don't click on anything in my phone 🙂

👍 1

codeslubber

12/24/2019, 9:57 PM

Found a pretty hilarious thing in the tiny Compose demo: the container that is added to use a masking shape for the image, uses a modifier, when in fact, it should look like this:

Column {
    Container(width = 180.dp, height = 180.dp){
        Clip(shape = RoundedCornerShape(90.dp)) {
            DrawImage(image = image)
        }
    }

Container has width and height. :)

Kstabks

12/25/2019, 10:06 AM

Hi, I have some question regarding UI written in XML - will the ConstraintLayout/Motion Layout and other layouts become deprecated once the jetpack compose will be ready for production?

amar_1995

12/25/2019, 1:10 PM

Is there any doc or project which uses Android compose with Android architecture components( like livedata, viewmodel, retrofit, web service) ?

Manuel Wrage

12/25/2019, 1:35 PM

Is it planned to provide a style ambient for each material component? E.g. a ButtonStyleAmbient to change the default style of all buttons. Because it looks like code can get a bit messy if there will be no way for global theming.

Bryan Lee

12/26/2019, 4:24 PM

Is there a "composable" way of sharing data between screens like how you could use a shared view model for sharing data between fragments?

➕ 1

Bryan Lee

12/26/2019, 7:10 PM

Do we have to manage the destruction of composable views ourselves as of now? I consistently get OutOfMemoryError after opening a list of items X amount of times

shikasd

12/27/2019, 12:35 AM

Hey, I was looking into build pipeline for compose compiler plugin and one thing that I stumbled upon is that it is not connected to the rest of the projects in

platform/frameworks/support/settings.gradle

. Do you set it up differently somehow?

amar_1995

12/27/2019, 7:38 AM

Is there working sample/example of how to use

onActive

onCommit

onDispose

. I read the sample provided by google, yet not able to figure out how to use it in activity lifecycle. Can anyone explain with proper example how to use dispose with onActive and onCommit.

Nikit Bhandari

12/28/2019, 8:24 PM

Hey, in Clickable what's the use of consumeDownOnStart parameter ? What exactly is a down event? I couldn't find any difference in the behaviour of Clickable when I changed the value of the above parameter. (Except for the case when I wrapped it around a Ripple component)

Dmitri Sh

12/29/2019, 1:38 AM

didn't realize there was a channel on compose. Posted this on the android channel, reposting here (only here) as this seems to be a more appropriate channel - Very basic Jetpack Compose view - getting this exception - caused by: java.lang.OutOfMemoryError: GC overhead limit exceeded - anyone experiencing this?

bkenn

12/29/2019, 4:16 AM

I would like to navigate to a splash screen, perform an animation for a specified duration and then navigate to another screen. Is there a better way than placing the following inside my splash screen composable function? The navigateTo modifies a property in a Model object.

GlobalScope.launch(Dispatchers.Main) {
    // replace delay with some kind of animation on ui elements
    delay(2000)
    navigateTo(Screen.Question)
}

aoriani

12/29/2019, 8:37 PM

How to resize a Vector Image? I am trying to do like the

VectorImage

from the JetNews app by setting the

Size

modifier of the

Container

to the size I want, and passing

fit = ScaleFit.FillMinDimension

to the

DrawVector

call. Bu that is not working. It seems that the vector is being resized, however it is clipped to its intrinsic or viewport size.

Kashif

12/31/2019, 8:02 AM

hey folks when there is xml tool available for ui design then what is purpose of introducing "Jectpack Compose"?

amar_1995

12/31/2019, 10:03 AM

Is there any difference between

@Composable() () -> Unit

and

() -> Unit

function signature. I am using

AlertDialog

and in documenation (https://developer.android.com/reference/kotlin/androidx/ui/material/package-summary#alertdialog) the function signature is different then in code. In documentation it is:

@Composable fun AlertDialog(
    onCloseRequest: () -> Unit, 
    title: () -> Unit = null, 
    text: () -> Unit, 
    confirmButton: () -> Unit, 
    dismissButton: () -> Unit = null, 
    buttonLayout: AlertDialogButtonLayout = AlertDialogButtonLayout.SideBySide): Unit

In dev3 code it is:

@Composable
fun AlertDialog(
    onCloseRequest: () -> Unit,
    title: @Composable() (() -> Unit)? = null,
    text: @Composable() () -> Unit,
    confirmButton: @Composable() () -> Unit,
    dismissButton: @Composable() (() -> Unit)? = null,
    buttonLayout: AlertDialogButtonLayout = AlertDialogButtonLayout.SideBySide
) : Unit

Ian Warwick

12/31/2019, 11:21 AM

Hey folks, nearly happy new year here, really digging Compose, amazing work! I have been looking at a URI based navigation and wrote this front controller like

Router

pattern for a single activity approach using compose where you can specify URI routings to compositions - you can do something like this in your single activity

class MainActivity : AppCompatActivity() {
    private val router = Router(this) {
        schemes("https", "http")
        hosts("<http://memset.com|memset.com>", "<http://www.memset.com|www.memset.com>")

        "/" composeWith { HomeScreenComposer() }
        "/cardeditor" composeWith { CardEditorScreenComposer(model(CardEditorViewModel::class)) }
        ".*" composeTo { Text("404 Not Found") }

    }.startAt("<https://memset.com/>")
}

Then later in your composition you can get at the router using an ambient

val router = +ambient(ActiveRouter)

And navigate to another composition

router.goto("<http://memset.com/anywhere>")

The problem is that if I get at the ambient inside an

onClick

listener since the listener is not

@Composable() () -> Unit

I get an error composition requires an active composition context Declaring the ambient ref outside the click listener works fine, before I was passing around

router: Router

to functions though learned about Ambient and thought why not try 😆 seems quite cool is it the right way to go for this sort of thing? apologies if the question is not relevant here, full source here:- https://github.com/fluxtah/memset

Pedro Veloso

12/31/2019, 4:09 PM

Probably could use some update given the fast-paced changes of Compose, but here's my presentation from this year's SF DroidCon: https://www.droidcon.com/media-detail?video=380845080

👍 2

Bryan Lee

12/31/2019, 9:51 PM

If trying to integrate Compose into existing applications that use something like Single Activity Multiple Fragments, would you continue with creating new fragments when a new view/screen is needed and just inflating a composable view with setContent{} instead of an xml layout? Or would you end up creating a 'root' fragment somewhere that hosts navigation for any new composable views, similar to how JetNews uses JetNewsApp & Status? Sorry if that doesn't really make sense. I'll try to clarify if needed.

Bryan Lee

12/31/2019, 11:38 PM

Anyone know what this error means? I believe it happens when I try to override onDestroyView() in a Fragment. java.lang.NoSuchMethodError: No virtual method _$_clearFindViewByIdCache()V in class Lcom/../MyFragment; or its super classes (declaration of 'com...MyFragment' appears in /data/app/com.example.composesample-1/base.apk:classes2.dex) at com.example.composesample.ui.util.MyFragment.onDestroyView(MyFragment.kt:28) If I change it to something like onDestroy(), there are no problems.

Kashif

01/01/2020, 8:34 AM

I am confused now … Google android is shifting us to move from xml/designer tool to code (jetpack compose) whereas Google Flutter starts with “design ui with code” and now they are developing ui designer tool (Adobe XD)

Ian Warwick

01/02/2020, 9:29 AM

Has there been any mention of dealing with orientation changes and state persistence? I see JetNews uses global variables to store state and wonder if this is the proposed solution or one that JetNews just took (which is feasible of course) or if there is some way to init state and persist it as long as the current activity including config changes like view models do?

Zsolt

01/03/2020, 1:22 AM

Happy to share https://github.com/zsoltk/compose-router, which supports a single-Activity, Compose-only approach to write apps. Navigation is based on routing with sealed classes. Every routing level has its own back stack, and back press can be bound to pop it. There's ambient scoped savedInstanceState associated with every back stack element, so that when you go back in history, state gets restored as well. Latest addition is deep link based routing which adds a remote control to set the app into any pre-defined combination of routing states. Personally I find Compose to be a lot of fun to work with, and would love to see it drive a whole app, not just its UI.

👏 2

👍🏻 13

codeslubber

01/03/2020, 1:50 AM

Has anyone done a

DatePicker

with Compose yet? trying to invoke it as a dialog.. the playground doesn’t have an example.. are examples of doing

AlertDialog

of course

amar_1995

01/03/2020, 10:52 AM

In dev2, I am using column as below code

Column(
   crossAxisSize = LayoutSize.Expand,
   mainAxisSize = LayoutSize.Expand) { ... }

Using this, I am trying to show hidden data after onClick occur. But it is not working dev3. In dev3, as onClick occur hidden data overlap with the next Column data. How to achieve this in dev3

Title

amar_1995

01/03/2020, 10:52 AM

In dev2, I am using column as below code

Column(
   crossAxisSize = LayoutSize.Expand,
   mainAxisSize = LayoutSize.Expand) { ... }

Using this, I am trying to show hidden data after onClick occur. But it is not working dev3. In dev3, as onClick occur hidden data overlap with the next Column data. How to achieve this in dev3

Before onClick

After onClick occur

matvei

01/03/2020, 12:20 PM

Can you show me a snipped of the code in dev03, which is not working?

amar_1995

01/03/2020, 12:26 PM

val open by +state {false}
	Padding(10.dp) {
            Clickable({
                open = !open
            }) {
                Column(
//                crossAxisSize = LayoutSize.Expand
//                    modifier = LayoutSize.Expand,
                    modifier = ExpandedWidth
                ) {
                    Row(
//                        crossAxisSize = LayoutSize.Wrap,
//                        mainAxisSize = LayoutSize.Expand
                    arrangement = Arrangement.SpaceEvenly
                    ) {
                        Column(modifier = Flexible(1f)) {
                            Text(..)
                            if(!open)
                            Text(....)
                        }
                        WidthSpacer(width = 10.dp)
                        Column(
//                            crossAxisAlignment = CrossAxisAlignment.Center,
//                            mainAxisAlignment = MainAxisAlignment.Center
                            arrangement = Arrangement.Center
                        ) {
                            Container(
                                width = 20.dp,
                                height = 20.dp,
                                alignment = Alignment.BottomCenter
                            ) {
                                DrawImage(+imageResource(R.drawable.navigate_next), Color.Black)
                            }
                        }
                    }
                    if(open) {
                        Padding(padding = 10.dp) {
                            var value by +state { "Text" }
                            FlexColumn() {
                                expanded(1f) {
                                    Column {
                                        FlexRow() {
                                            expanded(1f) {
                                                Text("")
                                            }
                                            inflexible {
                                                Button(
                                                    text = "...",
                                                    style = OutlinedButtonStyle(
                                                        shape = RoundedCornerShape(5.dp),
                                                        contentColor = (+MaterialTheme.colors()).primary,
                                                        border = Border(
                                                            color = Color.Black,
                                                            width = 1.dp
                                                        )
                                                    ),
                                                    onClick = {
                                                        ...
                                                    }
                                                )
                                            }
                                        }
										ShowString(text)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

All commented part is previous part of dev2

matvei

01/03/2020, 12:47 PM

I'm not sure I can clearly understand what's going on in this code. 1. It has mix of modifiers and FlexColumn/FlexRow. I don't believe this mix in one Column will work very well. 2. and inside FlexColumn and FlexRow you use

expanded {}

DSL with, IIUC, intention to expand to the whole screen, but this won't work, there's a modifier ExpandedHeight/ExpandedWidth for it. My recommendation will be to use one appraoch and move away from FlexColumn/FlexRow complitely, as well as Padding composables and try again.

amar_1995

01/03/2020, 12:49 PM

Okay, I will give it a try. Thanks

👍 1

Yes, It worked after removing FlexRow/FlexColumn Code also looks clear now Thanks

matvei

01/03/2020, 2:27 PM

No problem 🙂

codeslubber

01/03/2020, 3:47 PM

@amar_1995 can you post the revised code?? I had some dev02 axis modifier crap that did not work in 03 as well..

amar_1995

01/03/2020, 3:52 PM

var open by +state { false }
Padding(10.dp) {
	Clickable({
		open = !open
	}) {
		Column(
			modifier = ExpandedHeight
		) {
			Row{
				Column(modifier = Flexible(1f)) {
					Text(...)
					if(!open)
					Text(...)
				}
				WidthSpacer(width = 10.dp)
				Container(
					width = 20.dp,
					height = 20.dp,
					alignment = Alignment.BottomCenter
				) {
					DrawImage(+imageResource(R.drawable.navigate_next), Color.Black)

				}
			}
			if(open) {
				Padding(padding = 10.dp) {
					var value by +state { "Text" }
					Column() {
						Row() {
							Column(Flexible(1f)) {}
							Button(
								text = "...",
								style = OutlinedButtonStyle(
									shape = RoundedCornerShape(5.dp),
									contentColor = (+MaterialTheme.colors()).primary,
									border = Border(
										color = Color.Black,
										width = 1.dp
									)
								),
								onClick = {...}
							)
						}
						ShowString(value)
					}
				}
			}
		}
	}
}

👍🏻 1

codeslubber

01/03/2020, 4:09 PM

nice and clean…

matvei

01/03/2020, 5:06 PM

Not sure if it's sarcasm or not 🙂 But this is one of the reasons why modifiers were introduced. To remove this DSL for FlexColumn/Stack, which felt wrong and was adding a lot of unnecessary nesting. So I'm glad if you find it better than before 🙂

codeslubber

01/03/2020, 5:09 PM

No it does look nice, I love Compose..

Dmitri Sh

01/03/2020, 8:03 PM

@matvei are you suggesting FlexColumn is to be avoided in general?

matvei

01/06/2020, 11:42 AM

Yep, it will be deprecated in dev04. Use Column/Row and apply

Flexible

modifier to children you want to make flexible

Dmitri Sh

01/06/2020, 6:31 PM

bummer 🙂 just used Flex to build a sample project and based on that advised others to use it - back to the drawing board and retracting the advice 😰

matvei

01/06/2020, 6:40 PM

Haha, sorry 🙂 Anyway, the concept of Flex stays, it's just API changes slightly, so it should be an easy migration

Dmitri Sh

01/06/2020, 7:03 PM

no worries, it comes with the territory - working with alpha apis 🙂

View count: 1