Criar um projeto Jetpack Compose

14 de abril de 2022

Tutorial de como criar um projeto Jetpack Compose no Android Studio para utilizar da criação de interface dos usuários em kotlin.

Para saber mais sobre o Jetpack Compose acesse o site do projeto no link.

O Jetpack Compose é uma forma de escrever a interface do usuário na linguagem de programação kotlin, e neste tutorial será mostrado o básico dessa ferramenta ao criar um novo projeto.

Criar um projeto Jetpack Compose

Primeiramente em seu Android Studio clique em File->New->New Project e você verá uma tela como a seguinte.

Então irá clicar em Empty Compose Activity e no botão Next.

Logo após ter clicado no botão Next irá aparecer uma janela para preencher os detalhes do projeto e o local onde o projeto será salvo como na imagem a seguir.

Então clicando em Finish o projeto base é carregado no Android Studio, isso poderá levar algum tempo para que seja feito o download de todas as dependências do gradle.

Com o projeto carregado irá ter um arquivo MainActivity.kt que é onde está o código inicial e base do projeto Jetpack Compose.

Então vamos ver como este código é feito.

package br.com.uware.novoprojetojetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import br.com.uware.novoprojetojetpackcompose.ui.theme.NovoProjetoJetpackComposeTheme


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

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    NovoProjetoJetpackComposeTheme {
        Greeting("Android")
    }
}

Entendendo a MainActivity

Vamos então entender um pouco do que esse arquivo nos diz.

Para entender vamos começar pela função Greeting que recebe um parâmetro name do tipo String.

As funções do Jetpack Compose é utilizado letra maiúscula no início ao contrário das funções normais, isso por uma convenção, mas não obrigatoriedade.

Esta função utiliza de uma função do Jetpack Compose chamada Text que é a função de TextView utilizada nos arquivos de xml, imprimindo a palavra “Hello $name!” onde $name é o parâmetro fornecido pelo programador.

No topo da função utiliza a anotação @Composable significando que é uma View ou função do Jetpack Compose.

As Views do Jetpack Compose recebem sempre a anotação @Composable.

Observe assim a função DefaultPreview que recebe também a anotação de @Preview significando que é para ser gerado um preview do código descrito dentro dela.

Essa anotação de preview recebe o parâmetro de showBackground = true significando gerar um background padrão para o preview.

Dentro do package ui.theme pode se observar os padrões gerados para o tema utilizado no projeto.

Sinta se a vontade e modifique um pouco o código para começar.

Para um projeto vazio com base em xml veja Como criar um projeto no Android Studio.

Enfim espero poder ter ajudado com mais este tutorial de criar um projeto Jetpack Compose.

Tags: