2D Graphics: Part 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

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

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="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/bgColor" /> <stroke android:width="2px" android:color="@color/circleColor" /> <size android:height="200dp" android:width="200dp" /> </shape> circle = oval with equal dimensions ©SoftMoore Consulting

Example: Defining a Shape Drawable in XML (continued) public class MainActivity extends AppCompatActivity { @Override 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

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

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

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

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

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

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

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

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

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

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

Example: Gradients (continued) ©SoftMoore Consulting

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

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

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

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

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

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

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

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

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

Using GraphView (continued) ©SoftMoore Consulting

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" android:id="@+id/graph"/> ©SoftMoore Consulting

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

GraphView Example ©SoftMoore Consulting

Relevant Links Canvas and Drawables Drawable Resources https://developer.android.com/guide/topics/graphics/2d-graphics.html Drawable Resources https://developer.android.com/guide/topics/resources/drawable-resource.html GraphView (open source graph library for Android) http://www.android-graphview.org/ ©SoftMoore Consulting