Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

How to Code an App With a Template

by
Difficulty:IntermediateLength:ShortLanguages:

Apps are expensive, and it can be hard to even find qualified developers. That's where mobile app templates can help. Templates can reduce the cost of app development and help get the app ready for the market sooner.

Using a template gives a starting code base which you can build on or customize to fit your brand's identity. In this tutorial, you will learn how to create an Android recipe app using an app template.

What We'll Be Building

We will use the Cookbook template to make our Android recipe app.

recipe app

Cookbook is a native Android app template with beautiful design and animations. Cookbook stores data locally in an SQLite database; therefore, you can run the app without an internet connection. It is the perfect template to easily code an Android recipe app. 

Features

  • analytics via Firebase
  • beautiful and responsive design
  • eight Material Design themes to chose from 
  • customize the design to fit your brand
  • images are cached for better performance

How to Set Up Android Studio

Android Studio is Google's official IDE for developing Android apps. It features a powerful code editor and developer tools. Android Studio is available for all major operating systems, and the latest version is available from the Android developer website. Below are the system requirements for each operating system.

system requirements

Download Android Studio from the official homepage. The page automatically detects your operating system and provides you with the right file to download. Depending on your operating system, once you launch the installer, it will instruct you on every step, including the recommended packages to install. Learn how to install and set up Android Studio with our step-by-step tutorial.

Getting Started

Now that you have Android Studio installed, you can get the template from CodeCanyon. Purchase the plugin from the product page

Once you've purchased the plugin, you will get a link to the downloadable files. Alternatively, you can find them in the download section of your account with your other purchased items. Once you've downloaded the files, extract them to your preferred location.

Start Android Studio, and from the toolbar, click File > New > Import Project. Browse to the location where you extracted the files and select the project Gradle files. Wait a few minutes until Android Studio finishes synching the Gradle files.

Below is the structure of the Cookbook app.

project structure

Configuration and Customization

Here are some of the aspects which you can customize:

  • application name and ID
  • color themes
  • recipes and images
  • Firebase messaging and analytics

Application ID and Application Name

Every Android app has a unique application ID which identifies your app on the device and in the Google Play Store. Open the main build script mobile/build.gradle and change the value of applicationId from com.robotemplates.cookbook to your own application ID.

To change the application name, open mobile/src/main/res/values/stringd.xml and rename the value from Cookbook to your preferred name.

Color Theme

The Cookbook template comes with eight color themes. Go to mobile/src/main/AndoidManifest.xml if you wish to change the color theme of the app.

Prepare the Recipe Database and Images

Data used in the app is stored in a local SQLite database. The pre-populated database with recipes is stored in mobile/src/main/assets/cookbook.db. This database is automatically copied into device storage the first time the app is run and also if the database is updated. 

To edit the database, we will use SQLiteStudio, a powerful yet lightweight tool used to create, edit, and browse SQLite databases. You can download SQLiteStudio here.

Once SQLiteStudio has installed, load the cookbook.db file and add your own recipes.

sqlite db

Set Up Firebase Cloud Messaging and Analytics

Firebase Cloud Messaging is a cross-platform cloud solution that allows you to send messages and notifications for Android, iOS, and web applications

Sign in to Firebase with your Google account. Navigate to the Create a project section and create a Firebase project to connect to your Android app. Once you create a project, you should have something like this:

firebase project

Click the Android icon option, and you will be directed to the following page.

add project firebase
  • Enter your app's package name (application ID) in the Android package name field.
  • Enter other app information such as App nickname and Debug signing certificate SHA-1.
  • Click the Register App button.
  • Download the google-services.json file and move it to your Android app module root directory. 
google services json

Now add the Firebase SDK to the project's build.gradle files.

firebase sdk

Sync the Gradle files, and you are set to compose and send push notifications in the Firebase Console.

Run the App

To run the app, first connect your device to your machine with a USB cable and ensure that the USB debugging option is activated. From the Android Studio toolbar, select the device that you want to run your app on from the target device drop-down menu.

Now click Run. Android Studio will install your recipe app on your connected device and start it.

Here is what the final app looks like:

recipe app

Conclusion

App development has become a costly venture, but this doesn't have to be the case for you. As a business, it makes sense to use a template for some of the app's general features such as sign-up, login, password reset, or even the whole UI. Templates allow you to save costs and accelerate the development process. CodeCanyon offers hundreds of templates in every category, enabling you to concentrate only on the unique features of your app.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.