How to create layout for piano

Question

I am working on piano app and I am facing some problems with the layout creation. I want to create a layout like below:

But I am able to create only this

Answer 1

I would suggest drawing these white and black keys on your own. Use the View class, override draw() method and go for it. Of course you can try to use RelativeLayout, but later you'll have more problems with that (like multiple touches and slides detection).

class Piano extends View {
    public Piano(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    Bitmap whiteKey, blackKey;
    Paint paint = new Paint();

    public void draw(Canvas canvas) {
        if (whiteKey == null) {
            whiteKey = BitmapFactory.decodeResource(getResources(), R.drawable.whiteKey);
        }
        if (blackKey == null) {
            blackKey = BitmapFactory.decodeResource(getResources(), R.drawable.blackKey);
        }

        int keys = 10;

        // draw white keys
        for (int i = 0; i < keys; i++) {
            canvas.drawBitmap(whiteKey, i * whiteKey.getWidth(), 0, paint);
        }
        // draw black keys
        for (int i = 0; i < keys; i++) {
            if (i != 3 && i != 7) {
                canvas.drawBitmap(blackKey, i * blackKey.getWidth()+blackKey.getWidth()*0.5f, 0, paint);
            }
        }
    }
};

Answer 2

you may get what you want by using layout containers, with this it is possible to overlay buttons and lables