Criação de Interfaces de Usuário no Android via Código

(API de Views)
Este material apresenta uma explicação completa e prática sobre como criar interfaces
de usuário no Android utilizando código (Kotlin), sem depender exclusivamente de
arquivos XML. O objetivo é que o aluno compreenda como criar botões, textos,
formulários e layouts dinâmicos utilizando a API tradicional de Views do Android.

1. Revisão: Views e ViewGroups

No Android tradicional, todos os componentes visuais herdam da classe View.
Elementos como Button, TextView e EditText são exemplos de Views. Já os layouts,
como LinearLayout e ConstraintLayout, são ViewGroups, ou seja, componentes que
podem conter outras Views. A seguir veremos alguns conceitos bem básicos sobre
layout que complementam as leituras recomendadas. Ao final criaremos um exemplo
prático utilizando os conceitos que vimos.

2. Criando um layout básico via código

O primeiro passo para criar uma interface via código é definir um layout que irá
organizar os componentes da tela. O exemplo abaixo cria um LinearLayout vertical.

val layout = LinearLayout(this)

[Link] = [Link]
[Link] = [Link](
[Link].MATCH_PARENT,
[Link].MATCH_PARENT
)

3. Criando TextView (texto) via código

O TextView é utilizado para exibir textos na tela. A seguir, um exemplo de criação e
configuração de um TextView.

val title = TextView(this)

[Link] = "Cadastro de Usuário"
[Link] = 22f
[Link](16, 16, 16, 16)

4. Criando Button (botão) via código

Botões permitem que o usuário execute ações. Veja como criar um Button
programaticamente.

val button = Button(this)

[Link] = "Salvar"
[Link] {
// ação do botão
}

5. Criando campos de formulário (EditText)

Campos de formulário são criados com EditText. Eles permitem a entrada de dados
pelo usuário.
val inputName = EditText(this)
[Link] = "Nome"

val inputEmail = EditText(this)

[Link] = "E-mail"

6. Montando um formulário completo via código

Agora vamos unir os componentes anteriores para montar um formulário completo.

[Link](title)
[Link](inputName)
[Link](inputEmail)
[Link](button)

setContentView(layout)

7. Criando múltiplos botões dinamicamente

Em alguns casos, o número de componentes depende de dados dinâmicos. O exemplo
abaixo cria vários botões com base em uma lista.

val options = listOf("Opção 1", "Opção 2", "Opção 3")

for (option in options) {

val btn = Button(this)
[Link] = option
[Link](btn)
}

OBS: Na prática, é comum misturar XML e código. Por exemplo, um layout base pode
ser definido em XML, e componentes adicionais podem ser criados dinamicamente via
código.
Layouts Essenciais no Android (API de Views)
Este material tem como objetivo introduzir, de forma didática e progressiva, alguns
layouts importantes da API tradicional de Views do Android: FrameLayout,
LinearLayout, TableLayout e ScrollView. Ao final, é apresentado um exemplo completo,
passo a passo, integrando todos esses conceitos em uma única interface.

1. FrameLayout
O FrameLayout é um ViewGroup simples que funciona como um contêiner genérico. Ele
não organiza seus elementos em linhas ou colunas. Por padrão, as Views adicionadas a
um FrameLayout ficam sobrepostas.
Seu uso mais comum é como área reservada para exibir um único componente ou um
Fragment.
Exemplo básico:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Texto dentro do FrameLayout" />

</FrameLayout>

2. LinearLayout (Vertical e Horizontal)

O LinearLayout organiza seus elementos em uma única direção: vertical ou horizontal.
Ele é um dos layouts mais utilizados por sua simplicidade. Um LinearLayout vertical
organiza os componentes em forma de coluna, enquanto um LinearLayout horizontal
organiza os componentes em forma de linha.

Exemplo combinando orientações:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView android:text="Título" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button android:text="OK" />

<Button android:text="Cancelar" />

</LinearLayout>

</LinearLayout>

3. TableLayout
O TableLayout organiza os componentes em linhas e colunas, de forma semelhante a
uma tabela. Cada linha é representada por um TableRow. Esse layout é útil quando se
deseja alinhar informações em formato tabular.
Exemplo simples de tabela:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TableRow>
<TextView android:text="Nome" />
<TextView android:text="João" />
</TableRow>

<TableRow>
<TextView android:text="Idade" />
<TextView android:text="25" />
</TableRow>

</TableLayout>

4. ScrollView
O ScrollView é um layout especial que permite a rolagem vertical do conteúdo quando
ele ultrapassa o tamanho da tela. Ele pode conter apenas um filho direto, que
normalmente é um LinearLayout.

Exemplo de ScrollView:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView android:text="Conteúdo longo" />

</LinearLayout>

</ScrollView>

5. Ancorar Views (RelativeLayout)

Ancorar views significa posicionar um componente em relação a outro. O
RelativeLayout permite esse tipo de posicionamento.

Exemplo de ancoragem:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/textA"
android:text="A" />

<TextView
android:text="B"
android:layout_below="@id/textA"
android:layout_alignParentEnd="true" />
</RelativeLayout>

6. Exemplo Completo – Passo a Passo

A seguir, um exemplo completo que integra os principais conceitos estudados. Esse
layout representa uma tela simples de cadastro.

Passo 1: ScrollView como raiz

<ScrollView ...>
<LinearLayout orientation="vertical">
Passo 2: FrameLayout com título
<FrameLayout>
<TextView android:text="Cadastro" />
</FrameLayout>
Passo 3: Formulário com LinearLayout
<LinearLayout orientation="vertical">
<TextView android:text="Nome" />
<EditText />
</LinearLayout>
Passo 4: Tabela de resumo
<TableLayout>
<TableRow>
<TextView android:text="Campo" />
<TextView android:text="Valor" />
</TableRow>
</TableLayout>

Esse exemplo mostra como diferentes layouts podem coexistir em uma mesma tela,
cada um cumprindo um papel específico.

Note que esse exemplo integra TextView, LinearLayout, FrameLayout, TableLayout,

ScrollView e ancoragem de views.
1. ScrollView como raiz.
2. FrameLayout para título.
3. LinearLayout vertical para formulário.
4. LinearLayout horizontal para botões.
5. TableLayout para resumo.
6. RelativeLayout para posicionamentos específicos.

Agora, Vamos ver mais um exemplo totalmente completo para você entender melhor os
conceitos de uma vez!

Exemplo Final Completo (XML + Kotlin)

Nesta seção, você verá um exemplo completo e funcional que junta os conceitos
estudados: TextView, LinearLayout (vertical e horizontal), FrameLayout, TableLayout,
ScrollView e ancoragem de views com RelativeLayout. O exemplo é propositalmente
simples e introdutório: uma tela de “Cadastro” com um pequeno resumo em formato de
tabela e uma área de demonstração de ancoragem. No Kotlin, veremos como ler os
valores digitados, reagir a cliques e atualizar um TextView da tela. Caso seja prático,
tente seguir o passo a passo em seu Android Studio.

1) Arquivos criados/alterados
• res/layout/activity_main.xml
• [Link]
2) Layout da tela (activity_main.xml)
Crie (ou substitua) o arquivo abaixo em res/layout/activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="[Link]
android:id="@+id/scrollRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">

<!-- IMPORTANTE: ScrollView pode ter apenas UM filho direto -->

<LinearLayout
android:id="@+id/rootLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<!-- 1) FrameLayout: título simples da tela -->

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">

<TextView
android:id="@+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cadastro"
android:textSize="22sp"
android:textStyle="bold" />
</FrameLayout>

<!-- 2) Formulário: LinearLayout vertical com campos -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="12dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nome" />

<EditText
android:id="@+id/edtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Digite seu nome" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="E-mail" />
 <EditText
android:id="@+id/edtEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Digite seu e-mail" />

<!-- 3) LinearLayout horizontal: botões lado a lado -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:orientation="horizontal">

<Button
android:id="@+id/btnSave"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Salvar" />

<Button
android:id="@+id/btnClear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_weight="1"
android:text="Limpar" />
</LinearLayout>
</LinearLayout>

<!-- 4) TableLayout: resumo em “tabela” -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="12dp"
android:text="Resumo (TableLayout)"
android:textStyle="bold" />

<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:stretchColumns="1">

<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nome:"
android:textStyle="bold" />

<TextView
android:id="@+id/txtSummaryName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:text="—" />
</TableRow>

<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E-mail:"
android:textStyle="bold" />

<TextView
android:id="@+id/txtSummaryEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="—" />
</TableRow>
</TableLayout>

<!-- 5) RelativeLayout: exemplo de ancoragem -->

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="12dp"
android:text="Ancoragem (RelativeLayout)"
android:textStyle="bold" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:padding="12dp">

<TextView
android:id="@+id/textA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A (referência)"
android:textStyle="bold" />

<TextView
android:id="@+id/textB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textA"
android:layout_alignParentEnd="true"
android:text="B (abaixo de A e à direita)" />
</RelativeLayout>

</LinearLayout>
</ScrollView>

3) Código Kotlin ([Link])

Agora implemente a lógica para: (1) ler os valores digitados, (2) reagir aos cliques e (3)
atualizar o resumo na tabela.
package [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

[Link](savedInstanceState)
setContentView([Link].activity_main)

// 1) Referências das Views (ligando Kotlin ao XML)

val edtName = findViewById<EditText>([Link])
val edtEmail = findViewById<EditText>([Link])

val txtSummaryName = findViewById<TextView>([Link])

val txtSummaryEmail = findViewById<TextView>([Link])

val btnSave = findViewById<Button>([Link])

val btnClear = findViewById<Button>([Link])

// 2) Clique do botão Salvar: recuperar valores e atualizar o resumo

[Link] {
val name = [Link]().trim()
val email = [Link]().trim()

if ([Link]() || [Link]()) {
[Link](this, "Preencha nome e e-mail.",
Toast.LENGTH_SHORT).show()
return@setOnClickListener
}

// Atualiza o “resumo” (TableLayout)

[Link] = name
[Link] = email

[Link](this, "Dados salvos no resumo.",

Toast.LENGTH_SHORT).show()
}

// 3) Clique do botão Limpar: apagar campos e resumo

[Link] {
[Link]()
[Link]()

[Link] = "—"
[Link] = "—"

[Link](this, "Campos limpos.", Toast.LENGTH_SHORT).show()

}
}
}
Por fim, continue suas leituras e se aprofunde nesses conceitos durante as atividades
práticas!