Profile

Cover photo
Nick Butcher
Works at Google
55,998 followers|6,477,724 views
AboutPostsPhotosYouTubeReviews

Stream

Nick Butcher

Shared publicly  - 
 
Great tip!
 
Change can be confusing. Focus on a specific piece of code before looking at git history. Highlight interesting code > right click > Git > Show History for Selection. #AndroidDev  
2 comments on original post
83
21
Haroon Yousuf's profile photoBasit Parkar's profile photo
Add a comment...

Nick Butcher

Shared publicly  - 
 
This is a nice example of using non-linear motion¹; very few things in the real world move in straight lines and doing so in your UI animations can make things look robotic.

API 21 introduced the ArcMotion² class to help you create these effects.  You can either use it via the <arcMotion> tag in your xml transition definitions or programatically via the getPath method (which can be fed to the updated ObjectAnimator APIs³ that accept a path).

Be judicious with this technique, you want to ensure that motion supports understanding a change in the app and doesn't become distracting.

¹ https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-consistent-choreography

² https://developer.android.com/reference/android/transition/ArcMotion.html

³ https://developer.android.com/reference/android/animation/ObjectAnimator.html#ofFloat(T, android.util.Property<T, java.lang.Float>, android.util.Property<T, java.lang.Float>, android.graphics.Path)
 
Tweaking the character page transition in #RollingOut new version of Play Store. Soon on your devices.
11 comments on original post
68
25
berghie monami's profile photoAntoine Rivière's profile photochong qin's profile photosky light_'s profile photo
11 comments
 
+Nick Butcher​ Great!! Any hope of getting ArcMotion backported to the support library in some form? 
Add a comment...

Nick Butcher

Shared publicly  - 
 
Here's an I/O Spotlight video where I shared what #io15  was like for me and what I'm excited about.

#androiddev   #materialdesign  
32
6
José M. Rodríguez's profile photoRocky Lim's profile photoRussell Wheeler's profile photoRakeeb Rajbhandari's profile photo
3 comments
 
I had no idea he was bald. Lol
Add a comment...

Nick Butcher

Shared publicly  - 
 
Scanning…

I'm really excited to see the new fingerprint API⁰ in Android M so made this little exploration demonstrating how you might prompt for a fingerprint and then show success or failure.  I'm using a couple of neat tricks provided by AnimatedVectorDrawable¹:

● Morph the paths of parts of the fingerprint to create the tick/cross.
● Use a copy of the fingerprint and a moving clip-path to create the scanning effect.

There are quite a few moving parts but you can find the code here:

https://gist.github.com/nickbutcher/29244da0ee9914001e09

#androiddev   #androiddesign  

https://www.youtube.com/watch?v=VOn7VrTRlA4&index=11&list=PLOU2XLYxmsIJDPXCTt5TLDu67271PruEk
¹ https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
230
86
김현준's profile photoBinisha Shrestha's profile photoYahya Bayramoglu's profile photoWonsuc Yoo's profile photo
11 comments
 
technology these days comes in very handy!!! especially in terms of sercurity reasons
Add a comment...

Nick Butcher

Shared publicly  - 
 
A little while ago I shared the below post about providing touch feedback.  A little gem in the m-preview sdk is that View now has a foreground property.  W000t.  Can't wait for pervasive support for this.

#androiddev  
 
Someone asked me today how to add ink ripple¹ touch feedback to an image without having to add additional views to your hierarchy which would hurt performance or memory use.  Here's a couple of approaches: 

1. Wrap the drawable in a RippleDrawable² before setting it on the ImageView:

Drawable image = …
RippleDrawable rippledImage = new RippleDrawable(ColorStateList.valueOf(rippleColor), image, null);
imageView.setImageDrawable(rippledImage);

2. Extend ImageView and add a foreground attribute to it (like FrameLayout has³).  See this example⁴ from +Chris Banes of adding it to a LinearLayout.  If you do this then make sure you pass through the touch co-ordinates so that the ripple starts from the correct point:

   @Override
    public void drawableHotspotChanged(float x, float y) {
        super.drawableHotspotChanged(x, y);
        if (foreground != null) {
            foreground.setHotspot(x, y);
        }
    }

I prefer the second approach as you can declaratively set a ripple drawable as the foreground asset in your layout and not have to worry about adding it once the image loads, somewhat simplifying your code and playing nicely with image loading libs like Picasso.  The first approach can work well in combination with Palette to set a ripple color derived from the image.

#AndroidDev  

¹ http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction
² https://developer.android.com/reference/android/graphics/drawable/RippleDrawable.html
³ https://developer.android.com/reference/android/widget/FrameLayout.html#attr_android:foreground
https://gist.github.com/chrisbanes/9091754
18 comments on original post
82
29
JPARDO GO's profile photoDavide Corradini's profile photoPinky Desai's profile photoSascha Becker's profile photo
3 comments
 
Great! It was needed!
Add a comment...

Nick Butcher

Shared publicly  - 
 
Check out the latest version of the Google I/O app. Both code and design will be open sourced shortly.
Google Developers originally shared to I/O:
 
Download the Google I/O 2015 Android app! #io15  

Following the release of the I/O schedule last week (https://goo.gl/r6tlfc) on the I/O web app (https://goo.gl/xk3NcN), you can now also customize your schedule and plan your I/O experience via the Android app: https://goo.gl/yLE3bF

Feel free to switch back and forth between the I/O web app and the I/O Android app -- your schedule will always sync between the two. To remain even more in sync, you can enable the Google Calendar integration in the Android app settings to see your I/O schedule alongside your personal events, all in one place.  

In addition to the schedule, the I/O’15 Android app includes the agenda, a video library from past I/Os and an overview of the social conversations happening about the conference on both Google+ and Twitter. By indicating if you’ll be attending in-person or remotely, the app shows you only the content that’s relevant to you - this means onsite attendees are offered facilitated pre-event WiFi configuration and can browse the venue map, while the remote experience shows live streamed content (with closed captions and Cast support).  

New this year: inspired by Google Now, the Explore screen aggregates similar content in cards. We hope this will make it even easier for you to find interesting events to add to your schedule.

Every year we build and open source the I/O mobile app with the goal of providing the developer community with a canonical example of a well designed Android app. This year our development applies Android best practices across testing, architecture, and UI, as well as a full implementation of the material design library. More details about the open source to come soon!

The app release to all users on Google Play might take up to 24 hours, so check back in soon if you’re not seeing it yet.
25 comments on original post
67
12
Jonathan Taliaferro's profile photoJPARDO GO's profile photoBrahim HMEDNA's profile photoShashank Gupta's profile photo
22 comments
 
+Nagesh Susarla Yes.
Add a comment...
Have him in circles
55,998 people
Michael Bailey's profile photo
Carissa Svedberg's profile photo
Guangyu Yang's profile photo
San Juan Islands Real Estate's profile photo
David Astill's profile photo
Macrina Garcia's profile photo
Satyesh Kumar Singh's profile photo
Madison Kahler's profile photo
Mike T's profile photo

Nick Butcher

Shared publicly  - 
 
 
While Topeka already showcased animated transitions; we’ve augmented them using the principles of curved motion paths to produce more organic motion.¹

We’ve added² curved motion to two transitions in the app:

● During sign in the avatar now moves along an arc as defined in the theme of QuizActivity.
● When choosing a category, the title now moves along an arc as it transitions to the toolbar. In this case the transitionSet is loaded within onCreate of CategoryActivity.

You can easily see them in the updated apk³.

For more information on curved motion see this post⁴ from +Kirill Grouchnikov and +Nick Butcher talking about an upcoming release of the Play Store.

¹ https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-consistent-choreography
² https://github.com/googlesamples/android-topeka/commit/d36848dca81bbf2a517383d276225615b1da657e 
³ https://github.com/googlesamples/android-topeka/releases/tag/09072015
https://plus.google.com/+NickButcher/posts/Db52F8yMePQ
View original post
22
13
Brahim HMEDNA's profile photoMeghanath Ganji's profile photoSalvador Gómez's profile photoSpencer Riddering's profile photo
8 comments
 
good design.
Add a comment...

Nick Butcher

Shared publicly  - 
51
5
Eduardo Koloma Jr.'s profile photoMalvin Sutanto's profile photoSpencer Riddering's profile photoAnjan Shrestha's profile photo
4 comments
 
cool pictures 
Add a comment...

Nick Butcher

Shared publicly  - 
 
 
More Material Design with Topeka for Android

#Materialdesign is a new system for visual, interaction and motion design. We originally launched the Topeka web app as an Open Source example of material design on the web.

Today, we’re publishing a new material design example: the Android version of Topeka. It demonstrates that the same branding and material design principles can be used to create a consistent experience across platforms.

Learn more on the Android Developers blog: http://goo.gl/ZQpsL4

#AndroidDev  
12 comments on original post
41
9
Eric Hung's profile photoPrashant patel's profile photo
Add a comment...

Nick Butcher

Shared publicly  - 
36
3
Greg Williams's profile photoSpencer Riddering's profile photo
Add a comment...

Nick Butcher

Shared publicly  - 
 
#androiddevstories  

True story bro…
102
7
Jimmy Leonardo's profile photoSebastiano Poggi's profile photogeorge oloo's profile photoAlexander Lent's profile photo
4 comments
 
I've seen every icon now, g+, events, circles, collections, communities, and now photos.
Add a comment...

Nick Butcher

Shared publicly  - 
 
Awesome tool.
 
If you've ever taken a screenshot or a screen video from an Android phone, there's a good chance you've been copying and pasting shell commands. I made a tool that does all this in one single click, even on multiple devices at the same time. 

I actually just made this for my team, but it turned out a lot of other people in the company could use it, so I thought other people might find it useful too. 

You can get it here
https://github.com/mortenjust/androidtool-mac
32 comments on original post
77
21
George Panayi's profile photoDiana Ciocoi's profile photoIrfan Rosandi's profile photoTamilthaaragai Muthukumar's profile photo
 
Windows version? 😭
Add a comment...
People
Have him in circles
55,998 people
Michael Bailey's profile photo
Carissa Svedberg's profile photo
Guangyu Yang's profile photo
San Juan Islands Real Estate's profile photo
David Astill's profile photo
Macrina Garcia's profile photo
Satyesh Kumar Singh's profile photo
Madison Kahler's profile photo
Mike T's profile photo
Work
Employment
  • Google
    Android Developer Advocate, present
Story
Tagline
Android Developer Advocate / Triatha-geek
Introduction
I work at Google helping people to make awesome Android apps.

In my spare time I like to run and occasionally do triathlons.
Basic Information
Gender
Male
Excellent service!
Public - 2 years ago
reviewed 2 years ago
12 reviews
Map
Map
Map