Creating a Astro Chinese Application for Android

Chinese astrology is based on the traditional astronomy and calendars. In that tutorial, you are going to learn how to create your own Astro Chinese Application for Android. It is the ideal tutorial for learning how to create a simple and useful Android Application.

Image for post
Image for post

Note that this tutorial is also available in video on YouTube :

Creating the User Interface

First step is to create the User Interface of our Astro Chinese Android Application. We will have two layouts :

  • One for the MainActivity with all the astro signs displayed with an image and the associated name

In the /res/drawable folder, you need to put some images for the Astro Chinese signs which are :

  • Rat

In the /res/strings.xml file, we create values for the name of each of these signs with the format :

<string value=”rat”>Rat</string>

UI for the MainActivity

The User Interface of the MainActivity uses the power of the ConstraintLayout. We define three LinearLayout linked by horizontal constraints. In each LinearLayout, we add four LinearLayout with the following views :

  • One ImageView for displaying the image associated to a sign

The visual editor of Android Studio lets us to create easily and quickly this layout :

UI for the SignActivity

Now, it’s time to define the User Interface for the SignActivity. This activity must display the daily Astro Chinese for a particular sign. So, we need the following views :

  • One ImageView to display the image associated to the sign

It gives us the following layout file :

Connecting the User Interface with the Java code

Now, we need to connect the User Interface with the Java Code. For making our task easier, we will use the Butter Knife library. So, we need to add the following dependencies in our build.gradle file :

implementation 'com.jakewharton:butterknife:10.1.0'
annotationProcessor 'com.jakewharton:butterknife-compiler:10.1.0'

In the MainActivity, it will be very useful for associating just one method to all the ImageView. It will let us to associate a click on a sign image to the launch of the SignActivity with the id of the sign in parameter :

Then, we bindthe views from the activity_sign.xml layout file by using the @BindView annotation from Butter Knife library :

Loading the daily Astro Chinese information with OkHttp

Next step is to get the daily Astro Chinese information when the user will click on a sign and he will go on the SignActivity. For requesting our Astro Chinese API, we will use the OkHttp library. So, we add the following dependency in the build.gradle file :

implementation 'com.squareup.okhttp3:okhttp:3.13.1'

We create an AstroChineseAPI class with a loadAstroChineseFor method :

You have noticed the URLs class. This class is used to return the URL of the Astro Chinese for a particular sign. It will have the following form :

For associating a Astro Chinese sign with the id of an ImageView, we create a Sign enum in the SignActivity class. Each value of this enum will take in parameter the associated view id :

For updating dynamically the ImageView and the TextView associated to the current sign in the SignActivity, we use a dynamic method by calling the getIdentifier() method of Resources object associated to the Activity. It will let us to get the associated String and the associated drawable to each sign without maintaining a HashMap. The code will have the following form :

The last step is to load the daily Astro Chinese for a particular sign with the AstroChineseAPI class. We call its loadAstroChineseFor static method and we pass a OkHttp3 Callback object in parameter. In the onResponse method, we get the body of the response and we update the signContent TextView for displaying the daily Astro Chinese.

It gives us the following complete code for the SignActivity class :

Astro Chinese Android Application in Action !

It is the best part of our tutorial since we are going to test our Astro Chinese Android Application. When you launch the application on a Android device, you should see the following display :

Image for post
Image for post

Click on the Dragon Astro Chinese sign and you will see the loading then the displaying of the daily Astro Chinese for Dragon :

Image for post
Image for post

That’s all for that tutorial !

Note that you can also test this Astro Chinese Android Application in action on the Google Play Store :

If you are interested by the complete source code of the version published on the Google Play Store, don’t hesitate to contact me by email : sylvain.saurel@gmail.com

If you want to get the latest news on how to make money online, don’t hesitate to visit Making Money Online Digest :

Making Money Online Digest is a weekly email newsletter that helping you to get the latest info to make money online. Each day, new opportunities to earn money online appear.

Written by

Entrepreneur / Developer / Blogger / Author. In Bitcoin We Trust: https://www.inbitcoinwetrust.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store