Livro 4 - Projeto da Previsão do Tempo

5. Desenhando a tela principal do aplicativo e um layout personalizada para item da ListView

5.3. Layout weather_list_item.xml

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

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

  • Clique com o botão direito do mouse na pasta layout e selecione New > Layout resource file
  • Na janela New Resource File digite o nome weather_list_item. Certifique-se que no campo root element está especificado LinearLayout e clique em OK.

  • Abra o arquivo criado e selecione o LinearLayout. Mude sua orientação para horizontal.

Com o arquivo criado vamos desenhar agora uma ImageView e um GridLayout. Siga os passos abaixo:

1. Adicionando um elemento ImageView para exibir um ícone de condição climática

    • Arreste um elemento ImageView para o LinearLayout e selecione a imagem padrão avatars apenas para fazermos uma visualização estética de como vai ficar o layout.
    • Configure as propriedades do componente como:
      • id: conditionImageView
      • layout:width: 50dp – defina um novo recurso de dimensão image_side_lenght
      • layout:height: match_parent – a altura do elemento ImageView dependerá da altura do item da ListView
      • contentDescription: use o recurso string weather_condition_image
      • scaleType: fitCenter – o ícone se encaixará dentro dos limites do elemento ImageView e será centralizado horizontalmente e verticalmente

2. Adição do GridLayout para exibir os componentes TextView

  • Adicione um GridLayout ao lado da imagem e configura suas propriedades
    • colummCount: 3
    • rowCount: 2
  • Arraste um elemento TextView para a primeira linha e configure suas propriedades:Adicione novamente três elementos TextView e configure seus id para lowTextView, highTextView e humidityTextView, respectivamente. Para cada um dos elementos configure a propriedade layout:row como 1 e layout:columnWeight como 1. Coloque a propriedade layout:column como 0, 1 e 2 também respectivamente.
    • id: dayTextView
    • textAppearence: @android:style/TextAppearence.Material.Large
    • layout_row: 0
    • layout_column: 0
    • layout_columnSpan: 3
    • layout_width: match_parent
  • Não é preciso alterar os valores textuais de cada TextView pois elas serão preenchidas por programação durante o uso do aplicativo.

As configurações finais do layout devem ficar como:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<ImageView
android:id="@+id/conditionImageView"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="@string/weather_condition_image"
android:scaleType="fitCenter"
tools:srcCompat="@tools:sample/avatars" />


<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:columnCount="3"
app:rowCount="2">


<TextView
android:id="@+id/dayTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textAppearance="@android:style/TextAppearance.Material.Large"
app:layout_column="0"
app:layout_columnSpan="3"
app:layout_row="0" />


<TextView
android:id="@+id/lowTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="1" />


<TextView
android:id="@+id/highTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="1" />


<TextView
android:id="@+id/humidityTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="1" />


</androidx.gridlayout.widget.GridLayout>
</LinearLayout>

E o resultado é a seguinte tela: (Note que para ver a visualização assim é preciso apenas redimensionar a tela no Android Studio para ficar menor)