share

ENGINEERING

5min read

Implementing Material Design Outside of Android Lollipop

What is Android Material Design?

Material Design (MD) is the new design language for Android Lollipop and Android M. It focuses on bold colors, typography and animations. It keeps layouts clean, simple and consistent. It replicates real world’s things like ink and paper, so users intuitively know how to interact with applications. Shadows, touch feedback and animations are used to show relations between objects, widgets and screens. Well, maybe Material Design is not really new – but the thing is, only 12% of Android phones have Lollipop installed.

Android Material Design is just a concept, so there’s no exact implementation ready for use. Android 5.0 adds a good number of useful APIs, but none of them are available for older devices which makes using MD really difficult. When making a new Android app, we aim at having as many users as possible. More than 80% of total users is a satisfying number, but it means that we have to support Android 4.1. Covering 95% of users would include Android 2.3 as well, which is really old and won’t work well with MD concepts! When facing that problem in our project for GigTown we came up with our own solution. Keep reading to find out more.

Modern UI

We started with workflows, artworks and a working iOS app. GigTown’s UI is prepared in a modern way. There’s a vibrant orange primary color used across the app. All Android Material Design icons have basic shapes and use only one color. Surfaces are flat and simple.

GigTown's UI

As for Android, we decided to make the UI compliant with Material Design guidelines. We had to add shadows and ripples, add an accent color, remove iOS search bars and select primary actions for floating action buttons. We also had to prepare several custom widgets, unique for our project, like a ribbon, a collapsible header or a player notification.

Implementation

When we started working on the GigTown app, the Design Support Library was nowhere in sight yet. When it was released, we quickly realized that the key material features, like shadows, rounded corners, ripples, and vector graphics, were missing. We wanted to have animations and new components as well. To decide what we want to do with this further, I referred to the project I was working on in the meantime - a Material Design implementation for older devices called Carbon. I had only an old Galaxy S phone with Gingerbread on board. It was nowhere close to MD, but I really liked the new look and wanted it badly on my phone. It was also really good feeling to push the limits and prove that it’s possible. We decided to go with third party libraries and a bit of custom UI based on Carbon.

Vector graphics

While working on GigTown, we faced many challenges related to UI. We had to figure out how to prepare icons for all densities and states while doing as little as possible. We had all icons in Adobe Illustrator format, so the easiest way was to export them as PNGs. But come on, we’re in the 21st century, nobody wants to make a living from exporting icons! Android Lollipop offers SVG rendering, why wouldn’t we do that on Ice Cream Sandwich?

GigTown logo

Using AndroidSVG we were able to load SVGs and render to bitmaps from Android code. Then we could use that bitmaps with simple ImageViews. Such approach fits nicely into the existing drawing pipeline, hardware acceleration works with existing components and gives pixel-perfect results for a very little cost. The code itself is simple:

try {
	svg = SVG.getFromResource(getContext(), svgId);	// load
} catch (SVGParseException e) {
	// handle the exception
}
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
svg.setDocumentWidth(width);
svg.setDocumentHeight(height);
svg.renderToCanvas(canvas);	// render
setImageBitmap(bitmap);

All SVGs were white so we could easily create pressed and disabled states using color filters.

Shadows and outlines

The theory behind drawing Material shadows is straightforward. All views are flat and simple, so it’s possible to approximate shadows with blurred, black shapes. Here are the steps: Draw a view to a bitmap. Use a filter to make it black. Blur that bitmap. You can use ScriptIntrisincBlur. Draw the blurred bitmap on the screen. Draw the view. Pretty easy, huh? The only problem with such algorithm is that you would have to override all views and layouts. There’s no way of doing that in a generic way. From the other hand all Android widgets are precompiled and held on each device. That’s why Google doesn’t have any way to replace them on older systems.

Toolbar view

Carbon overrides most components, so we could reuse them as base classes for our views. The only inconvenience was that we had to explicitly specify each namespace in each layout.

Ripple touch feedback

The Material touch feedback on Lollipop is implemented as a Drawable, which makes a lot of sense. It’s a very simple animation of a growing circle. Unfortunately RippleDrawable makes use of the new drawing thread, which is available only on Lollipop and M. It’s neccessary to reach the desired level of animation smoothnes in parallel to heavy computations. There’s no way to overcome that.

Transitions

Durning GigTown development we prototyped a lot. Some ideas went great, while others were very hard to implement. One of them was the transition animation. If there’s a thing common to two screens and there’s a connection between them, it should be shown by a transition. Even though the idea seems to be simple, the implementation is difficult due to the following: Activities don’t share information about layouts, so translating views from point A to point B becomes very complex. Activity lifecycle forces us to move the animation to the second Activity’s running state. Activities need time to create themselves, so transitions freeze for a noticable amount of time. After two weeks of trying we decided to drop transitions due to implementation difficulties and performance issues. Not all material features can be backported and that was a very important lesson to learn for us.

Conclusion

Material Design can be used for really old Android versions as long as the device is powerful enough to run it and the application is well prepared. A few things work well only on Lollipop due to specific, system-level features, but can be run with small changes on older versions as well. In addition, with Material Design, designers can easily cooperate with programmers, as changing themes is as easy as changing the app’s leading color. Using AndroidSVG, Carbon, Picasso and Google assets we were able to make GigTown’s UI really cool.

Resources

You can find all UI-related libraries and resources we used under the following links:

Carbon Material Design implementation for all Android versions back to Froyo. Offers animated shadows, ripples, lots of widgets, and more.

AndroidSVG Easy SVG loading and rendering for android with support for SVG 1.1 and 1.2 Tiny specifications.

Picasso Very simple, yet powerful image loading library by Square.

Material Design Icons Repository with all official material icons in vector and bitmap formats.

share


MarcinSenior Software Engineer

LEARN MORE

Contact us if you have any questions regarding the article or just want to chat about technology, our services, job offers and more!

POLIDEA NEWSLETTER

Sign in and expect sharp insights, recommendations, ebooks and fascinating project stories delivered to your inbox

The controller of the personal data that you are about to provide in the above form will be Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: 0048 795 536 436, email: hello@polidea.com (“Polidea”). We will process your personal data based on our legitimate interest and/or your consent. Providing your personal data is not obligatory, but necessary for Polidea to respond to you in relation to your question and/or request. If you gave us consent to call you on the telephone, you may revoke the consent at any time by contacting Polidea via telephone or email. You can find detailed information about the processing of your personal data in relation to the above contact form, including your rights relating to the processing, HERE.

Data controller:

The controller of your personal data is Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”)

Purpose and legal bases for processing:

 

Used abbreviations:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

ARES – Polish Act on Rendering Electronic Services dated 18 July 2002

TL – Polish Telecommunications Law dated 16 July 2004

1)        sending to the given email address a newsletter including information on Polidea’s new projects, products, services, organised events and/or general insights from the mobile app business world |art. 6.1 a) GDPR, art. 10.2 ARES and art. 172.1 TL (upon your consent)

Personal data:name, email address

2)       statistical, analytical and reporting purposes |art. 6. 1 f) GDPR (based on legitimate interests pursued by Polidea, consisting in analysing the way our services are used and adjusting them to our clients’ needs, as well as developing new services)

Personal data:name, email address

Withdrawal of consent:

You may withdraw your consent to process your personal data at any time.

Withdrawal of the consent is possible solely in the scope of processing performed based on the consent. Polidea is authorised to process your personal data after you withdraw your consent if it has another legal basis for the processing, for the purposes covered by that legal basis.

Categories of recipients:

Your personal data may be shared with:

1)       authorised employees and/or contractors of Polidea

2)       persons or entities providing particular services to Polidea (accounting, legal, IT, marketing and advertising services) – in the scope required for those persons or entities to provide those services to Polidea

 

Retention period:

1)       For the purpose of sending newsletter to the given email address – for as long as the relevant consent is not withdrawn

2)       For statistical, analytical and reporting purposes – for as long as the relevant consent is not withdrawn

Your rights:

 

Used abbreviation:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

According to GDPR, you have the following rights relating to the processing of your personal data, exercised by contacting Polidea via [e-mail, phone].

1)       to access to your personal data (art. 15 GDPR) by requesting sharing and/or sending a copy of all your personal data processed by Polidea

2)       to request rectification of inaccurate personal data
(art. 16 GDPR) by indicating the data requiring rectification

3)       to request erasure of your persona data (art. 17 GDPR); Polidea has the rights to refuse erasing the personal data in specific circumstances provided by law

4)       to request restriction of processing of your personal data (art. 18 GDPR) by indicating the data which should be restricted

5)       to move your personal data (art. 20 GDPR) by requesting preparation and transfer by Polidea of the personal data that you provided to Polidea to you or another controller in a structured, commonly used machine-readable format

6)       to object to processing your personal data conducted based on art. 6.1 e) or f) GDPR, on grounds relating to your particular situation (art. 21 GDPR)

7)       to lodge a complaint with a supervisory authority,
in particular in the EU member state of your habitual residence, place of work or place of the alleged infringement if you consider that the processing
of personal data relating to you infringes the GDPR
(art. 77.1 GDPR)

No obligation to provide data:

Providing your personal data is not obligatory, but necessary for Polidea to provide you the newsletter service

Refusal to provide the above data will result in inability to receive the newsletter service.

Profiling

In the process of providing the newsletter service, we make decisions in an automated way, including profiling, based on the data you provide.

 

“Profiling” means automated processing of personal data consisting of the use of your personal data to evaluate certain personal aspects relating to you, in particular to analyze or predict aspects concerning your personal preferences and interests.

 

The automated decisions are taken based on the analysis of clicked and viewed content. They affect the targeting of specific newsletter content to selected users registered to receive the newsletter service, based on the anticipated interests of the recipient.