How to Create a Tracker For Cryptocurrency On Android By Using Kotlin

How to Create a Tracker For Cryptocurrency On Android By Using Kotlin

How to Create a Tracker For Cryptocurrency On Android By Using Kotlin

Hello to everyone, and today folks we are presenting a short but
a very useful tutorial where you will learn the following:

  • How to Get Queries with Retrofit
  • Retrofit and Rx
  • RecyclerView with Kotlin
  • How you can retrieving a data from API

Cryptocurrency image 1

Introduction

Let’s forget how to include support for Kotlin and other obvious and understandable things, like creating a project. We will use this api

Setting Up a Manifest

In order to make requests you need to have permission to use the network:

[sourcecode language=”xml”]

<uses-permission android:name="android.permission.INTERNET"/>

[/sourcecode]

Adding libraries to the Gradle

We need Retrofit and RxAndroid.

[sourcecode language=”xml”]

//Retrofit
compile "com.squareup.retrofit2:retrofit:2.3.0"
compile "com.squareup.retrofit2:adapter-rxjava2:2.3.0"
compile "com.squareup.retrofit2:converter-gson:2.3.0"

//RxAndroid
compile "io.reactivex.rxjava2:rxandroid:2.0.1"

[/sourcecode]

Creating layouts

[sourcecode language=”xml”]

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kram.vlad.cryptocurrency.activitys.MainActivity">

<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.constraint.ConstraintLayout>

[/sourcecode]

RecyclerView must know what its elements look like for this we need to create item.xml.

[sourcecode language=”xml”]

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

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_launcher_background"/>

<TextView
android:id="@+id/symbol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:layout_toEndOf="@+id/imageView"
android:text="TextView"
android:textColor="@android:color/black"
android:textSize="18sp"
android:textStyle="bold"/>

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/symbol"
android:layout_marginStart="11dp"
android:layout_toEndOf="@+id/symbol"
android:text="|"
android:textColor="@android:color/black"
android:textSize="18sp"/>

<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/textView2"
android:layout_marginStart="12dp"
android:layout_toEndOf="@+id/textView2"
android:text="TextView"
android:textColor="@android:color/black"
android:textSize="14sp"/>

<TextView
android:id="@+id/money"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/name"
android:layout_alignParentEnd="true"
android:layout_marginEnd="13dp"
android:text="TextView"
android:textColor="@android:color/black"
android:textSize="14sp"
android:textStyle="bold"/>

<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/imageView"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:layout_toEndOf="@+id/imageView"
android:text="24h:"/>

<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView6"
android:layout_alignBottom="@+id/textView6"
android:layout_alignEnd="@+id/name"
android:text="7d:"/>

[/sourcecode]

Making a model for parsing the answer

For such purposes, a POJO generator is a good idea.

[sourcecode language=”java”]

data class ResponseItem(@SerializedName("id")
@Expose var id: String?,
@SerializedName("name")
@Expose var name: String?,
@SerializedName("symbol")
@Expose var symbol: String?,
@SerializedName("rank")
@Expose var rank: String?,
@SerializedName("price_usd")
@Expose var priceUsd: String?,
@SerializedName("price_btc")
@Expose var priceBtc: String?,
@SerializedName("24h_volume_usd")
@Expose var _24hVolumeUsd: String?,
@SerializedName("market_cap_usd")
@Expose var marketCapUsd: String?,
@SerializedName("available_supply")
@Expose var availableSupply: String?,
@SerializedName("total_supply")
@Expose var totalSupply: String?,
@SerializedName("max_supply")
@Expose var maxSupply: String?,
@SerializedName("percent_change_1h")
@Expose var percentChange1h: String?,
@SerializedName("percent_change_24h")
@Expose var percentChange24h: String?,
@SerializedName("percent_change_7d")
@Expose var percentChange7d: String?,
@SerializedName("last_updated")
@Expose var lastUpdated: String?) {

[/sourcecode]

Create a simple get query

We will use Rx so our Get function should return Observable. Also right here we create Factory, with it we will receive the Retrofit object.

[sourcecode language=”java”]

interface RetrofitGetInterface {
@GET("v1/ticker/")
fun getCryptocurrency(): Observable<List<ResponseItem>>

companion object Factory {
fun create(): RetrofitGetInterface {
val retrofit = Retrofit.Builder()
.addCallAdapterFactory(RxJava2CallAdapterFactory.create())
.addConverterFactory(GsonConverterFactory.create()) // telling what we are parsim here
.baseUrl("https://api.coinmarketcap.com/") // the basic part of the link
.build()

return retrofit.create(RetrofitGetInterface::class.java)
}
}
}

[/sourcecode]

Now making a request

For queries, we will use Rx. If you are not familiar with reactive programming – you definitely have to learn it.

[sourcecode language=”java”]

val apiService = RetrofitGetInterface.create()
apiService.getCryptocurrency()
.observeOn(AndroidSchedulers.mainThread())// telling in which stream to return
.subscribeOn(Schedulers.io()) // Choose io – to work with data and the Internet
.subscribe({
result -> arrayListInit(result) // Here is callback
}, { error ->
error.printStackTrace()
})

[/sourcecode]

Make an adapter for the list

[sourcecode language=”java”]

class RecyclerViewAdapter(private val result: List<ResponseItem>,
val resources: Resources):RecyclerView.Adapter<RecyclerViewAdapter.CardViewHolder>()

[/sourcecode]

The data that we received from our request should be shipped in some array (List) ResponseItem. It needs to be transferred to the adapter so that it fills our list.

In GetItemCount, we must return the size of the array so that the adapter knows how many elements will be on our list.

[sourcecode language=”java”]

override fun getItemCount() = result.size // Return the size of the data array

[/sourcecode]

In OnCreateViewHolder we need to inflate the layout of our item.

[sourcecode language=”java”]

override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): CardViewHolder {
return CardViewHolder(LayoutInflater.from(parent?.context)
.inflate(R.layout.item, parent, false)) // Tell the RecyclerView how the item should look
}

[/sourcecode]

All the time in the code some CardViewHolder is lit. It must fill the views of each item with data from an array.

[sourcecode language=”java”]

class CardViewHolder(itemView: View?) : RecyclerView.ViewHolder(itemView) {

fun bind(result: List<ResponseItem>, position: Int, resources: Resources) {
val responseItem: ResponseItem = result.get(position)

itemView.symbol.text = responseItem.symbol
itemView.name.text = responseItem.name

}
}

[/sourcecode]

The bind function takes all necessary data and fills them with views. We address this function to onBindViewHolder. And thanks to the syntax of the language we do it quite nicely.

[sourcecode language=”java”]

override fun onBindViewHolder(holder: CardViewHolder, position: Int)
= holder.bind(result, position, resources)

[/sourcecode]

The last step: we attach our adapter

For this, you just need to write in the callback:

[sourcecode language=”java”]

recyclerView.adapter = RecyclerViewAdapter(result, resources)
recyclerView.layoutManager = LinearLayoutManager(this)

[/sourcecode]

The tutorial came out pretty short and simple, so there was not much explanation, but hope you like it.