title: How we can make user to practice alphabet on canvas in Android?
body: <p>I am developing a application where i want, user can practice the English alphabets,clicking on "Practice" button.I got a reference here but this code is not working. I am new to android.Can anyone help me with code,how I can do this. </p>
  
  <pre><code>    import android.content.Context;
  import android.graphics.Canvas;
  import android.graphics.Color;
  import android.graphics.Paint;
  import android.graphics.Paint.FontMetricsInt;
  import android.graphics.drawable.GradientDrawable;
  import android.graphics.drawable.GradientDrawable.Orientation;
  import android.util.AttributeSet;
  import android.view.MotionEvent;
  import android.view.View;
  
  public class AlphaDraw extends View {
  
     public interface AlphaScrollable {
        public void scrollAlpha(char prefix);
     }
  
     public AlphaScrollable target;
  
     public AlphaDraw(Context context) {
        super(context);
     }
  
     public AlphaDraw(Context context, AttributeSet attrs) {
        super(context, attrs);
     }
  
     public AlphaDraw(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
     }
  
     protected String[] alpha = new String[] { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O",
              "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" };
  
     protected boolean touching = false;
  
     // try capturing touches to jump to letters
     // will actively adjust list location
     @Override
     public boolean onTouchEvent(MotionEvent event) {
  
        float margin = this.getWidth() / 4;
        float fracy = (event.getY() - (margin * 2)) / (this.getHeight() - (margin * 4));
  
        int approx = (int) (alpha.length * fracy);
        // Log.d("ALPHA", String.format("approx=%s", alpha[approx]));
  
        if (approx &lt; 0 || approx &gt;= alpha.length)
           return true;
  
        // jump to alpha location in list
  
        // find first letter location in list
        this.target.scrollAlpha(alpha[approx].charAt(0));
  
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
           this.touching = true;
           this.invalidate();
           break;
  
        case MotionEvent.ACTION_UP:
           this.touching = false;
           this.invalidate();
           break;
  
        }
  
        return true;
  
     }
  
     @Override
     protected void onDraw(Canvas canvas) {
  
        // show shadow only when being actively touched
  
        float width = this.getWidth(), height = this.getHeight();
        float margin = this.getWidth() / 4;
  
        float spacing = (height - (margin * 4)) / alpha.length;
  
        int shadowColor = Color.argb(128, 0, 0, 0);
        GradientDrawable shadow = new GradientDrawable(Orientation.LEFT_RIGHT, new int[] { shadowColor, shadowColor });
        shadow.setShape(GradientDrawable.RECTANGLE);
        shadow.setCornerRadius(10);
  
        shadow.setBounds((int) margin, (int) margin, (int) (width - margin), (int) (height - margin));
  
        if (touching)
           shadow.draw(canvas);
  
        // draw alphabet index
        // remember that text is drawn from bottom
  
        Paint paint = new Paint();
        paint.setColor(Color.argb(255, 255, 255, 255));
        paint.setFakeBoldText(true);
        paint.setFlags(Paint.ANTI_ALIAS_FLAG);
  
        // measure to figure out perfect text height
        // W is a nice average letter
        // read new metrics to get exact pixel dimensions
        FontMetricsInt fm = paint.getFontMetricsInt();
        // float charHeight = Math.abs(fm.top) + Math.abs(fm.descent);
        float startTop = (margin * 2) + Math.abs(fm.top);
  
        for (int i = 0; i &lt; alpha.length; i++) {
           float charWidth = paint.measureText(alpha[i]);
           float centered = (width - charWidth) / 2;
  
           canvas.drawText(alpha[i], centered, (i * spacing) + startTop, paint);
  
        } 
     }
  }
  </code></pre>