Kotlin for Android Developers

12 Making the forecast list clickable
Current items layout needs some work to be ready for a real app. The first thing is to create a proper
XML that can fit our basic needs. We want to show an icon, date, description and high and low
temperatures. So let’s create a layout called
item_forecast.xml
:
1

2
3
xmlns:android="http://schemas.android.com/apk/res/android"
4
xmlns:tools="http://schemas.android.com/tools"
5
android:layout_width="match_parent"
6
android:layout_height="match_parent"
7
android:padding="@dimen/spacing_xlarge"
8
android:background="?attr/selectableItemBackground"
9
android:gravity="center_vertical"
10
android:orientation="horizontal">
11
12
13
android:id="@+id/icon"
14
android:layout_width="48dp"
15
android:layout_height="48dp"
16
tools:src="@mipmap/ic_launcher"/>
17
18
19
android:layout_width="0dp"
20
android:layout_height="wrap_content"
21
android:layout_weight="1"
22
android:layout_marginLeft="@dimen/spacing_xlarge"
23
android:layout_marginRight="@dimen/spacing_xlarge"
24
android:orientation="vertical">
25
26
27
android:id="@+id/date"
28
android:layout_width="match_parent"
29
android:layout_height="wrap_content"
30
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
31
tools:text="May 14, 2015"/>
32
33
41

---

12 Making the forecast list clickable
42
34
android:id="@+id/description"
35
android:layout_width="match_parent"
36
android:layout_height="wrap_content"
37
android:textAppearance="@style/TextAppearance.AppCompat.Caption"
38
tools:text="Light Rain"/>
39
40

41
42
43
android:layout_width="wrap_content"
44
android:layout_height="wrap_content"
45
android:gravity="center_horizontal"
46
android:orientation="vertical">
47
48
49
android:id="@+id/maxTemperature"
50
android:layout_width="wrap_content"
51
android:layout_height="wrap_content"
52
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
53
tools:text="30"/>
54
55
56
android:id="@+id/minTemperature"
57
android:layout_width="wrap_content"
58
android:layout_height="wrap_content"
59
android:textAppearance="@style/TextAppearance.AppCompat.Caption"
60
tools:text="15"/>
61
62

63
64

The domain model and data mapper must generate the complete icon url, so that we are able to load
it:
1
data class Forecast(val date: String, val description: String,
2
val high: Int, val low: Int, val iconUrl: String)
In
ForecastDataMapper
:

---

12 Making the forecast list clickable
43
1
private fun convertForecastItemToDomain(forecast: Forecast): ModelForecast {
2
return ModelForecast(convertDate(forecast.dt),
3
forecast.weather[0].description, forecast.temp.max.toInt(),
4
forecast.temp.min.toInt(), generateIconUrl(forecast.weather[0].icon))
5
}
6
7
private fun generateIconUrl(iconCode: String): String
8
= "http://openweathermap.org/img/w/$iconCode.png"
The
icon
code we got from the first request is used to compose the complete url for the icon image.
The simplest way to load an image is by making use of an image loader library.
Picasso¹⁹
is a really
good option. It must be added to
build.gradle
dependencies:
1
compile "com.squareup.picasso:picasso:"
The adapter needs a big rework too. A click listener will be necessary, so let’s define it:
1
interface OnItemClickListener {
2
operator fun invoke(forecast: Forecast)
3
}
If you remember from the last lesson, the
invoke
method can be omitted when called. So let’s use it
as a way of simplification. The listener can be called in two ways:
1
itemClick.invoke(forecast)
2
itemClick(forecast)
The will
ViewHolder
now be responsible of binding the forecast to the new view:
1
class ViewHolder(view: View, val itemClick: OnItemClickListener) :
2
RecyclerView.ViewHolder(view) {
3
4
private val iconView: ImageView
5
private val dateView: TextView
6
private val descriptionView: TextView
7
private val maxTemperatureView: TextView
8
private val minTemperatureView: TextView
9
10
init {
¹⁹
http://square.github.io/picasso/

---

12 Making the forecast list clickable
44
11
iconView = view.find(R.id.icon)
12
dateView = view.find(R.id.date)
13
descriptionView = view.find(R.id.description)
14
maxTemperatureView = view.find(R.id.maxTemperature)
15
minTemperatureView = view.find(R.id.minTemperature)
16
}
17
18
fun bindForecast(forecast: Forecast) {
19
with(forecast) {
20
Picasso.with(itemView.ctx).load(iconUrl).into(iconView)
21
dateView.text = date
22
descriptionView.text = description
23
maxTemperatureView.text = "${high.toString()}"
24
minTemperatureView.text = "${low.toString()}"
25
itemView.setOnClickListener { itemClick(this) }
26
}
27
}
28
}
The constructor of the adapter now receives the
itemClick
. The methods for creation and binding
are simpler:
1
public class ForecastListAdapter(val weekForecast: ForecastList,
2
val itemClick: ForecastListAdapter.OnItemClickListener) :
3
RecyclerView.Adapter() {
4
5
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):
6
ViewHolder {
7
val view = LayoutInflater.from(parent.ctx)
8
.inflate(R.layout.item_forecast, parent, false)
9
10
return ViewHolder(view, itemClick)
11
}
12
13
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
14
holder.bindForecast(weekForecast[position])
15
}
16
...
17
}
If you use this code,
parent.ctx
won’t compile. Anko provides a lot of extension functions to make
Android coding simpler. It, for instance, includes a
ctx
property for activities and fragments, among

---

12 Making the forecast list clickable
45
others, which returns the context, but it lacks of the same property for views. So we are going to
create a new file called
ViewExtensions.kt
inside
ui.utils
, and add this extension property:
1
val View.ctx: Context
2
get() = context
From now on, any view can make use of it. It is not necessary at all, because you can use
context
synthetic property, but I think it gives some consistency if we are planning to use
ctx
in the other
classes. Besides, it’s a good example of how to use extension properties.
Finally, the
MainActivity
call to
setAdapter
results into this:
1
forecastList.adapter = ForecastListAdapter(result,
2
object : ForecastListAdapter.OnItemClickListener{
3
override fun invoke(forecast: Forecast) {
4
toast(forecast.date)
5
}
6
})
As you can see, to create an anonymous class, we create an
object
that implements the interface
we created. Not very nice, right? That’s because we are not making use of the powers of functional
programming, but you’ll learn how to convert this code into something much simpler in the next
chapter.
Try the new changes from the repository. The UI starts looking much nicer.

---