Implement material design from Google I/O 2014 app

Question

I really like the new Material design i the Google I/O 2014 app, I would like to implement some in my app. I been trying to looking at source code but cant figure it out how to implement, so my question is if someone knows is there are some easier examples? I have two design i mind, first one is to have a actionbar like this: It looks like i big acionbar with two spinner.

https://dl.dropboxusercontent.com/u/68771663/2014-09-09%2008.46.13.png

The second one is this one:

https://dl.dropboxusercontent.com/u/68771663/2014-09-09%2008.46.41.png

I guess that one is a bit tricky to answer..

score 2 · Accepted Answer · answered Sep 09 '14 at 08:05

The first one is basically a regular ActionBar with a layout containing two custom spinners side by side, right below it. The bottom shadow of the ActionBar has been disabled by setting windowContentOverlay attribute to null by adding the following line to the app theme (in res/values/styles):

<item name="android:windowContentOverlay">@null</item>

You'll also notice a subtle shadow at the bottom of the layout containing spinners. That can be added by creating a shape drawable in xml with a gradient. This gradient is set to have a 270 degree angle with a dark start color and a light/transparent end color (can include a middle color as well). And now, you can add a View under the spinner container as follows:

<View 
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@drawable/<name_of_your_shape_drawable"/>

Now, coming to the second picture, we can clearly see that ActionBar overlay mode is enabled, which can be done by adding the following line to the app theme:

<item name="android:windowActionBarOverlay">true</item>

If you only want a specific activity to have an overlay ActionBar, then you can add the following line before setContentView:

    getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

Moving on to the parallax effect of the top image, you'll first need to get the yScroll value in pixels of the scrollview/listview, and then simply translate that ImageView by half of the yScroll value:

    imageView.setTranslationY((float) (yScroll/2));

Refer to this link in order to get scroll values from a ScrollView: http://cyrilmottier.com/2013/05/24/pushing-the-actionbar-to-the-next-level/

I'm not so sure about the last bit which involves an animation to color the ActionBar when the title layout touches it. Might have to look into the source code for that.

Thank you, that looks great! I did try to put a layout with spinner under the actionbar, but it didn't look good because off the bottom shadow. But now I know what to do! I'm gonna look into that link, looks like a good start. That animation for color the actionbar is really beautiful! — user2299491, Sep 09 '14 at 11:19
If you think my response resolved your query, please mark it as an answer. — Manas Bajaj, Sep 09 '14 at 13:53

Implement material design from Google I/O 2014 app

1 Answers1