In this tutorial, we will be looking at how to build a full Android web application using Retrofit REST Client Library without writing a single line of code.

First of all, we will create a simple “Hello World” Android application using Android Studio. After that, we will use Clowiz AppGen (The Cloud Wizard) to generate the application artifacts.

Finally, we will run and test the application using Android Emulator.

Retrofit REST Client Library

Retrofit is a library that was introduced by the Square Open Source, it turns your HTTP API into a Java interface, then the Retrofit class generates an implementation for the interface.

Clowiz

Clowiz is a cloud-based platform that aims to increase the productivity of teams working on developing software projects and reducing the cost and time of developing high-quality software applications.

Prerequisites

If you are working on an existing project, skip this part.

To start building the application, let’s create a new project using Android studio.

Create a new Android Project

Open Android Studio.

Select + Start a new Android Studio project from the options.

Leave the platform to the default (Phone and Tablet).

Choose Empty Activity and click next

Give your application a name.

For the package name type, com.app

Choose the project location and leave the programming language on java, then press finish.

These steps should have created a new project with the following:

MainActivity.java under java/com/app package:

MainActivity.java

2. activity_main.xml in the res/layout folder:

activity_main.xml

To run the app from the toolbar press on Run → run app.

If you run the application, you will get a screen with a Hello World text on it.

Generate Android code using Clowiz

The application is now ready for development, and we will start developing it after introducing the CodeGen feature from The Cloud Wizard, which we will be using for this tutorial to build the project.

CodeGen is one of the features that The Cloud Wizard offers; it generates source code artifacts for different technologies using the model-driven development approach.

To start using Clowiz CodeGen, navigate to https://www.clowiz.com/code-generator/:

The following image shows the main components of the CodeGen feature page:

Clowiz CodeGen Components

From the technologies section, select Android. In the Application Metadata section, add the application metadata, for this tutorial, we will be creating Employee metadata, so in the Class Name field, type Employee. Now let’s add some fields to our application by typing the following:

In the Field Name, rename it to Name with a data type of Text and check that it is required

Please create a new field, call it as Email, and select Email from the data type list,

Please create a new field, call it as Salary, and the data type as Double.

The following image shows the Generated Code section, which contains the code for the specified metadata; the code is ready to be added to the project that we created in the first section of this tutorial.

CodeGen Android Exporters

With a little magic from CodeGen, the following artifacts got generated:

1- Adapter: EmployeeAdapter.java Java class that contains the logic of listing the employees returned by the API.

2- Add New Item Activity: AddNewEmployeeActivity.java Java class that includes the Activity for adding or editing the employee.

3- Add new item XML activity: activity_add_new_employee.xml XML file that contains the graphical user interface for adding or editing the employee.

4- API Client: ApiClient.java Java class that includes the instantiation of the Retrofit Instance and registering the application endpoints.

5- Endpoint: EmployeeEndpoint.java Java class that consists of the Http methods such as getAllEmployees , createEmployee , updateEmployee , and deleteEmployee .

6- Entity: Employee.java Java entity class that contains the fields that we defined in CodeGen.

7- Fragment: EmployeeFragment.java Java class that contains the logic for handling the list, create, edit, and delete an employee.

8- Fragment XML: fragment_employee.xml XML file that includes the graphical user interface for the Fragment.

9- Item entity XML: employee_entity.xml XML file that contains the graphical user interface for the EmployeeAdapter.

Step by Step guide to build the project

Copy the Adapter code then back to Android Studio. The application should be divided into packages to structure it and make it easier to maintain.

To start building the application, create the following packages in the java/com/app directory: ui , api , entity right-click the app folder and press new --> package.

Create a new java class in a package by right-clicking on the package → new → Java class

Paste the copied Adapter code to a new java class called EmployeeAdapter.java in the ui package.

in the package. Back to Clowiz CodeGen, choose the next tab from the exporters’ menu “Add New Item Activity” and copy it to a new java class called AddNewEmployeeActivity.java .

. After creating the Activity for adding a new Employee, the view for it should be added, which is the Add New Item XML Activity in the CodeGen exporters, so in the main app folder open the res folder then right-click on the layout folder → new → layout resource file, give it a name of activity_add_new_employee.xml then press finish and paste the generated XML code to it.

then press finish and paste the generated XML code to it. The project requires the Retrofit dependencies and few others, so in the Gradle Scripts folder, open the build.gradle (Module:app) file and replace it with the following:

apply plugin: 'com.android.application'

android {

compileSdkVersion 29

buildToolsVersion "29.0.2"

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

defaultConfig {

applicationId "com.app"

minSdkVersion 14

targetSdkVersion 29

versionCode 1

versionName "1.0"

testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'

}

}

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'androidx.appcompat:appcompat:1.1.0'

implementation 'com.google.android.material:material:1.0.0'

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

implementation 'androidx.navigation:navigation-fragment:2.1.0'

implementation 'androidx.navigation:navigation-ui:2.1.0'

implementation 'androidx.lifecycle:lifecycle-extensions:2.1.0'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'androidx.test.ext:junit:1.1.1'

androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

implementation 'androidx.recyclerview:recyclerview:1.1.0'

implementation 'com.squareup.retrofit2:retrofit:2.7.0'

implementation 'com.squareup.retrofit2:converter-gson:2.7.0'

implementation 'com.google.android.material:material:1.0.0'

}

* You have to sync the project after adding the dependencies.

To sync the project, press on the “sync now” as shown in the following image.

Syncing Project

After adding the dependencies, let’s add more magic to the project.

Create a new java class in the api package and call it ApiClient.java , paste the API Client code from CodeGen. This class contains the URL for the REST API, you can change it to your own API URL.

ApiClient.java

Please create a new java class in the API package and call it EmployeeEndpoint.java and past the Endpoint code to it.

and past the Endpoint code to it. Add the Entity generated code to the entity package in a java file called Employee.java

Add the Fragment code to the ui package, in a file called EmployeeFragment.java

Now in the res folder, create the following resource files under the layout folder:

fragment_employee.xml and add Fragment XML exporter's generated code to it.

and add Fragment XML exporter's generated code to it. employee_entity.xml and add Entity Item XML to it.

Open employee_entity.xml , and on the following line

android:layout_margin="@dimen/fab_margin"

Press alt + enter to create a new dimens.xml in the res folder, give it a value of 16dp in the popup screen

In the res folder, right-click on drawable folder → new → Vector Asset

name it ic_add

press on the + sign to add clip art, and search for “add” and choose it.

Add icon

Finally, don’t forget to register the generated activity in the manifest.xml and allowing Internet use by replacing the content of the file to the following:24

Run and test the app

No API yet?

To create a fake API and test your android application, download JSON-server which creates a fake API.

Install Node Js.

From the terminal/command line run: npm i JSON-server

Please create a new text file and call it api.json .

. add the following content to the file:

{

"employees": [ ]

}

Run: json-server --p 3000 api.json

Run the app

To run the app, select Run from the toolbar then choose run.

You should see the following:

Home Page

To add new employee press the + button and you should get the Activity to add a new employee:

Add/Edit Activity

Test the application by adding, editing, and deleting an employee object after adding a new one by filling in the details and press save:

Add, Edit and delete results

You can check that the data was inserted, deleted and edited by checking the API database, if you are using JSON-SERVER, go to http://localhost:3000/employees to list all the records.

JSON-SERVER API Results

Summary

In this tutorial, we have created a new Android project, then we have added an auto-generated code from Clowiz CodeGen to build a Rest API client without writing a single line of code; after that, we have created a fake JSON API to run and test the application.

You can get all the above steps done for you by clicking the Download As Full Project button at the bottom of the CodeGen page.

Happy Coding, stay tuned for more technologies and updates.

Further readings