Today I decided to dedicate a few minutes of my time to create* a simple Holo-styled app.
The result is HoloTorch, a sleek Holo style designed Android flashlight/torch app.
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.
I really don’t have a lot to say about this. I basically hate what the current ynet Android app looks like, and this is what happened over the course of a couple of hours.
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.
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.
I needed this code for a project, where I needed to capture a certain list item I was rendering into a Bitmap and upload it using Facebook’s SDK.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 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!
Google’s Now popular Cards UI has everyone in the Android design community excited, including myself.
I developed this for a project I’m working on, and decided to make it abstract and upload it as a library.
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
// 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(); |
If your’e reading this post, then you probably already know how bad WhatsApp looks on Android (as of December 23rd, 2012).
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
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…
|
1 2 3 4 5 |
protected void onDraw(Canvas canvas){ super.onDraw(canvas); // rest of the code goes here... } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 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); |
Great Library :)
Is there any way we can get the index...12:49 by Luke
Hi,
I have a noob question: how can I control the height...12:49 by Sergio
Is there a way to set the OnLongClickListener for a card?...12:49 by RogerFigured it out. Implement Card.OnCardSwiped. For each card...12:49 by RogerWhen using setSwipeable(true), how do I handle the swipe...12:49 by Roger
