Analog Clock Draw in Image View


Simple code kali ini akan membuat applikasi jam analog yang sederhana, langsung saja untuk kali ini masih tentang android. Aplikasi ini mungkin berguna buat yang ingin mendapatkan gambar jam analog pada applikasi yang sedang dibuat atau dikembangkan.
Untuk caranya anda dapat membuat sebuah project seperti terlihat pada gambar di bawah ini:


Nah pada kali ini saya buat contoh aplikasi dengan nama AnalogClockApp dengan target android 3.0 - android 4.0 atau versi tablet. Selanjutnya pada folder res/layout ubah activity_main.xml sehingga seperti berikut ini:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <AnalogClock
        android:id="@+id/aClock"
        android:layout_width="200dp"
        android:layout_height="200dp" />
   
    <ImageView
        android:id="@+id/img_clock"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:contentDescription="@string/gambar_jam"
        android:src="@drawable/ic_launcher"/>
</LinearLayout>

Pada activity_main.xml ini terdapat Jam Analog bawaan android.widget dengan id aClock dan sebuah gambar dengan id img_clock. anda dapat saja mencoba untuk menjalankan aplikasi setelah anda melakukan inisialisasi jam analog tersebut maka akan tampil sebagai berikut ini:


Tambahkan sebuah class dengan nama SystemClock.java yang akan digunakan untuk menggambar sebuah jam analog pada ImageView. Ketikkan kode berikut ini pada class yang di tambahkan tersebut.


package com.simplescripcode.analogclockapp;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

public class SystemClock
{
private int radius;
           
            private static double pi = Math.PI ;
           
            private double minuteX1;
            private double minuteX2;
            private double minuteY1;
            private double minuteY2;
            private double hourX1;
            private double hourX2;
            private double hourY1;
            private double hourY2;
            private double dblMinute;
            private double dblHour;
            private int startXY;
            private int jarumMinute;
            private int jarumJam;
           
            public SystemClock(){}
            /**
             * You need a bitmap fit to your image view which you want to make a clock picture
             * 
             * @param canvas : this canvas of bitmap
             * @param hour : integer of hour use 24 hour format
             * @param minute : integer of minute less than 60
             * @param second : integer of second less than 60
             * @param imageWidth : width of your bitmap
             * @param imageHeight : height of your bitmap
             * <br>
             *
             * @code
             * { <br>
             * <code>
             * <p><b>Bitmap</b> bmp = <b>Bitmap</b>.<i>createBitmap</i>(25, 25, Bitmap.Config.<font color="blue"><i>ARGB_4444</i></font>);<br></p>
             * <p><b>Canvas</b> c = <font color="red">new</font> <b>Canvas</b>(bmp);<br></p>
             * <p><b>SystemJam</b> jam = new <b>SystemJam</b>();<br></p>
             * <p>jam.drawClock(c, 15, 40, 0, 25, 25);<br></p>
             * <p><b>ImageView</b> imgView = (<b>ImageView</b>) findViewById(R.id.<font color="blue"><i>ImageView1</i></font>);<br></p>
             * <p>imgView.setImageBitmap(bmp);</p>
             * </code>
             * <br>}
             */
            public void drawClock(Canvas canvas, int hour, int minute, int second, int imageWidth, int imageHeight)
            {
                       
                        this.startXY = (Math.min(imageWidth,imageHeight) / 2);
                       
                        this.radius = startXY - 2;
                        this.jarumMinute = radius - 5;
                        this.jarumJam = jarumMinute - 5; 
                         
                       
                        this.minuteX1 = startXY;
                        this.minuteY1 = startXY;
                        this.hourX1 = startXY;
                        this.hourY1 = startXY;
                       
                        this.dblMinute           = ( minute + (second / 60))  * 6 - 90;
                        this.dblHour   = ( hour + (minute / 60)) * 30 - 90;
           
                        this.minuteX2 = jarumMinute * Math.cos(dblMinute * pi / 180 ) + this.minuteX1;
                        this.minuteY2 = jarumMinute * Math.sin(dblMinute * pi / 180) + this.minuteY1;
                        this.hourX2 = jarumJam * Math.cos(dblHour * pi / 180 ) + this.hourX1;
                        this.hourY2 = jarumJam * Math.sin(dblHour * pi / 180) + this.hourY1;
                        // untuk gambar jarum menit
                        Paint paintMinute = new Paint();
                        paintMinute.setARGB(255, 255 , 10, 21);
                        paintMinute.setStrokeWidth(1);
                        paintMinute.setAntiAlias(true);
                        paintMinute.setStrokeCap(Paint.Cap.BUTT);
                        paintMinute.setStyle(Paint.Style.STROKE);
                        paintMinute.setColor(Color.BLACK);
                        // untuk gambar jarum jam
                        Paint paintHour = new Paint();
                        paintHour.setARGB(255, 255 , 10, 21);
                        paintHour.setStrokeWidth(2);
                        paintHour.setAntiAlias(true);
                        paintHour.setStrokeCap(Paint.Cap.BUTT);
                        paintHour.setStyle(Paint.Style.FILL);
                        paintHour.setColor(Color.BLACK);
                        // untuk gambar lingkaran jam
                        Paint paintCircle = new Paint();
                        paintCircle.setARGB(255, 255 , 10, 20);
                        paintCircle.setStrokeWidth(3);
                        paintCircle.setAntiAlias(true);
                        paintCircle.setStrokeCap(Paint.Cap.ROUND);
                        paintCircle.setStyle(Paint.Style.STROKE);
                        paintCircle.setColor(Color.BLACK);
                        // untuk gambar * pada posisi jam 3, 6, 9, 12
                        Paint paintText = new Paint();
                        paintText.setARGB(255, 255 , 10, 20);
                        paintText.setStrokeWidth(2);
                        paintText.setAntiAlias(true);
                        paintText.setStrokeCap(Paint.Cap.ROUND);
                        paintText.setStyle(Paint.Style.STROKE);
                        paintText.setColor(Color.BLACK);
                       
                       
                        float[] pos3 = new float[]{ (startXY + radius) - 10 ,startXY}; // draw string 3
                       
                        float[] pos6 = new float[]{ startXY ,(startXY + radius) - 10}; // draw string 6
                       
                        float[] pos9 = new float[]{ (startXY - radius) + 5 ,startXY}; // draw string 9
                       
                        float[] pos12 = new float[]{ startXY ,(startXY - radius) + 10};// draw string *
                       
                        canvas.drawPosText("*", pos3, paintText);
                        canvas.drawPosText("*", pos6, paintText);
                        canvas.drawPosText("*", pos9, paintText);
                        canvas.drawPosText("*", pos12, paintText);
                       
                        canvas.drawCircle(this.startXY,this.startXY, this.radius, paintCircle);
                        canvas.drawLine(this.startXY, this.startXY, (float) this.minuteX2, (float) this.minuteY2, paintMinute);
                        canvas.drawLine(this.startXY, this.startXY, (float) this.hourX2, (float) this.hourY2, paintHour);
            }

}



Setelah itu pada MainActivity.java rubahlah sehingga menjadi sebagai berikut:

package com.simplescripcode.analogclockapp;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.Menu;
import android.widget.AnalogClock;
import android.widget.ImageView;

public class MainActivity extends Activity {

            @Override
            protected void onCreate(Bundle savedInstanceState) {
                        super.onCreate(savedInstanceState);
                        setContentView(R.layout.activity_main);
                       
                        AnalogClock ac = (AnalogClock) findViewById(R.id.aClock);
                       
                        ImageView imgClock = (ImageView) findViewById(R.id.img_clock);
                       
                        // create a bitmap for clock layout match width and height of the ImageView you was created
                        Bitmap bmp = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_4444);
                       
                        // Create a canvas for bitmap above
                        Canvas canvas = new Canvas(bmp);
                       
                        SystemClock sc = new SystemClock();
                        // get the hour, minute and second
                        // ex : 15.20 PM
                        int hour = 15; // this hour set to 03.PM;
                        int minute = 20; // this minute set to 20
                        int second = 00; // set to 00 caused it not line to second
                        int imageWidth = 200 ; // get from yout layout xml
                        int imageHeight = 200 ; // get from yout layout xml
                        // draw clock
                        sc.drawClock(canvas, hour, minute, second, imageWidth, imageHeight);
                       
                        // set the bitmap to imageview
                        imgClock.setImageBitmap(bmp);
            }

            @Override
            public boolean onCreateOptionsMenu(Menu menu) {
                        // Inflate the menu; this adds items to the action bar if it is present.
                        getMenuInflater().inflate(R.menu.activity_main, menu);
                        return true;
            }

}


Setalah itu coba jalankan kembali aplikasi jam analog, maka akan tampil sebagai berikut ini:


Perhatikan penggunaan class pada MainActivity untuk menampilkan gambar, anda dapat merubah sourcode untuk menyesuaikan dengan tampilan yang anda butuhkan.

Selamat mencoba.....



No comments:

Post a Comment