DEV Community

Cover image for Step by Step guide to create basic MVVM Application in Android
Khush Panchal
Khush Panchal

Posted on • Edited on • Originally published at Medium

Step by Step guide to create basic MVVM Application in Android

#androiddev #android #kotlin #mvvm

Machine Coding LLD Android — MVVM-Hilt-Retrofit

In this blog we will create a basic mvvm application where user will fetch some data from the api and show it to the UI as a list.

For the sake of this article, we will use OMDb (The Open Movie Database) API to fetch the title and thumbnail image of the movie.

Purpose of this blog is to get started with creating MVVM project following proper architecture which can be used as a base to create any project.

This blog will help in machine coding round in android interviews.

Out of Scope for this blog:

  • Pagination
  • Testing
  • Compose
  • Offline Caching
  • Multiple Screen / Search section

Check out the NewsApp that covers all the above out of scope points.

1. Understanding the API 

{
  "Search": [
    {
      "Title": "Hellboy II: The Golden Army",
      "Year": "2008",
      "imdbID": "tt0411477",
      "Type": "movie",
      "Poster": "https://m.media-amazon.com/images/M/MV5BMjA5NzgyMjc2Nl5BMl5BanBnXkFtZTcwOTU3MDI3MQ@@._V1_SX300.jpg"
    },
    {
      "Title": "Army of Darkness",
      "Year": "1992",
      "imdbID": "tt0106308",
      "Type": "movie",
      "Poster": "https://m.media-amazon.com/images/M/MV5BODcyYzM4YTAtNGM5MS00NjU4LTk2Y2ItZjI5NjkzZTk0MmQ1XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg"
    }, 
    ..
    ..
   ],
  "totalResults": "703",
  "Response": "True"
}
Enter fullscreen mode Exit fullscreen mode
  • For this project we show the list showing image and title of the movie.

2. Add dependencies

  • Create the new android project in Android Studio and add the following dependency in app level build.gradle.kts or build.gradle file. 
//build.gradle.kts

dependencies {

    //Dagger for dependency injection
    implementation("com.google.dagger:hilt-android:2.51")
    kapt("com.google.dagger:hilt-compiler:2.51")

    //Glide for image loading
    implementation("com.github.bumptech.glide:glide:4.16.0")

    //Retrofit for networking
    implementation("com.squareup.retrofit2:retrofit:2.9.0")
    implementation("com.squareup.retrofit2:converter-gson:2.9.0")

    //ViewModel scope
    implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.2")
}
Enter fullscreen mode Exit fullscreen mode
  • Additionally for Hilt add the following plugins in app level build.gradle.kts or build.gradle file. 
//build.gradle.kts

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("kotlin-kapt") //<-- this one
    id("com.google.dagger.hilt.android") // <-- this one
}
Enter fullscreen mode Exit fullscreen mode
  • Also add following at root level build.gradle.kts or build.gradle file. 
//build.gradle.kts

plugins {
    id("com.android.application") version "8.1.4" apply false
    id("org.jetbrains.kotlin.android") version "1.9.0" apply false
    id("com.google.dagger.hilt.android") version "2.51" apply false //<-- this one
}
Enter fullscreen mode Exit fullscreen mode
  • Since we will be using view binding for our xml layouts, add the following in app level build.gradle.kts or build.gradle file. 
//build.gradle.kts

android {
..
..
  buildFeatures {
      viewBinding = true
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Sync the gradle and run your project.

3. Create Application class and Add necessary permissions in Manifest file

  • Create Application class and add @HiltAndroidApp annotation. 
//MainApplication.kt

@HiltAndroidApp
class MainApplication: Application()
Enter fullscreen mode Exit fullscreen mode
  • Add the name in manifest file. 
<!--AndroidManifest.xml-->

<application
  android:name=".MainApplication">
</application>
Enter fullscreen mode Exit fullscreen mode
  • Add Internet permission in manifest file. 
<!--AndroidManifest.xml-->

<uses-permission android:name="android.permission.INTERNET"/>
Enter fullscreen mode Exit fullscreen mode

4. Create Folder structure

  • Create the following folder structure, with empty folders (“common”, “data/model”, “data/network”, “data/repository”, “di/module”, “ui”, “ui/viewmodel”).
  • Check the below final project structure added for reference only, we will create each file step by step. 
|── MainApplication.kt
├── common
│   ├── Const.kt
│   └── UIState.kt
├── data
│   ├── model
│   │   ├── MainData.kt
│   ├── network
│   │   ├── ApiInterface.kt
│   └── repository
│       └── MainRepository.kt
├── di
│   ├── module
│   │   └── ApplicationModule.kt
├── ui
    ├── MainActivity.kt
    ├── MainAdapter.kt
    └── viewmodel
        ├── MainViewModel.kt
Enter fullscreen mode Exit fullscreen mode

5. Create Model class (Data Layer)

  • Create class MainData.kt inside “data/model” folder and add the following data class based on the JSON, we are using only title and image. 
//MainData.kt

data class ApiResponse(
    @SerializedName("Search")
    val dataList: List<MainData>?
)

data class MainData(
    @SerializedName("Title")
    val title: String,

    @SerializedName("Poster")
    val poster: String
)
Enter fullscreen mode Exit fullscreen mode

6. Create Networking interface (Data Layer)

  • First create object class Const.kt inside “common” folder and add Base url and Api Key. 
//Const.kt

object Const {
    const val BASE_URL = "https://www.omdbapi.com/"
    const val API_KEY = "your api key"
}
Enter fullscreen mode Exit fullscreen mode
  • Then create ApiInterface.kt class inside “data/network” folder with following function. 
//ApiInterface.kt

interface ApiInterface {
    @GET(".")
    suspend fun getMoviesData(
        @Query("s") s: String = "army",
        @Query("apikey") apikey: String = Const.API_KEY
    ): ApiResponse
}
Enter fullscreen mode Exit fullscreen mode
  • We are not using OkHttp interceptor for adding api key for of this article but it is recommended to add api key via interceptors.

7. Create ApplicationModule (DI Layer)

  • Create ApplicationModule.kt class inside “di/module” folder for providing Retrofit instance. 
//ApplicationModule.kt

@Module
@InstallIn(SingletonComponent::class)
class ApplicationModule {

    @Singleton
    @Provides
    fun provideNetworkService(): ApiInterface {
        return Retrofit
            .Builder()
            .baseUrl(Const.BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(ApiInterface::class.java)
    }
}
Enter fullscreen mode Exit fullscreen mode

8. Create Repository class (Data Layer)

  • Create MainRepository.kt class inside “data/repository” folder that will return flow of list which will be collected by view model. 
//MainRepository.kt

@Singleton
class MainRepository @Inject constructor(
    private val apiInterface: ApiInterface
) {

    fun getMainData(): Flow<List<MainData>> {
        return flow {
            emit(
                apiInterface.getMoviesData().dataList ?: emptyList()
            )
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

9. Create ViewModel and UIState (UI Layer)

  • First create UIState.kt inside “common” folder which is a sealed interface representing the state of UI that will emit and collect between ViewModel and UI component. 
//UIState.kt

sealed interface UIState<out T> {
    data class Success<T>(val data: T) : UIState<T>
    data class Failure<T>(val throwable: Throwable, val data: T? = null) : UIState<T>
    data object Loading : UIState<Nothing>
}
Enter fullscreen mode Exit fullscreen mode
  • Then create MainViewModel.kt inside “ui/viewmodel” folder which extends ViewModel() and inject MainRepository.
  • We use StateFlow to emit data from ViewModel and then collect by UI.
  • We use IO dispatcher for network call (For this article we are not injecting dispatcher from outside, but it is recommended to provide from outside). 
//MainViewModel.kt

@HiltViewModel
class MainViewModel @Inject constructor(
    private val mainRepository: MainRepository
) : ViewModel() {

    private val _mainItem = MutableStateFlow<UIState<List<MainData>>>(UIState.Loading)
    val mainItem: StateFlow<UIState<List<MainData>>> = _mainItem

    init {
        fetchItems()
    }

    private fun fetchItems() {
        viewModelScope.launch {
            _mainItem.emit(UIState.Loading)
            mainRepository
                .getMainData()
                .flowOn(Dispatchers.IO)
                .catch {
                    _mainItem.emit(UIState.Failure(it))
                }
                .collect {
                    _mainItem.emit(UIState.Success(it))
                }
        }
    }

}
Enter fullscreen mode Exit fullscreen mode

10. Create Layouts (UI Layer)

  • Edit activity_main.xml with RecyclerView for showing the list, progress bar and error message. 
<!--activity_main.xml-->

<?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.MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/error"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Something went wrong" />

</androidx.constraintlayout.widget.ConstraintLayout>
Enter fullscreen mode Exit fullscreen mode
  • Create item_main.xml layout and put inside “res” folder for single item visible on UI that will be used by Recycler View Adapter. 
<!--item_main.xml-->

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

    <ImageView
        android:id="@+id/iv_item"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@color/design_default_color_secondary" />

    <TextView
        android:id="@+id/tv_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/iv_item"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Hey there" />

</androidx.constraintlayout.widget.ConstraintLayout>
Enter fullscreen mode Exit fullscreen mode

11. Create Adapter class (UI Layer)

  • Create MainAdapter.kt inside “ui” folder that extends RecyclerView Adapter.
  • We use DiffUtil for calculating data diff and bind data.
  • We use Glide for loading image into image view. 
//MainAdapter.kt

class MainAdapter : RecyclerView.Adapter<MainAdapter.MainViewHolder>() {

    private val items = ArrayList<MainData>()

    fun setItems(items: List<MainData>) {
        val diffResult = DiffUtil.calculateDiff(MainDiffCallBack(this.items, items))
        this.items.clear()
        this.items.addAll(items)
        diffResult.dispatchUpdatesTo(this)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MainViewHolder {
        return MainViewHolder(
            ItemMainBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        )
    }

    override fun getItemCount(): Int {
        return items.size
    }

    override fun onBindViewHolder(holder: MainViewHolder, position: Int) {
        holder.bind(items[position])
    }

    inner class MainViewHolder(private val binding: ItemMainBinding) : ViewHolder(binding.root) {

        fun bind(mainData: MainData) {
            binding.tvItem.text = mainData.title
            Glide.with(itemView.context)
                .load(mainData.poster)
                .placeholder(com.google.android.material.R.color.design_default_color_secondary)
                .into(binding.ivItem)
        }

    }
}

class MainDiffCallBack(private val oldList: List<MainData>, private val newList: List<MainData>) :
    DiffUtil.Callback() {
    override fun getOldListSize(): Int {
        return oldList.size
    }

    override fun getNewListSize(): Int {
        return newList.size
    }

    override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
        return (oldList[oldItemPosition].title == newList[newItemPosition].title)

    }

    override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
        return oldList[oldItemPosition] == newList[newItemPosition]
    }
}
Enter fullscreen mode Exit fullscreen mode

12. Observe UIState inside MainActivity (UI Layer)

  • Drag MainActivity.kt file inside “ui” folder.
  • We collect Flow from viewmodel and update UI. 
//MainActivity.kt

@AndroidEntryPoint
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private lateinit var adapter: MainAdapter

    private val mainViewModel: MainViewModel by lazy {
        ViewModelProvider(this)[MainViewModel::class.java]
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        adapter = MainAdapter()
        collector()
        setupUI()
    }

    private fun setupUI() {
        binding.rv.adapter = adapter
        binding.rv.layoutManager =
            LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
        binding.rv.addItemDecoration(
            DividerItemDecoration(
                this,
                DividerItemDecoration.VERTICAL
            )
        )
    }

    private fun collector() {
        lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                mainViewModel.mainItem.collect {
                    when (it) {
                        is UIState.Success -> {
                            binding.progress.visibility = View.GONE
                            binding.error.visibility = View.GONE
                            binding.rv.visibility = View.VISIBLE
                            adapter.setItems(it.data)
                        }

                        is UIState.Failure -> {
                            binding.progress.visibility = View.GONE
                            binding.error.visibility = View.VISIBLE
                            binding.rv.visibility = View.GONE
                            binding.error.text = it.throwable.toString()
                        }

                        is UIState.Loading -> {
                            binding.progress.visibility = View.VISIBLE
                            binding.error.visibility = View.GONE
                            binding.rv.visibility = View.GONE
                        }
                    }
                }
            }
        }
    }

}
Enter fullscreen mode Exit fullscreen mode

Run your application after each step to check everything is working fine.

High level flow

  • Check the below high level flow of how data coming from API and is shown to UI.

HLD

  • Using the above step by step approach help making a base for any MVVM application making it scalable.

Final Result

Screenshot

Source Code: GitHub

Contact Me:

LinkedIn, Twitter

Happy Coding ✌️

Top comments (1)

Collapse
 
karim_abdallah profile image
Karim Abdallah •

What A Great Tutorial

Read next

kiolk profile image

Day 22. Lottie animation

Kiolk -

eniamza profile image

Scrambled EXIF: Remove Metadata From Your Media In A Blink!

eniamza -

hamada147 profile image

Kotlin Properties vs. Java Fields: A Tale of Two Variables (Where Kotlin Has More Tricks Up Its Sleeve!)

Ahmed Moussa -

kiolk profile image

Day 20. A bit of progress

Kiolk -