Download Tutorial #7: Custom Graphics

Mobile Apps
Custom Graphics 1:
In this activity, you will create a custom drawing area. This app will draw a rectangle that grows
and shrinks.
1. Create a new Android app called “GraphicExample.” Use “Graphics.Example” as your
package name (important later). Set the project properties to run the project.
2. Go to the strings.xml file. Document it. Change your app title to “Graphics Exercise”.
Then add a string:
<string name="message">Welcome to my custom graphics!</string>
3. Open the “main.xml” file. Document it. Edit the default TextView so that the text is set
to: “@string/message”.
4. Open your MainActivity.java file. Document it at the top. For the moment, we will not
make any changes here.
5. In your project tree, right-click on the folder that contains your “MainActivity.java” file.
It should be called “Graphics.Example”. In the context menu that appears, select “New /
Other.” In the next dialogue box, look for “AndroidGraphicsClass.” Select it. In the
next dialog box, fill in the name: “DrawView” and select Finish.
6. You will be provided with a new file called “DrawView.java.” Edit the documentation at
the top. Note that if you were to do this on a home computer, you would not have the
template that is provided. You would have to simply create a new java class and make
the appropriate edits yourself.
7. Find the method called “onDraw.” Edit it so that it reads:
public void onDraw(Canvas canvas)
// this controls what is drawn in the view
{
canvas.drawLine(0, 0, 20, 20, paint);
canvas.drawText("Hello", 10, 50, paint);
}
8. Return to the “main.xml” file. Make some room after the text view. Add a new element
to the layout.
<Graphics.Example.DrawView
android:id="@+id/draw_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
In this context, “Graphics.Example” should match the two parts of your package name.
9. Test your work. If you want, modify the values for the line or the location of the text
message.
10. Return to the main.xml file. Add two button between the TextView and the DrawView.
One should be labeled “Grow” and the other “Shrink.” An example would be:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Grow"
android:onClick="grow"
/>
11. Go to your source packages and open up “MainActivity.java.” Add the method header
“void grow(View view)” as a method stub. You will have to import
“android.view.View”. Also add a method header for shrink.
public void grow(View view)
{
}
12. Fill in the code for the “grow” method as follows:
public void grow(View view)
// redraws the view, but with a slightly larger rectangle
{
DrawView drawView = (DrawView)findViewById(R.id.draw_view);
drawView.setSize(5);
drawView.invalidate();
}
The shrink method will be nearly the same, but the “setSize” will be -5 rather than 5.
13. Return to your DrawView class. At the top, right beneath the declaration of “paint”, add
a declaration for an integer size variable as follows:
private Paint paint;
public int size = 5;
14. Add a new method to the DrawView class that will allow the size to be changed. Note
that the conditional statements will prevent the size from getting too big or small.
public void setSize(int sizeChange)
{
size = size+sizeChange;
if (size < 0)
size = 1;
if (size > 120)
size = 120;
}
15. Revise your “onDraw” method to draw a rectangle that uses the “size” variable.
Rectangles in this package are drawn from an upper-left to a lower-right coordinate. The
entire method could look as follows:
public void onDraw(Canvas canvas)
// draws a centered rectangle that can grow or shrink
{
canvas.drawLine(0, 0, 20, 20, paint);
canvas.drawText("Hello", 10, 50, paint);
canvas.drawRect(160-size/2, 160-size/2, 160+size/2, 160+size/2, paint);
}
16. Test your work. Use the buttons to grow and shrink the rectangle. Note the maximum
size.
Try changing the background or pen colors of your draw view.