Livro 4 - Aplicativo Previsão do Tempo

5.3. Fragmento Principal

Neste aplicativo vamos utilizar apenas uma fragmento pois só é necessário mostrar uma tela contendo uma caixa de texto, uma lista de itens e um fab. Portanto, vamos escolher o arquivo fragment_first, que já está configurado como a tela inicial do aplicativo para ser o nosso arquivo de desenho da interface gráfica (UI).

Abra o arquivo fragment_first.xml e realiza o passos a seguir.

• Remova o ConstraintLayout criado automaticamento no inicio do projeto
• Abra o arquivo em modo código e renomei NestedScrollView para FrameLayout
• Adicione um novo componente FloatingActionButton e:
  • Modifique sua propriedade gravity de “bottom|end” para “top”end”. 
  • Modifique também a propriedade srcCompat com o botão “...” ao lado e selecione o ícone adicionado anteriormente ao projeto (baseline_done_24dp).
  • A fim de mover o botão a direita do elemento EditText, configure a propriedade layout_margin_top com o valor 60dp.
    
• Adicione um novo LinearLayout. Configure a a propriedade orientation  para Vertical
  
• Insira um componente TextInputLayout dentro do LinearLayout. Esse novo componente de texto está localizado na paleta na aba Text na última posição. Configure a propriedades do novo componente como:
  • layout:width -> match_parent
  • layout:height -> wrap_content 
• Selecione o TextInputEditText dentro do TextInputLayout e modique as suas propriedades:
  • id: locationEditText
  • singleLine: true
  • hint: @string/hint_text
• Por fim, adicione um elemento RecyclerView (Aba Commom) também dentro do LinearLayout e configure suas propriedades:
  • id: weatherRecyclerView
  • layout_width: 0dp
  • layout_weight: 1

Como resultado final aparecerá o seguinte layout: