Forem: Gilber

Desenvolvimento de Aplicativos com Kotlin, Room e Jetpack Compose: Uma Jornada para Interfaces de Usuário Modernas e Eficientes

Gilber — Wed, 25 Oct 2023 02:13:16 +0000

Neste tutorial, você vai apreender a criar um aplicativo de bloco de notas, utilizando componente de IU simples com funções declarativas. Você não vai editar nenhum layout XML nem usar o Layout Editor. Em vez disso, você chamará funções de composição para definir quais elementos quer usar e o compilador do Compose fará o restante. O App será desenvolvido na Arquitetura MVVM, base de dados Room para salvar, lista, alterar e excluir os dados localmente e o Hilt & Dagger para injeção de dependência.
Pré-requisitos
É necessário conhecer o Kotlin, os conceitos de projeto orientados a objetos e os princípios básicos de desenvolvimento do Android, principalmente.

Jetpack Compose
Banco de dados SQLite e a linguagem de consulta SQLite. O que você aprenderá
Corrotinas básicas.
Android Studio 4.0 ou mais recente e conhecimento sobre como usá-lo.

O que você aprenderá
Você aprenderá a projetar e construir um app usando a IDE Android Studio

Implementar a arquitetura MVVM
Trabalhar com um banco de dados, implementar CRUD completo.
Criar UI Jepack Compose

Jetpack Compose
é um kit de ferramentas moderno recomendado pelo Android para criar IUs nativas. Ele simplifica e acelera o desenvolvimento da IU no Android.

Composable Preview: por meio de uma anotação de @Preview em uma função @Composable, na aba Split e/ou design do Android Studio, é possível visualizar o componente criado;

Modo Iterativo: nessa ferramenta, é possível interagir com a visualização no próprio Android Studio e testar diferentes funcionalidades, como alterar o estado de um radiobutton, sem a necessidade de um emulador;

Deploy Preview: nesta funcionalidade é possível rodar um @Preview — clicando no ícone do emulador na opção ‘Run’ — diretamente no emulador o que permite, além de uma simulação mais verossímil, utilizar as permissões e o contexto geral da aplicação.

funções de composição:Essas funções permitem que você defina a IU do app de maneira programática, descrevendo as dependências de dados e de formas dela, em vez de se concentrar no processo de construção da IU (inicializando um elemento, anexando-o a um pai etc.). Para criar uma função que pode ser composta, basta adicionar a anotação @Composable ao nome da função.

Componentes Arquitetura MVVM
Veja um diagrama simples que apresenta os Componentes da arquitetura e como eles funcionam juntos.

Entidade: classe com anotação que descreve uma tabela de banco de dados ao trabalhar com o Room.

Banco de dados do Room: simplifica o trabalho com o banco de dados e serve como ponto de acesso para o banco de dados SQLite (oculta SQLiteOpenHelper). O banco de dados do Room usa o DAO para realizar consultas ao banco de dados SQLite.

Banco de dados SQLite: armazenamento no dispositivo. A biblioteca de persistência Room cria e mantém esse banco de dados para você.

Repositório: uma classe que você cria e que é usada principalmente para gerenciar várias fontes de dados.

DAO: objeto de acesso a dados. Um mapeamento de consultas SQL para funções. Ao usar um DAO, você chama os métodos e o Room faz o resto.

LiveData: uma classe armazenadora de dados. Ela sempre mantém/armazena em cache a versão mais recente dos dados e notifica os observadores quando os dados mudam.

ViewModel: atua como um centro de comunicação entre o repositório (dados) e a IU. A IU não precisa mais se preocupar com a origem dos dados. As instâncias do ViewModel sobrevivem à recriação de atividade/fragmento.

Criação dos pacotes para organização das camadas da aplicação

Configuração do Ambiente
Antes de começar, é importante configurar o ambiente de desenvolvimento. Certifique-se de que o Android Studio esteja instalado e configurado corretamente para desenvolvimento Android. Você também precisará das seguintes dependências no seu projeto:

Kotlin: A linguagem de programação oficial para o desenvolvimento Android.
Jetpack Compose: Uma biblioteca moderna para a criação da UI.
Room: Uma biblioteca de persistência para trabalhar com bancos de dados locais.

Abra build.gradle (Module: app).

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'kotlin-kapt'//Adicione
    id 'dagger.hilt.android.plugin'//adicione
}

dependencies {

    implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
    implementation 'androidx.activity:activity-compose:1.6.1'
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    implementation 'androidx.compose.material:material:1.3.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.4'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"

     // Jetpack Compose Navigation
    implementation("androidx.navigation:navigation-compose:$nav_version")
    // Room components
    implementation "androidx.room:room-runtime:$room_version"
    kapt "androidx.room:room-compiler:$room_version"
    implementation "androidx.room:room-ktx:$room_version"
    // Dagger - Hilt
    implementation('com.google.dagger:hilt-android:2.45')
    kapt('com.google.dagger:hilt-android-compiler:2.45')
    kapt "androidx.hilt:hilt-compiler:1.0.0"
    //icons
    implementation "androidx.compose.material:material-icons-extended:1.3.1"
    //swipe
    implementation 'me.saket.swipe:swipe:1.1.1'
}

No arquivo build.gradle (Project: JetNotes), adicione os números de versão ao final do arquivo, conforme abaixo:

buildscript {
    ext {
         compose_ui_version = '1.3.3'
        nav_version = "2.5.3"
        room_version = '2.5.0'
    }
}

plugins {
    id 'com.android.application' version '7.3.1' apply false
    id 'com.android.library' version '7.3.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
    id("com.google.dagger.hilt.android") version "2.44" apply false
}

Criar Entidade (modelo)
O modelo é responsável pela lógica de negócios e pelos dados do aplicativo. Neste exemplo, usaremos o Room para criar um banco de dados local e definir a entidade NoteModel:

Crie um novo arquivo de classe do Kotlin com o nome NoteModel contendo a classe de dados. Esta classe descreve a entidade (que representa a tabela SQLite). Cada propriedade na classe representa uma coluna na tabela. A Room usará estas propriedades para criar a tabela e instanciar objetos de linhas no banco de dados.

Veja o Código Abaixo:

@Entity(//representa a tabela no banco
    //nome da tabela no banco de dados
    tableName = "tb_note",
    indices = [
        Index("title", unique = true)//Regra no banco para não cadastrar titulos iquais
    ]
)
data class NoteModel(
    @PrimaryKey(autoGenerate = true)//chave primaria
    @ColumnInfo(name = "id")//Anotação especifica o nome para a tabela no banco sqlite, caso queira mudar
    val id: Int = 0,
    @ColumnInfo(name = "title")
    val title: String,
    @ColumnInfo(name = "description")
    val description: String
)

Vejamos o que essas anotações fazem:
• @Entity(tableName = "tb_note") Cada classe @Entity representa uma tabela SQLite.
• @PrimaryKey Toda entidade precisa de uma chave primária. Para simplificar, cada palavra funciona como a própria chave primária.
• @ColumnInfo(name = "id") Especifica o nome da coluna na tabela se você quiser que seja diferente do nome da variável de membro. Dessa forma, a coluna terá o nome "id”, “title”,”description”

CRIAR DAO (Data Access Object) do App
É uma parte fundamental de qualquer aplicativo que envolve a persistência de dados. Ele age como uma camada de abstração entre a lógica de negócios do aplicativo e o banco de dados, facilitando a criação, leitura, atualização e exclusão (CRUD) dos dados.

Para operações comuns do banco de dados, a biblioteca Room fornece anotações de conveniência, como @Insert, @Delete e @Update. A anotação @Query é usado para todo o restante. É possível programar qualquer consulta com suporte do SQLite.

OBS: O DAO precisa ser uma interface ou uma classe abstrata.

@Dao
interface NoteDao {
    //Listar Anotações
    @Query("SELECT * FROM tb_notes ORDER BY id ASC")
    fun getAllNotes(): Flow<List<NoteModel>>
    //Selecionar Anotação
    @Query("SELECT * FROM tb_notes WHERE id=:noteID")
    fun selectNoteID(noteID: Int): Flow<NoteModel?>
    //Inserir Anotações
    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insertNote(noteModel: NoteModel)
    //Atualizar Anotação
    @Update
    suspend fun updateNote(noteModel: NoteModel)
    //Deletar Anotação
    @Delete
    suspend fun deleteNote(noteModel: NoteModel)
}

obs: Usar o Flow ou o LiveData como tipo de retorno vai garantir que uma notificação seja enviada sempre que os dados no banco de dados mudarem.

IMPLEMENTAR BANCO DE DADOS
A classe do banco de dados da Room precisa ser abstrata e estender RoomDatabase. Normalmente, você só precisa de uma instância de um banco de dados da Room para todo o app.
A anotação @Database requer vários argumentos para que o Room possa criar o banco de dados.
• Especifique o NoteModel como a única classe com a lista de entities.
• Defina a version como 1. Sempre que o esquema da tabela do banco de dados mudar, será necessário aumentar o número da versão.
• Defina o exportSchema como false, para não manter os backups do histórico de versões do esquema
Veja abaixo:

//A anotação @Database requer rgumentos para que o Room possa criar o banco de dados. Após
//liste as entidades do banco de dados e configure o número da versão.
@Database(
    //listar entidades do App
    entities = [
        NoteModel::class
    ],
    //versão do banco de dados
    version = 1,
    //exportar DB declarar com false p/ não manter historico do DB
    exportSchema = false
)
abstract class NoteDatabase: RoomDatabase() {
    //função para o retorna  NoteDao
    abstract fun noteDao(): NoteDao
}

Criar instância para a Banco de dados
Vamos um objeto NoteModule, defina um método getNoteDb() com um parâmetro Context, necessário para o builder do banco de dados.
Vamos criar um metodo para que retorne um tipo getNoteDao.

@Module//fornecer instâncias de determinados tipos
@InstallIn(SingletonComponent::class)//informar em qual classe do Android cada módulo vai ser usado ou instalado.
@Module
@InstallIn(SingletonComponent::class)
object NoteModule {
    @Provides
    @Singleton
    fun getNoteDb(
        @ApplicationContext
        context: Context)= Room.databaseBuilder(
        context = context,
        NoteDB::class.java,
        "note.db"
        ).build()
    @Provides
    @Singleton
    fun getNoteDao(db: NoteDB) = db.noteDao()
}

Classe do Aplicativo Hilt
Todos os apps que usam o Hilt precisam conter uma classe Application anotada com @HiltAndroidApp.

O @HiltAndroidApp aciona a geração de código do Hilt, incluindo uma classe base para seu aplicativo que serve como contêiner de dependências no nível do app.

@HiltAndroidApp
class NoteApplication: Application()

Esse componente Hilt gerado é anexado ao ciclo de vida do objeto Application e fornece dependências a ele. Além disso, ele é o componente pai do app, o que significa que outros componentes podem acessar as dependências fornecidas.
Injetar dependências na classe principal do App
Depois que o Hilt é configurado na classe Application e um componente no nível do aplicativo está disponível, ele pode fornecer dependências para outras classes do Android que tenham a anotação @AndroidEntryPoint:
Main Activity

@AndroidEntryPoint
class MainActivity : ComponentActivity() {

    private lateinit var navHostController: NavHostController
    private val noteViewModel: NoteViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NotesTheme {
                navHostController = rememberNavController()
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    NavScreen(navHostController = navHostController, noteViewModel = noteViewModel)
                }
            }
        }
    }
}

Criar Repositório
Uma classe de repositório abstrai o acesso a várias fontes de dados. O repositório não faz parte das bibliotecas dos Componentes da arquitetura, mas é uma prática recomendada para a separação e arquitetura do código. Uma classe de repositório fornece uma API limpa para acesso aos dados no restante do aplicativo.

Por que usar um repositório?
Um repositório gerencia consultas e permite usar vários back-ends. No exemplo mais comum, o repositório implementa a lógica para decidir se precisa buscar dados de uma rede ou usar resultados armazenados em cache em um banco de dados local.
Como implementar o repositório
Crie um arquivo de classe do Kotlin chamado NoteRepo e cole o código a seguir nele:

class NoteRepo @Inject constructor(
    private val noteDao: NoteDao
){
    fun getAllNotes(): Flow<List<NoteModel>> {
        return noteDao.getAllNotes()
    }
    suspend fun insertNote(note: NoteModel) {
        return noteDao.insertNote(note = note)
    }
    suspend fun updateNote(note: NoteModel) {
        return noteDao.updateNote(note = note)
    }
    suspend fun deletetNote(note: NoteModel) {
        return noteDao.deletetNote(note = note)
    }
}

Classe Selada da aplicativo
Vamos criar uma classes seladas Kotlin e aproveitá-las para gerenciar os estados da nossa aplicação.
Uma subclasse de uma classe selada pode ter várias instâncias. Isso permite que objetos de classes seladas contenham estado. Nesse casos quatros estados possíveis: parado, carregando, sucesso e erro.

sealed class ResultState<out T>{
    object Idle: ResultState<Nothing>()
    object Loading:ResultState<Nothing>()
    data class Sucess<out T>(val data: T): ResultState<T>()
    data class Error(val exception: Throwable): ResultState<Nothing>()
}

Criar Viewl Model
O ViewModel atua como um intermediário entre a Model e a View. Ele é responsável por fornecer os dados necessários para a View e processar as ações do usuário.
O ViewModel encapsula a lógica de apresentação e transformação de dados, permitindo que a View seja agnóstica em relação à lógica de negócios subjacente.
Ele pode conter propriedades observáveis que notificam a View quando os dados mudam, permitindo uma ligação de dados eficiente.

viewModelScope é um CoroutineScope predefinido que está incluído nas extensões KTX ViewModel. Todas as corrotinas precisam ser executadas em um escopo. Um CoroutineScope gerencia uma ou mais corrotinas relacionadas.

launch é uma função que cria uma corrotina e envia a execução do corpo funcional para o agente correspondente.
Dispatchers.IO indica que essa corrotina deve ser executada em uma linha de execução reservada para operações de E/S.

HiltViewModel O HiltViewModel é uma anotação específica do Hilt que pode ser usada para marcar classes ViewModel. Ela permite a injeção de dependência em ViewModels de maneira transparente. É o utilizaremos neste projeto.

@HiltViewModel
class NoteViewModel @Inject constructor(
    private val noteRepo: NoteRepo
): ViewModel() {
    val id: MutableState<Int> = mutableStateOf(0)
    val title: MutableState<String> = mutableStateOf("")
    val description: MutableState<String> = mutableStateOf("")

    private val _getNotes = MutableStateFlow<ResultState<List<NoteModel>>>(ResultState.Idle)
    val getNotes: StateFlow<ResultState<List<NoteModel>>> = _getNotes

    private val _selectedNote: MutableStateFlow<NoteModel?> = MutableStateFlow(null)
    val selectedNote: StateFlow<NoteModel?> = _selectedNote
    //listar Anotações
    fun getNotes(){
        viewModelScope.launch {
            val result = try {
                noteRepo.getAllNotes().collect{
                    _getNotes.value = ResultState.Sucess(it)
                }
            }catch (error: Exception){
                ResultState.Error(error)
            }
            Log.d("RESULTSATE","$result")
        }
    }
    //inserir anotações
    private fun insertNote(){
        viewModelScope.launch(Dispatchers.IO){
                val note = NoteModel(
                    title = title.value,
                    description = description.value
                )
                noteRepo.insertNote(noteModel =note)
        }
    }
    //atualizar anotações
    private fun updateNote(){
       viewModelScope.launch(Dispatchers.IO){
           val note = NoteModel(
               id = id.value,
               title = title.value,
               description = description.value
           )
           noteRepo.updateNote(noteModel = note)
       }
    }
    //deletar anotações
    private fun deleteNote(){
        viewModelScope.launch(Dispatchers.IO){
            val note = NoteModel(
                id = id.value,
                title = title.value,
                description = description.value
            )
            noteRepo.deleteNote(noteModel = note)
        }
    }
    //selecionar Anotação
    fun getSelectNoteID(noteID: Int){
        viewModelScope.launch {
            noteRepo.selectNoteID(noteID = noteID).collect{
                _selectedNote.value = it
            }
        }
    }
    //Set Anotação Selecionada nos campos
    fun updateNotesFields(selectedNote: NoteModel?){
        if (selectedNote !=null){
            id.value = selectedNote.id
            title.value = selectedNote.title
            description.value = selectedNote.description
        }else{
            //limpar os campos:
            id.value = 0
            title.value = ""
            description.value = ""
        }
    }
    //validar campos
    fun validateFields():Boolean{
        return title.value.isNotEmpty() && description.value.isNotEmpty()
    }
    //eventos o banco
    fun dbHandle(action: String): String{
        var result = action
        when(result){
            "INSERT" ->{
                insertNote()
            }
            "UPDATE"->{
                updateNote()
            }
            "DELETE"->{
                deleteNote()
            }else ->{
                 result = "NO_EVENT"
            }

        }
        return result
    }

Criar View Home do App Ou Tela Principal do App
A View é a camada de apresentação do aplicativo, que é responsável por exibir os dados ao usuário e capturar as interações do usuário, como toques, cliques e gestos.
Ela não deve conter lógica de negócios e, em vez disso, se concentra em representar visualmente os dados do aplicativo.
As Views geralmente consistem em componentes da interface do usuário, como botões, campos de texto, listas e gráficos.

package br.com.gilbercs.notes.ui.screens

import android.annotation.SuppressLint
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.navigation.NavController
import br.com.gilbercs.notes.R
import br.com.gilbercs.notes.ui.components.HomeFab
import br.com.gilbercs.notes.ui.screens.home.HomeContent
import br.com.gilbercs.notes.ui.theme.ELEVATION_BAR
import br.com.gilbercs.notes.viewmodel.NoteViewModel

@SuppressLint("CoroutineCreationDuringComposition")
@Composable
fun HomeScreen(
    navController: NavController,
    noteViewModel: NoteViewModel){
    LaunchedEffect(key1 = Unit){
        noteViewModel.getNotes()
    }
    val getAllNotes by noteViewModel.getNotes.collectAsState()
    val scaffoldState = rememberScaffoldState()
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                modifier = Modifier
                    .fillMaxWidth(),
                elevation = ELEVATION_BAR,
                backgroundColor = MaterialTheme.colors.surface,
                title = { Text(text = stringResource(id = R.string.home_app_bar), fontWeight = FontWeight.Bold)}
            )
        },
        content = {it
            HomeContent(
                getAllNotes = getAllNotes,
                navController = navController,
            onDelete = {event, note ->
                noteViewModel.dbHandle(event)
                noteViewModel.updateNotesFields(selectedNote = note)
            })
        },
        floatingActionButtonPosition = FabPosition.Center
        ,
        floatingActionButton = {
            HomeFab(navClick = navController)
        }
    )
}

Criar View HomeContent
O HomeContent é um componente de interface do usuário que vai representa os items na tela inicial. É projetado para fornecer uma experiência de usuário atraente e informativa logo no momento em que o aplicativo é aberto. Pode incluir uma variedade de elementos, como:

Lista de Conteúdo: Abaixo do AppBar, o HomeContent geralmente exibe uma lista de conteúdo relevante para a tela inicial. Isso pode incluir notícias, atualizações de status, produtos em destaque, ou qualquer outro tipo de informação importante para o usuário.

Botões de Ação: O HomeContent pode conter botões ou ícones de ação que permitem aos usuários realizar tarefas específicas, deletar, atualizar, criar um novo item ou acessar áreas específicas do aplicativo.

package br.com.gilbercs.notes.ui.screens.home

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DeleteForever
import androidx.compose.material.icons.filled.EditNote
import androidx.compose.material.icons.filled.ExpandLess
import androidx.compose.material.icons.filled.ExpandMore
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.navigation.NavController
import br.com.gilbercs.notes.data.model.NoteModel
import br.com.gilbercs.notes.ui.screens.EmptyContent
import br.com.gilbercs.notes.ui.theme.*
import br.com.gilbercs.notes.util.ResultState
import kotlinx.coroutines.launch
import me.saket.swipe.SwipeAction
import me.saket.swipe.SwipeableActionsBox

@Composable
fun HomeContent(
    getAllNotes: ResultState<List<NoteModel>>,
    navController: NavController,
    onDelete: (String,NoteModel) -> Unit){
    val listNotes: List<NoteModel>
   if (getAllNotes is ResultState.Sucess){
       listNotes = getAllNotes.data
       if (listNotes.isEmpty()){
           EmptyContent()
       }else{
           LazyColumn{
               items(items = listNotes){note->
                   Card(modifier = Modifier
                       .fillMaxSize()
                       .padding(all = ALL_PADDING),
                   elevation = CARD_ELEVATION,
                   shape = RoundedCornerShape(size = CARD_SHAPE)
                   ){
                       SwipeNote(note = note, navController = navController) {
                           onDelete(
                               "DELETE",
                               note
                           )
                       }
                   }
               }
           }
       }
   }
}
@Composable
fun SwipeNote(
    note: NoteModel,
    navController: NavController,
    onSwipe: () -> Unit ={}){
    val scope = rememberCoroutineScope()
    //swipe
    val deleteSwipe = SwipeAction(
        onSwipe = {
            scope.launch {
                onSwipe()
            }
        },
        icon = {
            Icon(
                modifier = Modifier
                    .padding(ALL_PADDING)
                    .size(ICON_SWIPE),
                imageVector = Icons.Default.DeleteForever,
                contentDescription = "",
                tint = Color.White)
        },
        background = Color.Red
    )
    val updateSwipe = SwipeAction(
        onSwipe = {
            navController.navigate("note_screen/${note.id}")
        },
        icon = {
            Icon(
                modifier = Modifier
                    .padding(ALL_PADDING)
                    .size(ICON_SWIPE),
                imageVector = Icons.Default.EditNote,
                contentDescription = "",
                tint = Color.White)
        },
        background = MaterialTheme.colors.primaryVariant
    )
    SwipeableActionsBox(
        swipeThreshold = ICON_THRESHOLD,
        startActions = listOf(updateSwipe),
        endActions = listOf(deleteSwipe)
    ) {
        NoteItem(note = note)
    }

}
@Composable
fun NoteItem(note: NoteModel){
    //declaração de variavel
    var expanded by remember{ mutableStateOf(false) }

        Row(modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colors.surface)
            .padding(all = ALL_PADDING)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = note.title, fontSize = TITLE, fontWeight = FontWeight.Bold)
                if (expanded){
                    Text(text = note.description, fontSize = TEXT_DEFAULT)
                }
            }
            IconButton(onClick = { expanded =! expanded }) {
                Icon(
                    imageVector = if (expanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
                    contentDescription = if (expanded){
                        "Menos"
                    }else{"Mais"})
            }
        }
    }

Cria view Cadastro

package br.com.gilbercs.notes.ui.screens.note

import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.navigation.NavController
import br.com.gilbercs.notes.data.model.NoteModel
import br.com.gilbercs.notes.viewmodel.NoteViewModel

@Composable
fun NoteScreen(
    navController: NavController,
    noteViewModel: NoteViewModel,
    selected: NoteModel?){
    //declaração da variaveis
    var title  by noteViewModel.title
    var description by noteViewModel.description

    Scaffold(
        topBar = {
                if (selected==null){
                    CreateNoteTopBar(navController = navController, noteViewModel = noteViewModel)
                }else{
                    UpdateNoteTopBar(navController = navController, noteViewModel = noteViewModel)
                }
        },
    ){it
        NoteContent(
            title = title,
            onTitle = {title = it},
            description = description,
            onDescription = {description = it})
    }
}

Criar NoteContent

package br.com.gilbercs.notes.ui.screens.note

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import br.com.gilbercs.notes.R
import br.com.gilbercs.notes.ui.theme.ALL_PADDING
import br.com.gilbercs.notes.ui.theme.SPACER_HEIGHT
import br.com.gilbercs.notes.ui.theme.TEXT_DEFAULT

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun NoteContent(
    title: String,
    onTitle:(String)-> Unit,
    description: String,
    onDescription:(String) ->Unit
){

    val keyboardController = LocalSoftwareKeyboardController.current
    Column(modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colors.surface)
        .padding(ALL_PADDING)) {
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = title,
            onValueChange = {onTitle(it)},
            label = { Text(text = stringResource(id = R.string.note_title), fontSize = TEXT_DEFAULT)},
            placeholder = { Text(text = stringResource(id = R.string.place_holder_note_title), fontSize = TEXT_DEFAULT)},
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Text,
                imeAction = ImeAction.Next
            )
        )
        Spacer(modifier = Modifier.height(SPACER_HEIGHT))
        OutlinedTextField(
            modifier = Modifier.fillMaxSize(),
            value = description,
            onValueChange = {onDescription(it)},
            label = { Text(text = stringResource(id = R.string.note_description), fontSize = TEXT_DEFAULT)},
            placeholder = { Text(text = stringResource(id = R.string.place_holder_note_description), fontSize = TEXT_DEFAULT)},
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Text,
                imeAction = ImeAction.Done
            ),
            keyboardActions = KeyboardActions(
                onDone = {
                    keyboardController?.hide()
                }
            )
        )
    }
}

Criar NoteTopApp do App
O topo da tela normalmente contém um AppBar que pode conter o logotipo ou título do aplicativo, bem como botões de ação, como pesquisa ou menu.

package br.com.gilbercs.notes.ui.screens.note

import android.util.Log
import android.widget.Toast
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.navigation.NavController
import br.com.gilbercs.notes.R
import br.com.gilbercs.notes.ui.theme.ELEVATION_BAR
import br.com.gilbercs.notes.viewmodel.NoteViewModel

@Composable
fun CreateNoteTopBar(navController: NavController, noteViewModel: NoteViewModel){
    val context = LocalContext.current
    TopAppBar(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = MaterialTheme.colors.surface,
        elevation = ELEVATION_BAR,
        title = { Text(text = stringResource(id = R.string.create_app_bar))},
        navigationIcon = {
            IconButton(onClick = {
                navController.navigate("home_screen"){
                    popUpTo("home_screen"){
                        inclusive = true
                    }
                }
            }) {
                Icon(
                    imageVector = Icons.Default.ArrowBack,
                    contentDescription = stringResource(id = R.string.icon_arrow_back))
            }
        },
        actions = {
            IconButton(onClick = {
                if (noteViewModel.validateFields()){
                    val insertResult = noteViewModel.dbHandle("INSERT")
                    if (insertResult.equals("INSERT")){
                        Toast.makeText(context,"Gravado com sucesso!!",Toast.LENGTH_LONG).show()
                        navController.navigate("home_screen")
                    }else{
                        Toast.makeText(context,"Erro na Gravação!!",Toast.LENGTH_LONG).show()
                    }
                    Log.d("RESULTINSERT","$insertResult")
                }else{
                    Toast.makeText(context,"Preencha os campos!!",Toast.LENGTH_LONG).show()
                }
            }) {
                Icon(
                    imageVector = Icons.Default.Check,
                    contentDescription = stringResource(id = R.string.icon_check))
            }
        }
    )
}
@Composable
fun UpdateNoteTopBar(navController: NavController, noteViewModel: NoteViewModel){
    val context = LocalContext.current
    TopAppBar(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = MaterialTheme.colors.surface,
        elevation = ELEVATION_BAR,
        title = { Text(text = stringResource(id = R.string.update_app_bar))},
        navigationIcon = {
            IconButton(onClick = {
                navController.navigate("home_screen"){
                    popUpTo("home_screen"){
                        inclusive = true
                    }
                }
            }) {
                Icon(
                    imageVector = Icons.Default.Close,
                    contentDescription = stringResource(id = R.string.icon_arrow_back))
            }
        },
        actions = {
            IconButton(onClick = {
                if (noteViewModel.validateFields()){
                    val updateResult = noteViewModel.dbHandle("UPDATE")
                    if (updateResult.equals("UPDATE")){
                        Toast.makeText(context,"Atualizado com sucesso!!",Toast.LENGTH_LONG).show()
                        navController.navigate("home_screen")
                    }else{
                        Toast.makeText(context,"Erro na Gravação!!",Toast.LENGTH_LONG).show()
                    }
                    Log.d("RESULTINSERT","$updateResult")
                }else{
                    Toast.makeText(context,"Preencha os campos!!",Toast.LENGTH_LONG).show()
                }
            }) {
                Icon(
                    imageVector = Icons.Default.EditNote,
                    contentDescription = stringResource(id = R.string.icon_check))
            }
        }
    )
}

Criar Empty Content
Vamos desenvolver componente de interface do usuário que atua como um marcador de ausência de conteúdo em uma parte específica da tela do aplicativo. Ele vai ser usado quando não há dados para exibir ou quando uma lista ou seção está vazia.

package br.com.gilbercs.notes.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.SentimentVeryDissatisfied
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import br.com.gilbercs.notes.R
import br.com.gilbercs.notes.ui.theme.ICON_EMPTY

@Composable
fun EmptyContent(){
    Column(modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colors.surface),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally) {
        Icon(
            modifier = Modifier
                .size(ICON_EMPTY),
            imageVector = Icons.Default.SentimentVeryDissatisfied,
            contentDescription = stringResource(id = R.string.icon_empty),
            tint = MaterialTheme.colors.primary
        )
        Text(
            text = "\n\n" + stringResource(id = R.string.text_empty))

    }
}

Conclusão

O desenvolvimento de aplicativos Android com código limpo, arquitetura MVVM, Kotlin, Jetpack Compose e Android Studio é uma maneira eficaz de criar aplicativos de alta qualidade que atendem às expectativas dos usuários. A adoção de boas práticas de desenvolvimento, incluindo a separação de preocupações, testes e documentação adequada, contribui para a manutenção de um código limpo e de fácil manutenção. Ao seguir essas práticas, você pode criar aplicativos que são mais eficientes, escaláveis e fáceis de manter à medida que crescem e evoluem.

Tela Login e Registro - Android

Gilber — Fri, 03 Mar 2023 12:31:11 +0000

Na maioria do Apps temos uma tela de autenticação que recebe as informações para entrar no App com login e senha e uma tela de cadastro que permite cadastrar novos usuarios. Neste tutorial vamos desenvolver a tela de login e cadastro para o SO android utilizado o kit de ferramenta Jetpack compose para criar Interface.
Definido espaço, margen, size do texto


import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val PADDING_STAR = 12.dp
val PADDING_END = 12.dp
val PADDING_BOTTON = 120.dp
val TEXT_SIZE = 18.sp
val TEXT_DEFAUL = 16.sp
val CORNER_RADIUS = 25.dp
val SIZE_OUTLINE_BUTTON = 46.dp
val PADDING_VALUES = 8.dp
val BORDER_STROKE = 0.dp
val DEFAULT_ELEVATION = 4.dp
val WIDTH = 64.dp
val THISCKNESS = 1.dp
//CAMPOS
val PADDING_FIELD = 32.dp
val LETTERSPACING = 1.sp
//SPACE
val SPACER_HEIGHT = 48.dp
val SPACED_BY = 8.dp

MainActivity

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

Criar a função composable Divider: Objetivo de preencher um determinado espaço com um tamanho definido

@Composable
fun Divider(){
    Divider(modifier = Modifier
        .width(WIDTH),
        color = Color(0xFF333333),
        thickness = THISCKNESS
    )
}

Vamos criar uma função composable para incluir icones do google e facebook

@Composable
fun SignupWithIcons(
    iconRes: Int,
    contentDescription:String,
    contetx: Context
){
    OutlinedButton(
        modifier = Modifier.size(SIZE_OUTLINE_BUTTON),
        shape = CircleShape,
        contentPadding = PaddingValues(PADDING_VALUES),
        border = BorderStroke(BORDER_STROKE, Color.Transparent),
        elevation = ButtonDefaults.elevation(defaultElevation = DEFAULT_ELEVATION),
        onClick = { showToast(context = contetx, message = "Click") }) {
        Icon(painter = painterResource(id = iconRes), contentDescription = contentDescription, tint = Color.Unspecified)
    }
}

função composable LoginSignupTextField para criar nossa caixa de entrada da informações onde vamos receber por paramtros um text (string) e hint(String) e leadingIcon(imageVector) e onText(String)

@Composable
fun LoginSignupTextField(
    text: String,
    hint: String,
    leadingIcon: ImageVector,
    onText: (String) -> Unit
){
   OutlinedTextField(
       modifier = Modifier
           .fillMaxWidth()
           .padding(
               start = PADDING_FIELD,
               end = PADDING_FIELD,
               top = PADDING_FIELD
           )
           .background(Color.White, RoundedCornerShape(CORNER_RADIUS)),
       value = text,
       colors = TextFieldDefaults.outlinedTextFieldColors(
           focusedBorderColor = MaterialTheme.colors.primary,
           unfocusedBorderColor = Color.White,
           cursorColor = MaterialTheme.colors.primary
       ),
       onValueChange = {onText(it)},
       singleLine = true,
       shape = RoundedCornerShape(CORNER_RADIUS),
       textStyle = TextStyle(color = MaterialTheme.colors.primary, letterSpacing = LETTERSPACING, fontWeight = FontWeight.Medium),
       placeholder = { Text(
           text = hint,
       style = TextStyle(color = Color(0xFF808080), letterSpacing = LETTERSPACING, fontWeight = FontWeight.Medium)
       )},
       leadingIcon = {
           Icon(
               imageVector = leadingIcon,
               contentDescription = hint,
               tint = MaterialTheme.colors.primary)
       }

   )
}

Vamos função composable LoginSignup onde vamos chamar as funções criada em anteriormente e passar os parametros solicitados

@Composable
fun LoginSignup(){
    val context: Context = LocalContext.current
    var isSignup  by remember {
        mutableStateOf(false)
    }
    var textName by remember {
        mutableStateOf("")
    }
    var textPhone by remember {
        mutableStateOf("")
    }
    var textEmail by remember {
        mutableStateOf("")
    }
    var textPassword by remember {
        mutableStateOf("")
    }
    Column(modifier = Modifier
        .background(Color(0xFFEEEEEE))
        .fillMaxSize()
        .verticalScroll(rememberScrollState()),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceBetween) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Text(
                modifier = Modifier.padding(top = 24.dp),
                text = if (isSignup) "Criar uma conta" else "Bem vindo de volta",
                style = TextStyle(fontWeight = FontWeight.Bold,
                    fontSize = 30.sp,
                    letterSpacing = 1.sp,
                    color = Color.Black)
            )
            Text(
                modifier = Modifier.padding(top = 4.dp),
                text = if (isSignup) "Inscreva-se para começar" else "Faça login em sua conta",
                style = TextStyle(fontWeight = FontWeight.Bold,
                    fontSize = 18.sp,
                    letterSpacing = 1.sp,
                    color = Color.Black)
            )
            //campo de texto de nome completo
            if (isSignup){
                LoginSignupTextField(text = textName, hint = "Nome", leadingIcon = Icons.Default.Person, onText = {textName = (it)})
            }
            //campo email
            if (isSignup){
                LoginSignupTextField(text = textEmail, hint = "Email", leadingIcon = Icons.Default.Email, onText ={textEmail = (it)} )
            }else{
                LoginSignupTextField(text = textEmail, hint = "Email", leadingIcon = Icons.Default.Email, onText ={textEmail = (it)} )
            }
            //campo celular
            if (isSignup){
                LoginSignupTextField(text = textPhone, hint = "Telefone", leadingIcon = Icons.Default.Phone, onText ={textPhone = (it)} )
            }
            //campo  senha
            if (isSignup){
                LoginSignupTextField(text = textPassword, hint = "Senha", leadingIcon = Icons.Default.Lock, onText = {textPassword=(it)})
            }else{
                LoginSignupTextField(text = textPassword, hint = "Senha", leadingIcon = Icons.Default.Lock, onText = {textPassword=(it)})
            }
            //Botão cadastrar ou Entrar
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(
                        start = PADDING_FIELD,
                        end = PADDING_FIELD,
                        top = PADDING_FIELD
                    ),
                shape = RoundedCornerShape(CORNER_RADIUS),
                colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary),
                onClick = {
                    //evento
                    if (isSignup){
                        showToast(context,"Cadastro Realizado com sucesso!")
                    }else{
                        showToast(context,"Login realizado com sucesso")

                    }
                /*TODO*/ }) {
                Text(
                    text = if (isSignup) "Inscrever-se" else "Entrar",
                    style = TextStyle(
                        fontWeight = FontWeight.Medium,
                        fontSize = TEXT_SIZE,
                        color = Color.White,
                        letterSpacing = LETTERSPACING
                    )
                )
            }
            Spacer(modifier = Modifier.height(SPACER_HEIGHT))
            Row(
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Divider()
                Text(
                    modifier = Modifier.padding(start = PADDING_STAR, end = PADDING_END),
                    text = if(isSignup) "Cadastre-se COM" else "Entrar com",
                    style = TextStyle(
                    fontSize = TEXT_DEFAUL,
                    letterSpacing = LETTERSPACING,
                    color = Color.Black
                )
                )
                Divider()
            }
            Row(modifier = Modifier.padding(PADDING_VALUES),
                horizontalArrangement = Arrangement.spacedBy(SPACED_BY)) {
                SignupWithIcons(iconRes = R.drawable.icon_google,
                    contentDescription = if (isSignup) "Cadastre-se com Google" else "Entrar com Google", contetx = context)
                SignupWithIcons(iconRes = R.drawable.icon_facebook,
                    contentDescription = if (isSignup) "Cadastre-se com Facebook" else "Entrar com Facebook", contetx = context)

            }
        }
        Row(modifier = Modifier.padding(bottom = PADDING_BOTTON),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically) {
            Text(text = if(isSignup)"Já um Membro? " else " Não tem uma conta? ", color = Color.Black, fontSize = TEXT_DEFAUL, fontWeight = FontWeight.Bold)
            Text(
                modifier = Modifier.clickable { isSignup =!isSignup },
                text = if(isSignup)" Entrar " else " Inscrever-se ", color = Color.Black, fontSize = TEXT_DEFAUL, fontWeight = FontWeight.Bold)

        }
    }
}

Exemplo de Alert Dialog

Gilber — Sat, 25 Feb 2023 11:02:28 +0000

As caixas de diálogo são pequenas janelas que levam o usuário a tomar uma decisão ou inserir informações adicionais. Elas não ocupam toda a tela e são normalmente usadas para eventos modais que exijam que usuários realizem uma ação antes de continuar.

package br.com.gilbercs.exdialog

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import br.com.gilbercs.exdialog.ui.theme.ExDialogTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExDialogTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val openDialog = remember {
                        mutableStateOf(false)
                    }
                    OutlinedButton(onClick = {
                        openDialog.value = true
                    }) {
                        Text(text = "Abrir Alert")
                    }
                    if(openDialog.value == true) {
                        DeleteDialog(openDialog = openDialog, title = "OK")
                    }
                }
            }
        }
    }
}

@Composable
fun DeleteDialog(
    openDialog: MutableState<Boolean>,
    title: String){
    val context = LocalContext.current
    Dialog(onDismissRequest = { openDialog.value}) {
        Surface(
            modifier = Modifier.fillMaxWidth(0.92f),
            color = Color.Transparent) {
            Box(modifier = Modifier.fillMaxWidth()) {
                //Text an Buttons
                Column(
                    modifier = Modifier
                        .padding(top = 30.dp)
                        .fillMaxWidth()
                        .background(
                            color = Color.White,
                            shape = RoundedCornerShape(percent = 10)
                        ),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Spacer(modifier = Modifier.height(height = 50.dp))
                    Text(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(all = 12.dp),
                        text = "Alert Dialog", fontSize = 24.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center)
                    Spacer(modifier = Modifier.height(height = 18.dp))
                    //Buttons
                    Row(modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceAround) {
                        OutlinedButton(
                            onClick = { openDialog.value = false},
                            colors = ButtonDefaults.buttonColors(
                                backgroundColor = Color.Red,
                            )
                        ) {
                            Text(text = "Cancelar", fontWeight = FontWeight.Bold, color = Color.White, fontSize = 18.sp)
                        }
                        OutlinedButton(
                            onClick = { openDialog.value = false},
                            colors = ButtonDefaults.buttonColors(
                                backgroundColor = MaterialTheme.colors.primaryVariant,
                            )) {
                            Text(text = "Confirmar", fontWeight = FontWeight.Bold, color = Color.White, fontSize = 18.sp)
                        }

                    }
                    Spacer(modifier = Modifier.height(height = 18.dp * 2))
                }
                //delete icon
                Icon(
                    modifier = Modifier
                        .size(70.dp)
                        .background(color = Color.White, shape = CircleShape)
                        .border(width = 2.dp, shape = CircleShape, color = Color.Red)
                        .padding(all = 16.dp)
                        .align(Alignment.TopCenter),
                    imageVector = Icons.Default.Delete,
                    contentDescription = "",
                    tint = Color.Red)
            }
        }
    }
}

Entendo e utilizando Git e GitHub

Gilber — Fri, 17 Feb 2023 13:27:31 +0000

O que é Git?
É um sistema de controle de versão. Com ele é possível que vários desenvolvedores contribuam no desenvolvimento de um mesmo sistema sem o risco de perder arquivos ou linhas de código. Com Git é possível manter um histórico de alterações do projeto e descentralizar o processo de desenvolvimento. O Git também pode ser usado para registrar o histórico de edições de qualquer tipo de arquivo (Exemplo: alguns livros digitais são disponibilizados no GitHub e escrito aos poucos publicamente).
Instalando Git no Linux/Ubuntu/Debian
Para instalar pasta digitar o comando abaixo no terminal
$ sudo apt-get install git
ou
$ sudo apt install git-all
verifique se foi instalado com sucesso digitando terminal
$ git — version
se a resposta exibir a versão do git encontra-se instalado em sua maquina
Ex: git version 2.25.1
Desinstalar Git
Para remover apenas o próprio pacote git do Ubuntu digite no terminal
$ sudo apt-get remove git
Para remover o pacote git e qualquer outro pacote dependente
$ sudo apt-get remove — auto-remove git
Se você também deseja excluir os arquivos de configuração
$ sudo apt-get purge git
Para excluir os arquivos de configuração
$ sudo apt-get purge — auto-remove git
O que é Github?
É uma plataforma de hospedagem de código-fonte e arquivos com controle de versão usando o Git. Ele permite que programadores, utilitários ou qualquer usuário cadastrado na plataforma contribuam em projetos privados e/ou Open Source de qualquer lugar do mundo.
Utilizando Github
Para iniciar com github você precisar criar uma conta como em qualquer outro site. No site github
Configuração Git
A primeira coisa que você deve fazer quando instalar o Git é definir o login. Isso é importante porque todos os commits no Git utilizam essas informações, e está imutavelmente anexado nos commits que você realiza:
Abra terminal no linux/windows e vamos configurar o usuário utilizando e-mail e user name da no github. (Obs: Realizado apenas uma única vez)
$ git config –global user.email “seuEmailCadastrodoGithub@gmail.com”
$ git config –global user.name “seuNomeCadastrodoGithub@gmail.com”
No terminal caso esteja no projeto que deseja enviar para o repositório no github basta digitar os comando abaixo: Senão for o caso Navegue ate pasta ou diretorio pelo terminal ou simplesmente, vá té o projeto e clique com o botão direito do mouse a vá ate abrir terminal.
Iniciar git no projeto: Caso você esteja iniciando o monitoramento de um projeto existente com Git, você precisa ir para o diretório do projeto e digitar.
$ git init
Conectar o projeto local com o repositório no git hub
$ git remote add origin (colar URL do repositório sem os parênteses)
Incorpora as alterações de um repositório remoto no branch atual.
$ git pull origin master
adicionar todos os arquivos a serem enviar ao repositório
$ git add .
Descrição do que esta sendo alterado ou enviado ao repositorio
$ git commit -m “nome do arquivo(obs: Descrição o que você tá enviano”
e finalmente com os arquivos todos preparado execute o comando abaixo para enviar os arquivo para o repositório no github.
8 — $ git push origin master
Passos
1 — $ git config — global user.email “seumail@hotmail.com”
2 — $ git config — global user.name “seulogin”
3 — $ git init
4 — $ git remote add origin (colar URL do repositorio)
5 — $ git pull origin master
6 — $ git add .
7 — $ git commit -m “nome do arquivo(obs: Descrição o que você tá enviano”
8 — $ git push origin master
Apos o comando acima ele podera pedir identificação pasta informar seu login do github como
9 — username
10 — senha
-apos basta atualizar que seu arquivo já estará hospedado no github para o mundo
Caso de algun erro pasta digitar o comando abaixo:
$ git pull origin master
e dar o Push novamente
$ git pull origin master
Git Status
A principal ferramenta utilizada para determinar quais arquivos estão em quais estados é o comando:
$ git status
Erro no historico de git ṕull ou merge
Para permitir que o Git faça o merge de dois projetos com históricos diferentes, é só passar o parâmetro — allow-unrelated-histories quando for fazer o pull, assim:
$ git pull origin master — allow-unrelated-histories
Espero ter ajudado você com os comandos basicos de utilizados pelo git e github
Referencia https://pt.wikipedia.org/wiki/GitHub https://git-scm.com/book/en/v2/Getting-Started-Installing-Git https://blog.cedrotech.com/git-o-minimo-que-voce-precisa-saber-para-trabalhar-em-equipe/

Exemplo Navigation Drawer com Jetpack Compose

Gilber — Fri, 06 Jan 2023 01:35:38 +0000

Esta é uma IU de gaveta de navegação feita com o Android Jetpack Compose. Ele usa o layout Scaffold. O código-fonte está disponível gratuitamente abaixo.

MainActivity.kt

package br.com.gilbercs.exjetpackcompose

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.*
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.platform.LocalContext
import br.com.gilbercs.exjetpackcompose.ui.MainContent
import br.com.gilbercs.exjetpackcompose.ui.components.MyButtonBar
import br.com.gilbercs.exjetpackcompose.ui.components.MyDrawer
import br.com.gilbercs.exjetpackcompose.ui.components.MyFabButton
import br.com.gilbercs.exjetpackcompose.ui.components.MyTopAppBar
import br.com.gilbercs.exjetpackcompose.ui.theme.ExJetpackComposeTheme
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExJetpackComposeTheme {
                //Declaração de variavel
                val scaffoldState = rememberScaffoldState()
                val coroutineScope = rememberCoroutineScope()
                val context = LocalContext.current
                //Create Scaffolf layout: Onde será adiconado itens como TopBar, BottomBar, FAB ou uma gaveta.
                Scaffold(
                    scaffoldState = scaffoldState,
                    //Top App Bar principal da aplicação
                    topBar = {
                             MyTopAppBar(
                                 onDrawerClick = {
                                     coroutineScope.launch { 
                                         scaffoldState.drawerState.open()
                                     }
                                 }
                             )
                    },
                    drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
                    //Drawer Navigation da aplicação
                    drawerContent = {
                                    MyDrawer{menuTitle ->
                                        Toast.makeText(context,menuTitle,Toast.LENGTH_LONG).show()
                                        coroutineScope.launch {
                                            delay(250)
                                            scaffoldState.drawerState.close()
                                        }
                                    }
                    },
                    //Float button da aplicação
                    floatingActionButton = {
                                           MyFabButton()
                    },
                    isFloatingActionButtonDocked = true,
                    //Button da aplicação
                    bottomBar = {
                        MyButtonBar()
                    }
                ) {
                    //Scaffold content main
                    MainContent()
                }
            }
        }
    }
}

MyTopAppBar
O componente TopAppBar é freqüentemente usado como cabeçalho para nossa tela — exibindo um título de navegação junto com componentes de menu ou qualquer outra decoração que o design de nosso aplicativo exija.

package br.com.gilbercs.exjetpackcompose.ui.components

import android.widget.Toast
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Call
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.List
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext

@Composable
fun MyTopAppBar(
    onDrawerClick: () -> Unit
){
    val context = LocalContext.current
    val dropDownMenuItems = listOf("Menu 01", "Menu 02", "Menu 03")
    var isDropDownMenuExpanded by remember { mutableStateOf(false) }

    TopAppBar(title = { Text(text = "Meu Aplication")},
        navigationIcon = {
            IconButton(onClick = { onDrawerClick()}) {
                Icon(imageVector = Icons.Default.List, contentDescription = "Menu")
            }
        },
        actions = {
            IconButton(onClick = {
                Toast.makeText(context,"Call",Toast.LENGTH_LONG).show()
            }) {
                Icon(imageVector = Icons.Default.Call, contentDescription = "Menu", tint = Color.White)

            }
            IconButton(onClick = {
                Toast.makeText(context,"Favorito",Toast.LENGTH_LONG).show()
            }) {
                Icon(imageVector = Icons.Default.Favorite, contentDescription = "Favorite", tint = Color.White)

            }
            IconButton(onClick = {
                isDropDownMenuExpanded = true
            }) {
                Icon(imageVector = Icons.Default.MoreVert, contentDescription = "Menu", tint = Color.White)
                DropdownMenu(expanded = isDropDownMenuExpanded, onDismissRequest = { isDropDownMenuExpanded =! isDropDownMenuExpanded }) {
                    dropDownMenuItems.forEach { label->
                        DropdownMenuItem(onClick = {
                            Toast.makeText(context,"$label",Toast.LENGTH_LONG).show()
                        }) {
                            Text(text = "$label")
                        }
                    }

                }
            }
        }
    )
}

MyFabButton
Aqui você pode adicionar FloatingActionButton. Você pode definir qualquer Composable, mas FloatingActionButton já foi criado para este caso de uso.

import android.widget.Toast
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

@Composable
fun MyFabButton() {
    //Declaração de variavél
    val context = LocalContext.current
    FloatingActionButton(onClick = { Toast.makeText(context,"Adicionar",Toast.LENGTH_LONG).show()},
    backgroundColor = MaterialTheme.colors.primaryVariant) {
        Icon(imageVector = Icons.Default.Add,
            contentDescription = "ADD")
    }
}

MyButtonBar
Vai exibir os destinos na parte inferior da tela. Logo vamos usa o slot bottomBar e isFloatingActionButtonDocked para sobrepor o FAB com a barra de apps inferior.

BottomAppBar oferece suporte a cortes no FAB com o parâmetro cutoutShape, que aceita qualquer Shape. É recomendável fornecer o mesmo Shape usado pelo componente fixado. Por exemplo, FloatingActionButton usa MaterialTheme.shapes.small com um tamanho de canto de 50% como valor padrão para o parâmetro shape:

package br.com.gilbercs.exjetpackcompose.ui.components

import androidx.compose.foundation.shape.CornerSize
import androidx.compose.material.BottomAppBar
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable

@Composable
fun MyButtonBar() {
    BottomAppBar(
        cutoutShape = MaterialTheme.shapes.small.copy(
            CornerSize(50)
        )
    ) {
        //Buttom Content
    }
}

Navigation Drawer compose
E por fim MyDrawer da aplicação que vai ser menu deslizante para a esquerda usado para exibir o conteúdo do menu no Android.
Facilita a navegação entre diferentes telas.
A gaveta aparece quando o usuário toca no ícone do menu da gaveta na barra de aplicativos.

package br.com.gilbercs.exjetpackcompose.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import br.com.gilbercs.exjetpackcompose.R

@Composable
fun MyDrawer(
    bgGradientColos: List<Color> = listOf(Color(0xFF689F38),Color(0xFF8BC34A),Color(0xFFC5E1A5)),
    onItemClick: (String) -> Unit
){
    //declarar variavel
    val itemMenu = prepareItemDrawer()

    LazyColumn(modifier = Modifier
        .fillMaxSize()
        .background(brush = Brush.verticalGradient(bgGradientColos)),
    horizontalAlignment = Alignment.CenterHorizontally,
    contentPadding = PaddingValues(vertical = 36.dp)
    ){
        item {
            //Imagem
            Image(
                modifier = Modifier
                    .size(size = 150.dp)
                    .clip(CircleShape),
                painter = painterResource(id = R.drawable.img_albert),
                contentDescription = "Imagem Perfil")
            //Text
            Text(
                modifier = Modifier.padding(top = 8.dp, bottom = 30.dp),
                text = "gilbercs@hotmail.com",
                fontWeight = FontWeight.Normal,
                fontSize = 16.sp,
                color = Color.White
            )
        }
        items(itemMenu){item ->
           NavItemDrawer(itemDrawer = item) {
               onItemClick(item.title)
           }
        }
    }

}
@Composable
fun NavItemDrawer(
    itemDrawer: ItemDrawer,
    unredBubble: Color = Color(0XFF1976D2),
    onClick: () -> Unit
){
    Row(modifier = Modifier
        .fillMaxWidth()
        .clickable { onClick() }
        .padding(24.dp, vertical = 10.dp),
    verticalAlignment = Alignment.CenterVertically) {
        Box {
            //Menu: Icon
            Icon(modifier = Modifier
                .padding(all = if (itemDrawer.show && itemDrawer.title == "Messages") 5.dp else 2.dp)
                .size(size = if (itemDrawer.show && itemDrawer.title == "Messages") 24.dp else 28.dp),
                imageVector = itemDrawer.icon,
                contentDescription = "Icon",
                tint = Color.White)
            //Unred bubble
            if (itemDrawer.show){
                Box(modifier = Modifier
                    .size(size = 8.dp)
                    .align(alignment = Alignment.TopCenter)
                    .background(color = unredBubble, shape = CircleShape))
            }
            //Menu: Title
            Text(
                modifier = Modifier
                    .padding(start = 40.dp),
                text = itemDrawer.title,
            fontSize = 20.sp,
            fontWeight = FontWeight.Medium,
            color = Color.White)
        }

    }
}
@Composable
private fun prepareItemDrawer(): List<ItemDrawer>{
    val item = arrayListOf<ItemDrawer>()
    //Adicionar Menu no Drawer: Home
    item.add(
        ItemDrawer(
            icon = Icons.Default.Home,
            title = "Home"
        )
    )
    //Perfil
    item.add(
        ItemDrawer(
            icon = Icons.Default.Person,
            title = "Perfil"
        )
    )
    //Favorite
    item.add(
        ItemDrawer(
            icon = Icons.Default.Favorite,
            title = "Favorito"
        )
    )
    //Sobre
    //Favorite
    item.add(
        ItemDrawer(
            icon = Icons.Default.Info,
            title = "Sobre"
        )
    )
    //Sair
    //Favorite
    item.add(
        ItemDrawer(
            icon = Icons.Default.Close,
            title = "Sair"
        )
    )
    return item
}
data class ItemDrawer(
    val icon: ImageVector,
    val title: String,
    val show: Boolean = false
)

Resultado final

Exemplo LazyVerticalGrid com jetpack compose

Gilber — Thu, 05 Jan 2023 21:00:40 +0000

Os elementos combináveis LazyVerticalGrid e LazyHorizontalGrid oferecem suporte à exibição de itens em uma grade. Uma grade vertical lenta mostra os itens em um contêiner de rolagem vertical, dividido em várias colunas, enquanto grades horizontais lentas fazem o mesmo no eixo horizontal.

package br.com.gilbercs.lazycolumn

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import br.com.gilbercs.lazycolumn.ui.theme.LazycolumnTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LazycolumnTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val addItem = arrayListOf<Item>()
                    //Linguagem C
                    addItem.add(
                       Item(
                           icon = R.drawable.icon_c,
                           language = "Linguagem C",
                           content = "C",
                           description = "C é uma das linguagens de programação mais populares[4][5] e" +
                                   "existem poucas arquiteturas para as quais não existem compiladores" +
                                   "para C. C tem influenciado muitas outras linguagens de programação" +
                                   "(por exemplo, a linguagem Java),[6] mais notavelmente C++, que" +
                                   "originalmente começou como uma extensão para C."
                       )
                    )
                    //Linguagem Java
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_java,
                            language = "Linguagem JAVA",
                            content = "JAVA",
                            description = "é uma linguagem de programação orientada a objetos desenvolvida " +
                                    "na década de 90 por uma equipe de programadores chefiada por James Gosling," +
                                    " na empresa Sun Microsystems, que em 2008 foi adquirido pela empresa Oracle" +
                                    "Corporation."
                        )
                    )
                    //Linguagem C++
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_python,
                            language = "Linguagem PYTHON",
                            content = "PYTHON",
                            description = "é uma linguagem de programação orientada a objetos desenvolvida " +
                                    "na década de 90 por uma equipe de programadores chefiada por James Gosling," +
                                    " na empresa Sun Microsystems, que em 2008 foi adquirido pela empresa Oracle" +
                                    "Corporation."
                        )
                    )
                    //Linguagem PHP
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_cc,
                            language = "Linguagem C++",
                            content = "C++",
                            description = "é uma linguagem de programação compilada multi-paradigma e de uso geral. " +
                                    "Desde os anos 1990 é uma das linguagens comerciais mais populares, sendo bastante " +
                                    "usada também na academia por seu grande desempenho e base de utilizadores."
                        )
                    )
                    //linguagem p
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_php,
                            language = "Linguagem PHP",
                            content = "PHP",
                            description = "é uma linguagem de programação de alto nível e de propósito geral." +
                                    "Sua filosofia de design enfatiza a legibilidade do código com o uso de recuo" +
                                    "significativo. Python é tipado dinamicamente e coletado como lixo."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_kotlin,
                            language = "Linguagem KOTLIN",
                            content = "KOTLIN",
                            description = "é uma linguagem de programação multiplataforma, orientada a objetos e" +
                                    "funcional, concisa e estaticamente tipada, desenvolvida pela JetBrains em " +
                                    "2011, que compila para a Máquina virtual Java e que também pode ser traduzida " +
                                    "para a linguagem JavaScript e compilada para código nativo."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_js,
                            language = "Linguagem JAVASCRIPT",
                            content = "JAVASCRIPT",
                            description = "é uma linguagem de programação interpretada estruturada, de script em alto nível com " +
                                    "tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das " +
                                    "três principais tecnologias da World Wide Web."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_net,
                            language = "NET",
                            content = "NET",
                            description = "NET é um framework livre e de código aberto para os sistemas operacionais Windows, " +
                                    "Linux e macOS. É um sucessor de código aberto do .NET Framework. " +
                                    "O projeto é desenvolvido principalmente pela Microsoft e lançado com a Licença MIT"
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_react,
                            language = "REACT",
                            content = "REACT",
                            description = "é uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos " +
                                    "para os sistemas Android e iOS de forma nativa."
                        )
                    )
                    LazyGridList(item = addItem)
                }
            }
        }
    }
}
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyGridList(item: List<Item>){
    LazyVerticalGrid(cells = GridCells.Fixed(2)){
        items(item){item ->
            Card(modifier = Modifier
                .fillMaxWidth()
                .padding(all = 10.dp),
                elevation = 10.dp,
                shape = RoundedCornerShape(size = 16.dp)
            ) {
                ItemLazy(item = item)
            }
        }
    }
}

@Composable
fun ItemLazy(item: Item){
Row(modifier = Modifier
    .fillMaxSize()
    .padding(all = 8.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically) {
    Image(painter = painterResource(id = item.icon), contentDescription = item.content,
    modifier = Modifier
        .size(60.dp)
        .clip(CircleShape)
        .border(1.0.dp, color = MaterialTheme.colors.primaryVariant, CircleShape))
    Spacer(modifier = Modifier.width(8.dp))
    var isExpanded by remember { mutableStateOf(false)}
    Column(modifier = Modifier
        .fillMaxWidth()
        .clickable { isExpanded = !isExpanded }) {
        Text(
            text = item.language,
            color = MaterialTheme.colors.primaryVariant,
            style = MaterialTheme.typography.subtitle2,
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp)
        Spacer(modifier = Modifier.height(4.dp))
        val surfaceColor by animateColorAsState(
            if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface)
        Spacer(modifier = Modifier.height(4.dp))
        if (isExpanded){
            Surface(shape = MaterialTheme.shapes.medium,
                elevation = 1.dp,
                color = surfaceColor,
                modifier = Modifier
                    .animateContentSize()
                    .fillMaxWidth()
                    .padding(all = 1.dp)) {
                Text(
                    modifier = Modifier.padding(all = 4.dp),
                    text = item.description,
                    fontWeight = FontWeight.Bold,
                    fontSize = 16.sp,
                    textAlign = TextAlign.Justify
                )
            }
        }
    }
}

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    LazycolumnTheme {
    }
}
data class Item(
    val icon: Int,
    val content: String,
    val language: String,
    val description: String,
)

Listas usando LazyColumn no Jetpack Compose

Gilber — Mon, 19 Dec 2022 16:44:55 +0000

Uma LazyColumn é uma lista de rolagem vertical que apenas compõe e apresenta os itens visíveis no momento. É semelhante a um Recyclerview no sistema Android View clássico.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import br.com.gilbercs.lazycolumn.ui.theme.LazycolumnTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LazycolumnTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val addItem = arrayListOf<Item>()
                    //Linguagem C
                    addItem.add(
                       Item(
                           icon = R.drawable.icon_c,
                           language = "Linguagem C",
                           content = "C",
                           description = "C é uma das linguagens de programação mais populares[4][5] e" +
                                   "existem poucas arquiteturas para as quais não existem compiladores" +
                                   "para C. C tem influenciado muitas outras linguagens de programação" +
                                   "(por exemplo, a linguagem Java),[6] mais notavelmente C++, que" +
                                   "originalmente começou como uma extensão para C."
                       )
                    )
                    //Linguagem Java
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_java,
                            language = "Linguagem JAVA",
                            content = "JAVA",
                            description = "é uma linguagem de programação orientada a objetos desenvolvida " +
                                    "na década de 90 por uma equipe de programadores chefiada por James Gosling," +
                                    " na empresa Sun Microsystems, que em 2008 foi adquirido pela empresa Oracle" +
                                    "Corporation."
                        )
                    )
                    //Linguagem C++
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_python,
                            language = "Linguagem PYTHON",
                            content = "PYTHON",
                            description = "é uma linguagem de programação orientada a objetos desenvolvida " +
                                    "na década de 90 por uma equipe de programadores chefiada por James Gosling," +
                                    " na empresa Sun Microsystems, que em 2008 foi adquirido pela empresa Oracle" +
                                    "Corporation."
                        )
                    )
                    //Linguagem PHP
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_cc,
                            language = "Linguagem C++",
                            content = "C++",
                            description = "é uma linguagem de programação compilada multi-paradigma e de uso geral. " +
                                    "Desde os anos 1990 é uma das linguagens comerciais mais populares, sendo bastante " +
                                    "usada também na academia por seu grande desempenho e base de utilizadores."
                        )
                    )
                    //linguagem p
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_php,
                            language = "Linguagem PHP",
                            content = "PHP",
                            description = "é uma linguagem de programação de alto nível e de propósito geral." +
                                    "Sua filosofia de design enfatiza a legibilidade do código com o uso de recuo" +
                                    "significativo. Python é tipado dinamicamente e coletado como lixo."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_kotlin,
                            language = "Linguagem KOTLIN",
                            content = "KOTLIN",
                            description = "é uma linguagem de programação multiplataforma, orientada a objetos e" +
                                    "funcional, concisa e estaticamente tipada, desenvolvida pela JetBrains em " +
                                    "2011, que compila para a Máquina virtual Java e que também pode ser traduzida " +
                                    "para a linguagem JavaScript e compilada para código nativo."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_js,
                            language = "Linguagem JAVASCRIPT",
                            content = "JAVASCRIPT",
                            description = "é uma linguagem de programação interpretada estruturada, de script em alto nível com " +
                                    "tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das " +
                                    "três principais tecnologias da World Wide Web."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_net,
                            language = "NET",
                            content = "NET",
                            description = "NET é um framework livre e de código aberto para os sistemas operacionais Windows, " +
                                    "Linux e macOS. É um sucessor de código aberto do .NET Framework. " +
                                    "O projeto é desenvolvido principalmente pela Microsoft e lançado com a Licença MIT"
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_react,
                            language = "REACT",
                            content = "REACT",
                            description = "é uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos " +
                                    "para os sistemas Android e iOS de forma nativa."
                        )
                    )
                    Greeting(addItem)
                }
            }
        }
    }
}

@Composable
fun Greeting(item: List<Item>) {
    LazyColumn{
       items(items = item){item->
           Card(modifier = Modifier
               .fillMaxWidth()
               .padding(all = 10.dp),
           elevation = 10.dp,
           shape = RoundedCornerShape(size = 16.dp)
           ) {
               ItemLazy(item = item)
           }
       }
    }
}
@Composable
fun ItemLazy(item: Item){
Row(modifier = Modifier
    .fillMaxSize()
    .padding(all = 8.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically) {
    Image(painter = painterResource(id = item.icon), contentDescription = item.content,
    modifier = Modifier
        .size(60.dp)
        .clip(CircleShape)
        .border(1.0.dp, color = MaterialTheme.colors.primaryVariant, CircleShape))
    Spacer(modifier = Modifier.width(8.dp))
    var isExpanded by remember { mutableStateOf(false)}
    Column(modifier = Modifier
        .fillMaxWidth()
        .clickable { isExpanded = !isExpanded }) {
        Text(
            text = item.language,
            color = MaterialTheme.colors.primaryVariant,
            style = MaterialTheme.typography.subtitle2,
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp)
        Spacer(modifier = Modifier.height(4.dp))
        val surfaceColor by animateColorAsState(
            if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface)
        Spacer(modifier = Modifier.height(4.dp))
        if (isExpanded){
            Surface(shape = MaterialTheme.shapes.medium,
                elevation = 1.dp,
                color = surfaceColor,
                modifier = Modifier
                    .animateContentSize()
                    .fillMaxWidth()
                    .padding(all = 1.dp)) {
                Text(
                    modifier = Modifier.padding(all = 4.dp),
                    text = item.description,
                    fontWeight = FontWeight.Bold,
                    fontSize = 16.sp,
                    textAlign = TextAlign.Justify
                )
            }
        }
    }
}

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    LazycolumnTheme {
    }
}
data class Item(
    val icon: Int,
    val content: String,
    val language: String,
    val description: String,

Crie um Aplicativo IMC para Android

Gilber — Fri, 09 Dec 2022 04:36:14 +0000

Neste tutorial vamos criar um aplicativo para calcular o índice de massa corporal, conhecido pela sigla de IMC é um cálculo que permite medir se alguém está ou não com o peso ideal a partir das entradas dos dados do indivíduo como peso e altura. O Aplicativo exibirá o resultado do IMC e a classificação do resultado conforme tabela da organização mundial de saúde. A aplicação será desenvolvida na linguagem de programação kotlin junto com a ferramenta de UI do Google jetpack compose e IDE Android Studio.

Pré-requisitos

Linguagem de programação kotlin - básico
Logica de programação

Ferramentas

IDE Android Studio versão 2021.3.1 ou mais recente

O que você apreenderá

Criar um projeto com jetpack compose
Manipular entrada e saída de dados

o que é jetpack compose
É um kit de ferramentas moderno recomendado pelo Android para criar IUs nativas. Ele simplifica e acelera o desenvolvimento da IU no Android. Dê vida ao seu app rapidamente com menos código, ferramentas eficientes e APIs Kotlin intuitivas.

Formula para calcular Índice de Massa Corporal

IMC = Peso / altura²

Vamos iniciar o desenvolvimento do projeto

Abra a IDE Android Studio e clique em New Project

Na janela New Project, selecione Empty Compose Activity e clique em Next.

Dê o nome a aplicação de CalculatorIMC e clique em Finish

Projeto está pronto para receber as linhas de código do nosso App

No pacote res, escolha values, abra o arquivo **string.xml" e crie as Strings do App

resources>
    <!--Nome da aplicacação-->
    <string name="app_name">CalculatorIMC</string>
    <!--Titulo da tela principal do App-->
    <string name="title_home">IMC - Calculadora do Índice de Massa Corporal</string>
    <!--Texto para entrada de dados peso e altura-->
    <string name="text_peso">Informe o Peso (Ex:80.0)</string>
    <string name="text_altura">Informe Altura (Ex: 1.70)</string>
    <!--Texto dos botões-->
    <string name="buttom_clean">Limpar</string>
    <string name="buttom_calculator">Calcular IMC</string>
</resources>

Tela da calculadora
Função Composable

 @OptIn(ExperimentalAnimationApi::class)
        @Composable
        fun HomeImc() {
            //Declaração da varivéis para entrada de dados conforme regra
            var peso by remember { mutableStateOf("") }
            var altura by remember { mutableStateOf("") }
            var result_imc by remember { mutableStateOf("") }
            var show by remember { mutableStateOf(false) }
            val context = LocalContext.current
            val requestFocus = FocusRequester()
            //aplicar uma margens e alinhar os campos
            Column(modifier = Modifier
                .fillMaxWidth()
                .padding(all = 15.dp),
            horizontalAlignment = Alignment.CenterHorizontally){
                //campos para entrada de dados: Peso
                    OutlinedTextField(
                        modifier = Modifier.focusRequester(requestFocus),
                        value = peso,
                        onValueChange = { peso = it },
                        label = { Text(text = stringResource(id = R.string.text_peso), fontWeight = FontWeight.Bold,color = Color.White, fontSize = 21.sp)},
                        placeholder = { Text(text = stringResource(id = R.string.text_exemple_peso), color = Color.White)},
                        textStyle = TextStyle(fontSize = 21.sp, fontWeight = FontWeight.Medium, color = Color.White),
                        leadingIcon = { Icon(tint = Color.White, painter = painterResource(id = R.drawable.ic_peso), contentDescription = "Peso") },
                        colors = TextFieldDefaults.outlinedTextFieldColors(
                            focusedBorderColor = Color.Transparent,
                            unfocusedBorderColor = Color.Transparent,
                            cursorColor = Color.White
                        ),
                        keyboardOptions = KeyboardOptions(
                            keyboardType = KeyboardType.Number,
                            imeAction = ImeAction.Next
                        ),
                        singleLine = true
                    )
                Space1()
                //campos para entrada de dados: Altura
                OutlinedTextField(
                    value = altura,
                    onValueChange = { altura = it },
                    label = { Text(text = stringResource(id = R.string.text_altura), fontWeight = FontWeight.Bold, color = Color.White, fontSize = 21.sp) },
                    placeholder = { Text(text = stringResource(id = R.string.text_exemple_altura), color = Color.White) },
                    textStyle = TextStyle(fontSize = 21.sp, fontWeight = FontWeight.Medium, color = Color.White),
                    leadingIcon = { Icon(tint = Color.White, painter = painterResource(id = R.drawable.ic_altura), contentDescription = "altura")},
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        focusedBorderColor = Color.Transparent,
                        unfocusedBorderColor = Color.Transparent,
                        cursorColor = Color.White
                    ),
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Done
                    ),
                    keyboardActions = KeyboardActions {
                        if (peso.isNotEmpty() && altura.isNotEmpty()) {
                            //Ação no teclado
                            result_imc = calculatorImc(peso,altura)
                            show = true
                        } else {
                            Toast.makeText(context,"Preencha os campos",Toast.LENGTH_LONG).show()
                            requestFocus.requestFocus()
                        }
                    },
                    singleLine = true
                )
                Space1()
                //Button Criação de evento
                Row(
                    modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly){
                    OutlinedButton(
                        onClick = {
                            peso = ""
                            altura = ""
                            show = false
                            requestFocus.requestFocus()
                        }) {
                        Text(text = stringResource(id = R.string.buttom_clean))
                    }
                    OutlinedButton(
                        onClick = {
                            if (peso.isNotEmpty() && altura.isNotEmpty()) {
                                //Ação
                                result_imc = calculatorImc(peso,altura)
                                show = true
                            } else {
                                Toast.makeText(context,"Preencha os campos",Toast.LENGTH_LONG).show()
                                requestFocus.requestFocus()
                            }
                        }) {
                        Text(text = stringResource(id = R.string.buttom_calculator))
                    }
                }
                //saida de dados: resultado animação
                //Resultado
                AnimatedVisibility(
                    visible = show,
                    enter = scaleIn() + expandVertically(expandFrom = Alignment.CenterVertically),
                    exit = scaleOut() + shrinkVertically(shrinkTowards = Alignment.CenterVertically)
                ) {
                    Text(
                        text = result_imc,
                        style = MaterialTheme.typography.h4,
                        fontWeight = FontWeight.Bold,
                        color = Color.White)
                }
            }
        }

Função para calcular IMC com base na formula

//Função para calcular IMC retornando uma string
    fun calculatorImc(weight: String, height: String):String {
        //Receber dados de entrada e converter em double
        val peso = weight.toDouble()
        val altura = height.toDouble()
        //Processamento: formula para o calculo do IMC
        val calculeImc = peso / (altura*altura)
        //Formatar Numero
        val resultFormt: Double = String.format("%.1f", calculeImc).toDouble()
        //Função para classificação IMC: Recebi por parametro o resultado do
        // calculo já convertido em double e retorna uma String com resultado da
        //classificação
        return classificationImc(resultImc = resultFormt)
    }

função para classificar o resultado do IMC

//função para classificar o resultado do IMC: Recibe no para o Double
    fun classificationImc(resultImc: Double):String{
        var resulClassificationtImc = ""
        //Classificação conforme tabela da OMS a partir do IMC
        if (resultImc <18.5f){
            //MENOR QUE 18,5 -> Baixo pesso - Baixo
            resulClassificationtImc = "Baixo Peso"
        }else{
            if (resultImc>=18.5 && resultImc <24.9){
                //ENTRE 18,5 E 24,9  -> Normal - Adequado
                resulClassificationtImc = "Peso Adequado"
            }else{
                if (resultImc == 25.0){
                    //Igual a 25  -> Normal - Risco
                    resulClassificationtImc = "Risco de SobrePeso"
                }else{
                    if (resultImc > 25 && resultImc<=29.9){
                        //ENTRE 25,0 E 29,9 -> Sobrepreso Aumentado
                        resulClassificationtImc = "Pré-Obeso"
                    }else{
                        if(resultImc>=30 && resultImc<=34.9){
                            //ENTRE 30,0 E 34,9 -> Obesidade - Moderado
                            resulClassificationtImc = "Obesidade GRAU I"
                        }else{
                            if (resultImc>=35 && resultImc<=39.9){
                                //ENTRE 35,0 E 39,9 -> Obesidade Mórbida - Grave
                                resulClassificationtImc = "Obesidade GRAU II"
                            }else{
                                //resultImc > 40
                                //Igual ou Maior 40  -> Obesidade Mórbida - Muito Grave
                                resulClassificationtImc = "Obesidade GRAU III"
                            }
                        }
                    }
                }
            }
        }
        return "Seu Imc É: ${resultImc}\n\n"+resulClassificationtImc+"\n"
    }

Resultado final

Repositório Calculador IMC