Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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.