DEV Community: Douglas Fornaro

Splash Screen API in Android

Douglas Fornaro — Fri, 19 Nov 2021 19:06:44 +0000

💡 In this article, we will explore and learn how to build a splash screen with SplashScreen API, which was introduced in Android 12.

What is a Splash Screen?

A Splash Screen is the first view that is shown to a user as soon as you tap on the app icon. It can be used while loading data or for branding market purpose. If you notice a blank white screen (for a short moment) after tapping on an app, it means it doesn't have a splash screen.

Overview

Android 12 added the SplashScreen API.
Enables a new app launch animation for all apps when running on a device with Android 12+.
Smooth and fluid app start transition.
Backward compatible with Androidx SplashScreen compat library.

Elements and mechanics of the animation

The app icon (1) should be a vector drawable (static or animated).
The icon background (2), which is optional.
As with adaptive icons, one-third of the foreground is masked (3).
The window background (4) consists of a single opaque color.
The enter animation isn't customizable.
The exit animation can be customized.

Before implementing on Android ≤ 11

Before implementing on Android 12

Implementing

Let's see the steps to implement the Splash Screen in our Android app.

Setup

android {
   compileSdkVersion 31
   ...
}
dependencies {
   ...

   // Splash Screen
   implementation 'androidx.core:core-splashscreen:1.0.0-alpha02'
}

Add the Splash Screen compat library, so it will work for Android version ≤ 11.

Style

<style name="Theme.App.Starting" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/...</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/...</item>
    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
    <item name="postSplashScreenTheme">@style/Theme.App</item>
</style>

windowSplashScreenBackground will change the background color.
windowSplashScreenAnimatedIcon is the vector icon, which might be animated.
android:windowSplashScreenIconBackgroundColor is the background color of the icon. It's using the android: from SDK 31 (Android 12) because it only works for Android 12 right now, let's keep an eye to see if the stable library will make it work for Android ≤ 11.
android:windowSplashScreenBrandingImage is the branding image. The same as previous, only works for Android 12.
postSplashScreenTheme is the theme of the app after the Splash Screen goes out.

Manifest

Add the theme for your application or activity tag.

<application
    android:theme="@style/Theme.App.Starting"
    ...

MainActivity

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val splashScreen = installSplashScreen() // Before setContentView
    setContentView(R.layout.activity_main)
}

If we don't installSplashScreen we'll get an Exception:

java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

Animation

It's possible to handle the exit animation for the Splash Screen, in the example below the Splash Screen moves down.

splashScreen.setOnExitAnimationListener { splashScreenProvider ->
    val splashScreenView = splashScreenProvider.view
    ObjectAnimator.ofFloat(
        splashScreenView,
        View.TRANSLATION_Y,
        0f,
        splashScreenView.height.toFloat()
    ).apply {
        interpolator = BounceInterpolator()
        duration = 1000L
        doOnEnd { splashScreenProvider.remove() }
        start()
    }
}

Keep in mind that when adding some custom exit animation we must manually remove the splash screen.

Longer period

It's possible to keep the Splash Screen while the app is fetching some initial data. For this purpose, use the setKeepVisibleCondition from splashScreen. Just return true to isReady when you would like to dismiss the Splash Screen.

var isReady = false

// Simulate some request
lifecycleScope.launchWhenCreated {
    delay(10000L)
    isReady = true
}

splashScreen.setKeepVisibleCondition { !isReady }

Result

After implementing on Android ≤ 11

After implementing on Android 12

That's pretty much it to support Splash Screen in your app, will you give it a try?

Android: Definitive guide to Paging 3

Douglas Fornaro — Mon, 05 Apr 2021 11:59:48 +0000

Overview

Paging 3 is a library from the Android Jetpack that helps you load and display pages of data from a larger amount of data from local or remote data source. This approach allows your app to use efficiently the bandwidth and system resources once the user may not see all the data loaded at once.

Advantages

In-memory cache.
Makes your RecyclerView's Adapter to automatically request new data when the user scrolls toward the end.
Flow and LiveData support.
Error handling, refresh and retry capabilities.

Architecture

The Paging library integrates directly into the recommended Android app architecture. The library's components operate in three layers of the app:

Repository
ViewModel
View

Repository

In the Repository layer there is the PagingSource. The PagingSource defines a source of data and how to retrieve data from it. Also, can load from remote or local data sources.

In addiction, in the Repository layer there is the RemoteMediator. The RemoteMediator handles paging from a layered data source.

ViewModel

The Pager component provides a public API for constructing instances of PagingData that are exposed to the View, based on a PagingSource and a PagingConfig configuration.

View

In the View layer there is the PagingDataAdapter, a RecyclerView adapter that handle the paginated data.

Implementation

For our implementation of the Paging 3, we are going to use the Github API https://api.github.com/users/google/repos which can be used the parameters page and per_page to handle pagination like this: https://api.github.com/users/google/repos?page=1&per_page=20.

This will be the final result:

To keep it simples we'll model our Repo class as simple as possible to keep all the focus on the Paging library. This will be our Repo class:



data class Repo(
    val fullName: String
)

The GithubApi that will be used to retrieve data is:



interface GithubApi {

    @GET("users/{username}/repos")
    suspend fun fetchRepos(
        @Path("username") username: String,
        @Query("page") page: Int,
        @Query("per_page") size: Int
    ): List<Repo>
}

Setup

Add the following to your app's build.gradle.



dependencies {
    def paging_version = "3.0.0-beta03"

    implementation "androidx.paging:paging-runtime-ktx:$paging_version"
}

Data Source

Let's start building our PagingSource which will load more and more data once the scroll toward the end.



private const val INITIAL_PAGE = 1

class GithubRepoPagingSource(
    private val api: GithubApi,
        private val username: String
) : PagingSource<Int, Repo>() {
    override fun getRefreshKey(state: PagingState<Int, Repo>): Int? {
        TODO("Not yet implemented")
    }

    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Repo> {
        TODO("Not yet implemented")
    }
}

The Key and Value parameters from PagingSource are the type of key which define what data to load (Int to represent a page) and the type of data loaded by this PagingSource, respectively.

This GithubRepoPagingSource receives a GithubAPI where the data is retrieved and a username to fetch the repos.

The load() function will be called by the Paging to fetch more data to be displayed to the user and can have this implementation:



override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Repo> {
        return try {
            val page = params.key ?: INITIAL_PAGE
            val response = api.fetchRepos(username, page, params.loadSize)
            LoadResult.Page(
                data = response,
                prevKey = if (page == INITIAL_PAGE) null else page - 1,
                nextKey = if (response.isEmpty()) null else page + 1
            )
        } catch (e: Exception) {
            LoadResult.Error(e)
        }
    }

The refresh key is used for subsequent refresh calls to PagingSource.load() (the first call is initial load which uses initialKey provided by Pager). A refresh happens whenever the Paging library wants to load new data to replace the current list, e.g., on swipe to refresh or on invalidation due to database updates, config changes, process death, etc. Typically, subsequent refresh calls will want to restart loading data centered around PagingState.anchorPosition which represents the most recently accessed index.



override fun getRefreshKey(state: PagingState<Int, Repo>): Int? {
        return state.anchorPosition?.let { anchorPosition ->
            state.closestPageToPosition(anchorPosition)?.prevKey?.plus(1)
                ?: state.closestPageToPosition(anchorPosition)?.nextKey?.minus(1)
        }
    }

Repository

Now that we already implemented our data source, let's build the Repository.



class GithubRepository(
    private val api: GithubApi
) {
    fun searchRepos(username: String) = Pager(
        pagingSourceFactory = { GithubRepoPagingSource(api, username) },
        config = PagingConfig(
            pageSize = 20
        )
    ).flow
}

Here we have a searchRepos method that returns a Flow<PagingData<Repo>>. In the Pager object we define the GithubRepoPagingSource created previously and a PagingConfig with the pageSize parameter.

ViewModel

In the ViewModel we are going to expose the Flow<PagingData<Repo>>. Here we are avoiding to request the same username if it was previously requested. Also, we are caching the content of the Flow<PagingData>>.



class GithubViewModel(
    private val repository: GithubRepository
) : ViewModel() {

    private var currentUsernameValue: String? = null

    private var currentSearchResult: Flow<PagingData<Repo>>? = null

    fun searchRepos(username: String): Flow<PagingData<Repo>> {
        val lastResult = currentSearchResult
        if (username == currentUsernameValue && lastResult != null) {
            return lastResult
        }
        currentUsernameValue = username
        val newResult = repository.searchRepos(username)
            .cachedIn(viewModelScope)
        currentSearchResult = newResult
        return newResult
    }
}

Adapter

Now we are in the View component, let's start with the Adapter and make it works with Paging.



class ReposAdapter : PagingDataAdapter<Repo, ReposAdapter.ViewHolder>(COMPARATOR) {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = ViewHolder(
        ItemReposBinding.inflate(LayoutInflater.from(parent.context), parent, false)
    )

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        getItem(position)?.let { holder.bind(it) }
    }

    class ViewHolder(
        private val binding: ItemReposBinding
    ) : RecyclerView.ViewHolder(binding.root) {
        fun bind(repo: Repo) = with(binding) {
            tvItemRepos.text = repo.fullName
        }
    }

    companion object {
        private val COMPARATOR = object : DiffUtil.ItemCallback<Repo>() {
            override fun areItemsTheSame(oldItem: Repo, newItem: Repo): Boolean =
                oldItem.fullName == newItem.fullName

            override fun areContentsTheSame(oldItem: Repo, newItem: Repo): Boolean =
                oldItem == newItem
        }
    }
}

The implementation of the Adapter is pretty much the same as a usual RecyclerView.Adater, however now we need to extend from PagingDataAdapter and pass a COMPARATOR to its constructor.

Activity/Fragment

We need to launch a new coroutine to search for the repos. We'll do that in the lifecyclerScope.

We also want to ensure that whenever the user searches for a new username, the previous query is cancelled. To do this, our Activity/Fragment can hold a reference to a new Job that will be cancelled every time we search for a new username.



private var searchJob: Job? = null

private fun search(username: String) {
   // Make sure we cancel the previous job before creating a new one
   searchJob?.cancel()
   searchJob = lifecycleScope.launch {
       viewModel.searchRepos(username).collect { adapter.submitData(it) }
   }
}

At this point your app is ready and working as expected, however there are more customization that we could do, let's continue and see them!

Display the loading and error state in the footer

For a better experience, we can display a loading state when the list is fetching new data or display an error when something wrong happens.

For this purpose we need to create a new xml file, a new Adapter and ViewHolder, let's see them below:



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

    <TextView
        android:id="@+id/error_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textAlignment="center"
        android:textSize="22sp"
        tools:text="Timeout" />

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <Button
        android:id="@+id/retry_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/retry_button" />
</LinearLayout>



class ReposLoadStateAdapter(
    private val retry: () -> Unit
) : LoadStateAdapter<ReposLoadStateAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, loadState: LoadState) = holder.bind(loadState)

    override fun onCreateViewHolder(parent: ViewGroup, loadState: LoadState) = ViewHolder(
        ItemReposLoadStateFooterBinding.inflate(LayoutInflater.from(parent.context), parent, false),
        retry
    )

    class ViewHolder(
            private val binding: ItemReposLoadStateFooterBinding,
        retry: () -> Unit
    ) : RecyclerView.ViewHolder(binding.root) {

        init {
            binding.retryButton.setOnClickListener { retry() }
        }

        fun bind(loadState: LoadState) = with(binding) {
                if (loadState is LoadState.Error) {
                errorMsg.text = loadState.error.localizedMessage
            }
            progressBar.isVisible = loadState is LoadState.Loading
            retryButton.isVisible = loadState is LoadState.Error
            errorMsg.isVisible = loadState is LoadState.Error
        }
    }
}

Now that we have our load state adapter done, we need to link to our list.



binding.recyclerView.adapter = adapter.withLoadStateHeaderAndFooter(
        header = ReposLoadStateAdapter { adapter.retry() },
        footer = ReposLoadStateAdapter { adapter.retry() }
)

Empty state

What if we try to load some data but there is no data (list is 0)?

For this purpose we need to be notified when the load state is changed, we'll use tee addLoadStateListener.



adapter.addLoadStateListener { loadState ->
        val isEmptyList = loadState.refresh is LoadState.NotLoading && adapter.itemCount == 0
        showEmptyList(isEmptyList)
}

Load and error state for the Activity/Fragment

For the first request, until now there is no feedback what is happening in the screen, also if happens some problem we won't know because there is no error handling.

Update your Activity/Fragment and add a progress bar and a retry button. Don't forget to set the retry click:



binding.retryButton.setOnClickListener { adapter.retry() }

Let's update the previous addLoadStateListener and update the visibility of the progress bar and retry button.



adapter.addLoadStateListener { loadState ->
        val isEmptyList = loadState.refresh is LoadState.NotLoading && adapter.itemCount == 0
        showEmptyList(isEmptyList)

        // Only show the list if refresh succeeds
        binding.recyclerView.isVisible = loadState.source.refresh is LoadState.NotLoading
        // Show loading spinner during initial load or refresh
        binding.progressBar.isVisible = loadState.source.refresh is LoadState.Loading
        // Show the retry state if initial load or refresh fails
        binding.retryButton.isVisible = loadState.source.refresh is LoadState.Error
}

This is everything we need to start using Paging 3 in our app!

Conclusion

Paging 3 is a pagination library for Android that is build into the recommended Android app architecture. It uses Flow or LiveData for the communication between the layers.

Also, it handles the load, error and empty state in a simple way, giving us more flexibility for that.

Pull to refresh in Android

Douglas Fornaro — Sun, 28 Mar 2021 14:24:49 +0000

Pull to refresh is a gesture that the user can make to update the screen, such as reloading the feed for Instagram or Twitter.

Let's see in this article how to built Pull to Refresh for Android.

First of all, add the dependency into the build.gradle file:

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'

Add your RecyclerView or other content inside the SwipeRefreshLayout.

The SwipeRefreshLayout is a ViewGroup that can hold only one scrollable view as a child. This can be either a ScrollView or a RecyclerView.

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Next, let's implement the refresh listener on our Activity/Fragment that will be notified when the swipe gesture is completed.

swipeRefreshLayout.setOnRefreshListener { viewModel.loadContent() }

It's possible to configure the colors been shown during the load:

swipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_bright,
            android.R.color.holo_green_light,
            android.R.color.holo_orange_light,
            android.R.color.holo_red_light)

Note that upon successful reload, we must also signal that the refresh has completed by calling:

swipeRefreshLayout.isRefreshing = false

This is everything you need to do to make your app use the Pull to Refresh and refresh the content for your users!

Python beginner projects from a Python beginner dev

Douglas Fornaro — Sun, 24 Jan 2021 15:32:10 +0000

Hey all,

So, I just started studying Python and I developed some beginner projects that I'd like to share. This way others Python beginner devs can get inspired from them!

1. Dices simulator

This project simulates and prints two random dices.

import random

dices = 2

for i in range(0, dices):
    print(random.randint(1,6))

2. Password generator

This project generates a random 16-length password.

import random

lower = 'abcdefghijklmnopqrstuvwxyz'
upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
numbers = '0123456789'
symbols = '[]{}()*;/,_-!@#$%&+='

all = lower + upper + numbers + symbols

length = 16
password = ''.join(random.sample(all, length))
print(password)

3. Youtube audio downloader

This project downloads the audio from a YouTube URL.

Pre-requirement

It's needed to install the youtube_dl:

pip3 install youtube-dl

from youtube_dl import YoutubeDL

audio_downloader = YoutubeDL({'format':'bestaudio'})
audio_downloader.extract_info(input('Enter youtube url :  '))

4. Message encrypt-decrypt

This project encrypts and decrypts a message.

Pre-requirement

It's needed to install the cryptography:

pip3 install cryptography

Encrypt a message

from cryptography.fernet import Fernet

key = b'ntLaRE-8-a81Bqa74aCL6ejFW4hr6ZO9m0fWbDOmys8=' # Some awesome key
message = input('Enter a message: ')

f = Fernet(key)
encrypted = f.encrypt(message.encode())
print(encrypted.decode("utf-8"))

Decrypt a message

from cryptography.fernet import Fernet

key = b'ntLaRE-8-a81Bqa74aCL6ejFW4hr6ZO9m0fWbDOmys8=' # Some awesome key
message = bytes(input('Enter a encrypted message: '), encoding='utf8')

f = Fernet(key)
decrypted = f.decrypt(message)
print(decrypted.decode("utf-8"))

Now it's your time to contribute, share others ideas that a Python beginner, including me, can get inspired to improve our skills!

How to proper pop the Login flow from the back stack using Navigation Component

Douglas Fornaro — Fri, 22 Jan 2021 00:56:31 +0000

After a login flow, for example, you should pop all of the login-related destinations off of the back stack so that the back button doesn’t take the users back into the login flow again.

Let's see the example below where the startDestination is the loginFragment, which is possible to navigate to the createAccountFragment or directly to the feedFragment. Once the user access the Feed screen (from the Login or the Create Account screen) the app should pop all the login-related destinations from the back stack so the user can close the app from the Feed as expected.

<?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/app_navigation"
    app:startDestination="@id/loginFragment">

    <fragment
        android:id="@+id/loginFragment"
        android:name="br.com.fornaro.app.features.login.LoginFragment"
        android:label="fragment_login"
        tools:layout="@layout/fragment_login">
        <action
            android:id="@+id/createAccountFragment"
            app:destination="@id/createAccountFragment" />
        <action
            android:id="@+id/feedFragment"
            app:destination="@id/feedFragment"
            app:popUpTo="@id/loginFragment"
            app:popUpToInclusive="true" />
    </fragment>

    <fragment
        android:id="@+id/createAccountFragment"
        android:name="br.com.fornaro.app.features.createaccount.CreateAccountFragment"
        android:label="fragment_create_account"
        tools:layout="@layout/fragment_create_account">
        <action
            android:id="@+id/feedFragment"
            app:destination="@id/feedFragment"
            app:popUpTo="@id/loginFragment"
            app:popUpToInclusive="true" />
    </fragment>

    <fragment
        android:id="@+id/feedFragment"
        android:name="br.com.fornaro.app.features.feed.FeedFragment"
        android:label="FeedFragment" />
</navigation>

The code that is responsible for this is the popUpTo and the popUpToInclusive in the action tag.

The popUpTo should be the destination where the current destination (which is indicated in the action) will return when the user leaves from.

The popUpInclusive indicates that the destination from popUpTo will also be removed from the back stack.

For the code above, the loginFragment and createAccountFragment use the same action to navigate to the feedFragment. This way it doesn't matter if the user navigates to the Feed screen from the Login or from the Create Account screen, when the user backs from the Feed the behavior will be the same (removing Login and Create Account from the back stack).

Easy way to Parcelize on Kotlin

Douglas Fornaro — Thu, 14 Jan 2021 21:20:26 +0000

On Android, Parcelable is an interface that a class can implement to be passed within an Intent from an Activity to another one, this way, transporting data from one Activity to another one.

To achieve this your class must implement the Parcelable and override some methods.

data class Product(
    val id: String,
    val title: String,
    val description: String,
) : Parcelable {
    override fun describeContents(): Int {
        TODO("Not yet implemented")
    }

    override fun writeToParcel(dest: Parcel?, flags: Int) {
        TODO("Not yet implemented")
    }
}

Once the class get bigger, you will need to recheck those methods and adapt what is needed to make it continue working.

Thanks to Kotlin, there is an easy way to do this without the needed to override those methods. We just need to use the @Parcelize annotation on the class like this:

@Parcelize
data class Product(
    val id: String,
    val title: String,
    val description: String,
) : Parcelable

This annotation Instructs the Kotlin compiler to generate the writeToParcel(), and describeContents() methods, as well as a CREATOR factory class automatically.

However, to use this annotation you must use the kotlin-parcelize plugin by adding this to your build.gradle file:

plugins {
    ...
    id 'kotlin-parcelize'
}

This is pretty much it to do to start using the @Parcelize on Android!

Introducing DataStore

Douglas Fornaro — Tue, 29 Dec 2020 13:23:49 +0000

A new way to store data on Android.

Overview

A new and improved data storage solution aimed at replacing SharedPreferences.
Kotlin coroutines and Flow.
Data is stored asynchronously, consistently, and transactionally.

SharePreferences vs DataStore

Features

It provides two different implementations:

Preferences DataStore: stores primitive data key-value pairs.
Proto DataStore: stores typed objects.

In both implementations, DataStore saves the preferences in a file and performs all data operations on Dispatchers.IO unless specified otherwise.

Pre requirement

Familiarity with coroutines and Kotlin Flow.

Steps

Setup

Gradle:

// Preferences DataStore 
implementation “androidx.datastore:datastore-preferences:1.0.0-alpha05”
// Proto DataStore 
implementation “androidx.datastore:datastore-core:1.0.0-alpha05”

For Proto DataStore:

Setup protobuf gradle plugin: https://github.com/google/protobuf-gradle-plugin
Define your schema in a proto file in the app/src/main/proto/ directory.

Create the DataStore

Preference DataStore:

val dataStore: DataStore<Preferences> = context.createDataStore(name = "settings")

Proto DataStore:

object SettingsSerializer : Serializer<Settings> {
  override fun readFrom(input: InputStream): Settings {
    try {
      return Settings.parseFrom(input)
    } catch (exception: InvalidProtocolBufferException) {
      throw CorruptionException("Cannot read proto.", exception)
    }
  }

  override fun writeTo(
    t: Settings,
    output: OutputStream) = t.writeTo(output)
}

val settingsDataStore: DataStore<Settings> = context.createDataStore(
  fileName = "settings.pb",
  serializer = SettingsSerializer
)

Read data

Preference DataStore:

val MY_COUNTER = preferencesKey<Int>("my_counter")
val myCounterFlow: Flow<Int> = dataStore.data
     .map { currentPreferences ->
        // Unlike Proto DataStore, there's no type safety here.
        currentPreferences[MY_COUNTER] ?: 0   
   }

Proto DataStore:

val myCounterFlow: Flow<Int> = settingsDataStore.data
    .map { settings ->
        // The myCounter property is generated for you from your proto schema!
        settings.myCounter 
    }

Write data

Preference DataStore:

suspend fun incrementCounter() {
    dataStore.edit { settings ->
        // We can safely increment our counter without losing data due to races!
        val currentCounterValue = settings[MY_COUNTER] ?: 0
        settings[MY_COUNTER] = currentCounterValue + 1
    }
}

Proto DataStore:

suspend fun incrementCounter() {
    settingsDataStore.updateData { currentSettings ->
        // We can safely increment our counter without losing data due to races!
        currentSettings.toBuilder()
            .setMyCounter(currentSettings.myCounter + 1)
            .build()
    }
}

Migrate from SharedPreferences

Preference DataStore:

val dataStore: DataStore<Preferences> = context.createDataStore(
    name = "settings",
    migrations = listOf(SharedPreferencesMigration(context, "settings_preferences"))
)

Proto DataStore:

val settingsDataStore: DataStore<Settings> = context.createDataStore(
    produceFile = { File(context.filesDir, "settings.preferences_pb") },
    serializer = SettingsSerializer,
    migrations = listOf(
        SharedPreferencesMigration(
            context,
            "settings_preferences"            
        ) { sharedPrefs: SharedPreferencesView, currentData: Settings ->
            // Map your sharedPrefs to your type here
          }
    )
)

Conclusion

Jetpack DataStore is a replacement for SharedPreferences that address some problems such as a synchronous API that can appear to be safe to call on UI thread, no mechanism for signaling errors, lack of transactional and more. DataStore is fully asynchronous API using Kotlin Coroutines and Flow, consistent, handle data migration and data corruption.

Understanding about Navigation Architecture Component

Douglas Fornaro — Mon, 28 Dec 2020 14:26:02 +0000

Navigation in an Android app may present challenges and problems that require solutions, particularly when the app grows in complexity. We must carefully consider the Fragment transactions, handle Deep Links, pass parameters in a safe way, properly handle up/back navigation and back stack (especially for Fragments), as well as plan and execute app navigation tests. Google has been creating the Navigation Architecture Component based on consideration of these challenges as well as listening to the Android community.

The Navigation Architecture Component is part of Android JetPack. The Android JetPack is a package of libraries, tools, and guidance that help developers eliminate boilerplate code, simplify complex tasks, and use best practices to write high-quality apps. This way we can care about our business code.

The Navigation Architecture Component simplifies the implementation of navigation in an Android app. It also ensures a consistent and predictable user experience by adhering to an established set of principles.

Advantages

The concept behind the Navigation Architecture Component is to have the developer use a single Activity (Fragments only), to achieve various benefits. These include reduced development time, easy animations between Fragments, and increased app performance.

Navigation Architecture Component has been launched to solve a lot of Android app navigation problems. We can see them described below.

Implementation

Like Android JetPack, Android Navigation Component accelerates app development and is easy to be implemented. It entails not much more than a few concepts and a config file.

Fragment transactions

You may have tried Fragment transactions before. If so, you know that a lot of code is needed to achieve the result. Not anymore! We no longer need to care about adding, replacing and removing Fragments, because the framework does this for us.

Passing arguments in a safe way

Now there is a way to ensure that the data being passed from one Fragment will be received by another Fragment without cast.

Handling up/back button and back stack

Sometimes this gives us a headache. Now it’s only necessary to specify the app navigation within the config file.

Animations

Animations are also specified in a simple way, within the config file, making the code cleaner. Just beautiful.

Deep links

In Android, a deep link is a link that takes the user directly to a specific destination within an app. The framework lets you easily create deep links with the use of single line of code within the config file, without having to handle it manually.

Handling drawer navigation and bottom navigation

The framework already has support for these navigation components, keeping it concise and complete.

Tests

We all know the importance of testing things before launching an app. All of the things that are offered by the framework are already well tested. This way, the important test becomes the interactions between the Fragments.

How does it work?

Now that we understand more about the Navigation Architecture Component, let’s see how it works and how to implement it into our app.

The Navigation Architecture Component consists of three key parts:

Navigation graph: A XML file containing all navigation content such as destinations, actions and arguments. This is the navigation configuration file.
NavHost: A fragment container that displays all the destinations throughout the app. The app’s navigation will happen in this fragment container.
NavController: The object that handles app navigation.

We will discuss these in more detail below.

Set up the environment

To start using the Navigation Architecture Component make sure you are using Android Studio 3.3 or higher. The editor used to create the Navigation was introduced in this version. You can download the latest version of Android Studio at this link.

Add the following dependencies to your app’s build.gradle file:

dependencies {
    def nav_version = "2.3.2"

    // Navigation
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}

You can take a look at the most recently released version at this link.

Editor

The Navigation editor is used to create the navigation graph. The entire navigation configuration is done within this file.

Destinations are the screens (Fragments) of the app.
Actions are the possible connections between the destinations.

Navigation graph

All the navigation’s configuration is done within this XML file. This file is supposed to be inside res/navigation folder. Below is an example of the navigation graph file:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/homeFragment">
    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" >
        <action
            android:id="@+id/action_detail_fragment"
            app:destination="@id/detailFragment" />
    </fragment>
    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.DetailFragment"
        android:label="fragment_detail"
        tools:layout="@layout/fragment_detail" >
        <argument
            android:name="id"
            app:argType="long" />
    <fragment>
</navigation>

The <navigation> element is the root element of the navigation graph. It contains <fragment> that are the destinations. A fragment may contains <action> and <argument>.

Arguments may support default values and nullable values as shown on the next image.

NavHost

The app navigation will happen in the fragment container. Below is an example how to add it in the Activity:

<androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/app_navigation" />

android:name="androidx.navigation.fragment.NavHostFragment" identifies that the app navigation will happen here.

app:defaultNavHost="true" ensures that the NavHostFragment intercepts the system back button.

app:navGraph="@navigation/nav_graph" is the navigation graph XML file.

NavController

Now we just need to navigate from one destination to another. The following example shows how to do this on a button click:

button.setOnClickListener {
    findNavController().navigate(R.id.action_detail_fragment)
}

findNavController() is an extension function that may be used for a Fragment, View or Activity.

Pass and receive data

To pass data in a safe way it’s needed to add the Safe Args plugin. To add the Safe Args to your project, include the following classpath in your top level build.gradle file:

buildscript {
    repositories {
        google()
    }
    dependencies {
        def nav_version = "2.3.2"
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
    }
}

And apply the plugin:

apply plugin: "androidx.navigation.safeargs.kotlin"

The data passed from the fragments must be declared as <argument> on the navigation graph file. This is an example how to pass and receive arguments between destinations:

// HomeFragment.kt
button.setOnClickListener {
    val direction = HomeFragmentDirections.detailFragment(id)
    findNavController().navigate(direction)
}

// DetailFragment.kt
private val args: DetailFragmentArgs by navArgs()

HomeFragmentDirections and DetailFragmentArgs are generated classes by the framework where is possible to be used to pass and receive data.

Up/back button

Android maintains a back stack that contains the destinations visited by the user. The first destination of your app is placed on the stack when the user opens the app. Each call to the navigate() method puts another destination on top of the stack. Pressing Up or Back button calls the NavController.navigateUp() and NavController.popBackStack() methods, respectively, to remove (pop) the top destination off of the stack.

Pop additional destinations

After a login flow, for example, you should pop all of the login-related destinations off of the back stack so that the back button doesn’t take the users back into the login flow again.

This is possible by adding a app:popUpTo attribute to the associated <action> element. This way, the framework pops some destinations off of the back stack as part of the call to navigate(). The attribute value is the ID of the most recent destination that should remain on the stack.

You can also include app:popUpToInclusive="true" to indicate that the destination specified in app:popUpTo should also be removed from the back stack (which in most cases will be the same ID as the destination attribute).

Deep links

To start using deep links you may need to add a <deepLink> element inside the <fragment> on the navigation graph file like this:

<fragment
 android:id="@+id/secondFragment"
 android:name="com.example.SecondFragment"
 android:label="@string/second"
 tools:layout="@layout/fragment_second">
     <deepLink
        android:id="@+id/secondDeepLink"
        app:uri="navsample.com/second" />
</fragment>

It means that when this URL is accessed from a browser or another app, it will open the SecondFragment and also, create the correct back stack. In that example the url is http://navsample.com/second.

Bottom Navigation and Drawer Layout

The framework has a NavigationUI component that connects navigation with certain material design components such as BottomNavigationView and DrawerLayout. Let’s see how it works with the BottomNavigationView.

This is an example of menu_bottom_navigation. In this case it’ll show three menu options on BottomNavigationView.

<?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_home"
        android:title="@string/home" />

    <item
        android:id="@+id/secondFragment"
        android:icon="@drawable/ic_second"
        android:title="@string/second" />

    <item
        android:id="@+id/thirdFragment"
        android:icon="@drawable/ic_third"
        android:title="@string/third" />
</menu>

On the nav_graph file, we will need to use the same ID as the menu_bottom_navigation file as shown below:

<?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/app_navigation"
 app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
android:name="br.com.fornaro.sample.navigation.HomeFragment"
        android:label="@string/home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/secondFragment"
android:name="br.com.fornaro.sample.navigation.SecondFragment"
        android:label="@string/second"
        tools:layout="@layout/fragment_second"  />

    <fragment
        android:id="@+id/thirdFragment"
android:name="br.com.fornaro.sample.navigation.ThirdFragment"
        android:label="@string/third"
        tools:layout="@layout/fragment_third" />
</navigation>

Now we need to setup the NavController in the UI component like this:

// MainActivity.kt
val navController = findNavController(R.id.navController)
bottomNavigationView.setupWithNavController(navController)

Once the IDs of the <fragments> are the same as <item> on menu_bottom_navigation, the framework will link them automatically and navigate to the specified Fragment.

The same concept applies to DrawerLayout by linking the IDs.

Tests

In the next section you’ll find a sample code using the Navigation Architecture Component with some tests implemented. There, it is possible to test the BottomNavigationView and the DeepLink.

Code

A sample code has been created to show how it might be implemented. In this example a BottomNavigationView was created to show how the navigation works in that component, how to use Safe Args to pass data in a safe way, how to use DeepLink with all the navigation with an animation. You can take a look at the code below.

Navigation Component - Github Sample

Conclusion

The Navigation Architecture Component has arriving to help developers implement an app’s navigation in a simple, easy, and consistent way while avoiding boilerplate code. Everything we need to do to implement how navigation will work on our app will be done within the navigation graph XML file, letting the framework do all the hard work for us.