JetPack Compose - Best practices to define "complex" layouts [closed]

Question

Hello developer comunity

I´ve been learning Kotlin for 2 years, creating small applications. With new approach of JetPack Compose I´m struggling to learn the good approach and best practice when making my small projects.

I would like to create a UI like this one. With "legacy" use of XML, this was not a problem for me. Now with Jetpack Compose, I have lot of questions.

Mainly I would like to know where to define the Row(){} and Column(){} funtions. Don´t know if they should be in the setContent{} body or in the @Composable funtion or in another complete different class

As you can see, there´s a lot of buttons, text, etc. Don´t know if my UI "Structure" should be created in @Composalbe funtions or I should define it in SetContent.

I guess with Jetpack Compose we are not using MVVM anymore, as we are not using XML files for our UI layouts. But perhaps I´m wrong due to my lack of knowledge.

Sorry if this´s an stupid question. I can´t find too many tutorials in Youtube as this is "relative" new. The ones that I find, are the easy one with small examples of a few of Texts, etc.

Thanks in advance for your comments, tips or notes.

Answer 1

I suggest you read the Thinking in Compose docs and take a look to the official compose samples in this repository, there is a lot of material.

Don´t know if they should be in the setContent{} body or in the @Composable funtion or in another complete different class

The question is a bit generic, but yes, in your app you might have a MainActivity and you will insert all your content in the setContent.

(Example from Jetsnack app)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetsnackApp()
        }
    }
}

Inside this, you could have a single @Composable function, or , for example, a NavHost to switch between different composables.

NavHost(navController = navController, startDestination = "profile") {
    composable("profile") { Profile(/*...*/) }
    composable("friendslist") { FriendsList(/*...*/) }
    /*...*/
}

Inside this composables you will put your rows and columns, but nobody prevents you from having a single column in your setContent, it all depends on your needs.
The main concept is that you have to image your app as a component tree, this section of the docs explains it very well.