Android: Draw a canvas without obscuring row of buttons

My problem is probably simple - there are many apps out there that accomplish what I am trying to do.

I have a Relative Layout with a row of buttons and then beneath this I want to draw on a canvas.

My problem is that Canvas draws over the buttons or instead of the buttons so all I end up with is a shape.

This is my code:

    package com.android.phil.graphtoggle;

    import android.app.Activity;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.drawable.ShapeDrawable;
    import android.graphics.drawable.shapes.OvalShape;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageButton;

    public class MainActivity extends Activity 
    {
        public int graph_toggle = 0;
        public int data_toggle=0;
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) 
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            final ImageButton graph_toggle_button = (ImageButton) findViewById(R.id.graph_toggle);
            final ImageButton graph_settings_button = (ImageButton) findViewById(R.id.graph_type);
            final ImageButton data_toggle_button = (ImageButton) findViewById(R.id.data_toggle);

            CustomDrawableView mCustomDrawableView;

            mCustomDrawableView = new CustomDrawableView(this);
            setContentView(mCustomDrawableView);

            graph_toggle_button.setOnClickListener(new View.OnClickListener() 
            {
                public void onClick(View arg0) 
                {
                    if (graph_toggle==2)
                    {
                        graph_toggle=0;
                    }
                    else
                    {
          开发者_JAVA百科              graph_toggle++;
                    }

                    if (graph_toggle==0)
                    {
                        graph_settings_button.setImageResource(R.drawable.close);
                    }
                    if (graph_toggle==1)
                    {
                        graph_settings_button.setImageResource(R.drawable.ohlc_bars);
                    }
                    if(graph_toggle==2)
                    {
                        graph_settings_button.setImageResource(R.drawable.candles);
                    }               
                }         
            });
            data_toggle_button.setOnClickListener(new View.OnClickListener() 
            {
                public void onClick(View arg0) 
                {
                    if (data_toggle==2)
                    {
                        data_toggle=0;
                    }
                    else
                    {
                        data_toggle++;
                    }

                    if (data_toggle==0)
                    {
                        data_toggle_button.setImageResource(R.drawable.ohlc_bars_daily);
                    }
                    if (data_toggle==1)
                    {
                        data_toggle_button.setImageResource(R.drawable.ohlc_bars_weekly);
                    }
                    if(data_toggle==2)
                    {
                        data_toggle_button.setImageResource(R.drawable.ohlc_bars_monthly);
                    }               
                }         
            });
        }
        public class CustomDrawableView extends View 
        {
            private ShapeDrawable mDrawable;

            public CustomDrawableView(Context context) 
            {
                super(context);

                int x = 10;
                int y = 100;
                int width = 300;
                int height = 50;

                mDrawable = new ShapeDrawable(new OvalShape());
                mDrawable.getPaint().setColor(0xff74AC23);
                mDrawable.setBounds(x, y, x + width, y + height);  
           }

            protected void onDraw(Canvas canvas)
            {
                    mDrawable.draw(canvas);
            }
        }
    }

This is my xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
android:layout_width="fill_parent" 
android:id="@+id/relativeLayout1" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent">
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/graph_toggle" 
    android:src="@drawable/graph_toggle" 
    android:layout_alignParentLeft="true"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip"  
    android:layout_width="40dip"  
    android:id="@+id/graph_type" 
    android:src="@drawable/close" 
    android:layout_toRightOf="@+id/graph_toggle"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/graph_type"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle1" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/data_toggle"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle2" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/data_toggle1"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle3" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/data_toggle2"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle4" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/data_toggle3"
    ></ImageButton>
</RelativeLayout>

You're substituting your whole xml layout with your custom view when you call:

setContentView(mCustomDrawableView);

You should rather add your custom view to the layout, something like:

RelativeLayout mainLayout = (RelativeLayout)findViewById(R.id.relativeLayout1);

RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(/*up to you*/);
// add here other layout params rules to make your
// custom view stay below the buttons

mCustomDrawableView.setLayoutParams(lp);
mainLayout.addView(mCustomDrawableView);

However you should also consider adding to your custom view this kind of constructor:

public CustomDrawableView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // add other init stuff
}

so that you can use your custom view into the xml, making it easier to specify layout params, because doing it in code can be boring for a RelativeLayout.

create a class which extends the framelayout class and overwrite the onDraw function there you can draw everything you want and it will behave like any other view