Dream. Dare. Do – that is Suyati’s work principle in a nutshell.
From your handset to your car, and smartwatch to other wearables, Android is becoming the all-purpose mobile platform. Creating ‘interactive’ and ‘responsive’ designs is the present day norm for towing users to you. So, what Google design library has in store for Android developers?
Join our webinar that enables the Android developers to gain necessary insights on how to utilize the Google Design Library most effectively and to the fullest.
We are also presenting a demo app that will help you understand the new material design components provided by Google to make the app attractive with responsive & meaningful interactions.
1. Introduction to Material Design and Google Design Library
2. Overview of all design components in the library
3. App Demo
Material design officially becomes a design language developed by Google, especially for Android, TV or mobile. Material design is not just for Android. We can actually see many eye-catching websites that follow material design like most of the Google products like Google plus, Google nexus, project5 and so on. Material design has gradually been extended throughout Google’s allied mobile and web products, providing a consistent experience across all platforms and applications. The Google announced material design on June 25, 2014 at the Google IO conference. As of now most of Google’s mobile applications for Android have applied the new design language, including gmail, youtube, Google drive and all Google web brand applications even the desktop web interfaces that you use daily like Google drive, docs, sheets, slides and inbox have incorporated it.
What was Google thinking when they came up with material design? Its main objective was to standardize a common design for its products and Google is a big contributor towards open servers. They introduced to us material design, now we could all use the standardized design for our products as well. A big thanks to the people there at Google. Material design is inspired by the study of paper and ink. It makes liberal use of grid based layouts, responsive animations and transitions; you know there are different paddings and depth effects like lighting and shadows. The main difference is that material environment is in 3D space, where the object has 3 dimensions. It has x, y and z axis, from a user perspective, this is how you can differentiate material design from others. The z axis is in the form of elevations that gives the particular view to the user’s eyes than those that are not elevated so that the developer can elevate a different view and give more preference to that view and as you may have seen Android lollipop has a different design than the older versions.
In the past there was no UA consistency going from one Android device to another, every app on the Google Play store may have different UI components which are being used completely differently even within the same OS. Android is really a mess. One of the most popular mess in Android apps were back buttons. Sometimes it does nothing! It takes you back to previous screens or exits the app completely. Android developers and designers largely ignored Android UA guidelines and patterns for e.g., when a user downloads an app and uses for couple of times, it is going to download another app and there is a chance that the other app will have an absolutely different UI. But that’s not the case with Material design and that’s why Google came up with a standard design across all platforms, not just Android but other web products as well. If you go through Google’s material design guidelines, you will see that material design is designed to build trust between app users and software itself.
Material design has strict rules on how the user will navigate through the app, how items can be added or removed, what kind of animations are available or how much should be left for space between individual words and so on. Now, Android provides the following elements for you to build material design apps:
Theme: The material theme provides a new style for your app, system widgets that let you set the color palettes and default animations for touch feedbacks and activity transitions. In material design, you specify a primary color so that your app will mainly complex on that.
Lists and cards: Android provides 2 new widgets for displaying cards and lists with material design styles and animations. The new recycler view widget is more pluggable version of list view that supports different layout types and provides performance improvement. You have already improved and implemented the recycler view in your projects and we also have the new card view widget which lets you display important pieces of information inside cards that have consistent look and feel.
Shadows: In addition to the X and y properties as discussed earlier, view in Android now has a z property. This new property represents the elevation of a view which determines the size of the shadow. Higher value, bigger shadows. In the drawing order, the higher the z value, higher will be the value of the view.
Animations: Then there are different animations introduced in material design. The new animation API’s that let you create custom animations for test feedbacks and UI controls changes in view states and activity transitions. They respond to touch events in your views with touch feedback animations. You can hide and show views with circular reveal animations that you see in the lollipop Android. You can switch between activities with custom activity transitions; create more natural animations with curved motions. The animated changes within one or more view properties with view state changes. Show animation in state list drawables between view state changes. Touch feedback animations are built into several standard views such as buttons, cards etc. The new APIS’ let u customize these animations and add them to your custom views.
Drawables: This new capability of drawables help you implement material design apps. In material design they introduced vector drawables, drawable tinting and color extractions. Vector drawables are scalable without losing definition and are perfect for single color in app icons. Instead of using different icons for different larger screens what we do in vector drawable is define just one vector drawable without losing definition, they are perfect in color and shape. They will be stretched according to the current screen. Now we will have drawable tinting that lets you define bit maps as an alpha mask and tint them with a color at one time. Color extraction lets you automatically extract permanent colors from a bit map image.
The next thing we are concentrating on is the design support library. Surprisingly it is not easy to implement material design in Android applications, because those material design UI components like floating action button, recycle view, card view wasn’t available in pre lollipop Android devices. The only choice was to use third party public library published by Android developers out there. It’s like giving us a gun and not letting us shoot with it. In Goggle I/O 2015, Google announced the most exciting design library called Android device support library providing a much of useful material design UI components in a single library to all higher 2.1 or higher devices.
Android design support library is not just a library. It is a collection of libraries that seek to provide backward compatible versions of APIS as well as offer unique features without referring the latest platform. It will be easy for new developers to indicate new features, animations and design that you see in lollipop and above devices. You will find a navigation draw view, floating labels for editing text, floating action button, snapbar, tabs and a motion and scroll framework, to tie them together and a lot other animations, these are all that you see in the Android Design Support library.
Components of Android material design
I have a sample app. I will explain the floating action button. On the screen, you can see a blue colored button, this is the floating action button or FAB, so we can specify some shadows and background, color etc. Usually the color of the floating action button will be the accent color. You can also set the action to the button. In this application when I’m typing on the FAB button, a snackbar will be displayed. Let’s move to the next component. Before using snackbar we were using toast. The advantage of snackbar is to specify a layout just like toast, we can make snackbars using snackbar make method.
The parameters of snackbar make method is:
We can pass a view and message and time for showing the snackbar. We can dismiss the snackbar by sliding over it. Let’s move to next component, the coordinator layout. I will show you a code, in the activity detail XML the parent layout is the coordinator layout. Inside the coordinator layout we will define the collapsing toolbar, app bar etc.
So, coordinator layout is the core component of Andoid design library. Next component is the toolbar. Toolbar is actually not a part of Android design support library, but you need the help of tool bar for showing material design. In the application, you can see the text Suyati technologies. The text is placed inside the toolbar. I will show some code. You can see the toolbar listed here, will specify the ID and height. Usually, we set the height of toolbar as the actionbar size. Previously actionbar was used for showing the title of the application but now instead of actionbar we are using toolbar. Next component is the tab layout, had many advantages. It will give the most user experience to the Android developers. In my application, 3 tabs are there, technologies, projects, clients. You can set different parameters to the tab layout for eg. tab mode and tab gravity, if you set tab mode, it can be fixed or scrollable, if we set a fixed one then width of the tab will be fixed if you have more than 5 or 6 number of tabs, we should not use fixed tab. At that time, we should use scrollable. Another property of tab layout is gravity. We can set 2 types of value to gravity-fill and centre.
Next component is app bar layout:
We cannot use tab layout inside coordinator layout, so we need the help of app bar layout. In the code, you can see the appbar widget that is first child of coordinator layout. Here I have defined a specific height and width is the match parent. We should specify a theme for app bar layout because if you want to show the text as white colour then we have to set theme of app layout as dark color.
Next component is the collapsing toolbar.
In my application you can see the detailed page. When I am scrolling the content, you will see that it will be collapsed and expanded. That’s the main advantage of using collapsing toolbar. We can set a margin to the label in the toolbar, let me show you. Here you can see the collapsing toolbar layout, I have set the expanded title margin as 48 GP, expanded title margin as 68s DP, we can set the primary color as prim color and one main property of collapsing tool bar layout scroll flag. We can set different value like scroll, scroll on appear etc, when we are scrolling the content in the screen, if you set different parameters to the scrolling flags, it will reflect when we are scrolling this content. It will behave according to the flag we have set in scroll flag.
Next move to navigation drawer. In my application you can see, when I press the menu button, a sheet of screen will appear. Here, we can define menu components. For a navigation drawer we have to specify 2 components, header and menu. In header part, we define header components. In the example above, you see this is the navigation header. We can also set the action for the tapping of the items in the navigation in drawer.
Text input layout
It is not just for lollipop and above, it can done below lollipop too using this Android design library. The latest version of Android support library - 23.2.1 has been released. Android design support library is a collection of libraries and in the latest version, few new support libraries have been added as well as new features have been added to the existing libraries. In Android studio 1.4, there was a limited support for vector drawables by generating p n g’s at billed time. In Android 23.2, they gave support to the vector drawables for all Androids above 2.1. We can now implement the vector drawables in Android and take off all the p n g‘s and all different files of different size in Andorid. Now using vector drawables, we can change the APK size, minimize the APK size to a larger amount. To implement vector drawable in our app, for Android studio 1.5, what we have to do is that in the built out graded file we will have to use vector Drawables.
The next thing will be the theme. In version 23.2, they introduced the app combat day and night theme. This app allows Android to support both a light and dark theme as well as switching between light themes to a dark theme based on whether it is night. When using app combat Delegate MODE_NIGHT_AUTO, the time of day and your last location are used to automatically switch between day and night while MODE_NIGHT_NO or MODE_NIGHT_YES, forces the team to never or always use the dark theme respectively. So if you are creating an app which is readable by the user, during day the theme will automatically switch to day theme and in the night, the app will automatically change to night mode. Next thing introduced in this version is bottom sheets. This release easily allows developers to add bottom sheets to their app.
Earlier, we had to depend on third party libraries by attaching a ‘BottomSheetbehaviour’ to a child view of a coordinator layout. By putting this behavior in the view which is inside the coordinator layout, you can actually make it as bottom view. You have to refer this view in the sheet code and call set bottom view. There are different states for the bottom view. State collapsed, stay dragging, state settling, state expanded and state hidden. Collapsed state is the default and shows just a portion of the layout along the bottom. State settling is that brief time between when the view is relaxed and just settling into its final position. Now we have state expanded, when bottom sheet is fully expanded, it is called the state expanded where either the whole bottom sheet is visible or the entire coordinator layout is filled. State hidden is disabled by default and enabling this allows users to swipe down to the bottom sheet to completely hide the bottom sheet.
Last thing is Chrome Custom Tab. These tabs give apps more control over their web experience and make transition between native and web content more seamless without having to resort to a web view. Chrome Custom Tab allows an app to customize how chrome looks and feels. An App can change things like the tools bar color, enter and exit animations, add custom actions to the toolbar and overflow menu. These also allow to pre-set chrome and pre fetch content for a faster loading. That is if you have a content or set of URL that you have to show in your app , you can pre-set these URL’s to the chrome tabs and chrome tab will start content for faster loading. That’s main advantage of chrome tabs. That’s all from my side. I hope you will start using the Android design libraries and make the app more user friendly.
Yes. You will be able to set the default across your entire app with static method called appcombatdelgate.setdefaultnightmode or if you want just one activity to have the night mode, you could get the delegate by appcombatdelgategetdelgate and set that activity to setlocalnightmode that changes the current activity or dialogue to the night mode.
Our second question is:
In case the device doesn’t have a chrome app, will the chrome tab work out?
Chrome app is similar to what we use in the web view. It uses an intent action view as we earlier used to put out an URL in web view. So what it does is that including this intent, we will add an extra to the intent saying extra assisting. Android support customable tab extra section. If the app has a default browser or if the user default browser is chrome, what it does is that it takes the extra from the intent, presents a customized UI. If you have a different browser in your device, it is also possible for another browser to use the intent extras to provide a similar customized interface. If your browser doesn’t support this custom extra, it just ignores the extras and calls the URL so you can view it in the default user.
Paul is currently working as an Android developer at Suyati Technologies. He has close to 4 years of experience in designing and developing Android applications. Paul holds a Bachelors Degree in Computer Science and Engineering from the Cochin University of Science and Technology. He is a passionate Android application developer.
Telvin is working as a Software Developer at Suyati Technologies, and has more than 1.7 years of expertise in Android app development. Telvin is extremely passionate about mobile technology and keeps exploring the new features now and then. A great team player, he possesses strong analytical skills.