Android Kotlin Fragments +Navigation + Menu
Pessoal hoje vamos ver um pouco sobre navigation, uma forma elegante e bem mais organizada de fazer rotas para nossa aplicação.
Vamos começar ?
Primeiro vamos criar um novo projeto do zero.
File -> New Project ->
Vou escolher o tipo do template Empty Activity, eu sei que poderíamos criar com um template completo que ele já vem o navigation configurado mais a ideia desse tutorial é mostrar como configurar do zero.
Agora vamos em nosso build.gradle e vamos adicionar a versão do navigation.
ext.navigation_version = '2.2.2'
Agora vamos adicionar as dependências do nosso navigation.
// Navigation
implementation "android.arch.navigation:navigation-fragment:$navigation_version"
implementation "android.arch.navigation:navigation-ui:$navigation_version"
implementation "android.arch.navigation:navigation-fragment-ktx:$navigation_version"
implementation "android.arch.navigation:navigation-ui-ktx:$navigation_version"Feito isso vamos sincronizar o projeto e então vamos agora criar alguns Fragments para poder utilizar na demonstração.
Vamos criar 3 Fragments minha sugestão de nomes são -> HomeFragment, SettingsFragment e HelpFragment.
Assim ficou a minha estrutura de pacotes com a criação dos fragments, criei um package para o viewmodel e outro para ui
Agora vamos criar o nosso tão esperado Navigation.
Vamos lá, na pasta res vamos clicar com direito e criar um diretório chamado navigation.
Vamos agora criar o nosso resource navigation.
Feito esses passos já temos os fragments e nosso navigation agora vamos configurar a nossa MainActivity ela vai ser responsável por chamar o nosso navigation para que ele possa efetuar o trabalho de transição entre os fragments.
Em nossa MainActivity vamos declarar a variável
private lateinit var navController: NavControllerEm nosso onCreate vamos adicionar
navController = Navigation.findNavController(this, R.id.nav_host_fragment)
Não se preocupe agora vamos criar a nossa referencia ao fragment nav_host_fragment, vamos lá em nossa activity_main.xml, o nosso xml deve ficar parecido com isso aqui.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>Agora vamos em nosso navigation.xml e adicionamos o start direction
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/navigation.xml"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="com.example.navigation.ui.HomeFragment"
android:label="@string/string_home"
tools:layout="@layout/home_fragment" />
</navigation>No meu caso eu escolhi para iniciar no home_fragment, mais pode escolher qualquer um fragment que criou, com isso já podemos efetuar um teste e podemos ver que ele já funciona.
Agora vamos ajustar a nossa home_fragment.xml, a minha ficou assim.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".ui.HomeFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Home Fragment"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Apenas ajustei o texto e fonte para poder diferenciar qual fragment vamos está, você pode fazer isso para os outros também modificando apenas o text, agora vamos configurar o nosso bottom menu.
Vamos criar mais um diretório agora com o nome de menu e depois o resource.
Vamos criar agora 3 ícones para o nosso menu.
Feito isso vamos configurar o nosso menu.xml, veja como ficou.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/homeFragment"
android:icon="@drawable/ic_baseline_home_24"
android:title="@string/string_home" />
<item
android:id="@+id/helpFragment"
android:icon="@drawable/ic_baseline_help_24"
android:title="@string/string_help" />
<item
android:id="@+id/settingsFragment"
android:icon="@drawable/ic_baseline_settings_24"
android:title="@string/string_settings" />
</menu>
Estamos quase acabando, vamos agora ajustar a nossa activity_main.xml para adicionar o nosso menu, veja como ficou.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/colorPrimary"
app:itemIconTint="@android:color/white"
app:itemTextColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="@menu/menu" />
</androidx.constraintlayout.widget.ConstraintLayout>Vamos lá em nossa MainActivity.kt fazer alguns ajustes e deixar tudo funcionando agora.
Veja como ficou a nossa MainActivity.kt
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.NavController
import androidx.navigation.Navigation
import androidx.navigation.findNavController
import androidx.navigation.ui.NavigationUI
import androidx.navigation.ui.setupWithNavController
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
private lateinit var navController: NavController
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
navController = Navigation.findNavController(this, R.id.nav_host_fragment)
NavigationUI.setupActionBarWithNavController(this, navController)
bottom_nav.setupWithNavController(navController)
}
override fun onSupportNavigateUp(): Boolean {
return findNavController(R.id.nav_host_fragment).navigateUp()
}
}Agora vamos rodar o projeto e ver se tudo ocorreu bem.
Opa funcionou, sendo que podemos observar que ao clicar no menu não funciona, hehehe e então?
Faltou configurar o nosso navigation graph é algo bem simples, precisamos adicionar os outros fragments e efetuar a referencia de ID ao menu.
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/navigation.xml"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="com.example.navigation.ui.HomeFragment"
android:label="@string/string_home"
tools:layout="@layout/home_fragment" />
<fragment
android:id="@+id/helpFragment"
android:name="com.example.navigation.ui.HelpFragment"
android:label="@string/string_help" />
<fragment
android:id="@+id/settingsFragment"
android:name="com.example.navigation.ui.SettingsFragment"
android:label="@string/string_settings" />
</navigation>
Agora sim temos o nosso navigation + menu funcionando com fragments tudo certinho, valeu galera espero que possa ter ajudado e lembrando podemos melhorar ainda mais o projeto vendo esse tópico sobre ícones animados.
O código do projeto está nesse próximo post obrigado pessoal.
