Draw Graphics Object on Android with OpenGL ES

I. Introduction

The android framework provides plenty of standard tools for creating  attractive, functional graphical user interfaces. However, if you want more control of what your application draws on screen, or are venturing into three dimensional graphics, you need to use a different tool.

What do you do when you want to make a simple game or working with graphics object on Android

With OpenGL ES you can resolve all. The OpenGL ES APIs provided by the Android framework offers a set of tools for displaying high-end, animated graphics that are limited only by your imagination and can also benefit from the acceleration of graphics processing units (GPUs) provided on many Android devices.

II. How to implement?

1. Declare OpenGL ES use in the Manifest

  • To make sure the application was making only istributed to those with proper OpenGL support.


  • If your application uses texture compression, you must also declare which compression formats your app supports, so that it is only installed on compatible devices.


2. Application Architecture

  • When working with OpenGL application on Android , you’ll generally have three main classes that are used to draw the surface: MainActivity, GLSurfaceView and GLSurfaceView.Renderer1
    • MainActivity: Android applications that use OpenGL ES have activities just like any other application that has a user interface. The main difference from other applications is what you put in the layout for your activity.
    • GLSurfaceView: The API class in Android that helps you write OpenGL – ES applications.
      • Providing the glue code to connect OpenGL ES to the View system.
      • Providing the glue code to make OpenGL ES work with the Activity life-cycle.
      • Making it easy to choose an appropriate frame buffer pixel format.
      • Creating and managing a separate rendering thread to enable smooth animation.
      • Providing easy-to-use debugging tools for tracing OpenGL ES API calls and checking for errors.
    • Renderer: is a generic render interface. In your implementation of this renderer you should put all your calls to render a frame. This class include 3 main method
      • onSurfaceCreated()- Called once to set up the view’s OpenGL ES environment.
      • onDrawFrame()- Called for each redraw of the view.
      • onSurfaceChanged()- Called if the geometry of the view changes, for example when the device’s screen orientation changes.
  • Create an activity for OpenGL ES Graphics: The following code example shows a minimal implementation of an activity that uses aGLSurfaceView as its primary view:3
  • Build a GLSurfaceViewObject:  the code for this object is so thin, you may be tempted to skip extending it and just create an unmodified GLSurfaceView instance, but don’t do that. You need to extend this class in order to capture touch events4
  • Build a renderer classs: Here is a very basic implementation of an OpenGL ES renderer, that does nothing more than draw a black background in the GLSurfaceView:5.PNG
  • The code examples above create a simple Android application that displays a black screen using OpenGL. While this code does not do anything very interesting, by creating these classes, you have laid the foundation you need to start drawing graphic elements with OpenGL.

    3. Defining Shapes

  • OpenGL ES allows you to define drawn object using coordinates in three-dimensional space. So, before you can draw a shape,  you must define its coordinates. In Open GL, the typical way to do this is to define a vertex array of floating point numbers for the coordinates. For maximum efficiency, you write these coordinates into a ByteBuffer, that is passed into the OpenGL ES graphics pipeline for processing.
  • Vertex: A vertex (vertices in plural) is the smallest building block of 3D model. A vertex is a point where two or more edges meet. In a 3D model a vertex can be shared between all connected edges, paces and polygons. A vertex can also be a represent for the position of a camera or a light source. You can see a vertex in the image below marked in yellow.To define the vertices on android we define them as a float array that we put into a byte buffer to gain better performance. Look at the image to the right and the code below to match the vertices marked on the image to the code.


    4. Drawing Shape

  • After you define shapes to be drawn with OpenGL, you probably want to draw them. Drawing shapes with the OpenGL ES 2.0 takes a bit more code than you might imagine, because the API provides a great deal of control over the graphics rendering pipeline.Initialize Shapes: Before you do any drawing, you must initialize and load the shapes you plan to draw. Unless the structure (the original coordinates) of the shapes you use in your program change during the course of execution, you should initialize them in the onSurfaceCreated() method of your renderer for memory and processing efficiency.


  • Now that we have our shaders set up for use, we have one last step, which is to implement the draw function in our model:


5. Adding Motion

  • Translate:

public abstract void glTranslatef(float x, float y, float z)1

A translations added to the matrix makes the mesh appear as it has been moved. Translations are made along the axis and with no rotation added the axis are in there default state. Translation affects all the vertices in a polygon the same amount over the same axis. Translations are simply additions and subtractions to a current value. The image to the right shows a translation in 2 dimensions

  • Rotate:

public abstract void glRotatef(float angle, float x, float y, float z)

Rotating is what it sounds like. You add a rotation to the matrix making it appears like the mesh are rotated. With no translation before the rotation is around the origo. The x, y and z values defines the vector to rotate around. The angle value is the number of degrees to rotate.1.png

6. Responding to Touch Events

  •  The key to making your OpenGL ES application touch interactive is expanding your implementation of GLSurfaceView to override the onTouchEvent() to listen for touch events.
  • Setup a touch listener: The example implementation below shows how to listen for MotionEvent.ACTION_MOVE events and translate them to an angle of rotation for a shape


III. References