Android: UI elements over canvas layer

Question

How do I set some UI elements over (on top of) canvas?

I have a simple touch game that has its graphics placed on custom view with canvas. However as my full screen Panel is in the setContentView() I can't add any UI items like progressBar or logo. I would like to have whole canvas layer visible with some objects (progressBar, logo) "floating" over it.

Main class:

public class GameClass extends Activity implements OnGestureListener {

Panel panel;

public void onCreate(Bundle savedInstance) {
  super.onCreate(savedInstance);

  panel = new Panel(this, 1, 2);
  setContentView(Panel);
  ...
}

Panel class:

public class Panel extends View {   

  public Panel(Context context, int Var1, int Var2) {
    super(context);
    ...
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    ...
  }
}

As code shows, touches are handled inside GameClass and the changes in animation are handled inside Panel.

Or maybe.. Would it be possible to start new transparent activity with progress bar and button so that both the button on overlay activity AND objects on underlying activity? And I could need a way to close all the layers (transparent activity, Panel, GameClass) with the button on transparent activity. Complicated? :D

Solution

I do have the same problem and here is how I solved it

@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.game);

    drawView = new DrawView(this);
    drawView.requestFocus();
    LinearLayout upper = (LinearLayout) findViewById(R.id.LinearLayout01);
    upper.addView(drawView);
    ImageButton menu = (ImageButton) findViewById(R.id.ImageButton01);
    menu.setOnClickListener(new OnClickListener()
    {           
        @Override
        public void onClick(View v)
        {
            finish();
        }
    });
    ImageButton reset = (ImageButton) findViewById(R.id.ImageButton02);
    reset.setOnClickListener(new OnClickListener()
    {           
        @Override
        public void onClick(View v)
        {
            drawView.resetGame();
        }
    });
}

instead of setting contentview to panel adding it Linearlayout that is added in my game.xml and here goes my

game.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="@drawable/game_background">
<LinearLayout
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="350dip" />
<LinearLayout
    android:id="@+id/LinearLayout02"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/LinearLayout01">
    <ImageButton
        android:id="@+id/ImageButton01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/menu"></ImageButton>
    <ImageButton
        android:id="@+id/ImageButton02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/reset"></ImageButton>
</LinearLayout>
<LinearLayout
    android:layout_below="@+id/LinearLayout01"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:id="@+id/layout_ad"
    android:layout_height="wrap_content" />

Comments

[yosh]

In this case you draw canvas vertically under image buttons, right? I'm checking the effect now in my app. What I want to achieve is to have image buttons or progress bar semi transparent to overlay canvas. Testing how to use this now.

[ingsaurabh]

do you know the concept of handler try them developer.android.com/reference/android/os/Handler.html

[yosh]

I modified it a bit, used 2 UIElements inside RelativeLayout without any xml. This way the latter one is on top :)