1. 2D Graphics: Part 2

2. Class Drawable
A Drawable is an object that knows how to render itself on a Canvas.
Class Drawable and a number of related subclasses (e.g., BitmapDrawable, LayerDrawable, ShapeDrawable, etc.) are defined in package android.graphics.drawable.
Unlike a View, a Drawable does not have any facility to receive events or otherwise interact with the user.
Similar to other Android UI objects, most Drawable objects can be defined programmatically or in an XML file.
©SoftMoore Consulting

3. Different Types of Drawables
Drawables may take a variety of forms including
Bitmap: e.g., a PNG or JPEG image
Nine Patch: an extension to the PNG format allows it to specify information about how to stretch it and place things inside of it
Shape: contains simple drawing commands instead of a raw bitmap, allowing it to resize better in some cases.
Layers: a compound drawable that draws multiple underlying drawables on top of each other.
States: a compound drawable that selects one of a set of drawables based on its state.
©SoftMoore Consulting

4. Example: Defining a Shape Drawable in XML (file res\drawable\circle
Example: Defining a Shape Drawable in XML (file res\drawable\circle.xml)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" android:shape="oval"> <solid /> <stroke android:width="2px" /> <size android:height="200dp" android:width="200dp" /> </shape>
circle = oval with
equal dimensions
©SoftMoore Consulting

5. Example: Defining a Shape Drawable in XML (continued)
public class MainActivity extends AppCompatActivity public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); ... // the layout contains an ImageView ImageView circleView = (ImageView) findViewById(R.id.circleImage); circleView.setImageResource(R.drawable.circle); }
©SoftMoore Consulting

6. Example: Defining a Shape Drawable in XML (continued)
©SoftMoore Consulting

7. Defining a Shape Drawable Programmatically
Package android.graphics.drawable.shapes provides support for several geometric shapes
rectangles (and squares)
rectangles with rounded corners
ovals (and circles)
arcs and lines
other shapes defined as Paths
These shapes generally have no dimensions but are bound by their container object, usually a ShapeDrawable.
©SoftMoore Consulting

8. Example: Defining a Shape Drawable Programmatically
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ... OvalShape ovalShape = new OvalShape(); ShapeDrawable circle = new ShapeDrawable(ovalShape); circle.setIntrinsicWidth(400); circle.setIntrinsicHeight(400);
Note: height and width
are in pixels, not dp
(continued on next slide)
©SoftMoore Consulting

9. Example: Defining a Shape Drawable Programmatically (continued)
Paint paint = circle.getPaint(); paint.setAntiAlias(true); paint.setColor(Color.MAGENTA); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2); // the layout contains an ImageView ImageView circleView = (ImageView) findViewById(R.id.circleImage); circleView.setImageDrawable(circle); }
©SoftMoore Consulting

10. Example: Defining a Shape Drawable Programmatically (continued)
©SoftMoore Consulting

11. Gradients
A gradient is a color fill that gradually blends from one color to another.
All gradients need at least a start color and an end color, but they can contain an array of colors.
Android gradient classes
subclasses of android.graphics.Shader
differentiated by the direction in which the gradient “flows”
LinearGradient
RadialGradient
SweepGradient
Gradients are set using the setShader() method of class Paint.
©SoftMoore Consulting

12. Example: Gradients (continued on next slide)
public class GradientView extends View { private float centerX1; private float centerY1; private float centerX2; private float centerY2; private float centerX3; private float centerY3; private float radius; private LinearGradient lg; private RadialGradient rg; private SweepGradient sg; private Paint paint;
(continued on next slide)
©SoftMoore Consulting

13. Example: Gradients (continued)
public GradientView(Context context) { super(context); float width = Resources.getSystem().getDisplayMetrics().widthPixels; // use less than screen height to allow for action bar float height = .88f* Resources.getSystem().getDisplayMetrics().heightPixels; centerX1 = width/4; centerY1 = height/4; centerX2 = width/2; centerY2 = height/2; centerX3 = 3*centerX1; centerY3 = 3*centerY1; radius = (3*centerX1)/4;
(continued on next slide)
©SoftMoore Consulting

14. Example: Gradients (continued)
// preallocate the drawing objects paint = new Paint(); paint.setAntiAlias(true); lg = new LinearGradient( centerX1 - radius, centerY1 - radius, centerX1 + radius, centerY1 + radius, Color.RED, Color.BLUE, Shader.TileMode.MIRROR); rg = new RadialGradient(centerX2, centerY2, radius, int[] sgColors = { Color.RED, Color.YELLOW, Color.GREEN, Color.BLUE }; sg = new SweepGradient(centerX3, centerY3, sgColors, null); }
(continued on next slide)
©SoftMoore Consulting

15. Example: Gradients (continued)
@Override protected void onDraw(Canvas canvas) { canvas.drawColor(Color.WHITE); // draw a circle with a linear gradient paint.setShader(lg); canvas.drawCircle(centerX1, centerY1, radius, paint); // draw a circle with a radial gradient paint.setShader(rg); canvas.drawCircle(centerX2, centerY2, radius, paint); // draw a circle with a sweep gradient paint.setShader(sg); canvas.drawCircle(centerX3, centerY3, radius, paint); }
©SoftMoore Consulting

16. Example: Gradients (continued)
©SoftMoore Consulting

17. Android Typefaces
Class Typeface (in package android.graphics) provides support for several typeface families and styles.
Typeface families
Typeface.SERIF
Typeface.SANS_SERIF
Typeface.MONOSPACE
Typeface.DEFAULT (equal to SANS_SERIF)
Typeface styles
Typeface.NORMAL
Typeface.BOLD
Typeface.ITALIC
Typeface.BOLD_ITALIC
©SoftMoore Consulting

18. Using Typefaces
Convert scale-independent pixels (sp) and device-independent pixels (dp) to pixels.
int textSize =
getResources().getDimensionPixelSize(R.dimen.textSize);
int leftMargin =
getResources().getDimensionPixelSize(R.dimen.leftMargin);
int verticalMargin =
getResources().getDimensionPixelSize(R.dimen.vertMargin);
Create a typeface
Typeface typeface =
Typeface.create(Typeface.SERIF, Typeface.BOLD);
©SoftMoore Consulting

19. Using Typefaces (continued)
Set the text size and typeface for a paint object
paint.setTextSize(textSize);
paint.setTypeface(typeface);
Draw the text on the canvas
canvas.drawText("Serif Typeface (Bold)", leftMargin,
verticalMargin, paint);
©SoftMoore Consulting

20. Example: Android Typefaces
@Override protected void onDraw(Canvas canvas) { int textSize = getResources().getDimensionPixelSize(R.dimen.textSize); int leftMargin = getResources().getDimensionPixelSize(R.dimen.leftMargin); int verticalMargin = getResources().getDimensionPixelSize(R.dimen.vertMargin); paint.setAntiAlias(true); paint.setColor(Color.BLUE); paint.setTextSize(textSize); canvas.drawColor(Color.WHITE);
(continued on next slide)
©SoftMoore Consulting

21. Example: Android Typefaces (continued)
Typeface tfDN = Typeface.create( Typeface.DEFAULT, Typeface.NORMAL); paint.setTypeface(tfDN); canvas.drawText("Default - Normal", leftMargin, verticalMargin*1, paint); ... // other typefaces Typeface tfMBI = Typeface.create( Typeface.MONOSPACE, Typeface.BOLD_ITALIC); paint.setTypeface(tfMBI); canvas.drawText("Monospace - Bold Italic", leftMargin, verticalMargin*16, paint);
(continued on next slide)
©SoftMoore Consulting

22. Example: Android Typefaces (continued)
paint.setTypeface(tfDN); paint.setUnderlineText(true); canvas.drawText("Default - Normal (Underlined)", leftMargin, verticalMargin, paint); }
©SoftMoore Consulting

23. Example: Android Typefaces (continued)
Note that the
default typeface is Sans Serif.
©SoftMoore Consulting

24. GraphView
GraphView is an open source graph plotting library for Android.
GraphView simplifies creating and displaying many standard types of graphs and graph-related properties.
line charts – bar charts
points charts – legends
scrolling – zooming
tap listener – axis titles
©SoftMoore Consulting

25. Using GraphView
Download the GraphView library (jar file) and place it in the project’s app\libs directory.
Using the Project view in Android Studio (not the default Android view), right click on the jar file and select “Add As Library”. (see next slide)
©SoftMoore Consulting

26. Using GraphView (continued)
©SoftMoore Consulting

27. Using GraphView (continued)
Add a GraphView to the XML layout file.
<com.jjoe64.graphview.GraphView
android:layout_width="match_parent"
android:layout_height="wrap_content"
©SoftMoore Consulting

28. Using GraphView (continued)
Create a graph object (e.g., a line series) in the Java activity and add it to the GraphView.
LineGraphSeries<DataPoint> series = new LineGraphSeries<>
(new DataPoint[] {
new DataPoint(0, 1),
new DataPoint(1, 5),
new DataPoint(2, 3),
});
GraphView graph = (GraphView) findViewById(R.id.graph);
graph.addSeries(series);
©SoftMoore Consulting

29. GraphView Example
©SoftMoore Consulting

30. Relevant Links Canvas and Drawables Drawable Resources
Drawable Resources
GraphView (open source graph library for Android)
©SoftMoore Consulting