GUI like Google Keep
Google Keep has a very nice UI.
First of all, I'm not a designer, but tonight I enjoyed trying to clone it.
Do not take this code too seriously, it is just an example.
We start with ActionBar. Window and ActionBar have same background color.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjil-WkbpUpgBtZ09CUB9Z_pRL8Uk4d21rdrP-lTPhUi1nThGJPYiN9uvH51l-pWe_MaEVkGwssfcEuCbIWruVq5y4lBaDH2mk1FgJXhOPVjhiA5dr3HFx4h26CO7z_yiznptKNWxomjk89/s640/device2.gif)
With Android Action Bar Style Generator (by Jeff Gilfelt) we choose a background and generate our zip code. We take only the part that interests us and integrate it.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4x3mg860qAqAnJpHxQylSEVaV8M01qIAUWAEqjDJigol4orm4wE_eXl9MLT9Cq2UfLRjsy2bD1WQL60gVcMdKtOUC5f1WMMYsNeyMfVfoXd4taqucqP9dJetnYZkJfjohaWVwFuLahyphenhyphenN/s640/device3.gif)
We choose a FrameLayout and we adjust margins.
In this case I choose a xml file with a layer-list.
In landscape mode, we change something in layout:
To color a bit the screen we put some shape below.
I don't know what Google used for it.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc2N-8q27TWceQjgYVM3iYDaFi75B5rxfqTO2-QlokqQFboopyOvbXY9_-1Q84HBi1Yt_73UrzGcH8wLdLMnICI7glH-kaOgs7YbjyVMhx46VYyZp2Etb0YQbK22lQtJA0Z6DKms5VEKv/s640/device6.gif)
I think it is a StaggeredGridView or a variant of it, likely.
Someone spoke about it on G+ a few months ago. You can find an experimental in frameworks/ex/widgets/ folder of AOSP.
I honestly do tests before speak about it.
.
You can get code from GitHub:
First of all, I'm not a designer, but tonight I enjoyed trying to clone it.
Do not take this code too seriously, it is just an example.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCQuhjLuddTlTwSsV2v4SWu-EOeU9_65q0R9tJ63Uzd-3wxuAqmYrqHoSydVdr1pa7vRyI6JvnwYUKGAdCTa7zduyr5FfZJ8wrqThkxV7ndFE_uPkhK76sGNSsyiZzgSj9SH8DiZe2MGUx/s640/device1.gif)
We start with ActionBar. Window and ActionBar have same background color.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjil-WkbpUpgBtZ09CUB9Z_pRL8Uk4d21rdrP-lTPhUi1nThGJPYiN9uvH51l-pWe_MaEVkGwssfcEuCbIWruVq5y4lBaDH2mk1FgJXhOPVjhiA5dr3HFx4h26CO7z_yiznptKNWxomjk89/s640/device2.gif)
With Android Action Bar Style Generator (by Jeff Gilfelt) we choose a background and generate our zip code. We take only the part that interests us and integrate it.
For our Activity we choose a RelativeLayout, and we put it under ActionBar.
Then we try to draw first box with title and icons.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4x3mg860qAqAnJpHxQylSEVaV8M01qIAUWAEqjDJigol4orm4wE_eXl9MLT9Cq2UfLRjsy2bD1WQL60gVcMdKtOUC5f1WMMYsNeyMfVfoXd4taqucqP9dJetnYZkJfjohaWVwFuLahyphenhyphenN/s640/device3.gif)
We choose a FrameLayout and we adjust margins.
We want a white rectangle with a light bottom shadow. We can do it with a 9 patch image.
In this case I choose a xml file with a layer-list.
Then we fill the box with title, a divider and 4 images.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjzJ79vq7SwkGyY0hvt0_Fqa9wtAel7L4BZExXxqgz_xIQr7c0ETpLtVlnpHFTgzTWjmdGvVyKWgfrZGTv3TMy0oJRJIKbBw1X6vZ2FnrASD6NqfSbsN3ylyoTcYpYtl5py9-OdDdIs88D/s640/device4.gif)
For the buttons background we use:.......
We should add something like this:
but I should create images...
In landscape mode, we change something in layout:
....... and we obtain:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixnYnUXLx8_X04llTCFhpMelDs5FwxGihK8k7L_E2GqbN10tb16JcJ0scVm1IQCaQR1F2u0YlMXiD4dpDC6Q44hIG6uKnutluhfpKpSzgpdDFac3q2zx760FFDt2y2dhKEwRrYGyYzHnGH/s640/device5.gif)
To color a bit the screen we put some shape below.
I don't know what Google used for it.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc2N-8q27TWceQjgYVM3iYDaFi75B5rxfqTO2-QlokqQFboopyOvbXY9_-1Q84HBi1Yt_73UrzGcH8wLdLMnICI7glH-kaOgs7YbjyVMhx46VYyZp2Etb0YQbK22lQtJA0Z6DKms5VEKv/s640/device6.gif)
I think it is a StaggeredGridView or a variant of it, likely.
Someone spoke about it on G+ a few months ago. You can find an experimental in frameworks/ex/widgets/ folder of AOSP.
I honestly do tests before speak about it.
.
You can get code from GitHub:
Nice tutorial.
ReplyDeleteVery rare to find a tutorial about design ...
Thank you very much. Thinking of implementing it in one of my apps. Will share it if it turns out good. :)
ReplyDeleteIt's StaggeredGridView. ;-)
ReplyDeleteGreat tutorial
ReplyDeleteWould it be better to use @null instead of android:windowActionBarOverlay? That way you don't need to adjust the top margin of Box_outer to take the action bar into account.
I like this tutorial, It is interesting.
ReplyDeleteIf you have time give a look at www.survivingwithandroid.com