On January 31st, I was asked to give a talk at MaterialFest, and awesome event organised by GDG Cádiz (Spain), where developers and designers were all together in the same place talking about Material design and how to work better together.
My talk was just an extension of the latest article from this blog, Material Design Everywhere. I talked a little more about all the tools we have available in Android to put Material Design into practice.
Content
I talked a little bit about what´s Material Design as an introduction. Then you can see how to use AppCompat and its new Toolbar, an explanation about a couple of new features in Lollipop such as Transitions and Ripples. Then some simple ideas about RecyclerView, and finally and explanation of CardView and Palette.
The last part of the talk is devoted to some tips and ideas to boost the Material experience. I explain for instance how to create some different animations and effects related to scroll, or how to improve activity transitions.
The slides
These are the slides from that event:
The code
I also created an example app, and uploaded the code to Github:
> Go to Materialize Your app on Github
This is what you can expect from it. It´s at the Play Store too, if you just want to try it before downloading and deploying the whole code.
The video
Talks were recoded, so I hope to be able to link to the video soon. It will be in Spanish anyway.
Conclusion
So if you want me to develop one of these ideas more deeply, please use comments and I will create new articles related to that.
Thanks! I’m currently working an a material application and your tips are very useful!
Hi, Good article and very useful.
I have one question. How can I do the same behaviour when I press the Up (‘<') button like the physical Back button?
I mean, the physical Back button finish the activity with some animations, I want to do this same behaviour when I press the Up button.
Thanks.
I think you’ll need to override onOptionsItemSelected and perform onBackPressed when home pressed.
Hi there Antonio,
I’ve seen you have 32dp as margin in the fab style when in the guidelines they say 16dp.
Quote:
“The floating action button should be placed 16dp min from the edge on mobile and 24dp min on tablet/desktop.”
Cheers and thanks for sharing this kind of stuff that is very useful.
Do I? I’ll review that but I’d say it’s 16dp… Anyway, you’re right, that’s what guidelines say.
My fault, I read spacing_xlarge instead of large. You did it right.
BTW, I haven’t found any relevant link or information about background
Could you provide any link or additional information about it??
Thanks
Do you mean FAB background? All the info is here: http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button
Sorry, something went wrong with my comment. I meant in the fabStyle the outlineProvider.
Hi, I have a question, you implements a method called restablishActionBar when you back to parent activity to set actionbar alpha to initial conditions, well, i would like how to implement the same method in a fragment.
Thanks.
Hi Antonio,
fantastic work, thanks.
I have question about RecyclerView. In my app i want to make my item expandable: when the user click over the item i want hide/show an extra child layout defined inside the item layout. I reached that by changing the layout parameters (height) of item: the problem is the following:
suppose that item expanded/collapsed if in the position 0, if i scroll the list i see (randomly) that also other items become expanded/collapsed even though i didn’t’ require that.
This a piece of code through which i handle the request of expanding/collapsing
private void updateBottomLayout(ViewHolder holder, boolean requiredBottomToBeShown) {
ViewGroup.LayoutParams layoutParams = holder.itemView.getLayoutParams();
final int actualHeight = holder.itemView.getMeasuredHeight();
if(holder.isFirstToggle){
holder.originalLayoutBottomHeight = holder.viewCheckInDetails.getMeasuredHeight() + ((ViewGroup.MarginLayoutParams)holder.viewCheckInDetails.getLayoutParams()).topMargin;
holder.isFirstToggle = false;
}
layoutParams.height = requiredBottomToBeShown ? actualHeight + holder.originalLayoutBottomHeight : actualHeight – holder.originalLayoutBottomHeight;
holder.itemView.setLayoutParams(layoutParams);
notifyItemChanged(holder.getPosition());
}
Thanks for any suggestions
Ivan
I’d say that happens because views are being reused and you don’t update if it should be open or closed in onBindView? You need to save which positions are expanded and update the recycled view in consequence.
Thanks a lot for your tutorials. They are really good and of great help.
I was wondering if you could give a tutorial on how to Filter items in a recyclerView like a real time search.
It is very much needed as searching is a basic necessity of every app.
Hoping for it.
Hi Nice post but I am getting this error when I am trying to build the project on android studio. I am new to android so pardon me if it is a very silly question. Thanks
Error:(34) A problem occurred evaluating project ‘:app’.
> Could not find property ‘RELEASE_STORE_FILE’ on SigningConfig_Decorated{name=release, storeFile=null, storePassword=null, keyAlias=null, keyPassword=null, storeType=null}.
Hola Antonio, el app que esta en el repositorio no es la misma del video que vemos en el post, el código de esta donde lo puedo encontrar? gracias
Hello Antonio,
I was impressed by the slides and sample app you have above, and downloaded the project from your link above and attempted to build it. However, I am also getting the keystore error message.
Error:(34, 0) Could not find property ‘RELEASE_STORE_FILE’ on SigningConfig_Decorated{name=release, storeFile=null, storePassword=null, keyAlias=null, keyPassword=null, storeType=null}.
Is there an simple fix for this?
Hey! Thanks, I’ve updated the repository so that you don’t have that problem anymore. Do a pull to get the latest changes.
Thanks Antonio!! That worked great!
Quick question, the version you have displayed on this page has the three vertical dots(action bar) on the toolbar, but when I run it, it does not show the action bar. Is this API version dependent? If so, what API did yo use for this App and which phone AVD did you use?
Thanks again, these are great examples to learn from
Things probably changed since I wrote this article. It was the first, before the Design Support Library even existed. I then updated the repository with some other articles that explained this library.
Please disregard, looks like the action-bar may have been deprecated. Thanks!
Great help, I wish you could help us by full tutorial with material design including google map
Hey Antonio
Good work ..i like your tutorial but i m stuck now it a week ..i m trying to upload my own images to my server but i have failed ..i have removed lorempixel images here
items.add(new ViewModel(“hey “, “http://kevinjanvier.com/stlawrence/news_images/” + i)); But nothing …i have tried but failed ..Any help Mr Antonio?
Sorry but I don’t think I’m able to help you with your server. The url you linked doesn’t seem to return anything.
images are kept here ….. http://kevinjanvier.com/stlawrence/news_images/5.jpg
i tried but still failed