How Simple?

The app only has 2 modes: On and Off.
HoloTorch will always start with the On mode so you can quickly light your way.

*The app is based on Colin McDonough’s torch app code.

The funny thing about this design, is that it’s really very simple to implement (if the ever chose to follow something like this).
There’s nothing insane about it, while it’s so much better than the old version.

The design follows the 16dp/48dp rhytms, and it should be fairly simple to use this design on a Tablet version as well.

Why 48dp?

On average, 48dp translate to a physical size of about 9mm (with some variability). This is comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users will be able to reliably and accurately target them with their fingers.

This snippet basically “screen captures” and draws a certain view and saves it as a Bitmap and is the right way to do this.

Another solution to this is trying to draw everything on Canvas* “manually”, but taking the time to figure out all the bounds and text sizes, and getting the exact positions of things on a canvas sound like a real inconvenience. This makes it the wrong way to do this.

// Create a new bitmap and a new canvas using that bitmap
Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);

// Get LayoutInflater reference
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

// Inflate the View
View layout = inflater.inflate(R.layout.layout_name, null);
layout.setDrawingCacheEnabled(true);

// Supply measurements
layout.measure(MeasureSpec.makeMeasureSpec(canvas.getWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(canvas.getHeight(), MeasureSpec.EXACTLY));

// Apply the measures so the layout would resize before drawing.
layout.layout(0, 0, layout.getMeasuredWidth(), layout.getMeasuredHeight());

// and now the bmp object will actually contain the requested layout
canvas.drawBitmap(layout.getDrawingCache(), 0, 0, new Paint());

And you’re done!

You can download the example APK here, or just Clone the library from Bitbucket or from Github, including the example’s app source code and the library’s source code.

It took me a while to get the code together. The view might still be a little flaky from time to time, and the View’s code is NOT well documented, but the example really shows you how simple it is.

Feel welcome to modify any of the code, fork it and pull it.

Layout XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.fima.cardsui.views.CardUI
        android:id="@+id/cardsview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Activity Class:

// init CardView
mCardView = (CardUI) findViewById(R.id.cardsview);
mCardView.setSwipeable(false);

// add AndroidViews Cards
mCardView.addCard(new MyCard("Get the CardsUI view"));
mCardView.addCardToLastStack(new MyCard("for Android at"));
MyCard androidViewsCard = new MyCard("www.androidviews.net");
androidViewsCard.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				Intent intent = new Intent(Intent.ACTION_VIEW);
				intent.setData(Uri.parse("http://www.androidviews.net/"));
				startActivity(intent);

			}
		});
mCardView.addCardToLastStack(androidViewsCard);

// add one card, and then add another one to the last stack.
mCardView.addCard(new MyCard("2 cards"));
mCardView.addCardToLastStack(new MyCard("2 cards"));

// add one card
mCardView.addCard(new MyCard("1 card"));

// create a stack
CardStack stack = new CardStack();
stack.setTitle("title test");

// add 3 cards to stack
stack.add(new MyCard("3 cards"));
stack.add(new MyCard("3 cards"));
stack.add(new MyCard("3 cards"));

// add stack to cardView
mCardView.addStack(stack);

// draw cards
mCardView.refresh();

After seeing Max Salomon’s WhatsApp Messenger for Android redesign last month on Google+ and Android UI Patterns, I started messing around with the same idea this Saturday, as I was bored out of my mind.
This is my take on what WhatsApp Messenger for Android should look like.

I started with favorite UI pattern right now – the Sliding Menu style and kept everything as sleek as possible. The font I used here was Android’s Roboto font. I’m not entirely sure about the Chat activity and some things are still missing, like the attachment icon in the Chat activity and the pinned header list style in the contacts fragment.

I’d love the feedback! Let me know what you think below!
This is my first mockup, so be gentle…

By the way, When I tried using WhatsApp later on that very evening, it was a real downer to see its dated design.

Even though I already published this icon set on AndroidViews.net, I really want to make sure everyone sees this. I bought this set last week, and completely fell in love with it.

200 icons in different sizes,14 beautiful colors and everything is vector based

200 Android icons

This set includes 200 handcrafted icons in 14 colors, carefully and lovingly designed to enhance your Android application or mobile interface. Following Android 4.0′s guidelines, all icons will work perfectly in all of your Honeycomb, Ice Cream Sandwich & Jelly Bean applications, for only $25.

What’s in the set?

• 200 pixelperfect PNG icons
• 4 sizes (xhdpi, hdpi, mdpi & ldpi)
• 14 colors, including Holo Dark & Light
• Vector sources (SVG, EPS & AI)
• Royalty-free license

A few months ago I was working on a project which required me to build a class that would download an image form the web, decode it, crop it, and show it in a circle – with a transparent background behind it, because it had to sit on top of different layout views.

I was only reminded of that seeing Romain Guy‘s blog post regarding images with rounded corners.

The end goal was to show the image just like an ImageView, only in a circle. This required me to extend a View and override the onDraw method to show it.

The circle part was tricky, so I thought I’d share that piece of code…

protected void onDraw(Canvas canvas){
    super.onDraw(canvas);

    // rest of the code goes here...
}

// init shader
BitmapShader shader;
shader = new BitmapShader(originalBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

// init paint
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);

int circleCenter = width / 2;

// circleCenter is the x or y of the view's center
// radius is the radius in pixels of the cirle to be drawn
// paint contains the shader that will texture the shape

canvas.drawCircle(circleCenter, circleCenter, radus, paint);