Tuesday, November 19, 2013

Android: Add Graphics to Layout

In the previous post I recommended to derive a class from View for creating graphics, do the drawing in this class and then set this class as layout.
This now seemingly causes problems when creating more advanced applications, when one also wants to place controls etc. on the application, since the command SetContentView() can only be called once. So either with the layout containing the controls, or with the custom class which draws the graphics.
But this "problem" can be solved pretty easily, by adding the graphic class like a control to the layout Layout containing the controls, and then setting the application layout to Layout.
I think, the following example code should be self explaining after reading the previous posts.
We here create the class ViewWithOval, which is nearly identical to the class from the previous post. It draws a circle on the form, the only difference is the public variable paint for setting the color of the circle.
In the function OnCreate() of the class MainActivity we then create a layout with a button. After clicking the button, we change the color of the circle and enforce the redrawing via Invalidate(). Then we add the circle to the layout and set the layout of the application:

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace CombinedLayouts
{
     [Activity (Label = "CombinedLayouts", MainLauncher = true)]
     public class MainActivity : Activity
     {

          protected override void OnCreate (Bundle bundle)
          {
               base.OnCreate (bundle);

               var Layout = new LinearLayout (this);
               Layout.Orientation = Orientation.Vertical;

               var Button1 = new Button(this);
               Layout.AddView (Button1);

               ViewWithOval OvalGraphic = new ViewWithOval (this);
              
               Button1.Click += delegate {
                    OvalGraphic.paint.SetARGB(255, 255, 0, 0);
                    OvalGraphic.Invalidate();
               };

               Layout.AddView (OvalGraphic);

               SetContentView (Layout);
          }
     }

     public class ViewWithOval : View
     {
          public Android.Graphics.Paint paint = new Android.Graphics.Paint ();
          private readonly Android.Graphics.Drawables.ShapeDrawable Oval;

          public ViewWithOval(Context context) : base (context)
          {       
               paint.SetARGB(255, 0, 255, 0);

               Oval = new Android.Graphics.Drawables.ShapeDrawable(new Android.Graphics.Drawables.Shapes.OvalShape());
               Oval.Paint.Set(paint);

               Oval.SetBounds(0, 0, 500, 500);
          }

          protected override void OnDraw(Android.Graphics.Canvas canvas)
          {
               Oval.Paint.Set(paint);
               Oval.Draw(canvas);
          }
     }
}


No comments:

Post a Comment