Profile cover photo
Profile photo
Mobilevangelist
80 followers -
Android enthusiast, Apple admirer, mobile evangelist, Glass Explorer.
Android enthusiast, Apple admirer, mobile evangelist, Glass Explorer.

80 followers
About
Mobilevangelist's posts

Post has attachment

Post has shared content
Minor bump, but skeptics will latch on.

Post has shared content
Looking forward to the new Nexus devices.  And Marshmallow!
Exclusive: Nexus 5 (2015) revealed - The Nexus 5 (2015), also known as the 2015 LG Nexus or Nexus 5X, has been revealed in a new leaked image, confirming the final design of the next Google smartphone. (This is a preview - click here to read the entire entry.)

Post has shared content

Post has attachment
Huawei, the next Samsung?

Post has shared content

Post has shared content

Post has shared content

Post has attachment
Get $200 off a 2nd Gen Moto X with no contract.

#motorola   #motox   #android   #dealoftheday  

Post has shared content
Brilliant way to dynamically color your assets to save app space and code complexity.  Nice work +Thomas Devaux.

h/t +Taylor Ling 
Android App Tricks: Runtime asset coloring

Soon after I released URL Shortener [0], few people asked me how I implemented certain features in the app. Following +Cyril Mottier's initiative when Capitaine Train [1] was launched, I thought it would be a good idea to humbly contribute to the Android community by sharing some tricks and things I've learned along the way.

Shortening URLs is a boring task. When I started working on URL Shortener, I scratched my head to make the experience visually more appealing. One thing was getting a thumbnail for every URL.

Still, the early version of the Analytics page wasn't great, showing lists of textual stats. My original idea was to match http://goo.gl as much as possible, so I started using charts with the same color palette for the top entries: blue, green, orange, yellow, purple.

I then tried adding icons for top Browsers and Referrers, but quickly realized 5 flavors of each icon would become a pain for multiple reasons:
Code complexity and robustness. That'd have required a bunch of ugly switches trying to find the correct drawable with the correct color. Another solution would have been to generate the resource name at runtime, but that's risky.
App size. It would mean a lot of drawables, x3 for H/X/XXHPI. 
Hard to maintain. What if I want to change one color? Dozens of assets to regenerate.

The "Browsers" card layout is very simple. The chart itself (lighter bars and thin lines) is a custom view, but the left part only contains regular views. Each row is made of:
• An ImageView for the icon background (legend_icon_background) which simulates padding around the real icon.
• An ImageView for the icon (legend_icon), the browser icon itself.
• A TextView with the click count (clicks). It uses an arrow shaped 9-patch that will stretch nicely with text. Because these guys are all in a TableRow, click counts will align vertically.

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center_vertical" >

  <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="40dp" >

    <TextView
      android:id="@id/clicks"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center_vertical"
      android:layout_marginLeft="24dp"
      android:gravity="center_vertical|right"
      android:paddingLeft="15dp"
      android:paddingRight="15dp" />

    <RelativeLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_vertical" >

      <ImageView
        android:id="@id/legend_icon_background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

      <ImageView
        android:id="@id/legend_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
    </RelativeLayout>
  </FrameLayout>

</TableRow>

The trick is to use a white icon for the  legend_icon ImageView and color it at runtime.

First easy step is to determine the drawable resource IDs and color for a given row (Top 1: blue, Top 2: green, etc.). Then, the white drawable is colored with a LightingColorFilter [2]. As documentation states, LightingColorFilter "multiplies the RGB channels by one color, and then adds a second color". If the source drawable is pure white, multiplying by the target color and adding zero will give you a drawable with the exact color you passed!

Drawable coloredDrawable = Utils.getColoredDrawable(browserIcon.getContext(), R.drawable.ic_browser_chrome, SOME_COLOR);
browserIcon.setImageDrawable(coloredDrawable);

...

public static Drawable getColoredDrawable(Context context, int whiteDrawableResId, int targetColor) {
  Drawable drawable = context.getResources().getDrawable(whiteDrawableResId);
  ColorFilter filter = new LightingColorFilter(targetColor, 0);
  drawable.mutate().setColorFilter(filter);
  return drawable;
}

Same is done to the TextView 9-patch background - it's colored and set at runtime. Another benefit: white PNGs are very small in size when they get crunched.

#android #AndroidAppTricks  

[0] https://play.google.com/store/apps/details?id=com.tdevaux.googleurlshortener
[1] https://play.google.com/store/apps/details?id=com.capitainetrain.android
[2] http://developer.android.com/reference/android/graphics/LightingColorFilter.html
Photo
Wait while more posts are being loaded