Listas
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
As listas são uma representação visual de um ou mais itens relacionados.
Elas são usadas com frequência para mostrar uma coleção de opções.
Recursos
Destaques
- As listas são uma coleção contínua de textos ou imagens.
- As listas precisam parecer naturais e serem legíveis.
- As listas são compostas por itens que contêm ações principais e
complementares representadas por ícones e texto.
Variantes
Há três tipos de listas: de uma linha, de duas linhas e
de três linhas.
- Lista de uma linha: uma única linha para comunicar cada item. Esse design
simples garante que cada item seja claramente distinto do outro.
- Lista de duas linhas: usa duas linhas paralelas para comunicar cada item.
Esse design estruturado garante a legibilidade natural e evita a sobrecarga
cognitiva.
- Lista de três linhas: usa três linhas paralelas para representar cada item.
Esse design decorativo cria um alto nível de destaque visual.
Anatomia
- Ícone: um pequeno gráfico que representa um objeto ou uma ação específica, muitas vezes
usado para comunicar visualmente uma ideia ou um conceito.
- Overline: uma linha curta de texto que aparece acima do título ou do subtítulo,
geralmente usada para fornecer mais contexto ou ênfase.
- Título: uma linha de texto grande e em negrito que serve como título principal de
um elemento de design ou página.
- Subtítulo: uma linha menor de texto que fornece informações
ou contexto adicionais abaixo de um título principal.
- Controle: um elemento interativo que permite ao usuário tomar uma decisão.
Estados
Especificações
Uso
As listas são grupos de texto e imagens organizados verticalmente.
Otimizada para compreensão de leitura, uma lista consiste em uma única
coluna contínua de itens.
Os itens da lista podem conter ações principais e complementares representadas
por ícones e texto.
check_circle
O que fazer
Os itens da lista não são botões. Os itens não têm contêineres. Por padrão, os itens da lista não são selecionados nem recebem foco.
warning
Cuidado
Use o plano de fundo do contêiner para itens de lista somente quando necessário.
Controles de seleção
Controla a exibição de informações e ações para itens de lista. Elas podem ser alinhadas
à borda inicial ou final do item da lista.
- Caixas de seleção: selecione um ou mais itens da lista.
- Botões de opção: selecione exatamente um
item na lista.
- Chaves: ative ou desative um controle.
check_circle
O que fazer
Use um indicador de seleção de ícones para mostrar claramente o item selecionado em uma lista. Isso vai ajudar os usuários a identificar facilmente qual item foi selecionado e melhorar a experiência geral.
cancel
O que não fazer
Evite depender apenas da cor de fundo para indicar a seleção em uma lista.
cancel
O que não fazer
Evite colocar botões dentro de um item da lista, porque isso pode causar confusão sobre qual elemento está em foco.
Ícones
check_circle
O que fazer
Se você estiver mostrando o mesmo tipo de conteúdo na lista, omita os ícones para reduzir o ruído visual e melhorar a experiência do usuário. Evite usar ícones em uma lista quando eles não têm uma finalidade e não fornecem informações adicionais.
cancel
O que não fazer
Evite usar o mesmo ícone para todos os itens de uma lista. Isso pode ser visualmente avassalador e confuso para os usuários. Use ícones apenas quando eles agregam valor ou fornecem informações adicionais.
Avatares e imagens
Os itens da lista podem incluir imagens em um corte circular para representar uma
pessoa ou entidade.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[null,null,["Última atualização 2025-07-27 UTC."],[],[],null,["# Lists are a visual representation of one or more related items.\nThey are commonly used to display a collection of options.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.ListItemShape,androidx.tv.material3.ListItemColors,androidx.tv.material3.ListItemScale,androidx.tv.material3.ListItemBorder,androidx.tv.material3.ListItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource)) | Available |\n\nHighlights\n----------\n\n- Lists are a continuous collection of text or images.\n- Lists should feel natural and be scannable.\n- Lists are made up of items containing primary and supplemental actions represented by icons and text.\n\nVariants\n--------\n\nThere are three types of lists: one-line list, two-line list, and\nthree-line list.\n\n1. **One-line list**: A single line to communicate each item. This simple design ensures each item is clearly distinct from the other.\n2. **Two-line list**: Uses two parallel lines to communicate each item. This structured design ensures natural readability and avoids cognitive overload.\n3. **Three-line list**: Uses three parallel lines to represent each item. This decorative design creates a high level of visual prominence.\n\nAnatomy\n-------\n\n1. **Icon**: A small graphic that represents a specific object or action, often used to visually communicate an idea or concept.\n2. **Overline**: A short line of text that appears above title or subtitle, often used to provide additional context or emphasis.\n3. **Title**: A large, bold line of text that serves as the main heading of a design element or page.\n4. **Subtitle**: A smaller line of text that provides additional information or context below a main title.\n5. **Control**: An interactive element that allows the user to input a decision.\n\nStates\n------\n\nSpec\n----\n\nUsage\n-----\n\nLists are vertically organized groups of text and images.\nOptimized for reading comprehension, a list consists of a single\ncontinuous column of items.\nList items can contain primary and supplemental actions represented\nby icons and text. \ncheck_circle\n\n### Do\n\nList items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused. \nwarning\n\n### Caution\n\nUse container background for list items only when necessary.\n\n### Selection controls\n\nControls display information and actions for list items. They can be aligned\nto the leading or trailing edge of the list item.\n\n\n\u003cbr /\u003e\n\n1. **Checkboxes**: Select one or more list items.\n2. **Radio buttons**: Select exactly one item in the list.\n3. **Switches**: Toggle a control on or off.\n\ncheck_circle\n\n### Do\n\nUse an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience. \ncancel\n\n### Don't\n\nAvoid relying solely on the background color to indicate selection in a list. \ncancel\n\n### Don't\n\nAvoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.\n\n### Icons\n\ncheck_circle\n\n### Do\n\nIf you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information. \ncancel\n\n### Don't\n\nAvoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.\n\n### Avatars and images\n\nList items can include images in a circular crop to represent a\nperson or entity."]]
