TableLayout no Android, Entendendo e Utilizando

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes! Você receberá um email de confirmação. Somente depois de confirma-lo é que eu poderei lhe enviar os conteúdos semanais exclusivos. Os artigos em PDF são entregues somente para os inscritos na lista.

Email inválido.
Blog /Android /TableLayout no Android, Entendendo e Utilizando

TableLayout no Android, Entendendo e Utilizando

Vinícius Thiengo
(19192) (22)
Go-ahead
"O método consciente de tentativa e erro é mais bem-sucedido que o planejamento de um gênio isolado."
Peter Skillman
Prototipagem Android
Capa do curso Prototipagem Profissional de Aplicativos
TítuloAndroid: Prototipagem Profissional de Aplicativos
CategoriasAndroid, Design, Protótipo
AutorVinícius Thiengo
Vídeo aulas186
Tempo15 horas
ExercíciosSim
CertificadoSim
Acessar Curso
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Lendo
TítuloManual de DevOps: como obter agilidade, confiabilidade e segurança em organizações tecnológicas
CategoriaEngenharia de Software
Autor(es)Gene Kim, Jez Humble, John Willis, Patrick Debois
EditoraAlta Books
Edição
Ano2018
Páginas464
Conteúdo Exclusivo
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba gratuitamente conteúdos Android sem precedentes!
Email inválido

Tudo bem?

No conteúdo do vídeo acima nós vamos destrinchar os componentes visuais TableLayout e TableRow.

Isso para conseguirmos com "certa facilidade" um layout em tabela completo para qualquer aplicativo Android que necessite de um.

Apesar de não ser um dos ViewGroups mais utilizados e buscados no dev Android, o TableLayout tende a ser a melhor escolha para telas que apresentam dados de relatórios.

Não é incomum encontrar desenvolvedores Android que utilizam o TableLayout para construção de formulários.

Eu particularmente, para formulários, prefiro o ConstraintLayout ou o RelativeLayout, pois assim tenho menos componentes visuais aninhados e mais flexibilidade no posicionamento dos campos.

Algo importante a ressaltar antes de você consumir o vídeo é:

Dê muita atenção à funcionalidade dos atributos stretchCoumns e shrinkColumns e como se realiza a mesclagem (merge) de colunas utilizando o atributo layout_spanm, atributo que é utilizado nos widgets internos ao TableRow.

Outro ponto importante que é citado com mais detalhes no vídeo é:

Apesar de ser trivial a mesclagem de linhas no elemento <table> do HTML, com o TableLayout não é possível (até a época da publicação deste conteúdo) a mesclagem de linhas em tabela.

A seguir o diagrama completo do componente de layout TableLayout:

Diagrama do layout Android TableLayout

E, por fim, caso o que você esteja precisando seja o trabalho com layout em grid, então não deixe de consumir os artigos dos links a seguir:

Vale informar que quando se falando de componentes visuais no Android é extremamente importante o domínio do assunto Material Design.

A seguir vou deixar alguns links de outros conteúdos do Blog que lhe colocarão em dia com o que há de atual no mundo Android:

E caso você tenha como meta aprender a criar aplicativos Android, ou evoluir nesta área, também com o conteúdo gratuito do Blog e canal, então não deixe de acessar a lista de estudos exclusiva em:

Não esqueça de se inscrever 📫na lista de e-mails do Blog para receber os conteúdos Android em primeira mão e também em formato PDF (esse formato é liberado somente para os inscritos na lista de e-mails).

Se inscreva também no canal do Blog no YouTube para acompanhar as últimas novidades.

Surgindo dúvidas ou dicas, pode enviar abaixo na área de comentários que logo eu lhe retorno.

Obs. : o link para download do projeto apresentado em vídeo se encontra logo abaixo no artigo, mais precisamente na seção "Download".

Abraço.

Eclipse IDE vs Android Studio IDE

Apesar do conteúdo da vídeo aula acima estar utilizando o Eclipse IDE 😱, tudo que é apresentado, tanto a parte teórica quanto a parte prática, é ainda válido nos dias de hoje com o desenvolvimento Android utilizando o Android Studio 😁.

Ou seja, independente da linguagem oficial (Java, Kotlin, C ou C++), IDE ou framework que você esteja utilizando, o conteúdo acima é ainda de grande utilidade.

AndroidX

Apesar do conteúdo sobre TableLayout ainda estar atual e ser de grande importância para qualquer nível de desenvolvedor Android.

Apesar disso eu também recomendo, assim que finalizado o projeto em sua própria instalação de IDE, que você o migre para o AndroidX.

Algo que pode ser feito com poucos cliques, como apresentado no tutorial a seguir: Migrar para o AndroidX.

Fontes

Documentação oficial TableLayout Android

Documentação oficial TableRow Android

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes!
Email inválido

Relacionado

Ciclo de Vida de Uma Atividade no AndroidCiclo de Vida de Uma Atividade no AndroidAndroid
View: Entendendo os Componentes Visuais no AndroidView: Entendendo os Componentes Visuais no AndroidAndroid
Entendendo e Utilizando o FrameLayout no AndroidEntendendo e Utilizando o FrameLayout no AndroidAndroid
LinearLayout no Android, Entendendo e UtilizandoLinearLayout no Android, Entendendo e UtilizandoAndroid

Compartilhar

Comentários Facebook

Comentários Blog (22)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
27/08/2017
Valeu irmão ajudou muito
Responder
01/12/2015
Thiengo, beleza?
Tô precisando preencher uma tabela por coluna e tô tendo muita dificuldade pra fazer isso com o TableLayout, tem alguma ideia de como posso fazer isso, mesmo que seja utilizando outro objeto?
Abraço.
Responder
Vinícius Thiengo (0) (0)
02/12/2015
Fala Luhan, blz?
Está com a table já construída no xml, porém precisa de número de colunas de forma dinâmica ou não, serão td fixo mesmo? Em ambos os casos tentou como tb no vídeo, construir a table e tableRow com suas views de forma dinâmica?

Dê uma olhada nesse exemplo de inserção dinâmica (http://stackoverflow.com/a/18207894/2578331 ). Abraço
Responder
Luhan Mairink (1) (0)
02/12/2015
Eu estou inserindo as views dinamicamente no TableLayout (criado no XML), porém, preciso preencher coluna por coluna, ou seja, preencher uma coluna inteira, voltar para a primeira linha e preencher a próxima coluna. Tem como fazer isso?
Responder
Vinícius Thiengo (0) (0)
04/12/2015
Tem como sim Luhan, porém isso é somente lógica de programação. Crie um array de TableRow e vai iterando por ele e colocando as Views nas colunas corretas (as colunas do TableRow são as Views de conteúdo - EditText, TextView, Outro Layout, ...). Abraço
Responder
dtiburcio (1) (0)
16/07/2015
Não consegui ainda cercar cada TextView com bordas finas para ficar como uma tabela, nos exemplos que achei a borda fica muito larga e não consegui mudar
Responder
Vinícius Thiengo (0) (0)
16/07/2015
Fala dtiburcio, blz?
Veja se essa resposta lhe ajuda (http://stackoverflow.com/a/4046486/2578331 ). Mas utilizando Views (<View/>) é possível, porém terá um pouco mais de código, provavelmente para cada celula. Tente no TableRow colocar uma:

<View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#000"/>

Para ver se consegue o efeito desejado ao menos na linha horizontal. Abraço
Responder
16/07/2015
Preciso fazer isto em programação, mas valeu a dica, vou tentar
Responder
Vinícius Thiengo (0) (0)
17/07/2015
Não, na marcação XML apenas, no Java não há necessidade, a não ser que estiver adicionando linhas via Java code tb, dessa forma tb terá de acrescentar as Views. Abraço
Responder
Elias Martins Ferreira (1) (0)
08/05/2015
Bom dia Thiengo, tudo bem?
queria saber se vc tem um exemplo de tablelayot dinâmico
estou tentando fazer aqui mas não está funcionando
quero preencher as colunas com informações do banco
pesquisei alguns exemplos mas não deram certo também
se tiver algum exemplo eu te agradeço, abs.
Responder
Vinícius Thiengo (1) (0)
09/05/2015
Fala Elias, blz?
Se não me engano no vídeo mostro tb como criar o Table via Java API (dinâmico), porém é um exemplo bem simples. Encontrei esse post (code.tutsplus.com/tutorials/android-user-interface-design-table-layouts--mobile-4788) que tem um exemplo um pouco melhor, porém ainda sem loop, vc teria de adaptar a sua necessidade. A resposta certa desse outro link (stackoverflow.com/questions/17031006/how-add-and-delete-rows-to-table-layout-in-java-programically) já é com loop. Abraço
Responder
Elias Martins (1) (0)
09/05/2015
vlw Thiengo, obrigado pela ajuda.
Responder
07/07/2015
Thiengo, usei este link como referência e ficou bem, exceto que tenho uma linha detalhe com os valores de uma pessoa e antes tela preciso colocar numa linha só o nome ocupando o lugar de todas as colunas. Ele está considerando que este nome é a primeira coluna dos valores e com isto tanto os cabeçalhos das colunas quanto as colunas ficam pequenas e continuando na linha de baixo. Eu preciso assim:

Nome da pessoa
VAL1 VAL2 VAL3 VAL4 VAL5 VAL6 VAL7 VAL8

mas o nome está certo mas as demais colunas todas misturadas.

Lembro que neste link tem que colocar a TableRow dentro de um ScrollView senão a tela não vai rolar.

Obrigado
Responder
Vinícius Thiengo (0) (0)
08/07/2015
Fala Daniel, blz?
Já utilizou o layout_span no TextView que terá o nome quando ele está sozinho dentro da primeira linha? Veja a dica nesse link (http://stackoverflow.com/a/2713323/2578331 ). Coloque a linha, somente o TextView de nome dentro dela e então aplica o layout_span no TextView de acordo com a quantidade de colunas que vai ter nas outras linhas. Abraço
Responder
08/07/2015
THiengo, se tem alguém que odeie este stackoverflow, sou eu, acho que fiquei idoso mesmo, por que ser tão feio e confuso? Tentei de todo jeito, mas agora NullPointerException ao mover o valor para o params.span, nada do que faço dá certo. Se a linha do nome se chama RowNome e a das estatísticas se chama RowValor, como ficariam o comandos? Desculpe abusar, mas já pesquisei demais e nada dá certo.
Responder
Vinícius Thiengo (0) (0)
10/07/2015
Daniel, coloque aqui o XML que vc está utilizando para montar esse layout. Abraço
Responder
14/07/2015
Thiengo, assisti seu vídeo de novo e vi que a solução era não colocar a linha com o nome como uma TableRow e sim direto no TableLayout e deu certo. Agora preciso aprender a colocar separadores de linhas e colunas para melhor visualixação, vou continuar assistindo amanhã. Obrigado
Responder
Vinícius Thiengo (0) (0)
15/07/2015
Show de bola, Daniel
Responder
02/03/2015
Fala, Thiengo! Mais um ótimo vídeo e eu aqui, novamente, com uma dúvida k

Então... Usar o View como forma de definir uma borda horizontal foi uma solução bem simples e efetiva, existe algo do tipo pra definir bordas também para colunas?
Responder
Vinícius Thiengo (0) (0)
03/03/2015
Fala Danilo, blz?
Com o View vc tb consegue criar as bordas verticais, dê uma olhada na resposta certa desse link no stackoverflow (http://stackoverflow.com/questions/13189790/how-to-draw-horizontal-and-vertical-line-in-table-layout ). Abraço
Responder
02/02/2015
Eae Vinícius, interessante esse TableLayout, parece ser mais usado para layouts Horizontais tipo modo "paisagem"  ou tem algum outro uso específico(benefício)? Abç
Responder
Vinícius Thiengo (1) (0)
03/02/2015
Fala Davi, blz?
Eu particularmente não precisei ainda de construir uma tabela nas APPs que desenvolvi, então assumo que o TableLayout será mesmo preciso e eficiente quando o layout for em forma de tabela ou ao menos ele tiver que ter uma tabela, nada de especial. Abraço
Responder