Logo
Expansion Panels…Are They Gone From Material Design?
7 Aug 2018

Expansion Panels…Are They Gone From Material Design?

Post by Mobile Design Guy

Something that almost every designer uses at some point or another regardless if it’s web or mobile design, is Expand/Collapse, right? Native Android App Design is no different and for years with Google Material 1.0 we had the Expansion Panel Component. Now with Google Material 2.0 completely wiping 1.0 from existence that component is gone or is it?

Google Material 1.0 Expansion Panel

If you’ll remember Expansion Panels were elaborate and the only thing used by and large was the expand and collapse part of them. The fact that you could expand and put editable fields in them and a host of other things was just fluff. So Google did the right thing and nixed the Expansion Panels. When they did this I had Creative Directors and even designers come to me and say “what are we going to do now in Android for expand/collapse?”. Oh still your heart my awesome designer friends, it’s not gone, just refined and moved. Now Expand/Collapse lives under List Component. Rightfully so as it’s the only place this is used and it now is simplified to what 99% of designers, and business for that fact, use it for. To expand and show more information and hide noise.

If you go to the new Google Material website (material.io) and look under Design > Components > List, you’ll find the Expand/Collapse section. You’ll also find this in their new Sketch Plugin and Material Baseline UI Kit which is extremely useful for designing awesome native apps in Sketch. Also they give a much clearer example in Material 2.0 of how to use this design element and function for your Android native app.

I know this is short but there really isn’t a lot around this component that is new or old. But it has been a source of confusion for people I know, so I wanted to write about it and put your fears at ease if you thought you were going to have to figure out a new way to do this or not be able to do it at all. It works the same and has the same icon, specs, metrics, etc… Go forth and conquer and keep designing with excellence!

Google Material 2.0 Expansion Panel

Tags: , , , , , , , ,

0 Comments

Leave a Comment