Build An Android App To Monitor and Convert “bitcoin and etherum” in 20 Local Currencies
In the era of the digital world, the monetary system is constantly changing, and things that has been popular are recently being replaced by improved technologies.
The payment industry is particularly affected by this digital era of cryptocurrencies given the public acceptance it has received by many countries and payment platforms. Countries like Japan has already made it a legal means of payment alongside many others.
A friend once wrote “ Our ecosystem is no longer just about the code but about people who build and use products.
Recently, I’ve realized that 50% of my time (including weekends) is distributed to VS code, the terminal, and Slack. This whole thing is becoming a lifestyle and of course, I’m embracing it — it’s what I love”.
I believe he’s not alone. A lot of us spend up to 50hrs a week on productivity tools. Why should we limit it to just code? Why not extend it to cover daily life utility tasks for us.
With that in mind, I’ve put up a developer tool to show the possibilities of monitoring these cryptocurrencies in realtime on your android devices. Not just that, you will be able to convert them across 20 different local currencies.
So in this tutorial, we’ll walk through how you can build this application for yourself leveraging on the api we’ll be providing for this purpose.
DEMO
It’s always good practice to have a visual and practical idea of what you’re building and how it works, so you can take a look at this short clip to see how this app works, you can also access the source code on github. Without further ado, let’s head on over to Android Studio and start building..
Side Knowledge
By virtue of this article, you will learn a few other Android Development skills like:
- Making API calls
- Processing nested Json objects with iterators
- Making network requests with volley
- Working with recyclerviews and cardviews
- Mathematical conversions with formats
- etc
Technologies
Before we go ahead and start building, it is wise to talk about the technologies we’ll be using so it won’t look confusing when you come across them as we progress.
- Volley — a third party library that allows us make network requests seamlessly
- Recyclerview/CardView — Android special layouts for better organizing contents on screen
Now create a new Android Studio project called “CryptoCompare”by now this should be a fairly basic step however if you’re just starting off, refer to any of my previous posts on how to set up a new AS project.
Once you’re done creating a new project, install the dependencies for the technologies we talked about. Open your app level build.gradle file and add:
MainActivity Layout
Then open Activity_main.xml and set up the layout like so:
This is quite a simple layout with a toolbar and three TextView objects for local currency, BTC and ETH respectively, this is primarily just serving as headers for the values to be loaded remotely into the recyclerview we defined below the TextView objects. This layout should look like this in your xml visualizer:
Hey, yours might not look exactly like this but then it shouldn’t, because i used a custom background image which you probably don’t have. The important thing to look out for is the three TextView objects showing up as expected and the blue lines denoting the area covered by your recyclerview and probably the toolbar.
When we make an api call that will return the values of these TextView objects, we’ll simply pass the data into our CardView layout and then use the layout to populate the recyclerview accordingly, make sense ? okay lets continue.
CardView Layout
Talking about CardView, let’s create a new layout resource file called “card_items.xml”. This will be the CardView layout where we will define the contents we’d like to display on the recyclerview i.e Currency, BTC and ETH. So create the new resource file and set it up like so:
This is a simple CardView layout with three TextView objects that we predefined with dummy values to serve as place holders for the actual data we’ll be getting from our api. Just for the sake of clarity, your xml visualizer for this layout should look like this:
Now let’s head over to ourMainActivity.java file and get interactive. Open MainActivity.java and initialize the recyclerview object. Then we start making the api call. First we store the api inside a variable we defined as “private static final String URL_DATA” and then use it to build our JSONObject request like so:
What we have done in the onCreate() method here is quite simple, we defined our api in a string variable, initialized our toolbar, texts and recyclerview. We also created an ArrayList from a CardItems class that we are yet to create but will do so soon. Notice we also called a method loadURLData(). This is the method where we make the request to the api to return the values of the bitcoin, etherum and their respective values in 20 currencies. If you copied this snippet into your studio and got errors then don’t fret, you’re not lost, actually we called a method and even two classes we are yet to create:
loadURLData()MyAdapterclassCardItemsclass.
So go back inside the MainActivity class and create the loadURLData() method and set it up like so:
loadURData()
Here we are simply making an api call with volley passing in the variable that stores the Api. The method returns a response from where we then extract our btc and eth values into a JSONObject. Then we use the iterator<?> to iterate through the nested object and match the individual btc and eth values to their respective currencies keysBTC and keysETH. Next we create the MyAdapter class. So create a new java class called MyAdapter and set it up like so:
MyAdapeter class
The MyAdapter class is associated with our recyclerview view object. We use it to organize the contents of the recyclerview. In this context, we simply inflated the card_items.xml layout and then used the implemented methods to create viewHolders and bind it’s contents to the inflated layout.
Okay let’s step through this for a bit, by the way if you see any red lines at this point, don’t worry you are not alone, i’ll explain why you got the red lines and how to overcome it. From the top, when we created the MyAdapter class, we extended RcyclerView.Adapter<MyAdapter.ViewHolder> and passed into it the the cardItemsList and the Context, which prompted us to implement it’s associating methods (viewHolder() and onBindViewHolder()). Inside the viewHolder() method we simply inflated the card_items.xml layout file and returned a new viewHolder(v) method.
Then in the onBindViewHolder() method, we created an instance of the CardItems class and then stored the values of the cardItem objects into it’s respective variables (curr, btcVal and ethVal). Then to finally bind these variables to their respective positions on the viewHolder, we set them on the viewHolder holder with the help of our CardItems instance where we defined the setters and getters.
Finally, notice that when we extended the MyAdapter class, we passed in <MyAdapter.ViewHolder> hence, we created the ViewHolder class inside the MyAdapter class where we simply initialized all the view objects in the card_item.xml file, including the LinearLayout.
CardItems class
Finally, to finish setting up our MainActivity, we create the CardItems class. The CardItems class will simply help us generate setters and getters for the contents of our card_items.xml file which we have earlier initialized in the onCreat() method of the MainActivity class . So create a new java class called CardItems and set it up like so:
At this point everything is correctly set up. If you run the app, you should now see that the contents we passed from the JSON response into our card_items layout file will show up on the layout which in turn gets laid out on the recyclerview like so:
At this point we can see all 20 currencies listed out with their respective Bitcoin and Etherum values, given that we implemented a ScrollView, you can simply scroll up and see more of the contents. However we are not done.
Find out Free courses on Quick Code for various programming languages. Get new updates on Messenger.
Conversion
It is evident that the values we see are listed out in the base currency. So what if i wanted to know the value of not just 1 BTC in Naira but could actually convert any Naira value to get it’s BTC or ETH equivalent and vise versa ? that would be something i figured you might wanna do or at least if not do, have have knowledge of. So it’s not really a big deal am sure you can already imagine how we are going to achieve that. Anyways, let’s go ahead and start the conversion, first off, create a new Activity called ConvertActivity. This is where we’ll carry out the conversion proper. Every new Activity comes with a layout resource file in this case activity_convert.xml and a java file ConvertActivity.java. Open the activity_convert.xml and set up the layout to look like this:
If you can’t achieve this layout on your own, feel free to get my code for this particular layout file on this github gist. However, you can also find it on the project source code at any time. Because of article length i’ve decided not to attach that particular snippet given it’s length.
So if you succeeded in building your conversion layout to look like mine, next we need to create an interface where we’ll define some constants that will be relevant for our conversion. Create a new interface called Constants. This is not something new, the same way you create java classes, just that this time you change the ‘kind’ value to interface instead of class.
Once you’ve created the Constants interface, open it and set it up like so:
Up next, open the MyAdapter class and update it such that upon clicking any card on the view holder, it opens the ConvertActivity with the details of that particular card. In essence, create an intent and put all the extras you’ll need to do the conversion. So open the file and update the onBindViewHolder() method by adding this code:
Finally we open the ConvertActivity.java file and initialize all the necessary view objects and finally set up the conversion logic like so:
This might get a bit confusing for you if you didn’t build your conversion layout as i did mine because of the view objects and their id’s. If you have any errors at this point, be sure to check the id’s you assigned to the view objects in your activity_convert.xml or simply copy it from the source code.
Next we created a method getFullName() to get the full currency name and pass into the fullNameView textview inside the layout file.
Finally to do the actual conversion and display values, we create another method called doCOnvert(). this method will be called by a view such that when a particular view is clicked, it’ll execute the conversion with the provided input value and display the result in the respective flatValueEdit object.
Now at this point, the conversion activity is all set up and ready to roll. If you run the app again it should all be set up and working exactly as expected.
Conclusion
Well you have just created yourself an amazing developer tool. Now you can track the value of bitcoin and etherum in realtime across 20 different currencies. That’s not all, you can even convert values across all currency and get the desired results in realtime, now that’s a good tool to have handy especially in this crypto era. The best part is not that you have that app, it’s that you built it, so congrats !! keep learning
Please click 👏 button below a few times to show your support! ⬇⬇ Thanks! Don’t forget to follow Quick Code below.
