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.
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.
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 named codecanyon-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 the Source 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 press Shift-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 the LogInPageActivity 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 as TabMediaActivity or TabShopActivity. 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 called adapter, which contains nothing but different types of adapters.
To find the list item layouts, go to the res/layout directory and look for files whose names start with list_item. For example, here’s what the list_item_expandable_travel.xml and list_item_expandable_social.xml layouts look like:
If you prefer having cards as list items, consider using the list_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. The LeftMenusActivity class has everything you’ll need to create your drawer. You are, however, free to use one of the more domain-specific activities, such as LeftMenusMediaActivity 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 the DialogUniversalInfoUtils class to create information dialogs that can easily fit into any type of app. Similarly, you can use the DialogUniversalWarningUtils class to create warning dialogs. For domain-specific dialogs, you should try experimenting with classes such as DialogSocialUtils and DialogTravelUtils.
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 a google-services.json file on the Firebase console and place it in the UIAppTemplate directory. To add any customizations, you’ll have to modify the MyFirebaseMessagingService 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 the res/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 the res/values/styles.xml file, you can easily change the colors of the template. For example, by changing the colorPrimary item, you can change the primary color.
<item name="colorPrimary">@color/main_color_500</item>
Conclusion
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.
To learn more about the template, do refer to the comprehensive documentation that’s available in its docs directory.
Premium Android App Templates From CodeCanyon
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. So take a look, and you just might save yourself a lot of work on your next Android app.
If you have trouble deciding which template on CodeCanyon is right for you, these articles should help: