Android Jetpack Navigation Kullanımı

Projenin en az backend yazılımının iyi olması kadar kullanıcısını doğru tanıyan, onların istek ve beklentileri öngörerek bunu kullanıcı arayüz ekranlarına doğru ve işlevsel bir tasarım olarak aktarmak da çok önemlidir. Bu yüzden, tasarımda kullanıcı deneyimini arttıran elementler kullanmanın önemi büyüktür.

Bu makalemde, sayfa geçişi olan tasarımların oluşturmasını kolaylaştıran Navigation Editor ile Jetpack Navigation Component kullanımını örnekleyerek anlatacağım.

Jetpack Navigation kütüphanesi, AndroidX yapısını kullanmaktadır. Bu yüzden ilk önce projelerinizi AndroidX yapısına geçişini sağlamalısınız. Bu konuda AndroidX Kütüphanesine Geciş adlı makalemden faydalanabilirsiniz.

jetpack-security

Bu örnek de olduğu gibi Jetpack Navigation Component’i uygulayabilmek için aşağıdaki belirttiğim adımları uygulamalısınız.

1-Gerekli Kütüphanelerin Eklenmesi

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Navigation kütüphanelerini yüklüyoruz.

implementation 'androidx.navigation:navigation-fragment:2.1.0-rc01'
implementation 'androidx.navigation:navigation-ui:2.1.0-rc01'

1 2	implementation 'androidx.navigation:navigation-fragment:2.1.0-rc01' implementation 'androidx.navigation:navigation-ui:2.1.0-rc01'

2-Navigation Graph Oluşturma

Navigation Graph, Navigation mimarisinin ana gövdesidir. Xml kodlamaya sahiptir. Navigation içinde barınan fragment yapısını, kolaylıkla eklenmesini sağlayan visual editor barındırır.

Navigation Graph eklemek ve sayfa geçişleri için arayüz tarafındaki adımları yapmak için aşağıdaki hazırladığım videoyu izleyiniz.

Navigation Graph XML

Video anlatımında, res->navigation dizini içinde oluşturduğum Navigation Graph XML yapısı, geçiş yapılacak fragment sayfalarının tanımlandığı ana gövdedir. Örneğimizde 3 tane sayfa olduğu için nav_graph.xml’de 3 tane fragment tanımladım.

Navigation Editor, Design sekmesinden fragment sayfalarını oluşturduğunuzda, sizin için Android Studio xml ve Java sınıflarını oluşturur. Videoda, Navigation Editor Design sekmesinde sayfaları birbirine bağlandığı anda, xml dosyasında action tagleri oluşmaktadır. Bu sayfalar arası geçiş için bir aksiyon tanımlamasıdır.

Xml sayfalarında (video belirttiğim gibi) background renk verme ve button ekleme işlemi ile örnek arayüz kodlarımızı oluşturduk. Oluşturduğum fragment_home. xml, fragment_second.xml ve fragment_third.xml kodlarına, github linkinden ulaşabilirsiniz.

Navigation Graph XML dosyasında, navigation tag’a eklenen, app:startDestination özelliğinde tanımlanan xml dosyası, navigasyonun ilk görünen sayfa olacaktır. startDestination özelliğini kullandığımızdan kaynaklı, Activity sınıfında Navigation yapısını başlatmakla alakalı hiç bir java kodlama yazmamıza gerek kalmamaktadır.:)

nav_graph.xml kodları

<?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/nav_graph"
    app:startDestination="@id/homeFragment">
    <fragment
        android:id="@+id/homeFragment"
        android:name="com.smality.jetpacknavigation.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" >
        <action
            android:id="@+id/action_homeFragment_to_secondFragment"
            app:destination="@id/secondFragment" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.smality.jetpacknavigation.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" >
        <action
            android:id="@+id/action_secondFragment_to_thirdFragment"
            app:destination="@id/thirdFragment" />
    </fragment>
    <fragment
        android:id="@+id/thirdFragment"
        android:name="com.smality.jetpacknavigation.ThirdFragment"
        android:label="fragment_third"
        tools:layout="@layout/fragment_third">
        <action
            android:id="@+id/action_thirdFragment_to_homeFragment"
            app:destination="@id/homeFragment" />
    </fragment>
</navigation>

<?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/nav_graph"

app:startDestination="@id/homeFragment">

<fragment

android:id="@+id/homeFragment"

android:name="com.smality.jetpacknavigation.HomeFragment"

android:label="fragment_home"

tools:layout="@layout/fragment_home" >

<action

android:id="@+id/action_homeFragment_to_secondFragment"

app:destination="@id/secondFragment" />

</fragment>

<fragment

android:id="@+id/secondFragment"

android:name="com.smality.jetpacknavigation.SecondFragment"

android:label="fragment_second"

tools:layout="@layout/fragment_second" >

<action

android:id="@+id/action_secondFragment_to_thirdFragment"

app:destination="@id/thirdFragment" />

</fragment>

<fragment

android:id="@+id/thirdFragment"

android:name="com.smality.jetpacknavigation.ThirdFragment"

android:label="fragment_third"

tools:layout="@layout/fragment_third">

<action

android:id="@+id/action_thirdFragment_to_homeFragment"

app:destination="@id/homeFragment" />

</fragment>

</navigation>

Navigation Host Fragment

Kullanılan layout ile Navigation Graph XML arasında bağlantı kurabilmesi için, layout da fragment tag içine app:navGraph özelliğini ekleyerek, Navigation Graph XML (nav_graph.xml) dosyasını tanımlamanız gerekir. app:defaultNavHost tag değeri true ise telefonun geri tuşuna bastığınızda, bir önceki fragment sayfasına geçişini sağlar. Son olarak fragment’ın name özeliğine, NavHostFragment ekleyerek Navigation Host Fragment yapısını oluşturduk. Örnek activity_main kodları;

<?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="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:navGraph="@navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?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="0dp"

android:layout_height="0dp"

app:defaultNavHost="true"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.0"

app:navGraph="@navigation/nav_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

Java ile Sayfa Geçişi Sağlama

Navigation Host Fragment id değerini(activity_main.xml), NavController sınıfının findNavController metodunda kullanmalıyız. NavController sınıfının navigate metodunda yapılacak aksiyon idsi belirtilir. Böylelikle bir fragment sayfasından diğer fragment sayfasına geçişi sağlarız.Daha öncede belirttiğim üzere, bu aksiyonlar Navigation Graph XML (nav_graph.xml) dosyasında oluşturulmalıdır.

HomeFragment java sınıfı

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.navigation.*;
import android.view.*;
import android.widget.Button;
public class HomeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)
    {
        //fragment_home layout tanımlanıyor
        View view =inflater.inflate(R.layout.fragment_home,container,false);
        Button button=(Button)view.findViewById(R.id.button1);
        final NavController navController = Navigation.findNavController(getActivity(), R.id.nav_host_fragment);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
        //navigate metodu ile nav_graph.xml dosyasındaki hangi action kullanacağını belirterek, geçiş yapacağı fragment bilgisini veriyoruz
                navController.navigate(R.id.action_homeFragment_to_secondFragment);
            }
        });
        return view;
    }
}

import android.os.Bundle;

import androidx.annotation.NonNull;

import androidx.annotation.Nullable;

import androidx.fragment.app.Fragment;

import androidx.navigation.*;

import android.view.*;

import android.widget.Button;

public class HomeFragment extends Fragment {

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)

{

//fragment_home layout tanımlanıyor

View view =inflater.inflate(R.layout.fragment_home,container,false);

Button button=(Button)view.findViewById(R.id.button1);

final NavController navController = Navigation.findNavController(getActivity(), R.id.nav_host_fragment);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

//navigate metodu ile nav_graph.xml dosyasındaki hangi action kullanacağını belirterek, geçiş yapacağı fragment bilgisini veriyoruz

navController.navigate(R.id.action_homeFragment_to_secondFragment);

}

});

return view;

}

SecondFragment java sınıfı

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.navigation.*;
import android.view.*;
import android.widget.Button;
public class SecondFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)
    {
        View view =inflater.inflate(R.layout.fragment_second,container,false);
        Button button=(Button)view.findViewById(R.id.button2);
        final NavController navController = Navigation.findNavController(getActivity(), R.id.nav_host_fragment);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
        //navigate metodu ile nav_graph.xml dosyasındaki hangi action kullanacağını belirterek, geçiş yapacağı fragment bilgisini veriyoruz
                navController.navigate(R.id.action_secondFragment_to_thirdFragment);
            }
        });
        return view;
    }
}

import android.os.Bundle;

import androidx.annotation.NonNull;

import androidx.annotation.Nullable;

import androidx.fragment.app.Fragment;

import androidx.navigation.*;

import android.view.*;

import android.widget.Button;

public class SecondFragment extends Fragment {

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)

{

View view =inflater.inflate(R.layout.fragment_second,container,false);

Button button=(Button)view.findViewById(R.id.button2);

final NavController navController = Navigation.findNavController(getActivity(), R.id.nav_host_fragment);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

//navigate metodu ile nav_graph.xml dosyasındaki hangi action kullanacağını belirterek, geçiş yapacağı fragment bilgisini veriyoruz

navController.navigate(R.id.action_secondFragment_to_thirdFragment);

}

});

return view;

}

ThirdFragment java sınıfı

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.navigation.*;
import android.view.*;
import android.widget.Button;
public class ThirdFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)
    {
        View view =inflater.inflate(R.layout.fragment_third,container,false);
        Button button=(Button)view.findViewById(R.id.button3);
        final NavController navController = Navigation.findNavController(getActivity(), R.id.nav_host_fragment);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
         //navigate metodu ile nav_graph.xml dosyasındaki hangi action kullanacağını belirterek, geçiş yapacağı fragment bilgisini veriyoruz
            navController.navigate(R.id.action_thirdFragment_to_homeFragment);
            }
        });
        return view;
    }
}

import android.os.Bundle;

import androidx.annotation.NonNull;

import androidx.annotation.Nullable;

import androidx.fragment.app.Fragment;

import androidx.navigation.*;

import android.view.*;

import android.widget.Button;

public class ThirdFragment extends Fragment {

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)

{

View view =inflater.inflate(R.layout.fragment_third,container,false);

Button button=(Button)view.findViewById(R.id.button3);

final NavController navController = Navigation.findNavController(getActivity(), R.id.nav_host_fragment);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

//navigate metodu ile nav_graph.xml dosyasındaki hangi action kullanacağını belirterek, geçiş yapacağı fragment bilgisini veriyoruz

navController.navigate(R.id.action_thirdFragment_to_homeFragment);

}

});

return view;

}

Kodları github linkinden indirebilirsiniz

Android Jetpack Navigation Kullanımı

1-Gerekli Kütüphanelerin Eklenmesi

2-Navigation Graph Oluşturma

Navigation Graph XML

Navigation Host Fragment

Java ile Sayfa Geçişi Sağlama

Tuğba Üstündağ

En çok okunanlar

GPS ile En Yakın Noktaları Bulma: Android Location Services ve Google Maps Service API

Android Image Slider

Android ile Harici Sql Veritabanını Projeye Yükleme

Android Studio 2.2' de ConstraintLayout Yapısı

Kategoriler

En son yazılar

Android Studio'da Kod Kalıplarının Kısaltılması ile Hızlı Kod Yazma

Compose ile OTP Input Field Oluşturma

Android Uygulamada ChatGPT Entegrasyonu

Compose Tasarımında Input Validation

Bir cevap yazın Cevabı iptal et

Hakkımda

Kategoriler

En son yazılar

Android Studio'da Kod Kalıplarının Kısaltılması ile Hızlı Kod Yazma

Compose ile OTP Input Field Oluşturma

Android Uygulamada ChatGPT Entegrasyonu

Faydalı Linkler

Android Jetpack Navigation Kullanımı

1-Gerekli Kütüphanelerin Eklenmesi

2-Navigation Graph Oluşturma

Navigation Graph XML

Navigation Host Fragment

Java ile Sayfa Geçişi Sağlama

En çok okunanlar

Takip edin

Kategoriler

En son yazılar

Bülten

Bültene abone ol

Bir cevap yazın Cevabı iptal et

Hakkımda

Kategoriler

En son yazılar

Faydalı Linkler