Post
Ask Question

Drawing an Olympic Logo Using Canvas in Android

Introduction

 
This article explains how to draw an Olympics Logo using the Canvas in Android.
 
You will first create an object of the Paint class. Then call the setColor() method of Paint to set the color of the circle by ing the color as an argument. The setStyle() method sets the style of the circle, here I ed a stroke as an argument that sets the circle having the stroke on its parameter.
 
The setStrokeWidth() method sets the stroke width of the circle. Finally, I called drawCircle() to draw the circle.  
 
Do the same to draw each of the other five circles.
 
Step 1
 
Create the project like this:
 
imagecanvasappli.jpg
 
Step 2
 
 XML file
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.    
  7.     <TextView  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Text" />  
  11.    
  12. </LinearLayout> 
Step 3
 
Create a Java file with the following:
  1. package com.SampleCanvas;  
  2. import android.app.Activity;  
  3. import android.graphics.Color;  
  4. import android.os.Bundle;  
  5.    
  6. public class Second extends Activity {  
  7.     SampleCanvasActivity drawView;  
  8.    
  9.     @Override  
  10.     public void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         drawView = new SampleCanvasActivity(this);  
  13.         drawView.setBackgroundColor(Color.WHITE);  
  14.         setContentView(drawView);  
  15.     }  
  16. } 
Step 4
 
Create another Java file with the following:
  1. package com.SampleCanvas;  
  2.    
  3. import java.util.ArrayList;  
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.graphics.Bitmap;  
  7. import android.graphics.BitmapFactory;  
  8. import android.graphics.Canvas;  
  9. import android.graphics.Color;  
  10. import android.graphics.Paint;  
  11. import android.graphics.Path;  
  12. import android.graphics.Rect;  
  13. import android.graphics.RectF;  
  14. import android.graphics.Typeface;  
  15. import android.graphics.drawable.Drawable;  
  16. import android.os.Bundle;  
  17. import android.view.Gravity;  
  18. import android.view.MotionEvent;  
  19. import android.view.SurfaceHolder;  
  20. import android.view.SurfaceView;  
  21. import android.view.View;  
  22. import android.view.View.OnTouchListener;  
  23. import android.view.ViewGroup.LayoutParams;  
  24. import android.view.Window;  
  25. import android.view.WindowManager;  
  26. import android.widget.EditText;  
  27. import android.widget.FrameLayout;  
  28.    
  29. import android.content.Context;  
  30. import android.graphics.Canvas;  
  31. import android.graphics.Color;  
  32. import android.graphics.Paint;  
  33. import android.view.View;  
  34. import android.widget.ImageView;  
  35. import android.widget.LinearLayout;  
  36. import android.widget.RelativeLayout;  
  37.    
  38. public class SampleCanvasActivity extends View {  
  39.     //Paint paint = new Paint();  
  40.     public SampleCanvasActivity(Context context) {  
  41.         super(context);  
  42.     }  
  43.    
  44.     @Override  
  45.     public void onDraw(Canvas canvas) {  
  46.    
  47.        // paint.setColor(Color.BLACK);  
  48.        // paint.setStyle(Paint.Style.STROKE);  
  49.         //paint.setStrokeWidth(5);  
  50.        // canvas.drawRect(730, 430, 40, 20, paint);  
  51.    
  52.         //Paint paint2=new Paint();  
  53.    
  54.        // Typeface typeArial;  
  55.         //typeArial = Typeface.create("London",Typeface.ITALIC);  
  56.         Paint paint3=new Paint();  
  57.         Paint paint4=new Paint();  
  58.         Paint paint5=new Paint();  
  59.         Paint paint6=new Paint();  
  60.         Paint paint7=new Paint();  
  61.         Paint paint9=new Paint();  
  62.         //  paint2.setTextSize(35);  
  63.         //canvas.drawText("Deposit Ammount in your account", 140 - paint2.getTextSize(), 100, paint2);  
  64.         //paint.setTextSize(25);  
  65.         //canvas.drawText("Enter Amount", 300 - paint2.getTextSize(), 200, paint2);  
  66.         paint3.setColor(Color.BLUE);  
  67.         paint3.setStrokeWidth(15);  
  68.         paint3.setStyle(Paint.Style.STROKE);  
  69.         canvas.drawCircle(150,200,100,paint3);  
  70.    
  71.         paint4.setColor(Color.BLACK);  
  72.         paint4.setStrokeWidth(15);  
  73.         paint4.setStyle(Paint.Style.STROKE);  
  74.         canvas.drawCircle(380,200,100,paint4);  
  75.    
  76.         paint5.setColor(Color.RED);  
  77.         paint5.setStrokeWidth(15);  
  78.         paint5.setStyle(Paint.Style.STROKE);  
  79.         canvas.drawCircle(610,200,100,paint5);  
  80.    
  81.         paint6.setColor(Color.YELLOW);  
  82.         paint6.setStrokeWidth(15);  
  83.         paint6.setStyle(Paint.Style.STROKE);  
  84.         canvas.drawCircle(265,300,100,paint6);  
  85.    
  86.         paint7.setColor(Color.GREEN);  
  87.         paint7.setStrokeWidth(15);  
  88.         paint7.setStyle(Paint.Style.STROKE);  
  89.         canvas.drawCircle(500,300,100,paint7);  
  90.    
  91.         Paint paint8=new Paint();  
  92.         paint8.setColor(Color.DKGRAY);  
  93.         paint8.setTextSize(100);  
  94.         canvas.drawText("London",200,500,paint8);  
  95.    
  96.         paint9.setColor(Color.DKGRAY);  
  97.         paint9.setTextSize(100);  
  98.         canvas.drawText("2012",250,600,paint9);  
  99.    
  100.         /*ImageView imageView = new ImageView(getContext()); 
  101.         Bitmap mainImage = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); 
  102.         Bitmap mainImage = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); 
  103.         imageView.setImageBitmap( mainImage );*/  
  104.        // Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.iamge1);  
  105.    
  106.         //canvas.drawBitmap(bitmap, 120, 500, null);  
  107.         //canvas.drawBitmap(bitmap, 150, 500, null);  
  108.    
  109.        // layout.setGravity(Gravity.BOTTOM);  
  110.        //paint.setStyle(Paint.Style.STROKE);  
  111.        // paint.setColor(Color.WHITE);  
  112.         //canvas.drawRect(130, 130, 80, 80, paint);  
  113.         //paint.setColor(Color.BLACK);  
  114.         //canvas.drawText("SomeText",25,20,paint);  
  115.         //paint.setTextSize(20);  
  116.         //canvas.drawText("Some Text", 10, 25, paint);  
  117.        /* canvas.drawRect(33, 60, 77, 77, paint ); 
  118.         paint.setColor(Color.YELLOW); 
  119.         canvas.drawRect(33, 33, 77, 60, paint );*/  
  120.    
  121.     }  
  122. } 
Step 5
 
Android Manifest.xml file
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     package="com.databaseapplication"  
  4.     android:versionCode="1"  
  5.     android:versionName="1.0" >  
  6.    
  7.     <uses-sdk  
  8.         android:minSdkVersion="7"  
  9.         android:targetSdkVersion="16" />  
  10.    
  11.     <application  
  12.         android:allowBackup="true"  
  13.         android:icon="@drawable/ic_launcher"  
  14.         android:label="@string/app_name"  
  15.         android:theme="@style/AppTheme" >  
  16.         <activity  
  17.             android:name="com.databaseapplication.MainActivity"  
  18.             android:label="@string/app_name" >  
  19.             <intent-filter>  
  20.                 <action android:name="android.intent.action.MAIN" />  
  21.    
  22.                 <category android:name="android.intent.category.LAUNCHER" />  
  23.             </intent-filter>  
  24.         </activity>  
  25.     </application>  
  26.    
  27. </manifest> 
Step 6
 
Image
 
imageolympic.jpg


Similar Articles