Sunday, 16 December 2012

Android Studio ListView with Speech Bubble


Android Speech Bubble
Today I'm going to discuss how to make a ListView with speech bubble same as native android message app or some other apps out there. First of all we need to discuss the making of a row layout with speech bubble.

How to make Speech Bubble?

Well that is the most interesting part of the development. I've already posted a blog post about how to make 9 patch image of speech bubble, you can find that post here.

Here we will discuss how to use them in our application. You will copy them into your project in relevant hdpi, ldpi, xhdpi and mdpi folders accordingly. Now we come to the coding part.

We need to make simple ListActivity with ListView. There are lot of tutorials available:
and lot more. You can find customization of the ListView there too. Here I'll discuss the Adapter part of the ListView only.

What is Adapter in Android?

Android documentation says:
"An Adapter object acts as a bridge between an AdapterView and the underlying data for that view. The Adapter provides access to the data items. The Adapter is also responsible for making a View for each item in the data set."

So an adapter is responsible to provide data, view as well as count of rows to AdapterView.

Good to remember: ListView, Gallery, GridView, ExpandableListView, Spinner etc are subclasses of AdapterView. So an adapter made for ListView can be used for other controls too and vice versa, with some minor modification.

We will customize the Adapter for that we need to have an xml layout and a java class extending BaseAdapter.

XML Layout for row

Here is the layout for the row:

In the above layout, we have defined a LinearLayout containing a TextView. We have set its background to one of the image we made as 9 patch (speech_bubble_green.9.png) and now we will use it in Adapter, so that we can use this layout in ListView.

Adapter for the ListView

Now we come to the java part and make an Adapter, here's how to customize the getView() method of the adapter to implement some sender and receiver side messages representation:

In the above code, we are first checking if the current message is ours ie. isMine() then we are aligning it to the right side and setting green background to it, and if its not ours then we are aligning the TextView to left side and setting orange background to it, that's all, we set this adapter to a ListView as traditional way and get a nice looking SMS messages ListView for android app.

Where to go now?  (Gimme Code)
Well you can find the full source code here. I've included the photoshop psd for the bubbles in relavent hdpi, ldpi, xhdpi and mdpi, if anyone want to edit them and use them for their project.

Suggestion and comments are welcome :)

Thursday, 8 November 2012

Android Studio How to use 9 patch png?

2nd blog post after almost 1.5 year :)

Today I'm going to discuss about 9 patch image and how to use 9 patch png in android apps.

What is 9 patch?

9 patch is technique used to scale the image in such a way that the 4 corners remain unscaled, but the four edges are scaled in one axis and the middle is scaled in both axis. So the graphical representation of this scenario will be something like this:
Icon when divided into 9  patch
Android 9 patch image icon
Simple Icon file

The image at left side when divided into 9 patch will look like the image at the right side. Now the interesting part, the four corners of the image will be remain unscaled and the edges will be scaled in single axis, which may be X or Y. and the center of the 9 patch image will be scaled in both axis. Now we include an image which will represent the parts of image unscaled, scaled into Y axis and scaled into Y and scaled into both direction with color differentiation. Here it is.
9 patch parts represented with colors.

In the above image the bluish area will be scaled in X axis and the yellowish area will be scaled in Y axis and the greenish area will be scaled in both X and Y axis. So when the image will be converted into 9 patch png, it will be scaled by Android framework automatically, Here is graphical representation of how the above image will be scaled.
9 patch image scaled in both X and Y directions.

So we learned what is 9 patch, the next move is how to roll with it?

Designing images

First you will make your 9 patch image, you yourself have to decide about width and height of the image. Keep in mind while working with Android, you have to provide different screen sizes' graphics like, xhdpi, hdpi, mdpi, ldpi (many more). Here are some links to how to design graphics.
  1. Supporting Multiple Screen
  2. Icon Design Guideline
  3. HotVerySpicy's very helpful post here.
Android have provided 9 patch image editor to edit the png image and convert it to 9 patch image, Android's documentation about 9 patch can be found here.

First we will take our png image, which looks like this.

For the convenience, I've made 4 directories named, drawable-mdpi, drawable-hdpi, drawable-ldpi and had copied my PSD design file into relevant folder and scaled them according to rules discussed in Android's documentation. Now I got all the images designed, and it is time to convert them to PNG.

draw9patch Editor

Now we play with 9 patch editor, go to your android-sdk home > tools > draw9patch. if you are working on Mac, you can start it with double click, on Linux it can be run as shell script and Windows users can also run it by double click the draw9patch.bat (the extension can be .jar too, which can be run by Java Runtime Environment JRE). Now drag your png image file into the window and your can follow the old school way by going through File > Open.

Default screen of draw9patch
Simple? eh? 
Now we are going to add a png file to edit it.

Consider the preview portion, first preview (circled with blue line) is scaled in Y axis and second (circled with blue line) is scaled into X axis and third one is scaled into both axis. You can see the way these images are now scaled is not looking good, and will cause weired results, Lets make it 9 patch. draw9patch automatically add 1 px to every side of the image, so that we can draw patch. 3 things to keep in mind while drawing patches.
  1. Top and Left side drawings determine the patches (Area from where to scale)
  2. Bottom and Right side drawings determine the contents area. (padding or the area which will be occupied by contents)
  3. You draw path with left click (hold) and drag,  and remove path with holding shift and click and drag or right click and drag.

Drawing Patches:

Here is the screenshot of patch drawings:
By default the "Show Patches" checkbox is un-selected, so you can't see the light green bars showing the area for both side patches, unless you check the "Show Patches".

Drawing content area

By default the whole image's area is considered content area, but we need to draw that too otherwise we have to manually set the padding of the View which is using this image as background. Here is how to do it:

By default content preview is also not shown, you have to check the "Show Content" check box. Adjust the padding of content inside the image according to your desire.


Now save it in your drawable folder and use it in your android project.

That's all. Now its your turn to roll with it. ;)

In the next post we have discussed, how to use these 9 patch speech bubble in a ListView for android.