Kotlin — Android to the x

When working on Android, we use libraries to reduce the amount of code we had to write and abstract some of the repetitive work away. Some of these injection tools like Dagger or ButterKnife are real life savers. The Kotlin team wanted similar functionality and got to creating the android extensions, an injection tool that allows view binding and the possibility to make an object parcelable. In this post, I’ll show you how to use the view binding feature to save tons of code and increase performance.

By using the Android extensions you gain an added benefit, this tool not only injects the code to find the views in the inflated xmls, it also adds a caching mechanism that makes the view finding perform better.

So, let’s get to business…

The only configuration needed after having created a kotlin project is to apply the plugin

apply plugin: ‘kotlin-android-extensions’

Easy right? With just that we have the injection tool enabled and we can start using it in the code

Let’s say we have the following xml file named my_activity.xml:

<androidx.coordinatorlayout.widget.CoordinatorLayout 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=”.activities.MyActivity”> 
 
 <com.google.android.material.appbar.AppBarLayout 
 android:layout_width=”match_parent” 
 android:layout_height=”wrap_content”> 
 
 <androidx.appcompat.widget.Toolbar 
 android:id=”@+id/toolbar” 
 android:layout_width=”match_parent” 
 android:layout_height=”?attr/actionBarSize”> 
 <LinearLayout 
 android:layout_width=”wrap_content” 
 android:layout_height=”wrap_content” 
 android:orientation=”vertical” 
 android:layout_gravity=”center” 
 android:gravity=”center”> 
 
 <TextView
 android:id=”@+id/navTitle”
 android:layout_width=”wrap_content” 
 android:layout_height=”wrap_content”/>
 
 </LinearLayout> 
 </androidx.appcompat.widget.Toolbar> 
 </com.google.android.material.appbar.AppBarLayout>
 
 <LinearLayout 
 android:layout_width=”wrap_content” 
 android:layout_height=”wrap_content” 
 android:orientation=”vertical” 
 android:layout_gravity=”center” 
 android:gravity=”center”>
<TextView
 android:id=”@+id/helloWorld”
 android:layout_width=”wrap_content” 
 android:layout_height=”wrap_content”/>
</LinearLayout> 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

and on the activity we wanted to access navTitle and helloWorld or even the toolBar for configuration purposes

//imports area
…
import kotlinx.android.synthetic.main.my_activity.*
…
override fun onCreate(savedInstanceState: Bundle?) { 
 super.onCreate(savedInstanceState) 
 setContentView(R.layout.my_activity)
 setSupportActionBar(toolbar)
 navTitle.text = “My Activity”
 helloWorld.text = “Hello World”
}

As you can see we only need to import the synthetic auto-generated classes, after that we can access the UI elements by just their name specified in the xml.

The same applies to a RecyclerView.Adapter

Let’s say we have an item in an xml file named my_list_item.xml

<LinearLayout 
 xmlns:android=”http://schemas.android.com/apk/res/android" 
 android:layout_width=”match_parent” 
 android:layout_height=”48dp” 
 android:background=”@android:color/white”
 android:padding=”5dp”>
 
<TextView
 android:id=”@+id/itemText”
 android:layout_width=”match_parent” 
 android:layout_height=”wrap_content”
 android:layout_alignParentStart=”true” 
 android:layout_centerVertical=”true”/> 
</LinearLayout> 

Now on the RecyclerView.Adapter we will use it in this way

//imports area
…
import kotlinx.android.synthetic.main.my_list_item.view.*
…
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { 
 return ViewHolder(LayoutInflater.from(parent.context) 
 .inflate(R.layout.my_list_item, parent, false)) 
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
 holder.configure()
}
…
class ViewHolder(val view: View): RecyclerView.ViewHolder(view) { 
 
 fun configure() {
 view.itemText.text = “list text”
 }
}

You’ll notice a small difference between the first example and this one. The import contains a view element, and on the ViewHolder we access itemText from the view element, the rest is the same.

Hope you find this helpful in your everyday work 😄