PDF - VERSÃO DE IMPRESSÃO

Lição 7 - Web Design e Layouts responsivos com Jetpack Compose

objetivo

Depois de conhecermos os Cards na lição anterior, vamos continuar nossos estudos sobre o Jetpack Compose, porém, agora, abordaremos como o Kotlin pode ser utilizado para criar interfaces responsivas e modernas, atendendo às exigências dos dispositivos atuais, que variam em tamanhos de tela e configurações. Você aprenderá a integrar bibliotecas dinâmicas de layout ao Jetpack Compose e aproveitar ao máximo os recursos oferecidos pelo Kotlin para desenvolver aplicativos visualmente atraentes e flexíveis.

O objetivo desta lição é capacitar você a construir layouts responsivos, adaptáveis a diferentes dispositivos e resoluções de tela, utilizando Kotlin e bibliotecas de layout dinâmico, alinhando-se às melhores práticas do mercado. Ao final desta lição, você estará apto a criar interfaces que proporcionam uma experiência consistente e agradável, independentemente do tamanho ou tipo do dispositivo.

Vamos lá?

problematização

Imagine que você está desenvolvendo um aplicativo para e-commerce e precisa garantir que a interface seja intuitiva e funcional em diferentes dispositivos, desde smartphones compactos até tablets de tela grande. O desafio de adaptar elementos visuais e garantir que botões, imagens e listas fiquem organizados, sem comprometer a usabilidade, pode parecer complexo, não é mesmo? Além disso, pensar em layouts fixos limita a escalabilidade do aplicativo, tornando difícil atender às expectativas dos usuários que esperam interfaces adaptativas e eficientes. Diante disso, como resolver esse problema?

É aqui que entram os layouts responsivos, criados com Kotlin e ferramentas, como o Jetpack Compose. Esses recursos permitem ajustar automaticamente os elementos visuais com base no tamanho da tela e nos comportamentos do usuário! Vamos descobrir como essas tecnologias podem transformar o design do seu aplicativo?

case

Agora, vamos entender como o design de web e os layouts responsivos funcionam na prática? Para ilustrar isso, usaremos o exemplo de uma startup chamada Adaptix que recebeu uma demanda em que precisa desenvolver um aplicativo de gestão financeira. O objetivo principal do aplicativo é garantir uma experiência otimizada tanto em smartphones quanto em tablets. Durante as reuniões sobre o projeto, destacou-se a necessidade de layouts flexíveis, que se ajustem a diferentes tamanhos de tela sem perder a harmonia visual.

Para atender a essa demanda, os desenvolvedores decidem usar o Jetpack Compose e integrar bibliotecas de layout dinâmico, como ConstraintLayout Compose e BoxWithConstraints. Esses recursos foram escolhidos, pois permitiram que fossem definidos comportamentos específicos com base no espaço disponível na tela, como reorganizar elementos, alterar tamanhos de fonte ou modificar espaçamentos automaticamente.

O resultado final foi um aplicativo visualmente consistente e altamente adaptável, que impressionou tanto os usuários quanto a equipe de desenvolvimento. Viu como o conteúdo desta lição é fundamental no cotidiano? Esse é apenas um exemplo, mas os conceitos abordados podem ser aplicados em diversas outras situações!

Conceitualização

O Web Design Responsivo é uma área fundamental do desenvolvimento de software que se concentra na criação da interface visual e na experiência do usuário em aplicações e sites. Ele envolve a escolha de cores, tipografias, espaçamentos e organização dos elementos na tela para garantir que a navegação seja intuitiva e agradável. Zemel (2015) explica que um site, App ou sistema com web design responsivo pode ser acessado de um PC, notebook, smartphone, tablet, TV, geladeira, banheira, em suma, de qualquer dispositivo com acesso à rede, independentemente de sua resolução, de sua capacidade de cores ou se é touch ou não.

No contexto do desenvolvimento Android, o design responsivo desempenha papel fundamental para garantir que os aplicativos se adaptem a diferentes dispositivos, proporcionando uma experiência consistente para todos os usuários. Com o avanço das tecnologias, a necessidade de criar interfaces dinâmicas e flexíveis se tornou indispensável, tornando o Web Design um dos pilares do desenvolvimento moderno. Nesse sentido, tecnologias, como o Jetpack Compose, combinado com Kotlin, tornam essa adaptação mais simples e eficiente ao permitir a criação de layouts declarativos e dinâmicos.

Layouts Responsivos com Jetpack Compose

O Jetpack Compose revolucionou a forma como layouts responsivos são criados no Android, permitindo que desenvolvedores projetem interfaces adaptáveis de maneira mais intuitiva e eficiente. Diferentemente do modelo tradicional baseado em XML, o Compose utiliza uma abordagem declarativa, tornando o código mais organizado e fácil de manter. Compose [...] (2025) ressalta que um layout deve ser projetado levando em consideração diferentes orientações de tela e tamanhos de fator de forma, e o Compose oferece alguns mecanismos prontos para uso, que, por sua vez, facilitam a adaptação de seus layouts compostáveis a várias configurações de tela.

Com ferramentas, como BoxWithConstraints e ConstraintLayout Compose, é possível criar componentes que ajustam automaticamente seu tamanho e posicionamento conforme a tela do dispositivo. Além disso, o uso de unidades escaláveis, como “dp” e “sp”, garante que fontes, espaçamentos e margens sejam dimensionados corretamente em diferentes resoluções, oferecendo uma experiência otimizada para smartphones, tablets e outros dispositivos Android.

BoxWithConstraints em Kotlin

O BoxWithConstraints é um composable do Jetpack Compose, que, segundo Composse [...] (2025), são blocos de construção fundamentais de um aplicativo criado com o Compose, que permite criar layouts adaptáveis com base no tamanho disponível na tela. Ele fornece informações sobre as dimensões máximas e mínimas do espaço em que o componente será renderizado, permitindo ajustes dinâmicos para diferentes tamanhos de tela. ConstraintLayout [...] (2024) define BoxWithConstraints como uma caixa sujeita às restrições da tela definindo seu próprio conteúdo de acordo com o espaço disponível, com base nas Constraints de entrada. Elas são um recurso especialmente útil para criar layouts responsivos, garantindo que a interface se adapte automaticamente a diferentes dispositivos, como smartphones e tablets.

Com ele, é possível alterar a disposição de elementos, modificar tamanhos de fontes e ajustar margens dinamicamente, sem a necessidade de verificações externas de resolução. Isso torna o desenvolvimento mais eficiente e alinhado às melhores práticas do design responsivo no Android. Na Figura 1, temos um exemplo básico que altera a cor de um Card e o tamanho do texto com base na largura disponível na tela:

Figura 1 - BoxWithConstraints em Jetpack Compose
Fonte: o autor.

#PraCegoVer: a figura apresenta 33 linhas. Na linha 1, está escrito “@Composable”; na linha 2, “fun ResponsiveCard() {“; na linha 3, “BoxWithConstraints(“; na linha 4, “modifier = Modifier”; na linha 5, “.fillMaxSize()”; na linha 6, “.padding(16.dp)”; na linha 7, “) {“; na linha 8, “Card(”; na linha 9, “modifier = Modifier”; na linha 10, “.fillMaxWidth”; na linha 11, “.height(if (isLargeScreen) 200.dp else 150.dp)”; na linha 12, “colors = CardDefaults.cardColors(“; na linha 13, “containerColor = if (isLargeScreen) Color.Blue else Color.Gray”; na linha 14, “)”; na linha 15, “shape = RoundedCornerShape(12.dp)”; na linha 16, “) {”; na linha 17, “Box(“; na linha 18, “modifier = Modifier.fillMaxSize()”; na linha 19, “contentAlignment = Alignment.Center”; na linha 20, “) {”; na linha 21, “val textSize = if (maxWidth > 500.dp) 24.sp else 18.sp”; na linha 22, “val text = if (maxWidth > 500.dp) ‘Tela Grande’ else ‘Tela Pequena’”; na linha 24, “Text(”; na linha 25, “text = text”; na linha 26, “fontSize = textSize”; na linha 27, “fontWeigtht = FontWeight.Bold”; na linha 28, “color = Color.White”; na linha 29, “)”; na linha 30, “}”; na linha 31, “}”; na linha 32, “}”; e, na linha 33, “}”. Na linha 23, não há conteúdo escrito. Fim da descrição.

Entenda os pontos principais do código da Figura 1:

BoxWithConstraints: fornece as dimensões disponíveis na tela, permitindo ajustes dinâmicos.
isLargeScreen: verifica se a largura disponível ultrapassa 500 dp, definindo se a tela é grande ou pequena.
Card: adapta sua altura e cor com base no espaço disponível.
Text: exibe uma mensagem diferente e ajusta o tamanho da fonte de acordo com a largura da tela.

No geral, o BoxWithConstraints é uma ferramenta poderosa para criar layouts responsivos no Jetpack Compose. Com ele, podemos ajustar dinamicamente os componentes com base no espaço disponível, garantindo uma experiência consistente em diferentes dispositivos. O exemplo apresentado na Figura 1 demonstra como usar essa abordagem para modificar propriedades, como tamanho, cor e fonte, tornando a interface mais flexível e adaptável.

ConstraintLayout em Jetpack Compose

O ConstraintLayout é um sistema de layout flexível que permite posicionar elementos na tela com base em restrições definidas entre os componentes. No Jetpack Compose, ele funciona de maneira semelhante ao ConstraintLayout do XML, mas, agora, integrado de forma declarativa no Kotlin, proporcionando maior controle sobre o posicionamento dos elementos sem a necessidade de aninhar múltiplos Row e Column. Composable (2023) explica que esse layout permite posicionar elementos Composables em relação a outros elementos Composables na tela.

Além disso, esse tipo de layout é ideal para interfaces complexas e responsivas, pois permite que os componentes sejam organizados de maneira dinâmica e adaptável, sem comprometer o desempenho. Na Figura 2, temos um exemplo básico de ConstraintLayout no Jetpack Compose, onde posicionaremos um título no topo e um botão centralizado na tela:

Figura 2 - ConstraintLayout em Jetpack Compose
Fonte: o autor.

#PraCegoVer: a figura apresenta 31 linhas. Na linha 1, está escrito “@Composable”; na linha 2, “fun ConstraintLayout() {“; na linha 3, “ConstraintLayout(“; na linha 4, “modifier = Modifier.fillMaxSize()”; na linha 5, “) {“; na linha 7, “val (title, button) = createRefs()”; na linha 9, “Text(“; na linha 10, “text = ‘Exemplo ConstraintLayout’”; na linha 11, “style = MaterialTheme.typography.titleLarge”; na linha 12, “modifier = Modifier.constrainAs(title) {“; na linha 13, “top.linkTo(parent.top, margin = 32.dp)”; na linha 14, “start.linkTo(parent.start)”; na linha 15, “end.linkTo(parent.end)”; na linha 16, “}”; na linha 17, “)”; na linha 19, “Button(“; na linha 20, “onClick = {},”; na linha 21, “modifier = Modifier.constrainAs(button) {“; na linha 22, “top.linkTo(title.bottom, margin = 48.dp)”; na linha 23, “start.linkTo(parent.start)”; na linha 24, “end.linkTo(parent.end)”; na linha 25, ‘}”; na linha 26, “) {“; na linha 28, “Text(text = ‘Clique Aqui’)”; na linha 29, “}”; na linha 30, “}”; e, na linha 31, “}”. Nas linhas 6, 8, 18 e 27, não há conteúdo escrito. Fim da descrição.

Entenda os pontos principais do código da Figura 2:

ConstraintLayout: define um layout onde os componentes são posicionados com base em restrições.
createRefs(): cria referências para os elementos, permitindo vinculá-los a outras posições.
top.linkTo(parent.top, margin=32.dp): posiciona o Text no topo da tela com margem.
top.linkTo(title.bottom, margin=48.dp): alinha o Button abaixo do título, centralizado.

Em resumo, o ConstraintLayout no Jetpack Compose é uma ótima alternativa para criar interfaces organizadas e adaptáveis sem precisar de múltiplos Column e Row. Ele oferece mais controle sobre o posicionamento dos elementos, tornando a estrutura do layout mais limpa e flexível. Portanto, o exemplo da Figura 2 demonstra como podemos alinhar e organizar componentes dinamicamente para melhorar a experiência do usuário.

saiba aplicar

Aprender a criar interfaces responsivas é essencial para você, enquanto futuro técnico em Desenvolvimento de Sistemas, pois garante que os aplicativos atendam às expectativas de usuários que utilizam uma variedade de dispositivos. Por meio de ferramentas, como BoxWithConstraints e ConstraintLayout Compose, você poderá ajustar automaticamente o comportamento da interface com base no tamanho e nas configurações da tela, criando experiências consistentes e otimizadas.

Agora, para finalizarmos a lição, apresentarei um passo a passo para você aprender a criar um aplicativo em Kotlin usando o Jetpack Compose utilizando a ferramenta BoxWithConstraints. Para iniciar essa prática, siga os passos a seguir:

Tenha uma máquina com o Android Studio instalado (esse processo você já conhece da primeira parte da disciplina).
Crie um novo projeto chamado KotlinBoxWithContraints e escolha o template “Empty Compose Activity” e clique em “Next”.
Escolha a linguagem Kotlin.
Clique em Finish (Concluir) para criar o projeto.
Após esses passos, digite o código apresentado na Figura 3.

Figura 3 - Login de Vestibular on-line em Kotlin com BoxWithConstraints
Fonte: o autor.

#PraCegoVer: a figura apresenta 54 linhas. Na linha 1, está escrito “@Composable”; na linha 2, “fun ResponsiveLoginForm() {”; na linha 3, “BoxWithConstraints(modifier = Modifier.fillMaxSize().padding(16.dp)) {”; na linha 4, “val isLargeScreen = maxWidth > 600.dp”; na linha 6, “Column(”; na linha 7, “modifier = Modifier.fillMaxSize(),”; na linha 8, “verticalArrangement = Arrangement.Center,”; na linha 9, “horizontalAlignment = Alignment.CenterHorizontally”; na linha 10, “) {”; na linha 11, “Text(”; na linha 12, “text = ‘Login - Vestibular Online’,”; na linha 13, “fontSize = if (isLargeScreen) 28.sp else 22.sp,”; na linha 14, “color = Color.Black”; na linha 15 “)”; na linha 17, “Spacer(modifier = Modifier.height(16.dp))”; na linha 19, “var email by remember { mutableStateOf("") }”; na linha 20, “var password by remember { mutableStateOf("") }”; na linha 22, “OutlinedTextField(”; na linha 23, “value = email,”; na linha 24, “onValueChange = { email = it },”; na linha 25, “label = { Text("Email") },”; na linha 26, “singleLine = true,”; na linha 27, “modifier = Modifier.fillMaxWidth(if (isLargeScreen) 0.6f else 0.9f)”; na linha 28 “)”; na linha 30, “Spacer(modifier = Modifier.height(12.dp))”; na linha 32, “OutlinedTextField(”; na linha 33, “value = password,”; na linha 34, “onValueChange = { password = it },”; na linha 35, “label = { Text("Senha") },”; na linha 36, “singleLine = true,”; na linha 37, “visualTransformation = PasswordVisualTransformation(),”; na linha 38, “keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),”; na linha 39, “modifier = Modifier.fillMaxWidth(if (isLargeScreen) 0.6f else 0.9f)”; na linha 40, “)”; na linha 42, “Spacer(modifier = Modifier.height(24.dp))”; na linha 44, “Button(”; na linha 45, “onClick = {},”; na linha 46, “modifier = Modifier”; na linha 47, “.fillMaxWidth(if (isLargeScreen) 0.4f else 0.7f)”; na linha 48, “.height(if (isLargeScreen) 56.dp else 48.dp)”; na linha 49, “) {”; na linha 50, “Text(text = "Entrar", fontSize = if (isLargeScreen) 18.sp else 16.sp)”; na linha 51, “}”; na linha 52, “}”; na linha 53, “}”; e, na linha 54, “}”. Nas linhas 5, 16, 18, 21, 29, 31, 41 e 43, não há conteúdo escrito. Fim da descrição.

Entenda os pontos principais do código da Figura 3:

BoxWithConstraints: detecta o tamanho da tela e ajusta os elementos conforme a largura disponível.
isLargeScreen: verifica se a largura disponível ultrapassa 600 dp, determinando um layout diferente para telas grandes.
OutlinedTextField: é usado para entrada de e-mail e senha, garantindo um design moderno e limpo.
fillMaxWidth(if (isLargeScreen) 0.6f else 0.9f): ajusta a largura dos campos e do botão com base no tamanho da tela.
PasswordVisualTransformation(): oculta os caracteres da senha para segurança do usuário.
Button(): dimensionado dinamicamente para garantir um bom espaçamento e usabilidade.

Com esse formulário de login responsivo utilizando BoxWithConstraints, garantimos uma interface adaptável tanto para smartphones quanto para tablets. De maneira geral, essa abordagem melhora a experiência do usuário, tornando o aplicativo mais acessível e eficiente em qualquer dispositivo. Agora, desafie seus colegas e/ou professores a pensar em outras telas e combinações dos componentes e verifique seu comportamento com vários tipos de tela. Bom trabalho!

REFERÊNCIAS

COMPOSABLE. Developer Android, 2 out. 2023. Disponível em: https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable?hl=en. Acesso em: 28 abr. 2025.

COMPOSE Layout Basics. Developer Android, 27 abr. 2025. Disponível em: https://developer.android.com/develop/ui/compose/layouts/basics. Acesso em: 28 abr. 2025.

CONSTRAINTLAYOUT in Compose. Developer Android, 11 set. 2024. Disponível em: https://developer.android.com/develop/ui/compose/layouts/constraintlayout?hl=en. Acesso em: 28 abr. 2025.

ZEMEL, T. Web Design Responsivo. São Paulo: Casa do Código, 2015.

Page updated

Google Sites

Report abuse