Jetpack Compose

Tutoriales sobre Jetpack Compose

Qué es Jetpack Compose

Tutoriales

Codelab: Aspectos básicos de Jetpack Compose

Introducción a Jetpack Compose

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTutorialTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    //Greeting("Android")
                    MyComponent()
                }
            }
        }
    }
}

// Tutorial 1
// https://www.youtube.com/watch?v=yVIGAvMO3bc&list=PLNdFk2_brsRclwvl8ruCo_q36jVbXcCCx&index=1&pp=iAQB

@Composable
fun MyComponent() {
    Row() {
        MyImage()
        MyTexts()
    }
}

@Composable
fun MyImage() {
    Image (
        painterResource(R.drawable.ic_launcher_foreground),
        "Imagen de prueba"
    )
}

@Composable
fun MyTexts() {
    Column() {
        MyText ("Hola Jetpack Compose!")
        MyText ("Preparado?")
    }
}

@Composable
fun MyText(text: String) {
    Text(text)
}

@Preview
@Composable
fun PreviewComponent() {
    Row() {
        MyComponent()
    }
}

/*
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    JetpackComposeTutorialTheme {
        Greeting("Android")
    }
}
*/

Conceptos básicos sobre el diseño de Compose

Más información:

Curso de Jetpack Compose

Jetpack Compose Tutorial – Step by Step Guide

Curso completo de Jetpack Compose