Profile

Cover photo
v bobbywink
Lived in 深圳
53 followers|36,394 views
AboutPostsPhotosVideosReviews

Stream

v bobbywink

Shared publicly  - 
 
Falcon Pro 3 is the much anticipated rewrite of one of the most popular Twitter apps in Android history. In just 3 weeks, Joaquim Vergès rewrote the app from scratch, and the new version generated 60,000 installs in 20 days with no advertising. In this talk, Joaquim shared what he learned about some of the newest libraries available on Android, rendering at 60fps, making sure people pay for your app, seeding your beta, and much more.
1
Add a comment...

v bobbywink

Shared publicly  - 
 
 
把xx关进手机(续)
哈哈 乱入一张^_^
 ·  Translate
1
Add a comment...

v bobbywink

Shared publicly  - 
 
 
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
1
Add a comment...

v bobbywink

Shared publicly  - 
 
Cann't stand left
1
Add a comment...

v bobbywink

Shared publicly  - 
 
 
Here are the slides from my talk about ActionBarCompat to the +GDG Paris Android User Group

#AndroidDev  
1
Add a comment...

v bobbywink

Shared publicly  - 
 
 
Daily Workout
#workout  
1
Add a comment...
Have him in circles
53 people
freya Long's profile photo
Daniel Enoch's profile photo
BIL's profile photo
ivan andersson's profile photo
Daniel Joshoar's profile photo
劉老大's profile photo
Aaron Devocelle's profile photo
Tahir B's profile photo
Yongkuo Liang's profile photo

v bobbywink

Shared publicly  - 
 
九寨沟
 ·  Translate
1
Add a comment...

v bobbywink

Shared publicly  - 
 
 
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!

http://www.pushing-pixels.org/2014/04/10/avatars-avatars-everywhere.html
1
Add a comment...

v bobbywink

Shared publicly  - 
 
 
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.

DrawInsetsFrameLayout.java: https://gist.github.com/romannurik/8919163

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) {
        super.onDraw(canvas);
        // draw top
        mTempRect.set(0, 0, getWidth(), mInsets.top);
        mInsetBackground.setBounds(mTempRect);
        mInsetBackground.draw(canvas);
       
        // 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:

    <FrameLayout>
        <ListView … /> <!-- or whatever else is your content -->
        <your.package.DrawInsetsFrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            yourapp:insetBackground="#9000" />
    </FrameLayout>

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: http://goo.gl/skVYSL
[2] Translucent Theme in Android by +Matt Gaunt: http://goo.gl/14xnsj
[3] fitSystemWindows: http://goo.gl/S4RsR7
1
Add a comment...

v bobbywink

Shared publicly  - 
 
 
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 - http://goo.gl/5Yw6mU
1
Add a comment...

v bobbywink

Shared publicly  - 
1
Add a comment...
People
Have him in circles
53 people
freya Long's profile photo
Daniel Enoch's profile photo
BIL's profile photo
ivan andersson's profile photo
Daniel Joshoar's profile photo
劉老大's profile photo
Aaron Devocelle's profile photo
Tahir B's profile photo
Yongkuo Liang's profile photo
Work
Occupation
android
Basic Information
Gender
Male
Story
Tagline
安卓
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Previously
深圳
Links
Other profiles
Atmosphere: Very GoodDecor: Very GoodService: Good
Public - 3 years ago
reviewed 3 years ago
1 review
Map
Map
Map