Tag: material design

  • Parallax Scrolling Tabs with Android Design Support Library

    Parallax Scrolling Tabs with Android Design Support Library

    Material Design has seen the rise in on-scroll animations in Android apps.
    Certain designs include a parallax scroll effect with a header images, along with Tabs. In this post, we’ll look at just that.

    Parallax scrolling is a popular pattern. Previously we’ve seen such examples with the Flexible Space with Image and Quick Return pattern. In this post, we’ll look at making parallax scrolling Tabs using Android Design Support Library.

    (more…)

  • Material Design for Tablets

    Material Design for Tablets

    So far we’ve seen use cases for popular design patterns restricted to a handset only. Now let’s look at applying Material Design for Tablets in Android app development.

    (more…)

  • Create Gmail Style List in Android

    Create Gmail Style List in Android

    I’m sure all of you would have noticed the list style in the Gmail app for Android. The placeholder for a person’s photo is their first letter accented with a nice color. In fact even the stock Contacts app and the new Inbox by Gmail has a similar style.

    (more…)

  • Make an Android Splash Screen (Launch Screen)

    Make an Android Splash Screen (Launch Screen)

    The launch screen (or splash screen if you prefer), is the first thing your user’s going to see. In other words, it is a user’s first experience of your application. In this post I’ll show you how to create a branded launch screen / splash screen for your Android apps.

    This is where you must do your best to impress the user. Use some flashy graphics, vibrant imagery along with a neat logo. Not trying to be harsh, but if you slack off here, he’s probably not going to return.

    (more…)
  • Top 10 Material Design Libraries for Android

    Top 10 Material Design Libraries for Android

    Material Design is all the rage now. Here are top 10 libraries you need to provide a complete Material Design experience across all apps, pre Lollipop as well.

    These are in no order of priority.

    (more…)

  • Circular Reveal Effect like WhatsApp in Android

    Circular Reveal Effect like WhatsApp in Android

    While sending a photo through WhatsApp, I noticed the ‘Attach’ button performs a neat Circular Reveal effect. My phone being JellyBean, I was surprised to see a Lollipop only transition. Thanks to a neat library, we can mimic the exact same thing for pre Lollipop too.

    (more…)
  • Design App Mockups with Adobe Illustrator & InVision

    Design App Mockups with Adobe Illustrator & InVision

    Designing app mockups allow us to quickly visualize how our app might ultimately look like. In this article tutorial, let’s learn how to do this really quick with Adobe Illustrator and InVision. I will also tell you the benefits of doing this and guide you every step of the way.
    (more…)

  • Quick Return Pattern with Android Design Support Library

    Quick Return Pattern with Android Design Support Library

    The ‘Quick Return’ is a famous UI pattern seen in Android apps. It aims to dedicate the screen’s maximum possible real estate to content, instead of controls. With Android Design Support Library, the same which was harder in the past, is now quite easy!

    (more…)

  • Create a Card Toolbar (Nested Toolbar) in Android

    Create a Card Toolbar (Nested Toolbar) in Android

    I heard Android updated its Material Design specs, so I revisited the site to check out what’s new. While looking around the Layout Structure section, I came across a particular image “Flexible toolbar and card toolbar“. So being the inquisitive person I am

    , I went ahead trying to replicate the pattern.

    (more…)

  • Add a Toolbar Elevation on pre Lollipop

    Add a Toolbar Elevation on pre Lollipop

    Being a Material Design lover, I get put off by that default flat Toolbar with no shadow or elevation. It’s alright on Lollipop devices as it gives us a nice shadow by default, but pre Lollipop doesn’t. While that’s too bad, we can take care of that real quick!

    After you’re done with this post, your Toolbars on pre Lollipop will never be plain and boring again!

    (more…)