Vamos definir um layout personalizado para exibir dados climáticos em uma item de RecyclerView. Esse layout será inflado pelo adaptador WeatherListAdapter a fim de criar a interface do usuário para novos itens de RecyclerView.

Primeiramente, vamos adicionar um novo recurso de layout ao projeto. Para tanto:

• Clique com menu File -> New - > Layout resource file

• Na janela New Resource File digite o nome list_item. Certifique-se que no campo root elemento está especificado o ConstraintLayout e clique em OK.

Abra o arquivo criado e adicione os elementos com as orientações abaixo.

Componente ImagemView

A primeira seção do item da lista de previsão climática é uma figura representando o ícone da condição climática. Adicione um componente ImageView, escolha a imagem padrão "avatars" para usar apenas como referência na criação do desenho da UI. O ícone da previsão será baixado durante o uso do app portanto não precisamos configurar uma imagem inicial para o item.

Configure a imagem com as seguintes propriedades:

• id: conditionImageView
• layout:width e height: 56dp – defina um novo recurso de dimensão image_side_lenght
• contentDescription: use o recurso strings weather_condition_image
• scaleType: fitCenter – o ícone se encaixará dentro dos limites do elemento ImageView e será centralizado horizontalmente e verticalmente

Agora configure o posicionamento do elemento para ficar no topo e a esquerda da tela. Use as restrições do constraint layout e margem de 8dp. Como resultado a imagem ficará como:

Note que estamos desenhando apenas um item da lista e não uma tela inteira, então a pré-visualização da UI pode ser redimensionada para melhor apresentação dos elementos, o que é o caso da figura acima.

Componente TextView das condições climáticas

A segunda parte do item é dividida em uma TextView mostrando as informações da condição climático e três TextViews menores ilustrando a temperatura e humidade. Vamos configurar o elemento maior primeiro.

Adicione uma TextView e configure as propriedades:

• id: dayTextView
• textAppearance @style/TextAppearance.AppCompat.Large

Configure o posicionamento do elemento para ficar no topo, a esquerda da ImageView e a direita da margem da tela. Use as restrições do constraint layout e margem de 8dp. Modifique também a propriedade layout:width para 0dp (match constraint) . Como resultado a imagem ficará como:

Componente TextView das temperaturas e umidade

Agora para finalizar adicione três elementos TextView com os seguintes ids lowTextView, highTextView e humidityTextView.

Organize os elementos da seguinte forma:

• humidityTextView: alinhado ao elemento TextView no topo e a margem a direita da tela. Espaçamento 8dp.
• highTextView: alinhado ao elemento TextView no topo e ao elemento humidityTextView a direita. Espaçamento 8dp.
• lowTextView: alinhado ao elemento TextView no topo e ao elemento highTextView a direita. Espaçamento 8dp.

Ajustes finais

Certifique-se que as propriedades do ConstraintLayout estão corretas para exibir itens de uma lista.

• layout_width: match_parente
• layout_height: wrap_content

Como resultado final você deve obter a imagem abaixo: