Guest Article

How to develop a Cryptocurrency Tracker on Android

Learn how to create a Bitcoin Tracker App Project in Android using Java and XML!
Google+ Pinterest LinkedIn Tumblr

This guest post on the Applozic blog was written by Mr. Dennis Muasya. His specialty lies in designing and developing advanced applications for the Android platform. You can check out his personal website or find him on Twitter.

Image
Dennis Muasya

Introduction

A cryptocurrency is a form of digital currency that uses cryptography, and its creation and transfer are based on open-source code. Cryptocurrencies had an initial boom in 2009 when Satoshi Nakamoto established the first cryptocurrency, Bitcoin. Since then it has become one of the most valuable types of cryptocurrencies accepted as payment for goods or services worldwide from businesses such as Amazon to Subway sandwich shops! There are now hundreds of types of cryptocurrencies available to trade online. Some popular ones include Ethereum, Ripple XRP (Ripple), Litecoin LTC (LiteCoin), Monero XMR (Monero), Dash DASH (Dash), and more. 

In this age of the digital world, money is constantly changing and what has been popular in recent years are now being replaced by more advanced technologies. The payment industry especially feels these effects with how many people use cryptocurrencies for payments instead of traditional currencies backed up by governments. Japan, alone among other countries such as Venezuela who have also legalized it to some degree alongside others like Switzerland who offer cryptocurrency debit cards that provides access to both Bitcoin or Ethereum funds from your crypto wallet whether you’re at home on a laptop or abroad using an ATM card connected over Bluetooth wireless technology without going through any banks whatsoever if they even exist where you currently happen to be located when wanting cash transactions back down south across borders not just domestically but internationally too while fiat currency can’t

In this article, we will create a Bitcoin Tracker App Project in Android using Java and XML. Using a Bitcoin API, the application will display current Bitcoin rates in various regions. There are numerous free APIs accessible, and we will be using CoinMarketCap’s API for this project. The API will return a JSON file, which we will parse to meet our requirements. In this app, there will be only one activity. A sample GIF is provided below to give you an idea of what we’ll be doing in this article. Why should we confine ourselves to only code? Why not broaden it to include everyday utility chores for us?

In light of this, I’ve created the app to demonstrate the capabilities of tracking different cryptocurrencies in real-time on Android smartphones.

App Preview

It’s usually a good idea to have a visual and practical understanding of what you’re doing and how it works, so check out the image below to see how this app works:

The GitHub repository for this project can be found here.

Glossary

Cryptocurrency is a digitized medium of trade that uses encryption techniques to regulate the generation of units and verify transactions as well as control the transfer of digital currencies. It’s impossible to counterfeit, so it has become an attractive currency for many people who are wary of their local economy or want more privacy in their financial dealings. Today, there are over 1,000 different varieties of cryptocurrency in use, with Bitcoin being the most popular by far.

The CoinMarketCap API is an open-source project that provides a simple interface for retrieving market data. The API supports 38 exchanges, with more coming soon. Bitcoin (BTC), Ethereum (ETH), Bitcoin Cash (BCH), Ripple (XRP), Litecoin (LTC), and many other cryptocurrencies are currently supported.  A list of all the coins can be found on this page.

If you are an Android developer and need to get cryptocurrency prices, the CoinMarketCap API is a great place to start. With this API, you can pull data from multiple exchanges and aggregators in one call. This enables developers to build apps that compare cryptocurrencies across markets or display pricing graphs over time for any currency pair.

Steps:

Before we start developing, it’s a good idea to go over the technologies we’ll be using so you don’t become confused as we go.

  • Retrofit is a Java and Android-based REST client. It makes retrieving and uploading JSON (or other structured data) using a RESTful web service extremely simple.
  • RecyclerView – Android layouts for better content organization on the screen
    Create a new Android Studio project named “CryptoTracker.” If you’re just getting started, go to any of my prior tutorials on how to set up a new AS project.

After you’ve done creating a new project, install the technology’s dependencies.
Install the dependencies for the technologies we discussed after you’ve finished building a new project. Add the following to your app-level build.gradle file:

Step 1: Adding required dependencies

We’ll add the following libraries:

  • To handle REST-API requests, use OKHttp.
  • GSon is a tool for quickly parsing and converting JSON data.
  • Image fetching and caching in asynchronous mode have been retrofitted (essentially making this project doable in under 30 minutes).

Add the following dependencies to the project-level build to get started:

dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:28.0.0-rc01'
   implementation "com.android.support:support-core-utils:28.0.0-rc01"
   implementation 'com.android.support.constraint:constraint-layout:1.1.2'
   implementation 'com.android.support:recyclerview-v7:28.0.0-rc01'
   implementation 'com.google.code.gson:gson:2.8.2'


   implementation('com.squareup.retrofit2:retrofit:2.1.0') {
       exclude module: 'okhttp'
   }
   implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
   implementation 'com.squareup.okhttp3:logging-interceptor:3.9.1'
   implementation 'com.squareup.okhttp3:okhttp:3.10.0'
}

Step 2: Adding permissions to the manifest

To use the above libraries, we must add the following permission to our AndroidManifest.xml:

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

Step 3: Creating the activity_main.xml file

In our layout format, we must first add the activity main.xml. This is the location where all of our models will be placed. Because this will span my entire operation, I’ve set the width and height to match_parent. You have the option of selecting the measurements that best suit your requirements. We’re utilizing a RecyclerView, as you may have observed, so we’ll need to develop a layout for the RecyclerView Item.

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

   <android.support.v7.widget.RecyclerView
       android:id="@+id/my_recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:scrollbars="vertical" />

</android.support.constraint.ConstraintLayout>

Step 4: Creating the crypto_list_item.xml file

With a toolbar and four TextView objects for the name of the cryptocurrency, price, market cap, and volume24h, this is a rather straightforward layout. This is generally used as headers for the values that will be loaded remotely into the RecyclerView that we built beneath the TextView objects. In your XML visualizer, this layout should look like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
   android:background="#004d40"
   android:orientation="vertical"
   tools:context=".CoinPage">

   <TextView
       android:id="@+id/name"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="30dp"
       android:gravity="center"
       android:text="name"
       android:textAppearance="@android:style/TextAppearance.Large"
       android:textColor="#e0f2f1" />

   <TextView
       android:id="@+id/price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:gravity="center"
       android:text="price"
       android:textAppearance="@android:style/TextAppearance.Large"
       android:textColor="#e0f2f1" />

   <TextView
       android:id="@+id/date"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginBottom="20dp"
       android:gravity="center"
       android:text="date"
       android:textAppearance="@android:style/TextAppearance.Small"
       android:textColor="#e0f2f1" />

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_margin="5dp"
       android:background="#e0f2f1"

       android:orientation="vertical">

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

           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="vertical">

               <TextView
                   android:id="@+id/symbol"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="10dp"
                   android:text="symbol"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />

               <TextView
                   android:id="@+id/slug"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:background="#b2dfdb"
                   android:padding="10dp"
                   android:text="slug"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />

               <TextView
                   android:id="@+id/volume24h"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="10dp"
                   android:text="volume24h"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />

               <TextView
                   android:id="@+id/circulating_supply"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="10dp"
                   android:text="circulating_supply"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />

               <TextView
                   android:id="@+id/max_supply"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:background="#b2dfdb"
                   android:padding="10dp"
                   android:text="max_supply"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />
               <TextView
                   android:id="@+id/market_cap"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="10dp"
                   android:text="market_cap"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />

               <TextView
                   android:id="@+id/change1h"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:background="#b2dfdb"
                   android:padding="10dp"
                   android:text="change1h"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />


               <TextView
                   android:id="@+id/change24h"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="10dp"
                   android:text="change24h"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />


               <TextView
                   android:id="@+id/change7d"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:background="#b2dfdb"
                   android:padding="10dp"
                   android:text="change7d"
                   android:textAppearance="@android:style/TextAppearance.Medium"
                   android:textColor="#004d40" />

           </LinearLayout>
       </ScrollView>

   </LinearLayout>
</LinearLayout>

Step 6: Creating the MainActivity.java file

Return to MainActivity.java and add the following variable to the class’s top:

private RecyclerView recyclerView;
private List<Datum> cryptoList = null;

Add these lines after the call to setContentView in the onCreate() function:

initRecyclerView();
getCoinList();

Let’s take care of the red lines behind the getCoinList() function call, which will ask you to construct the function. In your code, copy and paste the following:

private void getCoinList() {
   Call<CryptoList> call2 = apiInterface.doGetUserList("100");
   call2.enqueue(new Callback<CryptoList>() {
       @Override
       public void onResponse(Call<CryptoList> call, Response<CryptoList> response) {
           CryptoList list = response.body();

           // do not reinitialize an existing reference used by an adapter
           // add to the existing list
           cryptoList.clear();
           cryptoList.addAll(list.getData());

           adapter.notifyDataSetChanged();
       }

       @Override
       public void onFailure(Call<CryptoList> call, Throwable t) {
           Toast.makeText(MainActivity.this, "onFailure", Toast.LENGTH_SHORT).show();
           Log.d("XXXX", t.getLocalizedMessage());
           call.cancel();
       }
   });
}

In the activity layout, look for the RecyclerView. It determines how item views are positioned and if views that are no longer accessible to the user should be reused.

recyclerView = findViewById(R.id.my_recycler_view);

The cryptoList function initializes data in an array.

cryptoList = new ArrayList<>();

Create an adapter with the sample user data as input.

adapter = new CryptoListAdapter(cryptoList);

Connect the adapter to the recyclerView to populate items.

recyclerView.setAdapter(adapter);

To populate items, connect the adapter to the recyclerView.

recyclerView.setLayoutManager(new LinearLayoutManager(this));

adapter.setClickListener(new CryptoListAdapter.ItemClickListener() {
   @Override
   public void onItemClick(View view, int position) {
       //Toast.makeText(MainActivity.this, "You clicked " + adapter.getItem(position) + " on row number " + position, Toast.LENGTH_SHORT).show();
       Intent intent = new Intent(MainActivity.this, CoinPage.class);
       intent.putExtra("coin", adapter.getItem(position));
       startActivity(intent);
   }
});

Step 7: Creating the CryptoListAdapter.java file

Our RecyclerView object is coupled with the CryptoListAdapter class. It’s what we utilize to keep the contents of the recyclerView organized. We simply put data into the constructor and then used the existing methods to create viewHolders and link their contents to the inflated layout.

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
   Context context = parent.getContext();
   LayoutInflater inflater = LayoutInflater.from(context);
   View view = inflater.inflate(R.layout.crypto_list_item, parent, false);
   ViewHolder viewHolder = new ViewHolder(view);
   return viewHolder;
}

Okay, let’s have a look at this for a minute; if you see any red lines at this point, don’t worry, you’re not alone; I’ll explain why you have red lines and how to get rid of them. We extended CryptoListAdapter.ViewHolder> and gave the cardItemsList and the Context into it when we constructed the MyAdapter class, which required us to implement its associated methods (viewHolder() and onBindViewHolder()). We simply inflated the cryptoList item.xml layout file and returned a new viewHolder(v) method inside the viewHolder() method.

We then constructed an instance in the onBindViewHolder() function that involves filling data into the item through the holder and binding the data to the TextView in each row. Get a data model based on your current location. Based on your data model and views, create item views.

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
   // Get the data model based on position
   Datum datum = mData.get(position);

   // Set item views based on your views and data model
   TextView name = holder.name;
   name.setText(datum.getName() + " (" + datum.getSymbol() + ")");

   TextView price = holder.price;
   price.setText("Price: $" + String.format("%,f", datum.getQuote().getUSD().getPrice()));

   TextView marketCap = holder.marketCap;
   marketCap.setText("Market Cap: $" + String.format("%,d", Math.round(datum.getQuote().getUSD().getMarketCap())));

   TextView volume24h = holder.volume24h;
   volume24h.setText("Volume/24h: $" + String.format("%,d", Math.round(datum.getQuote().getUSD().getVolume24h())));

   TextView textView1h = holder.textView1h;
   textView1h.setText(String.format("1h: %.2f", datum.getQuote().getUSD().getPercentChange1h()) + "%");

   TextView textView24h = holder.textView24h;
   textView24h.setText(String.format("24h: %.2f", datum.getQuote().getUSD().getPercentChange24h()) + "%");

   TextView textView7d = holder.textView7d;
   textView7d.setText(String.format("7d: %.2f", datum.getQuote().getUSD().getPercentChange7d()) + "%");

}

Finally, we set these variables on the viewHolder() with the help of our CardItems instance, where we specified the setters and getters, to bind them to their proper positions on the viewHolder.
Notice how we passed in CryptoListAdapter.ViewHolder when we extended the MyAdapter class; as a result, we generated the ViewHolder class inside the MyAdapter class, where we simply initialized all of the view objects in the cryptoList_item.xml file, including the LinearLayout.

Conclusion

This tutorial is now complete; hopefully, it has helped you learn the fundamentals of sending HTTP requests and handling responses or served as a stepping stone toward a full cryptocurrency tracker.

So you’ve just made yourself a fantastic development tool. Bitcoin, Ethereum, and other cryptocurrencies may now be tracked in real-time. That’s not all; you can also convert values between any currency and receive the desired results in real-time, which is a useful tool to have in this Crypto-era. The best thing is that you built it, not that you have it, so kudos! Continue to educate yourself. Remember that you can get the entire repository by going to this GitHub link.

Please leave your feedback and doubts in the comments below!

Author

Do you want to share your thoughts with the Global App Development Community? Write for Applozic! Check out how here: https://www.applozic.com/guest-writer/