Sharpen your Android prototyping with the Material Design UI Kit

Android Material Design 2 UI kit - Justinmind

Introducing Justinmind’s Material Design Android UI kit. All your Android prototyping needs covered in one UI library.

Looking for a UI kit complete with ready-made Android elements and components? Want to design a prototype that walks and talks like a real Android app? Then look no further than Justinmind’s Android UI kit.

Our Android UI kit is always up to date with the latest in Material Design trends and includes a fully shared widget library for both mobile and tablet prototypes. This means that you can use the exact same components for the tablet view that you can on the mobile. The same components for the mobile screen will snap to fit the tablet screen and vice versa.

Download Justinmind and discover what you can do with our Android UI kit!
Download Free

If you’re interested in designing and prototyping Android applications and want to learn more about Material Design, this post is for you. Read on to learn more about about our library of over 170 up-to-date elements and components and how they can help you along in the design process.

What is the Justinmind Android UI kit?

The Justinmind Android UI kit contains over 170 Android elements and components for you to use in your prototypes. All you have to do is add the library and you’ll instantly have access to the whole Android UI kit. You’ll be able to drag and drop elements and components at your leisure.

Looking to find more libraries like Android UI kit? Check out these other great UI kits – you’ll find something for every scenario!

Latest trends

The best part about the contents of the Android UI kit is that everything you can find inside is based on all the latest material design trends.

Because of this, you’ll find that each and every widget is suitable for responsive design, with the aim of achieving a clear UI and of developing intuitive navigation in your prototype.

Responsive and scalable components

As Material design calls for boosted responsiveness and scalable design across all platforms, each element and component in our Android UI kit is fully adaptable to both mobile and tablet screens.

All you have to do is drag and drop a component or widget, such as a toolbar and it will automatically collocate in the correct area of the screen, or it will snap to fit the entire screen in the case of a template.

Scalable structuring - Android Material Design 2

Correct scalability means that colors, typeface and iconography are consistent across all devices, something that our Android UI kit helps you achieve quite easily.

Clear UI design

All of the elements and components in our Android UI kit have an appearance and design that’s easy on the eyes. They’re very much based around Material Design’s idea of ink and paper. Why? Because, as Google UX designer Roma Shah put it:

"Paper lends itself well to certain shapes such as squares and circles…[although] unlike real paper, this material can split, heal and rearrange itself when it needs to. "

In terms of user experience, this principal goes hand in hand with the way in which physical objects move in real life with respect to gravity and other natural forces, as well as how they are viewed in respect to lighting. This three-dimensional nature adds more clarity to the interface and feels more natural to navigate.

Intuitive navigation

Because all of the elements and components in the Android UI kit library are based on material Design’s ideals of three-dimensional design, they imitate real-world physics to create a sense of familiarity and intuitiveness.

You’ll find that most components in our Android UI kit are based on motion and movement as well as on the principals of print design, as Material Design calls for.

What’s in the Justinmind Android UI kit?

Our Android UI kit boasts a complete user interface library with screens, material design templates and components. Each element and component is always up- to-date with the latest web and app design trends.

The simple aesthetic design of our Android UI kit stems from the constant uptrend in mobile browsing. It comes from the need to have websites readily viewable on mobile platforms without sacrificing design, in addition to the need to be able to switch between mobile platforms of varying resolutions.

UI elements

What you get with our Android UI kit is a fully responsive widget library with 170 bold, graphic elements and components that automatically resize to fit any device screen, be it tablet or mobile, simply by dragging it onto the canvas.

Additionally, for components that aren’t designed to fill the whole screen, such as a Horizontal softkey bar, they will automatically snap to the left or to the bottom of the canvas when dragged across. Once resized, you can lock a component into place or render it invisible while you edit.

This also ties in with the fact that both the mobile and tablet libraries are fully fused, meaning that components that are specifically for tablet screens can resize to fill a mobile screen and vice versa. Improved efficiency is the pinnacle of what our Android UI kit is all about.

The whole kit has been divided into a simple list of categories so that you can find the right ingredients for your prototype quickly. Below is a list of those categories and what they include:

  • Screen examples part 1
    Groups together the screens with the most similar attributes, in this case being lock screen templates, maps navigation screens, menu backdrops and a music screen.
  • Screen examples part 2
    Composed of photo album screens, Google Play Books, Google Drive, drawer screens, contacts, chat and call screens.
  • Cards
    Elements that can contain content and actions that separate different topics. In this category, the templates range from books, music and weather to simple generic templates for small, medium and large.
  • Content Blocks & Dialogs
    Simple one and two line banners with generic dialogs including inbox items, contact lists, alerts and more, as well as content blocks such as calendars and clocks.
  • Forms & Controls
    Contains a selection of input forms, floating labels, the typical sliders, spinners seen in many Google apps as well as various Gboard layouts.
  • Bars – Menus & Tabs
    Groups together all the latest menu designs, search headers and actions bars with the typical Google menu icons such as “like”, “download”, “share” and many more in addition to menu and floating actions button combinations.
  • Buttons
    Every type of floating action, checkbox and action chips you might need, all with the latest design features – a particularly effective means of guiding the user’s focus is the use of the floating action button, uniquely characteristic of Material Design and which deploys shadowing to give flat interfaces an added sense of depth.
  • Tablet Screens
    Lists all the various possible tablet screens that may differ from a cell phone device such as title and lock screens as well as Gmail and Contacts view. It’s worthy to note here that any of these screens can also be used for mobile device prototyping if you so choose as the library is shared.
Get Justinmind and start prototyping with our Material Design Android UI kit now!
Download Free

Perhaps the most striking feature of our Android UI kit is the minimalist approach it takes to design such as smooth pastel colors with lighter tones, rounded instead of angular edges and an abundance of padding with plenty of white space.

In addition to this, bars, sliders, spinners, scrollers and other icons and buttons all have a simple, clear design. Shadowing features heavily in our Android UI kit, adding an extra layer of depth to each component.

Getting started with the Android UI kit

Getting started designing functional Android apps with the Justinmind Android UI kit is a piece of cake. All you have to do is follow these simple steps:

1. Download the Justinmind prototyping tool
2. Open Justinmind and start a new Android prototype
3. To the left of the canvas you’ll find a Widgets panel
4. Start dragging and dropping widgets from the Android Components category!

What can you do with Justinmind’s Android UI kit?

As well as an up-to-date, trendy design, you’ll find that, while prototyping for Android, there are certain features of the Android UI kit you just can’t live without. One of these features is that the widgets can automatically resize to fit the canvas.

Not only do widgets have the ability to resize, but some events such as basic motions are also automatically added to speed up the process, such as parent buttons that already work in simulations. In the example below, two Navigation drawers were dragged and dropped from the Android UI kit onto the canvas.

Interactive components

One of them (the menu) now appears outside the canvas to indicate that it is an extra panel that will open in that screen of the app. Now, if we hit the simulation button to test our prototype and click on the hamburger menu, it will open the slide menu without the need to add an interaction.

This feature can also be seen with other widgets, such as the Maps backdrop. With this powerful widget, you just add it to the canvas and hit simulate. You’ll notice that if you click on the tab button above “Explore your surroundings”, the card expands into a dynamic panel with extra cards for points of interest. In this case they are place suggestions, but of course, they can be edited to suit your app’s needs.

Interactive elements

An additional handy feature of the Android UI kit is that text fields can actually be used in simulations. If you’re designing screens that involve text being entered, be it a note-taking app, a browser, a sign in page or an email, all you need to do is drag the text field Input, Floating label or Text area widgets to the canvas and simulate the prototype. You’ll see that you can already start entering text without actually having added the interaction.

Another neat feature you’ll find in our Android UI kit is that components such as the typical Android Sliders, Spinners, and Stars rating are also interactive when simulated. The spinners already have motions assigned to them and stars and sliders can already be manipulated.

The fact that these basic motions are already added to many of the widgets in our Android UI kit really helps speed up the process of designing your Android prototype. Now that the smaller things are taken care of, it’s easier to focus on the main motions and interactions that your prototype will have.

Tips for designing an app with our Android UI kit

The Material Design language is geared towards brand expression, and apps which are influenced by this design generally have a clear and simple layout that is visually pleasing and doesn’t overload the user.

Structural grid layouts - Android Material Design 2

Material Design was introduced to tackle one main problem: the fact that the app design process was principally restricted to stringent guidelines concerning consistency. Google’s mission was set out to develop a model whereby its original consistency could be maintained, while also allowing for unique brand-related design within the app.

Developers now have a new Material Theme editor, as well as a tool suite to let them make their own customized designs. For prototyping, this means having more freedom to utilize Material Design’s library to create custom designs that more closely represent an organization’s brand identity. This in turn allows prototype designers the freedom to tweak the aesthetics in order to fully embody the brand presence of the organization while, at the same time, building an app that reflects the natural laws of the real world.

Android UI kit – for colorful prototypes

The Material Design website’s guidelines state that color should “be applied throughout a UI consistently and be compatible with the brand it represents.” And by compatible, we mean that it should send out the the right message about your brand, as color has been proven to psychologically affect how a user perceives not just your app, but your brand too.

You should therefore carefully think through any primary and secondary colors you want to use that, not only represent your brand but also your users experience, and display these throughout the app for consistency.

For the primary color, distinction can be created between different elements by using the various accents of each color for contrast, such as dark purple for the top bar and a lighter tone for the system bar. The secondary color can be used to provide further accents and tones, in addition to drawing attention to call to actions or distinguishing floating action buttons, progress bars and sliders. You might also want to consider choosing at least one color that doesn’t represent your brand to use for error messages.

Color schemes should represent you brand - Android Material Design 2

Whatever the reason for choosing your colors, they should always be intentional. Colors can be just as powerful as padding when it comes to demonstrating the relationships between different groups of elements, as well as for devising a visual hierarchy.

Android UI kit – add motion and interaction

According to Roma Shah, Material Design “involves applying basic, natural laws from the physical world” that revolve around motion and lighting. Therefore, interactions are the key to creating an intuitive experience for your Android users, something easily achievable with our Android UI kit.

Not only will motion make a UI easier to navigate but, much in the same way as color, it can also help to reinforce your organization’s brand identity and character. In fact, even simple microinteractions can help make a real impression on your users. Apps such as Facebook and Instagram are shining examples of this with their hearts and thumbs-up buttons.

Motion adds an intuitive level by highlighting relationship hierarchy between different elements and helps to improve the user flow by guiding them through the experience. A good example of how hierarchy is highlighted is through parent and child elements. Let’s take the typical menu icon as an example – when the user taps it, it leads them directly into the menu panel. This clearly demonstrates that the menu is the parent element and the actual menu is the child element.

There are, however, two very important things you should keep in mind while implementing motion into your design plan: that it should always imitate real-world physical movement and that it should never be overdone – too much motion can overwhelm the user and cause them to lose track.

Consider using Android UI kit cards

Cards, in their essence, are surfaces like pieces of paper that stand out from the background, usually with the use of shadowing and feature content focused on single topics. They can be seen everywhere, from food delivery apps and maps, to interior design websites. They are also a common feature on dashboard-based interfaces such as performance apps.

Motion can be added to card - Android Material Design 2

The use of cards in web and app design is quite a common occurrence and with good reason. This is because, in addition to being more visually appealing and interactive than simple lists, they’re an excellent solution to breaking content down into more digestible chunks. With this method, content blocks can be represented clearly. With our Android UI kit, you can have them expand in a way the user can quickly find or choose the information they want.

Cards are also a great way to implement motion into a screen. While tapping is the main gesture used for cards, others real-world actions such as swiping, scrolling and pick-up-and-move can also be integrated.

The main rules to remember when designing your cards with our Android UI kit are that any gesture that is to be used within a collection of cards should be consistent. You should also ensure that your cards contain information that can be easily scanned, with elements such as text and images arranged in a hierarchical fashion.

Cards can expand to reveal more information - Android Material Design 2

Justinmind’s Android UI kit – try it out today!

It’s clear that our Android UI kit has a lot to offer to any type of app design. Our always up-to-date widget library is a goldmine for devising any new prototype. This library of responsive widgets and components with basic built-in reactions will save you time as well as help your prototype to shine.

Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast