Archive for November 2014

MEMBUAT APLIKASI MENGGAMBAR SEDERHANA DENGAN MEMANFAATKAN TOUCH AND GESTURE Pada SMARTPHONE ANDROID

Pada smartphone yang memiliki basis sentuhan layar (touch screen), User saat ini sangat dimudahkan dalam hal pengaksesan fitur tertentu. Gesture pada smartphone dapat berupa sentuhan maupun usapan pada layar. Sedangkan beberapa teknologi OS mobile terbaru seperti Android, iPhone, Windows Phone maupun Blackberry dan OS lain dapat ditambahkan gesture yang dapat dienteraksikan pada aplikasi.
Touch di android dibagi menjadi beberapa aksi ketika menyentuh layar :
1.       ACTION_DOWN = Sebuah aksi ketika pointer pertama yang menyentuh layar. Pada data pointer ini selalu dimulai dari index 0 di MotionEven           
2.       ACTION_POINTER_DOWN = aksi dari pointer lain atau pointer tambahan, pada data pointer ini berada pada indeks 0 dan dikemalikan oleh getActionIndex()
3.       ACTION_MOVE = Aksi untuk Melakukan pergerakan sehingga terjadi perubahan
4.       ACTION_POINTER_UP = melakkan aksi ketika pointer bergerak naik.
5.       ACTION_UP = perintah melakukan aksi setelah ketika pointer meninggalkan screen
Kata Gesture jika kita terjemahkan kedalam bahasa Indonesia berarti sikap atau langkah. Jika dikaitkan dengan interaksi sebuah aplikasi, Gesture berarti tindakan yang dilakukan oleh pemakai aplikasi agar mendapatkan feedback tertentu dari aplikasi yang bersangkutan. Feedback disini adalah balasan dari sistem yang bisa berupa perubahan sistem maupun keadaan sistem.

Pada artikel kali ini untuk aplikasi mengenai touch and gestures penulis membuat contoh aplikasi menggambar sederhana dengan memanfaatkan touch and gestures.
·  Langkah pertama dalam mebangun aplikasi Android Membuat project baru File > New > Android Applications Project.
·  Langkah Selanjutnya Membuat tampilan antarmuka, res > layout > activity_main.xml tambahkan source code dibawah ini activitymain.xml ini sebagai tampilan utama yang akan menampilkan beberapa menu diantaranya Drawing dan Gestures

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MENU" />

    <Button
        android:id="@+id/menggambar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="DRAWING" />

    <Button
        android:id="@+id/gestures"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="GESTURES" />

</LinearLayout>
  • Langkah ke 3 membuat layout dimana layout ini sebagai canvas tempat kita akan menggambar.Tambahkan kode program seperti dibawah ini. Karena layout ini hanya digunakan untuk menggambar jadi di gunakanlah ukuran layout menggukanan fill_parent agar terlihat melebar dan konsisten.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
</LinearLayout>

·  Langkah selanjutnya menambahkan class baru untuk memberikan fungsi dalam melakukan aksi menggambar.


package com.example.drawingviatouchandgesture;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;

public class SingleTouchEventView extends View {
 
 private Paint paint = new Paint();
 private Path path = new Path();
 
 public Button btnReset;
 public LayoutParams params;

 public SingleTouchEventView(Context context, AttributeSet attrs) {
  super(context, attrs);

  paint.setAntiAlias(true);
  paint.setStrokeWidth(6f);
  paint.setColor(Color.BLACK);
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeJoin(Paint.Join.ROUND);
  
     btnReset = new Button(context);
  btnReset.setText("Clear Screen");

  params = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
  btnReset.setLayoutParams(params);
  
  btnReset.setOnClickListener(new View.OnClickListener() {
   
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    // resets the screen
    path.reset();

    // Calls the onDraw() method
    invalidate();
   }
  });
  
 }

 @Override
 protected void onDraw(Canvas canvas) {
  canvas.drawPath(path, paint);
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  float eventX = event.getX();
  float eventY = event.getY();

  switch (event.getAction()) {
  case MotionEvent.ACTION_DOWN:
   path.moveTo(eventX, eventY);
   return true;
  case MotionEvent.ACTION_MOVE:
   path.lineTo(eventX, eventY);
   break;
  case MotionEvent.ACTION_UP:
   // nothing to do
   break;
  default:
   return false;
  }

  // Schedules a repaint.
  invalidate();
  return true;
 }

}

  • Untuk memberikan fungsi pada main menu yang diantaranya terdapat drawing and gesture tambahkan class baru MainMenu.java dan masukan kode seperti dibawah ini
package com.example.drawingviatouchandgesture;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;



public class MainMenu extends Activity implements OnClickListener {
 /** Called when the activity is first created. */
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  SingleTouchEventView st = new SingleTouchEventView(this, null);
  setContentView(st);
  addContentView(st.btnReset, st.params);
  
 }

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

 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub
  Intent back = new Intent(this, MainActivity.class);
  startActivity(back);
 }
 @Override
 protected void onPause() {
  // TODO Auto-generated method stub
  super.onPause();
  finish();
 }
}

Untuk Memberikan Fungsi pada tombol menu Drawing dan Gesture Sertakan kode di bawah ini pada MainActivity.java

package com.example.drawingviatouchandgesture;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.gesture.Gesture;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;


public class MainActivity extends Activity implements OnClickListener{
 /** Called when the activity is first created. */
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);;
  

  Button Gestures = (Button)findViewById(R.id.gestures);
  Gestures.setOnClickListener(new View.OnClickListener() {
   
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    Intent in = new Intent(getApplicationContext(),GesturesActivity.class);
    startActivity(in);
   }
  }); 
  
  
  Button pindah = (Button)findViewById(R.id.menggambar);
  pindah.setOnClickListener(new View.OnClickListener() 
  {
  
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    Intent i = new Intent(getApplicationContext(),MainMenu.class);
    startActivity(i);
   }
  });
 }

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

 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub
  
 }

}

Langkah yang terakhir menambahkan kode pada AndroidManifest.xml untuk memberikan atau mengijinkan proses perpindahan activity ke activity yang lain.


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.drawingviatouchandgesture"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.drawingviatouchandgesture.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity 
            android:name="com.example.drawingviatouchandgesture.MainMenu"
            android:label="@string/app_name">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>    
        </activity>
        <activity 
            android:name="com.example.drawingviatouchandgesture.GesturesActivity"
            android:label="@string/app_name">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>    
        </activity>
    </application>

</manifest>
Setelah semua proses dijalankan saatnya untuk menjalankan program Klik kanan pada project lalu Klik Run As > Android Aplications
Hasilnya akan tampak seperti dibawah ini.
1.       Menu Utama

2.       Halaman Untuk Menggambar

3.       Gestures


4.       Gestures

Sabtu, 01 November 2014
Posted by Unknown
Diberdayakan oleh Blogger.

Followers

- Copyright © ASIX BELAJAR ILKOM -Metrominimalist- Powered by Blogger - Designed by Rahman Anam -