More Google Material resources

After last nights SWUX meetup I figured I’d share some more links on Google’s Material design that I’ve found since the last meetup I attended.

Articles:googledesign

  • An exploration in Material Design by Arthur Bodolec @ Feed.ly  – good information about the Z order and a nicely polished example.
  • We Are Living In A Material World And I Am A Material Girl – Trello – Great article that shows before and after material, and most interesting thing for me was how Trello got rid of the navigation drawer.
  • Instagram with Material Design concept by Miroslaw Stanek – some great code samples.

Examples of Material apps – there are several of these kind of sights two of the best are:

  • pttrns.com – has a new beta section showing material/lollipop Android apps. What’s great is you can filter by the type of screen you’re looking for.
  • materialup - showcases material apps and websites but also material concepts and animations

Tools

  • Material Palette, pick two of the material colours and this site will generate palette of 8 colours ready to drop in to your app/project
  • Keyline Pushing – Android  app – when running draws an keyline grid on top of apps, useful for designer/developers to validate an app is ahearence to material’s metrics and keyline spec

APK expansion file download error

Yesterday, I spend a morning trying to figure out why a APK expansion file wasn’t downloading see screenshot.  This problem was specifically with and Android app/game created in the corona SDK but I guess could happen to standard Android apps. After reviewing Corona labs docs are here and various forum posts it turned out to be a simple fix. android_expansion_file

The expansion file had not successfully uploaded!! :( 

So triple check the expansion uploaded ok in the Google Play console! We had it fail 3 times for 2 different versions without any error messages.

Check the APK file details you should see the file size includes the expansion file size and see the filename of expansion file.

Official Google play apk expansion docs: https://developer.android.com/google/play/expansion-files.html

 

Top takeaways from Droidcon 2014 UK

Here’s my top takeaways from this year’s Droidcon London.Lollipop Forest-578-80

  • Material design
    • Checklist
    • Papercraft (Chris Banes / Nick Butcher) slides, video
    • The new AppCompat includes the transparent assets (works Pre-L) so we can set an apps colour scheme using the appPrimaryColor and  appAccentColor. Eliminates the need for holocolors.com and adding all those extra assets, Yay!
  • Testing support library – *coming soon Q4 2014*  video
  • Continuous Integration is hot topic with several new services mentioned when talking to people.
    • Travis CI seems to be the popular CI server/solution for open source
    • Green House CI had a stand at Droidcon and having experimented with their CI solution today I’m looking forward to try on live project.

There was also a focus on Custom UI, Animation and Gradle. Specifically with regards to Gradle all the cool kids are writing their own gradle plugins rather than littering build files with custom/boilerplate logic.

Android libraries of October

This is a couple of libraries that I’ve come across mainly from Android-Arsenal.com and Androiddevweekly.net both essential resources for keeping up to date with all 10’s of libs released each week.

Tip: If you’re using Slack/Hipchat hook up these rss feeds (aa-rss, adw) to your Android team channel/group

Android UI

https://github.com/markushi/android-uiandroid-ui-example-revealandroid-ui-example-action

As you probably saw from my previous post I’m really likely the new material design / Android L look at the moment and keen to bring some of these animations in to my apps.

This library includes 2 views :

  • ActionView – ideal for your home icon when using a nav/side menu.
  • RevealColorView – brings some of that gorgeous ripple style animation to pre L Android. I love this, I just can’t find a legitimate reason for using it the apps I’m working on at the moment.

Super Toasts

https://github.com/JohnPersano/SuperToasts default-super-toast

I’ve previously used Crouton and App-msg both good libraries, but starting new projects from now I’ll use Super Toasts.Like the Crouton and App-msg creating custom styles is easy, but where Super Toasts kills it is the option for having Card Toasts notifications appear at the top of the activity and push other content down. This was ideal of “offline” notification I needed to be permanently active on each screen while connection was lost. Also creating things like undo bar or retry toast notifications is simple.

 

AEScrypt-Android*

https://github.com/scottyab/AESCrypt-Android

Over last weekend I created and released a simple API to perform AES encryption on Android with no dependencies. This is the Android counterpart to the AESCrypt library Ruby and AESCrypt-ObjC created by Gurpartap Singh. I created this mainly due to pain I had writing some code to be compatible with AESCrypt and hoped to save others from that.

*disclaimer : I wrote this :)

 

Material Resources

Personally I’m really excited about the new design language/framework/guide from Google to be all encompassing across web, mobile, tablet, TV. I talked recently at a local meetup about some of the cool things in material design followed by a good debate about what material design is about. The main place to head to is google.com/design materialdesign-goals-landingimage_large_mdpi

Here’s some other resources:

Visual:

  • Short video intro to showcasing some of the material visual elements and interactions
  • Collection of material design elements selected by Roman Nurik on Dribbble
  • materialcolors
  • Android UX course on udacity

Implementation help

While we are on the subject of design here’s a link to Designer cheat sheet for Android it’s very much based on holo but I’m sure as L preview is released these tips will be updated.

the Nexus 10 a handy dev device

Nexus 10 can be one of those handy test devcies apart from being a descent 10″ tablet even if it’s 18+months old. One handy thing about the the it’s high res is that you simulate lower display size and/or density.  This assumes you have the Android SDK installed and adb in PATH.nexus 10
Plug in device to usb and turn off screen and try these commands to change/override both the screen res and the density:

adb shell am display-size 640×800
adb shell am display-density 480

 //if you want to reset to normal just type
adb shell am display-density reset

From Android 4.3 this command moved to the window manager (wm)
adb shell wm size 640×800
adb shell wm density 480

Let me know how you get on, you can of course use on other devices.
Credit for flagging these commands should go to Adam Powell based on his G+ post

ADiA-vidoeos

Over the weekend I was catching up on Android Design in Action videos / app and thought I’d share a couple of my favourite ones as I often have discussions about both design/brand consistency and app start up screens. Each video is ~30mins but if you can’t spare that then hit up the links to g+ posts below you’ll see links to slides.

adia_sm

UX anti patterns

https://plus.google.com/113735310430199015092/posts/6PwgQPMvK1p

Design consistency and branding
https://plus.google.com/113735310430199015092/posts/X1GT31CLFpq

Onboarding/ app start up
https://plus.google.com/113735310430199015092/posts/TC9vpt1fzJt

Happy viewing…

Useful Android cmds

These are a couple of command line commands I have never managed to commit to memory so I figured I’d blog them for reference.

Install apk on multiple connected devices
$ adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X install pathto/myapp-release.apk

Port forwarding device
adb forward tcp:8000 tcp:8000

Generate an Ant build.xml
$ android update project -p .

Bug logging: use P.E.A.R.S

This is bug logging acronym that I’ve used previously and works really well (from a developers perspective), I propose you do not accept any defects that do not follows pears (i.e those that don’t have the following information.)
  • Priority – indicator to the importance of the issue, 1=showstopper, 5=Meh? if timepears
  • Expected result – clear concise explanation of what you expected to happen, if possible reference requirement id
  • Actual result – What actually happened?
  • Reproduce (steps to Reproduce) numbered steps to Reproduce to error/issue. You cannot be too detailed in this section.
  • System – Os version, device mobile/version, version of app, Browser version, etc.

This came up at  a talk at Droidcon 2011, but cannot for the life of me remember who it was. It’s a great and simple idea thanks! If it was you let me know so I can credit you.