DEV Community: Henry Udorji

Implement Splash Screen the right way

Henry Udorji — Sat, 24 Apr 2021 16:08:29 +0000

Splash screens are usually the first thing a user sees when they open an app. I know that as developers mostly newbies you must have gone on to search on Google or Youtube for how to add a splash screen to your app, and my guess is that you were introduced to using a whole Activity with some form of delay with maybe a Thread, Handler or even Coroutines. This approach is bad because:

We are Creating a whole Activity that does nothing but to show maybe a logo for some seconds and that's it.
Users are not usually patient when it comes to mobile apps, so why waste their time with an Activity that delays for maybe 2 seconds doing nothing.

I must be honest here, I also created splash screens that way before I got this knowledge that I am about to share with you, so sit back and enjoy while I show you the right way to implement splash screens.

Now to the business of the day, I would create a new project named SplashScreenApp, once that is done below are the steps required to get the splash screen working

Copy your app logo to the drawable folder
Create a drawable file for the splash background
Create a custom style inside themes.xml
Change the app theme in AndroidManifest.xml to the custom theme
Change the app theme back to original in the onCreate method of MainActivity.kt

So in this short 5 steps we would have a well implemented splash screen, we would start from step 2 because I am assuming you should be able to copy your app logo image to drawable folder, for step 2 we need to create a new drawable file called splash_background or whatever you like

splash_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque"> <!-- android:opacity="opaque" should be here -->
    <item>
        <!--this is your background, you can use color, gradient etc.-->
        <color android:color="@color/app_background_color"/>
        <!--<shape>
              <gradient
                   android:angle="315"
                   android:endColor="#1a82ff"
                   android:startColor="#2100d3"
                   android:type="linear"/>
        </shape> -->
    </item>
    <item
        android:drawable="@drawable/ic_app_logo"
        android:gravity="center"/>
</layer-list>

The drawable above is composed of two layers the background color and the drawable image, for the background color I commented out the shape tag that has a gradient in it because I wanted my splash background to be of solid color but if you want you can make use of the gradient. The drawable points to your app logo with a gravity attribute of center which would make the image center on the screen, you could also add width and height to drawable if you want.

Alright to step 3 where we would create a custom style inside the themes.xml folder, if your Android Studio version is less than 4.1.3 then themes.xml might be alien to you but don't worry what I am referring to is the styles.xml file in values folder, for this post I would refer to it as themes.xml.
Now inside the themes.xml we would create a custom style like below

themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TodoApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/app_background_color</item>
        <item name="colorPrimaryVariant">@color/app_background_color</item>
        <item name="colorOnPrimary">@color/gold</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <!-- Custom theme for showing splash screen-->
    <style name="SplashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="android:statusBarColor">@color/app_background_color</item>
    </style>
</resources>

On to step 4, open your AndroidManifest.xml file which should look similar to the one below

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.henryudorji.SplashScreenApp">

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_app_logo"
        android:label="@string/app_name"
        android:roundIcon="@drawable/ic_app_logo"
        android:supportsRtl="true"
        android:theme="@style/SplashTheme">
        <activity android:name=".ui.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

If you observe correctly you would see that the theme attribute inside the application tag is referencing the custom style we created instead of the default style, now that's what you should do replace the style you have there with the custom theme we created and we are good to go.

If we should run our app right now we would notice that something is not right, which is that the splash background is still showing that is not a behavior that we want for our app this is where step 5 comes into play open the MainActivity.kt file

package com.henryudorji

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setTheme(R.style.Theme_TodoApp)
        setContentView(R.layout.activity_main)

    }

}

If you notice you would see that I set the theme back to the default style inside of the onCreate method, now our app is working perfectly. Yes you almost did not even see the splash right? that because you MainActivity is still empty so it loads faster, try adding two or three views to it and see the difference but don't forget the end User does not usually care about your splash screen they just want to use the app as quickly as possible so use this approach and make your app one step faster. Thanks for your time, hope you found this article insightful please leave a like or comment. You can also reach out to me on Twitter @henry_ifechukwu

How to implement Exposed Drop-Down Menu

Henry Udorji — Fri, 16 Apr 2021 16:00:45 +0000

I cannot overestimate how tedious it is to create nice looking drop-down menu during the old days of Spinner, it was incredibly always looking ugly or out of shape with the other parts of your design but thanks to Material design that has come to our rescue with this easy to implement and customize menu.
Exposed drop-down menu just like a spinner is used to show a list of items.

All we have to do to get this menu up and running can be divided into the following steps, i am assuming that you have a project setup already.

Create custom layout you want the drop-down menu to show.
Create a string resource in your values folder, this string resource would contain the actual list we want to populate into the menu.
Add TextInputLayout and TextInputEditText into the Activity or Fragment layout file that you want to show the menu.
Finally create an ArrayAdapter for the menu.

With this very short steps we would have our menu working smoothly, to the very first step which is creating a custom layout go to your layout folder and create a new layout, I would name mine drop_down_layout

<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fontFamily="@font/muli_regular"
    android:text=""
    android:textColor="@color/colorBlack"
    android:padding="10dp"
    android:textSize="13sp"
    xmlns:android="http://schemas.android.com/apk/res/android" />

Number 1 done moving onto the next which is createing a string resource for that navigate to your values folder in res, create a new Value Resource File and name it drop_down_list

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="fruit_list">
        <item>Orange</item>
        <item>Pineapple</item>
        <item>Banana</item>
        <item>Mango</item>
        <item>Grapefruits</item>
        <item>Pears</item>
        <item>Coconut</item>
        <item>Watermelons</item>
        <item>Blueberries</item>
        <item>Lemon</item>
    </string-array>
</resources>

This next step is where we add the material design feel that the spinner lacked

.....
.....
.....


<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputFruits"

       style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            app:boxStrokeColor="@color/colorPrimary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <AutoCompleteTextView
                android:id="@+id/fruitAuto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:fontFamily="@font/muli_regular"
                android:text=""
                android:textColor="@color/colorBlack"
                android:inputType="none"/>
        </com.google.android.material.textfield.TextInputLayout>

Take note of the style attribute in TextInputLayout because it is the main ingredient in achieving the drop-down and also the AutoCompleteTextView.

The final piece of the puzzle is the ArrayAdapter which we would setup with the AutoCompleteTextView

class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding


 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)


val fruits = resources.getStringArray(R.array.drop_down_list)
val adapter = ArrayAdapter(this, R.layout.drop_down_layout, fruits)
binding.facultyAuto.setAdapter(adapter) 
}

All we did here is to get the arrays of fruits from the string resource which is saved into the variable fruits, then the ArrayAdapter is created passing in the context which is the activity or fragment you are in, the custom layout is also required followed by the array that has our data.

Do not forget to add the material theme to your layout like below else app would crash

<?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"
    android:theme="@style/Theme.MaterialComponents.Light.NoActionBar">

.....
.....
.....

And so we have our nice looking drop-down menu a lot more customization could be done but for simplicity I would stop here. If you face any issues implementing this feature, please leave a comment or send me a tweet @henry_ifechukwu. Thanks.

How to use ViewBinding in a RecyclerView

Henry Udorji — Wed, 14 Apr 2021 12:42:12 +0000

In this article I would show you how to make use of viewBinding when setting up a RecyclerView, now this can be a little bit tricky and so can easily go wrong but I would try to break down every step along the way. In case you have no idea what viewBinding is about, you can check out my previous article where I introduced it and how to set it up both in an Activity and a Fragment. Using View binding to replace findViewById on Android

The following dependencies would be needed for this project make sure they are added to your project and gradle sync is successful

dependencies {
    .....
    .....
    .....


    //material Design for RecyclerView
    implementation 'com.google.android.material:material:1.3.0'

    //glide to load images from url
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    kapt 'com.github.bumptech.glide:compiler:4.11.0'
}

Do not also forget to set viewBinding to true in the same file where you just added dependencies

android {
    .....
    .....
    .....

    buildFeatures {
        viewBinding true
    }
}

Without wasting much of our time lets jump into code and create this RecyclerView, so start a new Android studio project, name it whatever you like when project sync is completed open up activity_main.xml file and add the following to it

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

Now that the RecyclerView has been added to the activity_main.xml file we need to define the xml layout file that would be used populating the views into the RecyclerView. Navigate to your res folder then to layout to create a new Layout Resource File I would name this file single_article_layout you can name yours whatever.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/articleTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text=""
        android:textSize="10sp"
        android:textColor="#000000"
        android:layout_marginTop="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>


    <ImageView
        android:id="@+id/articleImage"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:src="@drawable/ic_launcher_background.xml"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toBottomOf="@id/articleTitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>


    <TextView
        android:id="@+id/articleDescription"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text=""
        android:textSize="10sp"
        android:textColor="#000000"
        android:layout_margin="5dp"
        app:layout_constraintTop_toBottomOf="@id/articleImage"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:id="@+id/articleAuthor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text=""
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="@id/articleImage"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/articlePublishedAt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text=""
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="@id/articleImage"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/articleSource"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text=""
        android:textColor="12sp"
        android:textColor="#42ABD8"
        app:layout_constraintTop_toBottomOf="@id/articleDescription"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/_1sdp"
        android:background="#ccc"
        app:layout_constraintTop_toBottomOf="@id/articleSource"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

From the xml layout above you can already tell that I would not be focusing on creating a beautiful UI but on the actual setup of the RecyclerView so please bear with me.
Next on our agenda is creating a model class for our adapter that would be created in a while, create a new Kotlin data class and name it Article

data class Article(
    val author: String,
    val content: String,
    val description: String,
    val publishedAt: String,
    val source: String,
    val title: String,
    val urlToImage: String
)

Now we move to the main business which is the adapter, create a new Kotlin class named ArticleAdapter or whatever name you chose

class ArticleAdapter(
    private val articles: ArrayList<Article> 
) : RecyclerView.Adapter<ArticleAdapter.RecyclerViewHolder>() {

    inner class ArticleViewHolder(var binding: SingleArticleLayoutBinding): RecyclerView.ViewHolder(binding.root)


    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ArticleViewHolder {
        val binding = SingleArticleLayoutBinding.inflate(
            LayoutInflater.from(parent.context),
            parent,
            false
        )
        return ArticleViewHolder (binding)
    }

    override fun onBindViewHolder(holder: ArticleViewHolder , position: Int) {
        val article = articles[position]

        holder.binding.apply {
            Glide.with(this.root)
                .load(article.urlToImage)
                .placeholder(R.drawable.ic_launcher_background.xml)
                .into(articleImage)

            articleTitle.text = article.title
            articleDescription.text = article.description
            articleAuthor.text = article.author
            articlePublishedAt.text = article.publishedAt
            articleSource.text = article.source

            this.root.setOnClickListener {
                onItemClickListener?.let { it(article) }
            }
        }
    }

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

    private var onItemClickListener: ((Article) -> Unit) ? = null

    fun setOnItemClickListener(listener: (Article) -> Unit) {
        onItemClickListener = listener
    }
}

The adapter is fully ready to be integrated but before that let me quickly explain what is happening there from top to bottom

An ArrayList was passed into the constructor of the RecyclerView class, this list would actually be created inside of MainActivity.
The ViewHolder class is created which is an inner class, the viewholder holds reference to all the views we have defined in the single_article layout. In the constructor of these class I passed SingleArticleLayoutBinding which is the binding class generated by the compiler for single_article_layout.xml file.
In onCreateViewHolder method I called the inflate method of SingleArticleLayoutBinding class pass in the required arguments assign it to the variable called binding then return the viewholder.
The onBindViewHolder method is where the views are bound to their respective data, you can see I used holder.binding.apply{} - holder and binding are instances of viewHolder and SingleArticleLayoutBinding but apply is a scope function in Kotlin I used to make the code more consise instead of repeatedly writing holder.binding for all the available views we make use of just one inside the apply block.
An onClick listener that I would implement later to show a toast of the item clicked.

There you go just a summary of what the adapter did, now to the MainActivity.kt class for the final set of code

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private lateinit var adapter: ArticleAdapter
    private val articles = arrayListOf<Article>()


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)


        getArticles()
        adapter = ArticleAdapter(getArticles())  //Initializing the adapter and passing the list as an argument
        binding.recyclerView.apply {
            adapter = adapter //setting RecyclerViews adapter to the adapter initialized above
            layoutManager = LinearLayoutManager(this@MainActivity)
        }
        adapter.setOnItemClickListener {
            Toast.makeText(this@MainActivity, it.author, Toast.LENGTH_SHORT).show()
        }
    }

    //This method is for generating the dummy list of Articles
    private fun getArticles(): ArrayList<Article>{
        articles = ArrayList<Article>()

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))

        articles.add(Article("John Doe",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
        "Lorem ipsum text description", "4/14/2021", "Daily Times", "Lorem", "https://www.bbc.com/news/business-56736177 "))


        return articles
    }
}

The MainActivity is very straight forward, just setup binding if you don't know how to do that then I suggest you check out my previous article where I explained it in a more detailed way Using View binding to replace findViewById on Android
With the binding done we setup the RecyclerView, setting the adapter and also calling setOnItemClickListener which shows a toast.
In the getArticles method we are manually creating our list of articles and then returning the list to be passed to the constructor of the adapter. Ideally this list would usually be gotten from a rest API or some other form of fetching data from a network but just for simplicity I created the list manually.

And so we've come to the end of this wonderful journey hope you enjoyed it as much as I did, if there is anything you did not understand or any mistake I made you can leave a comment or send me a tweet at @henry_ifechukwu
Have a nice day.

Using View binding to replace findViewById on Android

Henry Udorji — Sun, 21 Mar 2021 03:02:19 +0000

In this post i would show you how to use View binding in Activities and Fragments.
As an Android software developer, am sure you are very familiar with findViewById and how tedious it is to track what id belonged to what Widget in what layout file, not to mention the amount of boilerplate it can cause if you have a lot of views for a particular layout file.

View binding is a feature that allows you to more easily write code that interacts with views. Once view binding is enabled in a module, it generates a binding class for each XML layout file present in that module. An instance of a binding class contains direct references to all views that have an ID in the corresponding layout.
Google documentation

According to that quote from Google docs for every xml layout there is generated binding class, all you just need to do is instantiate that class and every view with an Id would be available for use. Alright much talk lets start coding.

The very first thing you need to do is enabling view binding in your project, go to your app level build.gradle file - this is the file where you add dependencies for your project; and add the following below

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

Now sync the project, after sync is successful move to your MainActivity.kt class let us instantiate the binding class

class MainActivity : AppCompatActivity {
private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }
}

The code snippet above is doing three things

We declared the variable named binding as a lateinit which means we would initialize it later, and this variable is of type ActivityMainBinding which is the generated binding class of activity_main layout.
Now in the onCreate method the variable binding is initialized by setting it equal to ActivityMainBinding then call the inflate method of this class and also passing the parameter layoutInflater.
The final step is to remove the R.layout.activity_main from setContentView() and instead pass binding.root as the parameter.

Now with just this setup we can access any View with an id in activity_main layout file without calling findViewById, let us test what we have done so far.
For testing this out add a button to your layout file and give it an id, my button's id would be clickBtn.
In the MainActivity.kt class we can reference that button by simply calling binding.clickBtn

....
....

binding.clickBtn.setOnClickListener(->
     Toast.makeText(this, "Button Clicked", Toast.LENGHT_SHORT).show()
      )
    }
}

And there you have it clean and simple less boilerplate, now let me show you how to instantiate the binding class inside a fragment.

class TestFragment : Fragment() {
private lateinit var binding: TestFragmentBinding


override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    binding = TestFragmentBinding.inflate(inflater, container, false)
    val view = binding.root
    return view
}

override fun onDestroyView() {
    super.onDestroyView()
    binding = null
}
}

The key difference between Activity and Fragment is the onDestroyView() where we set binding = null because fragments outlive their views so every reference to the binding class has to be cleared.

If you do not want a binding class to be generated for a layout file all you have to do is add the following to that file

<LinearLayout
    ...
        tools:viewBindingIgnore="true" >
    ...
</LinearLayout>

I hope this little write up has helped you clarify how View binding works generally, if you have ever built an App with a lot of Views then you would have noticed how tiring having to write findViewById everytime a view is added to our layout can be.
View Binding should not be confused for Data binding - which is also a way of binding views but it works in a completely different way to View binding. Thanks for reading.