Profile cover photo
Profile photo
liam li


Post has attachment

Post has attachment
Add a comment...

Post has shared content
Originally shared by ****
哈哈 乱入一张^_^
14 Photos - View album
Add a comment...

Post has shared content
With a bit more emphasis on content recommended by your friends, we wanted to make people avatars in Play Store more visually pleasing. In our previous release the avatars were round with a thin translucent grey outline, and in our latest release the visuals are a bit more polished. There's a white ring surrounding the avatar, and an offset drop shadow, with both of these scaling to match the overall size of the avatar. Let's talk more about the specifics.

The avatars themselves are fetched from the network, which gives us a square - and sometimes rectangular - source image. Our first step is to create a normalized square image based on the target dimensions on the screen. That normalized image preserves the source aspect ratio, upscaling the source if necessary to fill at least one dimension edge-to-edge and filling the second dimension with white pixels (taking care of non-square sources). This is done with Canvas.drawBitmap that takes a source and destination rectangles as the parameters.

The next step is to compute the pixel size of the ring outline and the drop shadow. The ring outline starts at 1dip and is capped at 4dips, while the drop shadow starts at 2dips and is capped at 3dips. The actual size is determined based on the avatar size, setting the cap at 96x96dips (based on our current design metrics). This results in visuals that scale with the avatar size (seen below), while still capping the ring and drop shadow to not be too big for larger avatars.

Now it's time to take a look at the avatar layers. We have the avatar itself cropped to a circular shape, the ring outline and the drop shadow. In our first implementation pass we used Paint.setShadowLayer to combine the last two together into a single Canvas operation. We first painted the white ring, and then the avatar itself (since the drop shadow extends to both sides of the path, and we didn't want the shadow to be visible on top of the "inner" image). However, the runtime performance of shadow layer was not very satisfactory. It took about 2.5ms to draw a single outline, and when we had a few avatars on the screen, the numbers started adding up.

Instead, we're doing three separate layers.

First, we draw the drop shadow as Canvas.drawOval with a single translucent grey color. We use Paint.setStrokeWidth to set the interpolated drop shadow size, and Paint.setColor to set the interpolated drop shadow color (for larger shadows we use more translucency to keep the same overall shadow "weight" across different avatar sizes).

Second, we draw the avatar itself. We create a BitmapShader with the normalized square avatar source and TileMode.CLAMP and set it with Paint.setShader. Using that Paint object on a Canvas.drawRoundRect call results in the circular crop of the source image. There's some extra bookkeeping to make sure that we're scaling down the normalized source to make the white ring outline external to the image, not losing the few top/bottom/left/right pixels. This can be done with a combination Canvas.scale and Canvas.translate operations to keep the scaled-down avatar centered on canvas.

Third, we draw the ring outline as Canvas.drawOval with opaque white color. We use Paint.setStrokeWidth to set the interpolated ring outline size.

There's a bunch of small objects used for the custom drawing operations, usually involving a mix of Paint and Rect ones. It's recommended to create them once at the class level, initializing as much of the state as you can in your constructor. Then, during the actual transformation / draw operations that can happen multiple times during the layout / render passes, only set those fields that are dynamic (size / color). This way you won't be creating transient objects which are discarded after they're used - saving yourself from unexpected GC pauses in the middle of your rendering. Also try to use Canvas operations (transforms, scaling) instead of creating intermediate Bitmap objects. And measure every step to make sure that you're not using operations that are too expensive.

Happy pixel pushing!
Add a comment...

Post has shared content
Today on Android Design in Action, +Adam Koch, +Nick Butcher and I ran through a few tips on presenting images such as photos and thumbnails in your apps:

1) Center-cropping and dealing with different target aspect ratios
2) Decorating images with masks and subtle borders
3) Showing text/UI overlays and using appropriate background protection
4) Going full bleed, or using as much of the device screen as possible as the image canvas
5) Providing correct touch feedback for images
6) Guiding the user's focus via blurring, dimming, grayscaling
7) Smoothing out image loading using rich placeholders and transitions
8) Allowing users to enjoy photos full-screen, along with full-screen transitions
9) Bonus: Offering the right gestures for interactive graphs/charts

As always the recording is up on YouTube here: Android Design in Action: Images

#AndroidDesign #ADiA
Android Design in Action: Images
25 Photos - View album
Add a comment...

Post has shared content
Today’s #AndroidDev and #AndroidDesign #Protip from +Roman Nurik is about adding background protection for system UI chrome when using KitKat’s translucent decor flags.

Lots of developers are starting to explore the new “translucent system UI styling” feature we’ve added in Android 4.4 KitKat [1][2], and that’s great! The feature makes images and other content within your app feel even more immersive by letting you draw behind the status and navigation bars. It also automatically adds a gradient between your activity layout and the status and navigation bar contents, providing some basic background protection to ensure that system UI elements are legible.

However, sometimes the automatic gradient background isn’t sufficient—even after it's applied, content still interferes a bit too much with the all-important system bars. In those cases, you can draw additional background protection (e.g. semitransparent black rectangles) using a custom view (or layout) that overrides the fitSystemWindows [3] method.

You can find sample code of this in the gist below, and some screenshots in the pictures attached to this post.

The meat of the Java code is in fitSystemWindows and onDraw. Most of the other code deals with providing additional callbacks and handling custom attributes (like yourapp:insetBackground="#9000").

    protected boolean fitSystemWindows(Rect insets) {
        mInsets = new Rect(insets);   // store insets
        postInvalidateOnAnimation();   // redraw
        return true;   // consume insets

    protected void onDraw(Canvas canvas) {
        // draw top
        mTempRect.set(0, 0, getWidth(),;
        // draw bottom, left, and right

To use this layout class:

1. Set your activity’s theme to one that turns on the translucent window decor (set windowTranslucentStatus and windowTranslucentNavigation to true). You may also want to set windowActionBarOverlay to true and provide an action bar style that sets sets the action bar background to transparent (since DrawInsetsFrameLayout will draw beneath overlay action bars as well).

2. Set your activity’s layout to something like this:

        <ListView … /> <!-- or whatever else is your content -->
            yourapp:insetBackground="#9000" />

And that's it; now you'll have some additional protection to ensure your overlay action bar and system bars are legible, yet content still extends to the very edges of the screen, delivering a more immersive feel.

That's all for today's protip; let us know in the comments if you've got follow-up tips or questions!

[1] New ways to build beautiful apps:
[2] Translucent Theme in Android by +Matt Gaunt:
[3] fitSystemWindows:
Animated Photo
DrawInsetsFrameLayout Protip
2 Photos - View album
Add a comment...

Post has shared content
United Android Mockup & Design Tool (Free)

A mockup tool for concepts and mockup designs. It includes tons of different styles from various different Google Apps as well as the new version of Android - 4.4 Kitkat. Every single thing is editable - even the statusbar icons like wifi and network. Elements are either Smart layers or resizable vector shapes.

I hope this “tool” is useful for you, it certainly is to me when I’m planning and designing applications. Also, this is not supposed to have all holo designs and styles in it, there’s already a psd tool for that, I’m just making and collecting styles google uses in their applications and some visual changes made in android 4.4 kitkat

Everything is made pixel perfect and in correct sizes based on screenshots. Everything is also in nexus 5 size (1080 x 1920). 

Download -
Add a comment...

Post has shared content
Add a comment...

Post has shared content
Add a comment...

Post has shared content
Here are the slides from my talk about ActionBarCompat to the +GDG Paris Android User Group

28 Photos - View album
Add a comment...
Wait while more posts are being loaded