Google Android comes with many view widgets like Lists, Grids, Tabs and so on, but sometimes, you need your own Custom View. Using an example of a view that shows a list of images next to each other, here’s the steps to follow to start you off with your Custom View…
(Apologies for the poor layout of the code, it seems that I need to tweak the theme. This is the first time I am using the code tag and it’s not looking great 
)
1. Create a class that extends View. In our example, let’s call it CustomView.
2. Create your constructor as below (this is the constructor to use if you load your View via xml).
public CustomView(Context context, AttributeSet attrs){
super(context, attrs);
}
3. Do you need any variables to help you with drawing the view? Coordinates are commonly used, a Paint object maybe etc Create your variables.
4. Will your variables change with user interaction? If yes, create a method to update them, as per the example below.
public void initialiseImages(int[] images, int topLeftX, int topLeftY, int imageWidth, int imageHeight, int viewX, int viewY){
mImage = images;
dX = imageWidth;
mX = topLeftX+viewX;
dY = imageHeight;
mY = topLeftY+viewY;
mXInitial = mX;
invalidate();
}
5. Notice “invalidate()” at the end? This calls the onDraw() method, so every time you update the variables, your view redraws itself.
6. Override the onDraw() method, the place where you actually draw things, as per the example below.
@Override
protected void onDraw(Canvas canvas) {
int i = 0;
while (i < mImages.length){
mRect = new RectF (mX, mY, mX+dX, mY+dY);
mCanvas.drawBitmap(BitmapFactory.decodeResource(this.getResources(),
mImages[i]), null, mRect, null);
mX = mX + dX;
i += 1;
}
mX = mXInitial;
}
7. Add your view to your xml layout file, as per example below
<view class="your.package.CustomView"
android:id="@+id/cubes"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:gravity="center"
android:layout_below="@id/header" />
8. This should display your view. Now, explore android.view.View to find out more about all the extra stuff you can use to improve your custom view.
9. The full java class file of the example looks like this
package your.package;
import android.content.Context;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
public class CustomView extends View {
private int[] mImages;
private int mX;
private int dX;
private int mY;
private int dY;
private int mXInitial;
private RectF mRect;
public CustomView(Context context, AttributeSet attrs){
super(context, attrs);
}
public void initialiseImages(int[] images, int topLeftX, int topLeftY, int imageWidth, int imageHeight, int viewX, int viewY){
mImage = images;
dX = imageWidth;
mX = topLeftX+viewX;
dY = imageHeight;
mY = topLeftY+viewY;
mXInitial = mX;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
int i = 0;
while (i < mImages.length){
mRect = new RectF (mX, mY, mX+dX, mY+dY);
mCanvas.drawBitmap(BitmapFactory.decodeResource(this.getResources(),
mImages[i]), null, mRect, null);
mX = mX + dX;
i += 1;
}
mX = mXInitial;
}
}
i tried to do this. but what to do except the images i have some layout views to be displayed ?
Comment by mynameisanthony — July 17, 2010 @ 12:52 pm