Anda di halaman 1dari 15

     

PROJECT / TUTORIAL /

Membuat Aplikasi Kompas


Menggunakan Android Studio
23 AUGUST 2016 · RIFQI FAUZI RAHMADZANI

Menurut wikipedia “Kompas adalah alat navigasi untuk menentukan arah berupa sebuah panah

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
penunjuk magnetis yang bebas menyelaraskan dirinya dengan medan magnet bumi secara

akurat. Kompas memberikan rujukan arah tertentu, sehingga sangat membantu dalam bidang
navigasi.”

Pada tutorial kali ini kita akan belajar bagaimana cara membuat aplikasi kompas pada android.

Untuk antarmuka aplikasi, kita akan menggunakan TextView dan widget ImageView. Untuk

TextView berfungsi menunjukkan berapa nilai heading daring kompas, sementara ImageView

berperan sebagai arah navigasi kompas dengan menggunakan sebuah gambar navigasi.
Aplikasi ini nanti berjalan menggunakan Android Light Sensor.

Tampilan aplikasi kompas android

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Langkah pertama membuat file XML dalam membangun antarmuka aplikasi kompass

activity_main.xml

activity_main.xml
1 <RelativeLayout xmlns:android ="http://schemas.android.com/apk/res/android
2 android:layout_width ="match_parent"
3 android:layout_height ="match_parent"
4 android:background ="#141414"
5 android:foregroundGravity ="center|center_horizontal"
6 android:focusableInTouchMode ="false" >
7
8 <ImageView
9 android:layout_width ="wrap_content"
10 android:layout_height ="wrap_content"
11 android:src ="@drawable/background_light"
12 android:layout_alignParentLeft ="true"
13 android:layout_alignParentStart ="true"
14 android:layout_alignTop ="@+id/tvHeading"
15 android:layout_marginTop ="-62dp" />
16
17 <ImageView
18 android:layout_width ="wrap_content"
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
18 android:layout_width ="wrap_content"
19 android:layout_height ="120dp"
20 android:src ="@drawable/prompt"
21 android:layout_alignParentLeft ="true"
22 android:layout_alignParentStart ="true"
23 android:layout_alignTop ="@+id/tvHeading"
24 android:layout_marginTop ="-62dp"
25 android:id ="@+id/imageView" />
26
27 <TextView
28 android:id ="@+id/tvHeading"
29 android:layout_width ="wrap_content"
30 android:layout_height ="wrap_content"
31 android:layout_centerHorizontal ="true"
32 android:layout_marginBottom ="40dp"
33 android:layout_marginTop ="40dp"
34 android:text ="Heading 0"
35 android:textColor ="#ffffff"
36 android:textSize ="28dp" />
37
38 <ImageView
39 android:layout_width ="wrap_content"
40 android:layout_height ="120dp"
41 android:src ="@drawable/background_compass"
42 android:layout_alignParentLeft ="true"
43 android:layout_alignParentStart ="true"
44 android:layout_alignTop ="@+id/tvHeading"
45 android:layout_alignParentBottom ="true"
46 android:layout_marginTop ="-39dp"
47 android:layout_marginRight ="15dp"
48 android:layout_marginLeft ="15dp" />
49
50 <ImageView
51 android:id ="@+id/imageViewCompass"
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
51 android:id ="@+id/imageViewCompass"
52 android:layout_width ="wrap_content"
53 android:layout_height ="wrap_content"
54 android:src ="@drawable/compass"
55 android:layout_centerVertical ="true"
56 android:layout_alignParentLeft ="true"
57 android:layout_alignParentStart ="true"
58 android:layout_marginRight ="17dp"
59 android:layout_marginLeft ="17dp" />
60
61 <ImageView
62 android:layout_width ="wrap_content"
63 android:layout_height ="120dp"
64 android:src ="@drawable/miui_cover"
65 android:layout_alignParentLeft ="true"
66 android:layout_alignParentStart ="true"
67 android:layout_alignTop ="@+id/tvHeading"
68 android:layout_alignParentBottom ="true"
69 android:layout_marginTop ="-40dp"
70 android:layout_marginRight ="20dp"
71 android:layout_marginLeft ="20dp" />
72
73 <TextView
74 android:layout_width ="wrap_content"
75 android:layout_height ="wrap_content"
76 android:textAppearance ="?android:attr/textAppearanceMedium"
77 android:text ="- App by - \nRifqi Fauzi Rahmadzani"
78 android:id ="@+id/textView"
79 android:textAlignment ="center"
80 android:layout_alignParentBottom ="true"
81 android:layout_centerHorizontal ="true"
82 android:layout_marginBottom ="20dp"
83 android:textColor ="#acacac"
84 android:textSize ="14dp" />
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
84 android:textSize ="14dp" />
85
86 </RelativeLayout >

Langkah berikutnya membuat file MainActivity.java sesuaikan nama package dengan nama

aplikasi yang anda buat

MainActivity.java

MainActivity.java
1 package com.rifqifai.compass;
2
3 import android.app.Activity;
4 import android.hardware.Sensor;
5 import android.hardware.SensorEvent;
6 import android.hardware.SensorEventListener;
7 import android.hardware.SensorManager;
8 import android.os.Bundle;
9 import android.view.animation.Animation;
10 import android.view.animation.RotateAnimation;
11 import android.widget.ImageView;
12 import android.widget.TextView;
13
14 public class MainActivity extends Activity implements SensorEventListener
15
16 // define the display assembly compass picture
17 private ImageView image;
18
19 // record the compass picture angle turned
20 private float currentDegree = 0f;
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
20 private float currentDegree = 0f;
21
22 // device sensor manager
23 private SensorManager mSensorManager;
24
25 TextView tvHeading;
26
27 @Override
28 protected void onCreate(Bundle savedInstanceState) {
29 super .onCreate(savedInstanceState);
30 setContentView(R.layout.activity_main);
31
32 // our compass image
33 image = (ImageView) findViewById(R.id.imageViewCompass);
34
35 // TextView that will tell the user what degree is he heading
36 tvHeading = (TextView) findViewById(R.id.tvHeading);
37
38 // initialize your android device sensor capabilities
39 mSensorManager = (SensorManager) getSystemService(SENSOR_SERVICE);
40 }
41
42 @Override
43 protected void onResume() {
44 super .onResume();
45
46 // for the system's orientation sensor registered listeners
47 mSensorManager.registerListener( this, mSensorManager.getDefaultSensor(Senso
48 SensorManager.SENSOR_DELAY_GAME);
49 }
50
51 @Override
52 protected void onPause() {
53 super .onPause();
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
53 super .onPause();
54
55 // to stop the listener and save battery
56 mSensorManager.unregisterListener( this);
57 }
58
59 @Override
60 public void onSensorChanged(SensorEvent event) {
61
62 // get the angle around the z-axis rotated
63 float degree = Math.round(event.values[ 0]);
64
65 tvHeading.setText( "Heading " + Float.toString(degree) + "°");
66
67 // create a rotation animation (reverse turn degree degrees)
68 RotateAnimation ra = new RotateAnimation(
69 currentDegree,
70 -degree,
71 Animation.RELATIVE_TO_SELF, 0.5f,
72 Animation.RELATIVE_TO_SELF,
73 0.5f);
74
75 // how long the animation will take place
76 ra.setDuration( 60);
77
78 // set the animation after the end of the reservation status
79 ra.setFillAfter( true);
80
81 // Start the animation
82 image.startAnimation(ra);
83 currentDegree = -degree;
84
85 }
86
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
86
87 @Override
88 public void onAccuracyChanged(Sensor sensor, int accuracy) {
89 // not in use
90 }
91 }

Terakhir agar tampilan screen aplikasi tetap dalam kondisi potrait aktifkan fungsi orientasi
screen pada file AndroidManifest.xml edit seperti berikut.

AndroidManifest.xml

AndroidManifest.xml
1 <?xml version ="1.0" encoding ="utf-8" ?>
2 <manifest xmlns:android ="http://schemas.android.com/apk/res/android "
3 package ="com.rifqifai.compass" >
4
5 <application
6 android:allowBackup ="true"
7 android:icon ="@drawable/app_icon"
8 android:label ="@string/app_name"
9 android:supportsRtl ="true"
10 android:theme ="@style/AppTheme" >
11 <activity android:name =".MainActivity"
12 android:screenOrientation ="portrait" >
13 <intent-filter >
14 <action android:name ="android.intent.action.MAIN" />
15
16 <category android:name ="android.intent.category.LAUNCHER" />
17 </intent-filter >
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
17 </intent-filter >
18 </activity >
19 </application >
20
21 </manifest >

Setelah selesai semuanya coba jalankan aplikasinya melalui emulator ataupun usb debugging.

Bagi anda yang ingin mengunduh langsung file source code beserta asset imagenya bisa
mengunjungi pada link berikut -> Android Studio Compass Project

EMAIL ·FACEBOOK ·TWITTER ·PINTEREST ·GOOGLE+ ·LINKEDIN ·

PREVIOUS NEXT

Mengenal apa itu AI ( Diseminasi University Research


Artificial Intelligence / Colloquium (URECOL) IV di Stikes
Kecerdasan Buatan ) Muhammadiyah Pekajangan

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
THE
AUTHOR

Rifqi Fauzi Rahmadzani


Being someone who competence on my interest and was able to learn

new things both imaginative, intuitive, and communicative. The great


hope of my ability can be beneficial to others.

FACEBOOK · TWITTER · INSTAGRAM · LINKEDIN ·

Leave A Comment

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Comment *

Name * Email * Website

POST THE COMMENT

Recent Posts

Wahai Akhwat, Percayalah Ketika


Jilbabmu… Semakin Menambah
Kecantikanmu!
6 APRIL 2018 ·

Wong Jowo Ojo Nganti Ilang Jawane


12 MARCH 2018 ·

Memperpanjang SIM (Surat Ijin


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Memperpanjang SIM (Surat Ijin
Mengemudi) Di Luar Kota, Bisakah
Demikian?
10 FEBRUARY 2018 ·

Saya Akan Berhenti Meninggalkan


Dunia IT? Self Reminder!
6 JANUARY 2018 ·

Kiat Membangun Motivasi Minat


Membaca
25 DECEMBER 2017 ·

The Author

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Rifqi Fauzi Rahmadzani
FACEBOOK · TWITTER · INSTAGRAM ·

Being someone who was able to contend with my


interest and to learn new things both imaginative,

intuitive, and communicative. The great hope of my


ability can be beneficial to others.

Subscribe Me
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Never miss a story from Me. Follow for free and be the
first to get notified on new updates.

Enter your email

SUBSCRIBE NOW

     
© 2018 RIFQIFAI.COM. DEVELOPED BY RIFQI FAUZI RAHMADZANI

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com