Hi guys What are some good practices for keeping code readab kotlinlang #compose

Hi guys What are some good practices for keeping code readable and simple when styling Views. i come from RN and getting each day in love with Android Compose. what im exactly looking for is a way to keep the modifiers in one place. in react native i would do something like

Copy code

const styles = StyleSheet.create({
contaienr: {
....
...
...
},
box: {
...
...
}
})

is there any good practice to do this with android compose?

👍 1

gildor

01/21/2021, 2:38 AM

extract those modifiers with styles to own methods/extension functions?

Alexa_Gal

01/21/2021, 2:39 AM

Could you help me with a simple example to follow what you mean Andrey?

gildor

01/21/2021, 2:41 AM

It would be easier if you would provide some simple example first, what is not readable and not simple Just my general suggestion is to extract related styling modifiers to own extension function and apply 1 modifier with many styles instead of many

essentially you can do exactly the same as in this react example, you can create an object with styles, the only difference it will include modifiers

Alexa_Gal

01/21/2021, 3:14 AM

would this work as

style object

equivalent in Kotlin?

or more like…

Copy code

sealed class Styles(val modifier: Modifier) {
    object Container : Styles(
        Modifier
            .fillMaxWidth()
            .padding(10.dp, 0.dp)
    )

    object TxtEmail : Styles(
        Modifier
            .fillMaxWidth()
            .padding(20.dp, 0.dp)
    )
}

Copy code

...
Column(
    Styles.Container.modifier
) 
...

gildor

01/21/2021, 3:22 AM

I would say none is Kotlin way for this case

I mean something like this:

Copy code

fun Modifier.textEmail(): Modifier = 
   this
    .fillMaxWidth()
    .padding(20.dp, 0.dp)

If you want, you can also move it it to some object:

Copy code

object Styles {
  fun Modifier.textEmail(): Modifier = 
   this
    .fillMaxWidth()
    .padding(20.dp, 0.dp)
}

But honestly don’t think it’s necessary

But it general approach, for things like TxtEmail (so it’s some use-case specific component) I think it recommended just to use custom composable with predefined modifiers and simplified API

Alexa_Gal

01/21/2021, 4:00 AM

Agree! I'll give it a shot with the extension. Looks clean. Like it 💪 Thanks man