How To Design App Template From Scratch

Read Time: 8 mins Languages:

Creating an attractive user interface for Android apps is almost always a time-consuming task. It takes days, sometimes weeks, to conceptualize and design pixel-perfect layouts that look good on all screen sizes and pixel densities. Furthermore, with most users today expecting their apps to adhere to the guidelines of Material Design, the task has arguably become even harder.

Fortunately, there's an easy solution: CodeCanyon, a marketplace that has hundreds of native Android app templates you can use to jump-start your next project. You can save days or even months of effort by using one of them.

CodeCanyon mobile Android app template bestsellers — CodeCanyon is the place to buy Android app templates.

In this tutorial, I'll show you how easy it is to download and use an app template from CodeCanyon. We'll be working with a very popular template called Material Design UI Android Template App, which offers five different themes, over 80 ready-to-use screens, and hundreds of beautiful UI components. And if you're hungry for more Android app templates, scroll down after this tutorial for a hand-picked selection!

Prerequisites

To be able to follow this tutorial, you'll need:

the latest version of Android Studio
an Android device or emulator that runs Android 4.4 or higher
an Envato account

1. Getting the Template

With over 3,000 sales, Material Design UI Android Template App is one of the most popular Android app templates available on CodeCanyon. To get it, sign in to CodeCanyon using your Envato account and purchase a license for it.

You can now download the template as a ZIP file namedcodecanyon-tLViUw3g-material-design-ui-android-template-app.zip. In addition to the source code, the file contains all the documentation you'll need to make the most of the template.

2. Building the Template

To start using the template, extract the ZIP file and open theSource code/android-AS directory using Android Studio. The IDE will then load the template and automatically download all its dependencies. Once that's done, you can pressShift-F10 to build and run the project.

If you're running Android Studio 3.5 or higher, the build should complete without any errors, and you should be able to see this screen on your device:

Congratulations! In just a few minutes, you managed to build and run your first native Android app template.

3. Exploring the Template

Like most app templates on CodeCanyon, Material Design UI Android Template App has a large variety of features. It has several activities and fragments you can use to quickly add beautiful screens to your apps, such as login screens or splash screens. For example, you can use theLogInPageActivity class to create different types of login screens.

If you want to add tabs to your app, instead of starting from scratch, you could try using one of the tab-oriented activities the template has, such asTabMediaActivity orTabShopActivity. Here are two sample tab interfaces:

Lists are an integral part of most Android apps, but creating them is hard. It involves designing layouts for list items and creating appropriate adapters that work efficiently. While using this template, though, you have access to several list item layouts and adapters. In fact, you'll notice that the template has a directory calledadapter, which contains nothing but different types of adapters.

To find the list item layouts, go to theres/layout directory and look for files whose names start with list_item. For example, here's what thelist_item_expandable_travel.xml and list_item_expandable_social.xml layouts look like:

If you prefer having cards as list items, consider using thelist_item_google_cards.xml layout. But if that's too generic for your liking, you can try using layouts such as list_item_google_cards_media.xml and list_item_google_cards_travel.xml, which are ideal for media player apps and travel-related apps. Here are some sample card layouts:

It's worth noting that the lists you create with this template can support expandable list items, drag and drop, and the swipe-to-dismiss gesture right out of the box.

Navigation drawers are a common feature in apps that follow Material Design guidelines. Because this template focuses on Material Design, you'll find several implementations of navigation drawers in it. TheLeftMenusActivity class has everything you'll need to create your drawer. You are, however, free to use one of the more domain-specific activities, such asLeftMenusMediaActivity or LeftMenusSocialActivity, if you think they're better suited for your app.

The default alert dialog you can create with the Android SDK is generally considered too simple to be a part of a well-polished Android app. And styling it so that it matches your app's overall look and feel is rather hard. That's why this template includes several custom dialogs, whose fonts, colors, and layouts can closely match those of your apps.

You can use theDialogUniversalInfoUtils class to create information dialogs that can easily fit into any type of app. Similarly, you can use theDialogUniversalWarningUtils class to create warning dialogs. For domain-specific dialogs, you should try experimenting with classes such asDialogSocialUtils andDialogTravelUtils.

In addition to full-fledged activities and layouts, the template has custom styles for common components such as buttons, progress bars, and input fields. You can use them to effortlessly make your user interfaces look more polished. For example, here are some sample checkboxes and text views:

4. Configuring the Template

The Material Design UI Android Template App supports push notifications with Firebase. In other words, you can use the Firebase Cloud Messaging service to send messages to the apps you create with this template. To enable this feature, all you need to do is generate agoogle-services.json file on the Firebase console and place it in theUIAppTemplate directory. To add any customizations, you'll have to modify theMyFirebaseMessagingService class.

Material Design has its own color system, and it's important that your app's color palette be based on it. The design language also expects your app to have primary, secondary, and accent colors. This template is aware of both requirements and makes it extremely easy for you to apply Material Design colors to your apps. In theres/values/colors_material.xml file, you can find the hex values of all common Material colors, such as Material Purple, Material Pink, and Material Deep Orange.

By modifying theres/values/styles.xml file, you can easily change the colors of the template. For example, by changing thecolorPrimary item, you can change the primary color.

<item name="colorPrimary">@color/main_color_500</item>

5 Premium Android App Templates From CodeCanyon

Are you wondering where to buy Android app templates? Envato Market has hundreds of other Android app templates that you can choose from. There are templates for games and complete applications, as well as comprehensive starter templates like the one we used in this post.

Here's a hand-picked selection of the best Android app templates from CodeCanyon. Whether you're looking to build an Android WebView app or Android material design components, we've got you covered.

1. Universal: Full Multi-Purpose Android App

Universal is our best-selling Android app template. With a five-star rating and over 6,000 sales, this is a crowd favorite.

If you're looking to buy Android app templates, this is the one to get. This multipurpose Android app template allows you to create many types of apps and is great for beginners.

It comes with 15+ content providers such as WordPress, social media, video platforms, Google WebView, and more.

Clean and clear code. Fast support and top notch external documentation. Constant updates. Buy this app it's wonderful! -User Appnetwork

2. MaterialX: Android Material Design UI Components

MaterialX is another top-selling Android app template. If you're looking for Android Material Design components, this one is for you.

You'll get 315+ unique layouts divided into 31 categories. Everything is fully customizable, well organized, and beautifully designed.

The most complete Android template ever seen. -User MrGladius

3. Universal Android WebView App

Android WebView app templates are a great way to build your next app. This Android WebView app features more than 3,000 sales and a five-star rating.

This WebView app is styled in Material Design and follows the official design guidelines. The app was developed in Android Studio as well.

With this Android WebView app, you can turn your responsive website into a universal mobile app.

The app is great overall. However, the support impressed me. Fast and precise. I fully recommend this app. -User hencorreia

4. Restaurant Finder Full Android Application

Are you looking for a professional restaurant Android app template? This Restaurant Finder is a great option. You can easily customize this restaurant Android app template to build a fantastic app. See what you'll get:

GDPR consent ready
Material Design
smart nearby fetch
supports offline usage
image caching
call, web, and email integration
map distance calculation

5. FireApp Chat: Chat App Template Android

Chat app templates for Android are popular Android app templates. And the FireApp Chat is one of our top-rated items. This chat app template for Android has everything you need for your next app:

built using Firebase SDK
phone authentication
group chat
voice and video calls
fingerprint lock
dark mode
record and share voice messages
and more!

Best Customer support and quality design, I'm really grateful. -User mondayclient71

If you have trouble deciding which template on CodeCanyon is right for you, these articles should help:

Start Building Android App Templates Today!

In this tutorial, I showed you how to download the Material Design UI Android Template App from CodeCanyon, work with it using Android Studio, and customize it to match your preferences.

With the skills you learned today, you can build your next app by simply picking the required layouts and components from the template and associating your data, assets, and business logic with them. Don't forget to browse through our extensive Android app templates library on CodeCanyon and get the ones you like!

This post has been updated with contributions from Maria Villanueva, a journalist and writer with many years of experience working in digital media.

Ashraff Hathibelagal