Complete App From Scratch: Kotlin Part 2 — Design and Architecture

Every app needs a clever and attractive design.

Welcome to Part Two of the series!

In this one, you’ll be seeing the complete design of the app — Remember, as I’ve built in a design tool called Figma. Later, we’ll also be looking into the app architecture we’ll be working with in the next parts!

Figma Design Tool — the best in business

First, if you’re unaware of Figma, know this — It is a vector graphics editor and prototyping tool. It has a web app (along with desktop apps) with all features enabled meaning you can use the tool directly from your browser, and the best part is that it was made with team collaboration in mind, hence if you’re working in a team or with a partner, you can all work on projects together.

I personally find Figma much more convenient and intuitive to use than Sketch and Adobe XD, hence I’ve used it to create my designs for Remember.

So let’s get to it!

1. The App Screens

I have imagined making three main screens for the app. They are mainly: the List screen, the Add Screen and the Settings Screen.

Now, here is the design along with my little annotation to give you an idea of what I’m going with:

The List Screen:

List Screen Default

I’ll sum up the essentials in the design as follows:

• the list or words with their meanings ( A Recyclerview)
• the button to hide/show meanings
• the button to listen to pronunciation for the word (if stored, we’ll get to that later)
• Menu bar with options — change list or grid view for the words, a button to open search widget and a sort by button. (A BottomAppbar)
• A button to add new word (A FloatingActionButton)

The Add Screen

Add Screen

Summing up the components, we have here:

• an input layout for word name (A TextInputLayout)
• an input layout for word meaning (A TextInputLayout)
• a button to add audio pronunciation
• a cancel and save button

In addition, I also designed a grid view for the List Screen, which will look like this:

Everything will remain the same, except:

• We’ll have the words and meanings with audio button aligned in grids (A StaggeredGridLayout)
• There will NOT be a hide/show meanings button.

Alright! Now that we have the design ready, let’s look at the architecture we’ll be using for the app!

Model-View-Presenter architecture techinique will be used for this app. Database will be the Room Database for storing the words and meanings, and our pronunciation audio will be stored in the user’s phone’s internal storage.

To accomplish this, we’ll be using the following project structure in Android Studio:

Android Studio Project structure

• ui folder will be for keeping the View part of the app code (the List, the Add and the Settings screen Fragment classes.)
• core will have the ViewModel files for the screens
• db will be have the files pertaining to the room db setup — the model class, the DAO and the Database intialiser class
• repository will hold our common CRUD functions
• finally, common will hold some common utility functions which we’ll build for easier access and to cleanup the code a bit. :)

So that is it for this part! Now that we have a clear view of where to start with the code, we’ll get right into it from the next part!

Do you want to get one free, clean email from me every week or two weeks containing the best of my curated articles and tutorials that I publish? Join my Codecast!

Connect with me on Twitter and LinkedIn!