Headquartered in Singapore, Wego is a popular online travel marketplace for flights and hotels for users in South East Asia and the Middle East. They launched their Android app in early 2014, and today, more than 62 percent of Wego app users are on Android. Wego recently redesigned their app using material design principles to provide their users a more native Android experience for consistency and easier navigation.
Watch Ross Veitch, co-founder and CEO, and the Wego team talk about how they increased monthly user retention by 300 percent and reduced uninstall rates by up to 25 percent with material design.
Paris-based DJiT is the creator of edjing, one of the most downloaded DJ apps in the world, it now has more than 60 million downloads and a presence in 182 countries. Following their launch on Android, the platform became the largest contributor of business growth, with 50 percent of total revenue and more than 70 percent of new downloads coming from their Android users.
Hear from Jean-Baptiste Hironde, CEO & Co-founder, Séverine Payet, Marketing Manager, and Damien Delépine, Android Software Engineer, to learn how DJit improved latency on new Android Marshmallow, as well as leveraged other Android and Google Play features to create higher quality apps.
Australian developer Domain is part of a multi-platform property business, which provides search tools and information for buyers, sellers, renters, investors, and agents across Australia. The Domain Real Estate & Property app was voted a top five lifestyle app in Australia and now has three dedicated Android developers who work closely with their design and UX teams.
Product Manager, Henrique Marassi, and Android Developer, Gary Lo, explain how Domain successfully improved their user rating from 2.8 to 4.1 and increased monthly downloads by 44 percent by adopting Material Design and Play services to create a better user experience.
Learn more about how Domain found success on Google Play:
Material Design guidelines: How Material Design helps you create beautiful, engaging apps.
Google Play services: Learn more about Google Play services and the APIs available to you through it.
Find success on Google Play: Products and best practices to help your grow you business globally on Google Play.
What makes an app intuitive and easy to use? What makes it hard or frustrating? How can your app stand out in a competitive market? Learn the fundamentals of good Android design and the patterns that have proven to work on Android to help you to build better apps.
This 5-lesson series, available on Udacity, begins with a crash course on the fundamentals of Android UI design. It helps you to sort your DIPs from your pixels, to pick the right layouts and navigation structures and shows you how to style your app to match your brand. The rest of the course is a deep dive into the principles and implementation of material design to show you how to build beautiful consistent experiences that are right at home on Android.
Lesson 2 dives into the concept of tangible surfaces, and how they establish hierarchy to make your UI more understandable. Lesson 3 looks at applying bold graphic design, or how the principles of space, color, typography and imagery help you to create a beautiful, branded experience. Lesson 4 studies the use of meaningful motion to bring your apps to life and create a seamless and more intuitive experience. Finally, lesson 5 shows how adaptive design makes your app shine on any screen size.
This course is aimed at developers familiar with Android who want to boost their design skills or designers who want to understand more about the platform they’re creating for. The full course is available for free or you can enroll in Udacity’s Android Nanodegree for extra help and support. So sign up for the Android design for developers course and go build something brilliant!
Pocket Casts is a leading podcasting app on Google Play built by Australian-based mobile development company Shifty Jelly. The company recently achieved $1 million in sales for the first time, reaching more than 500K users.
According to the co-founder Russell Ivanovic, the adoption of material design played a significant role in driving user engagement for Pocket Casts by streamlining the user experience. Moreover, users are now able to access the app beyond the smartphone -- in the car with Android Auto, on a watch with Android Wear or on the TV with Google Cast. The rapid innovation of Android features helped Pocket Casts increase sales by 30 percent.
We chatted with co-founders and Android developers Russell and Philip Simpson to learn more about how they are growing their business with Android.
Here are some of the features Pocket Casts used:
Material Design: Learn more about material design and how it helps you create beautiful, engaging apps.
Android Wear: Extend your app to Android Wear devices with enhanced notifications or a standalone wearable app.
Android Auto: Extend your app to an interface that’s optimized for driving with Android Auto.
Google Cast: let your users cast your app’s content to Google Cast devices like Chromecast, Android TV, and speakers with Google Cast built-in.
The Design Support Library is now available, simplifying the implementation of elements like the Floating Action Button, check out the post for details.
Original Post:
Material design is a new system for visual, interaction and motion design. We originally launched the Topeka web app as an Open Source example of material design on the web.
Today, we’re publishing a new material design example: The Android version of Topeka. It demonstrates that the same branding and material design principles can be used to create a consistent experience across platforms.
While the project demonstrates a lot of different aspects of material design, let’s take a quick look at some of the most interesting bits.
Transitions
Topeka for Android features several possibilities for transition implementation. For starters the Transitions API within ActivityOptions provides an easy, yet effective way to make great transitions between Activities.
To achieve this, we register the shared string in a resources file like this:
For multiple transition participants with ActivityOptions you can take a look at the CategorySelectionFragment.
Animations
When it comes to more complex animations you can orchestrate your own animations as we did for scoring.
To get this right it is important to make sure all elements are carefully choreographed. The AbsQuizView class performs a handful of carefully crafted animations when a question has been answered:
The animation starts with a color change for the floating action button, depending on the provided answer. After this has finished, the button shrinks out of view with a scale animation. The view holding the question itself also moves offscreen. We scale this view to a small green square before sliding it up behind the app bar. During the scaling the foreground of the view changes color to match the color of the fab that just disappeared. This establishes continuity across the various quiz question states.
All this takes place in less than a second’s time. We introduced a number of minor pauses (start delays) to keep the animation from being too overwhelming, while ensuring it’s still fast.
The code responsible for this exists within AbsQuizView’s performScoreAnimation method.
FAB placement
The recently announced Floating Action Buttons are great for executing promoted actions. In the case of Topeka, we use it to submit an answer. The FAB also straddles two surfaces with variable heights; like this:
To achieve this we query the height of the top view (R.id.question_view) and then set padding on the FloatingActionButton once the view hierarchy has been laid out:
private void addFloatingActionButton() { final int fabSize = getResources().getDimensionPixelSize(R.dimen.fab_size); int bottomOfQuestionView = findViewById(R.id.question_view).getBottom(); final LayoutParams fabLayoutParams = new LayoutParams(fabSize, fabSize, Gravity.END | Gravity.TOP); final int fabPadding = getResources().getDimensionPixelSize(R.dimen.padding_fab); final int halfAFab = fabSize / 2; fabLayoutParams.setMargins(0, // left bottomOfQuestionView - halfAFab, //top 0, // right fabPadding); // bottom addView(mSubmitAnswer, fabLayoutParams); }
To make sure that this only happens after the initial layout, we use an OnLayoutChangeListener in the AbsQuizView’s constructor:
addOnLayoutChangeListener(new OnLayoutChangeListener() { @Override public void onLayoutChange(View v, int l, int t, int r, int b, int oldLeft, int oldTop, int oldRight, int oldBottom) { removeOnLayoutChangeListener(this); addFloatingActionButton(); } });
Round OutlineProvider
Creating circular masks on API 21 onward is now really simple. Just extend the ViewOutlineProvider class and override the getOutline() method like this:
@Override public final void getOutline(View view, Outline outline) { final int size = view.getResources(). getDimensionPixelSize(R.id.view_size); outline.setOval(0, 0, size, size); }
and setClipToOutline(true) on the target view in order to get the right shadow shape.
We use vector drawables to display icons in several places throughout the app. You might be aware of our collection of Material Design Icons on GitHub which contains about 750 icons for you to use. The best thing for Android developers: As of Lollipop you can use these VectorDrawables within your apps so they will look crisp no matter what density the device’s screen. For example, the back arrow ic_arrow_back from the icons repository has been adapted to Android’s vector drawable format.
The vector drawable only has to be stored once within the res/drawable folder. This means less disk space is being used for drawable assets.
Property Animations
Did you know that you can easily animate any property of a View beyond the standard transformations offered by the ViewPropertyAnimator class (and it’s handy View#animate syntax)? For example in AbsQuizView we define a property for animating the view’s foreground color.
// Property for animating the foreground public static final Property FOREGROUND_COLOR = new IntProperty("foregroundColor") {
@Override public void setValue(FrameLayout layout, int value) { if (layout.getForeground() instanceof ColorDrawable) { ((ColorDrawable) layout.getForeground()).setColor(value); } else { layout.setForeground(new ColorDrawable(value)); } }
This can later be used to animate changes to said foreground color from one value to another like this:
final ObjectAnimator foregroundAnimator = ObjectAnimator .ofArgb(this, FOREGROUND_COLOR, Color.WHITE, backgroundColor);
This is not particularly new, as it has been added with API 12, but still can come in quite handy when you want to animate color changes in an easy fashion.
Tests
In addition to exemplifying material design components, Topeka for Android also features a set of unit and instrumentation tests that utilize the new testing APIs, namely “Gradle Unit Test Support” and the “Android Testing Support Library.” The implemented tests make the app resilient against changes to the data model. This catches breakages early, gives you more confidence in your code and allows for easy refactoring. Take a look at the androidTest and test folders for more details on how these tests are implemented within Topeka. For a deeper dive into Testing on Android, start reading about the Testing Tools.
What’s next?
With Topeka for Android, you can see how material design lets you create a more consistent experience across Android and the web. The project also highlights some of the best material design features of the Android 5.0 SDK and the new Android Design Library.
While the project currently only supports API 21+, there’s already a feature request open to support earlier versions, using tools like AppCompat and the new Android Design Support Library.
Have a look at the project and let us know in the project issue tracker if you’d like to contribute, or on Google+ or Twitter if you have questions.
Trello is a visual collaboration tool that gives teams a shared perspective on projects. It’s built around the concept of a traditional office whiteboard. Simplicity and flexibility are core to the product, so the Trello team recently redesigned their Android app using the material design guidelines to double down on that effort.
According to Fyza Hashim, Designer at Trello, material design had an immediate impact on streamlining app-design and -development at the company. She added that, “Because the guidelines are so thorough and well thought out, you don’t have to go back and forth with developers.”
Sharing is a key component of Trello, so material design helped continue the same cohesive design and intuitive experience on both web and mobile. This makes sharing even easier. As a result, Trello has also seen double digit growth in user engagement with more and more sessions added per week.
Watch the video where we caught up with Michael Pryor, CEO; Hamid Palo, Mobile Lead; and Fyza at the Trello offices in New York to learn more.
Material design — learn more about material design and how it helps you create beautiful, engaging apps.
Android 5.0 Lollipop was one of the most significant Android releases ever, in no small part due to the introduction of material design, a new design language that refreshed the entire Android experience. Our detailed spec is a great place to start to adopt material design, but we understand that it can be a challenge for developers, particularly ones concerned with backward compatibility. With a little help from the new Android Design Support Library, we’re bringing a number of important material design components to all developers and to all Android 2.1 or higher devices. You’ll find a navigation drawer view, floating labels for editing text, a floating action button, snackbar, tabs, and a motion and scroll framework to tie them together.
Navigation View
The navigation drawer can be an important focal point for identity and navigation within your app and consistency in the design here can make a considerable difference in how easy your app is to navigate, particularly for first time users. NavigationView makes this easier by providing the framework you need for the navigation drawer as well as the ability to inflate your navigation items through a menu resource.
You use NavigationView as DrawerLayout’s drawer content view with a layout such as:
You’ll note two attributes for NavigationView: app:headerLayout controls the (optional) layout used for the header. app:menu is the menu resource inflated for the navigation items (which can also be updated at runtime). NavigationView takes care of the scrim protection of the status bar for you, ensuring that your NavigationView interacts with the status bar appropriately on API21+ devices.
The simplest drawer menus will be a collection of checkable menu items:
You’ll get callbacks on selected items by setting a OnNavigationItemSelectedListener using setNavigationItemSelectedListener(). This provides you with the MenuItem that was clicked, allowing you to handle selection events, changed the checked status, load new content, programmatically close the drawer, or any other actions you may want.
Floating labels for editing text
Even the humble EditText has room to improve in material design. While an EditText alone will hide the hint text after the first character is typed, you can now wrap it in a TextInputLayout, causing the hint text to become a floating label above the EditText, ensuring that users never lose context in what they are entering.
In addition to showing hints, you can also display an error message below the EditText by calling setError().
Floating Action Button
A floating action button is a round button denoting a primary action on your interface. The Design library’s FloatingActionButton gives you a single consistent implementation, by default colored using the colorAccent from your theme.
In addition to the normal size floating action button, it also supports the mini size (fabSize="mini") when visual continuity with other elements is critical. As FloatingActionButton extends ImageView, you’ll use android:src or any of the methods such as setImageDrawable() to control the icon shown within the FloatingActionButton.
Snackbar
Providing lightweight, quick feedback about an operation is a perfect opportunity to use a snackbar. Snackbars are shown on the bottom of the screen and contain text with an optional single action. They automatically time out after the given time length by animating off the screen. In addition, users can swipe them away before the timeout.
By including the ability to interact with the Snackbar through swiping it away or actions, these are considerably more powerful than toasts, another lightweight feedback mechanism. However, you’ll find the API very familiar:
You’ll note the use of a View as the first parameter to make() - Snackbar will attempt to find an appropriate parent of the Snackbar’s view to ensure that it is anchored to the bottom.
Tabs
Switching between different views in your app via tabs is not a new concept to material design and they are equally at home as a top level navigation pattern or for organizing different groupings of content within your app (say, different genres of music).
The Design library’s TabLayout implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally. Tabs can be added programmatically:
However, if you are using a ViewPager for horizontal paging between tabs, you can create tabs directly from your PagerAdapter’s getPageTitle() and then connect the two together using setupWithViewPager(). This ensures that tab selection events update the ViewPager and page changes update the selected tab.
CoordinatorLayout, motion, and scrolling
Distinctive visuals are only one part of material design: motion is also an important part of making a great material designed app. While there are a lot of parts of motion in material design including touch ripples and meaningful transitions, the Design library introduces CoordinatorLayout, a layout which provides an additional level of control over touch events between child views, something which many of the components in the Design library take advantage of.
CoordinatorLayout and floating action buttons
A great example of this is when you add a FloatingActionButton as a child of your CoordinatorLayout and then pass that CoordinatorLayout to your Snackbar.make() call - instead of the snackbar displaying over the floating action button, the FloatingActionButton takes advantage of additional callbacks provided by CoordinatorLayout to automatically move upward as the snackbar animates in and returns to its position when the snackbar animates out on Android 3.0 and higher devices - no extra code required.
CoordinatorLayout also provides an layout_anchor attribute which, along with layout_anchorGravity, can be used to place floating views, such as the FloatingActionButton, relative to other views.
CoordinatorLayout and the app bar
The other main use case for the CoordinatorLayout concerns the app bar (formerly action bar) and scrolling techniques. You may already be using a Toolbar in your layout, allowing you to more easily customize the look and integration of that iconic part of an app with the rest of your layout. The Design library takes this to the next level: using an AppBarLayout allows your Toolbar and other views (such as tabs provided by TabLayout) to react to scroll events in a sibling view marked with a ScrollingViewBehavior. Therefore you can create a layout such as:
Now, as the user scrolls the RecyclerView, the AppBarLayout can respond to those events by using the children’s scroll flags to control how they enter (scroll on screen) and exit (scroll off screen). Flags include:
scroll: this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen
enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern
enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.
exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting
One note: all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind.
Collapsing Toolbars
Adding a Toolbar directly to an AppBarLayout gives you access to the enterAlwaysCollapsed and exitUntilCollapsed scroll flags, but not the detailed control on how different elements react to collapsing. For that, you can use CollapsingToolbarLayout:
This setup uses CollapsingToolbarLayout’s app:layout_collapseMode="pin" to ensure that the Toolbar itself remains pinned to the top of the screen while the view collapses. Even better, when you use CollapsingToolbarLayout and Toolbar together, the title will automatically appear larger when the layout is fully visible, then transition to its default size as it is collapsed. Note that in those cases, you should call setTitle() on the CollapsingToolbarLayout, rather than on the Toolbar itself.
In addition to pinning a view, you can use app:layout_collapseMode="parallax" (and optionally app:layout_collapseParallaxMultiplier="0.7" to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within the CollapsingToolbarLayout). This use case pairs nicely with the app:contentScrim="?attr/colorPrimary" attribute for CollapsingToolbarLayout, adding a full bleed scrim when the view is collapsed.
CoordinatorLayout and custom views
One thing that is important to note is that CoordinatorLayout doesn’t have any innate understanding of a FloatingActionButton or AppBarLayout work - it just provides an additional API in the form of a Coordinator.Behavior, which allows child views to better control touch events and gestures as well as declare dependencies between each other and receive callbacks via onDependentViewChanged().
Views can declare a default Behavior by using the CoordinatorLayout.DefaultBehavior(YourView.Behavior.class) annotation,or set it in your layout files by with the app:layout_behavior="com.example.app.YourView$Behavior" attribute. This framework makes it possible for any view to integrate with CoordinatorLayout.
Available now!
The Design library is available now, so make sure to update the Android Support Repository in the SDK Manager. You can then start using the Design library with a single new dependency:
compile 'com.android.support:design:22.2.0'
Note that as the Design library depends on the Support v4 and AppCompat Support Libraries, those will be included automatically when you add the Design library dependency. We also took care that these new widgets are usable in the Android Studio Layout Editor’s Design view (find them under CustomView), giving you an easier way to preview some of these new components.
The Design library, AppCompat, and all of the Android Support Library are important tools in providing the building blocks needed to build a modern, great looking Android app without building everything from scratch.
When we first announced material design in June 2014, we shared an aspirational highlights reel that demonstrated key material principles for motion, interaction, and visual design across a range of hypothetical apps. “Hypothetical” being the key word here—back then, material design was just an idea. Sure, designers and engineers at Google were already working hard on applying material to Google’s Android, iOS, and web apps, but the notion of a single design system that can work across platforms and brands was just an idea.
Fast-forward to today, and thousands of Android apps are adopting material design using the Android 5.0 SDK and AppCompat, while designers and developers begin to experiment with material design on iOS and the web as well. These apps are starting to realize that aspirational vision we set out with that sizzle reel.
Today, we’re celebrating the amazing design work from Google Play developers and announcing the Material Design Showcase and Material Design Awards.
Of those 18 apps, we’re recognizing 6 with a special award, which we handed out during Google I/O today and announced at the Material Now session hosted by Matias Duarte.
These 6 winners of our first ever Material Design Awards represent best-in-class applications of specific aspects of material design:
B&H Photo Video Audio Pro for Immersive Imagery
New York Times for Elegant Typography
Pocket for Adaptive Layouts
Pocket Casts for Seamless Browsing
Tumblr for Delightful Animation
Weather Timeline for Crafted Simplicity
So today, we have a new highlights reel, featuring these six wonderful and very real apps:
The individuals, teams, and companies behind these apps have made the promise of material design that much more of a reality.
What’s next
But remember, this is only the beginning. We’ll continue to recognize excellent material design in the future, evolving the awards as we evolve material design itself—together as a community.
If you’re a designer or developer just starting out with material design, make sure to check out these 18 apps in the Material Design Showcase. They’re a great source of inspiration, in addition to the awesome content on community sites like Dribbble. And if you’re wondering how to start implementing some of these ideas, get started today with the Creating Apps with Material Design training docs. When you publish your next great app with material design, be sure to let us know on Google+ and Twitter!
We've been in San Francisco talking with the team from The Hunt — a style and product sharing community. They've recently lifted the rate at which Android users start hunts to 20 percent after successfully implementing material design in the app, which is a 30 percent improvement over other platforms. As The Hunt’s Product Designer Jenny Davis puts it, “it felt like having a team of design experts on hand,” which lets them focus on what matters to the Android user.
But as we find out, that's not the whole story. Beta testing — managed from the Google Play Developer Console — also allowed them to iterate design and features daily. Based on feedback, they introduced the floating action button, which helped boost new hunts and helpful responses from the community. This speed and freedom is something the team thought possible only with their mobile website, until they started working with the Android tools.
Watch the video to discover more about how design and rapid iteration has been key to building a strong community.
Learn about using the tools that have helped improve user engagement for The Hunt:
Material design — learn more about material design and how it helps you create beautiful, engaging apps.
Beta testing — discover how to easily deliver test versions of your app to users for feedback before release.
