Android Design. Where to start?

over 5 years ago from Alex Vanderzon, UI & UX Designer

  • Marc EdwardsMarc Edwards, over 5 years ago (edited over 5 years ago )

    Which aspects are you most worried about? Do you have an Android device you’re spending a lot of time using?

    There’s definitely some platform differences, and more pixel densities to target, but it’s not that different to designing for iOS.

    2 points
    • Afnizar Nur Ghifari, over 5 years ago

      Your words will not help, maybe you could give a better answer for someone who is learning to design on Android?

      0 points
      • Marc EdwardsMarc Edwards, over 5 years ago (edited over 5 years ago )

        Sure can.

        Platform conventions

        I’d get as familiar as possible with Google’s new Material Design, as it’s going to form the future of Android.

        google.com/design/spec

        polymer-project.org

        I’d also try to get access to one of Google’s Nexus devices, and run the Android L beta. This should give you a feel for platform conventions, workflows and best practices. A big part of designing for a platform is following existing patterns, or at least knowing when to follow and when to break them. The only way to do that is to have a lot of experience using a platform.

        9 patch

        Android’s 9 patch images work a little differently to how you’d normally create stretchable images for iOS or web, so it’s worth spending the time to understand them — chances are you’ll end up needing to create lots of 9 patch images.

        developer.android.com/tools/help/draw9patch

        Scales

        From a technical standpoint, Android is a bit different to iOS. iOS only has two different pixel densities to deal with — 1× and 2× (@2x), but Android typically has 3 or 4 (hdpi, xhdpi, xxhdpi, xxxhdpi).

        Google has a document on the topic that’s worth reading a couple of times, just to make sure you’re on top of things.

        Android: Supporting Multiple Screens

        The Android pixel densities do relate to each other. If you start with hdpi (and I do recommend starting with the lowest res you want to design for), then the scales are:

        • hdpi (100%)
        • xhdpi (150%)
        • xxhdpi (200%)
        • xxxhdpi (300%)

        This means you can create everything for hdpi using vectors and generated effects, then double the resolution and have perfect artwork for xxhdpi. The 150% scale of xhdpi is a bit of a pain, but once you’ve created that, you can double again to get the xxxhdpi artwork. I’ve written more about my process here: My App Design workflow

        I hope that helps.

        Edit: Emphasis added to pixel density section.

        21 points
        • Salva FerrandoSalva Ferrando, over 5 years ago

          On your workflow article you say that you start your android designs at mdpi (For an Android app, that’s mdpi) and now you suggest to start with hdpi. That means we shouldn't take care anymore of mdpi? Because how fast android devices screen are growing?

          0 points
          • Marc EdwardsMarc Edwards, over 5 years ago

            On your workflow article you say that you start your android designs at mdpi (For an Android app, that’s mdpi) and now you suggest to start with hdpi.

            Well spotted, and sorry about the confusion. The article is a bit older, and I'm not sure how valuable it is to include mdpi assets any more.

            That means we shouldn't take care anymore of mdpi?

            mdpi is for devices with a ~160ppi display density. So, similar to the 2007 iPhone. It depends on your userbase, but I wouldn't bother for most modern apps. It really does depend on who you're targeting, and how your want to support older devices.

            It's also worth noting that Android layout is done using dp units (density-independent pixel), which maps to mdpi.

            You don't really need to support xxxhdpi assets yet, but it depends how much you want to future-proof your current work.

            Who knows what will happen, but I'd think xxxhdpi is the end of the road for display densities for the foreseeable future.

            1 point
        • Julie MurphyJulie Murphy, over 5 years ago

          Wow this is a pretty complete answer. I'm going to pass this along, thanks. :)

          1 point
        • Paul @StammyPaul @Stammy, over 5 years ago (edited over 5 years ago )

          One clarification:

          • ldpi = 75%
          • mdpi = 100%
          • hdpi = 150%
          • xhdpi = 200%
          • xxhdpi = 300%

          xxxhdpi is 4x and only really used for launcher assets that can scale

          1 point
          • Marc EdwardsMarc Edwards, over 5 years ago

            Yep, thanks for the additional info!

            I've edited my post to include some emphasis — I was talking about scales, assuming you start with hdpi.

            For everyone reading along: The scales Stammy posted are how Google officially documents them. The scales I posted assumed you start with hdpi as your base.

            1 point
    • Alex VanderzonAlex Vanderzon, over 5 years ago

      I have just purchased a Nexus 5 to get acquainted with the OS. I have no experience using android. Pixel density stuff worries me a fair bit. Would love to pick your brain about how to manage pixel densities when you have a free moment.

      Cheers

      0 points