Materialize your App

24 Comments / Blog, Development / By

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.

24 thoughts on “Materialize your App”

  2. Fran Pulido

    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.

    1. Antonio Leiva

      I think you’ll need to override onOptionsItemSelected and perform onBackPressed when home pressed.

  3. Pablo Costa Tirado (Sotti)

    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.

    1. Antonio Leiva

      Do I? I’ll review that but I’d say it’s 16dp… Anyway, you’re right, that’s what guidelines say.

  5. Alejandro

    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.

  6. Ivan Gaglioti

    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

    1. Antonio Leiva

      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.

  7. Vineet Ashtekar

    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.

  8. Broken Async

    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}.

    2. Trying2code

      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?

      1. Antonio Leiva

        Hey! Thanks, I’ve updated the repository so that you don’t have that problem anymore. Do a pull to get the latest changes.

      2. Trying2code

        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

      3. Antonio Leiva

        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.

      4. Trying2code

        Please disregard, looks like the action-bar may have been deprecated. Thanks!

  9. Joshua Kisanga

    Great help, I wish you could help us by full tutorial with material design including google map

  10. domain277

    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?

    1. Antonio Leiva

      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.

Comments are closed.