• Home
  • About
  • Archives
  • Contact
  • Projects
Logo

  • Project
  • Tutorial

Membuat Aplikasi Kompas Menggunakan Android Studio

23 August 2016
Rifqi Fauzi Rahmadzani
7 Comments
  • Email
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
23 August 2016
7 Comments

Menurut wikipedia “Kompas adalah alat navigasi untuk menentukan arah berupa sebuah panah 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

Langkah pertama membuat file XML dalam membangun antarmuka aplikasi kompass

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#141414"
android:foregroundGravity="center|center_horizontal"
android:focusableInTouchMode="false">
 
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/background_light"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/tvHeading"
android:layout_marginTop="-62dp" />
 
<ImageView
android:layout_width="wrap_content"
android:layout_height="120dp"
android:src="@drawable/prompt"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/tvHeading"
android:layout_marginTop="-62dp"
android:id="@+id/imageView" />
 
<TextView
android:id="@+id/tvHeading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
android:layout_marginTop="40dp"
android:text="Heading 0"
android:textColor="#ffffff"
android:textSize="28dp" />
 
<ImageView
android:layout_width="wrap_content"
android:layout_height="120dp"
android:src="@drawable/background_compass"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/tvHeading"
android:layout_alignParentBottom="true"
android:layout_marginTop="-39dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp" />
 
<ImageView
android:id="@+id/imageViewCompass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/compass"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginRight="17dp"
android:layout_marginLeft="17dp" />
 
<ImageView
android:layout_width="wrap_content"
android:layout_height="120dp"
android:src="@drawable/miui_cover"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/tvHeading"
android:layout_alignParentBottom="true"
android:layout_marginTop="-40dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp" />
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- App by - \nRifqi Fauzi Rahmadzani"
android:id="@+id/textView"
android:textAlignment="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:textColor="#acacac"
android:textSize="14dp" />
 
</RelativeLayout>

Langkah berikutnya membuat file MainActivity.java sesuaikan nama package dengan nama aplikasi yang anda buat

MainActivity.java

package com.rifqifai.compass;
 
import android.app.Activity;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
 
public class MainActivity extends Activity implements SensorEventListener {
 
// define the display assembly compass picture
private ImageView image;
 
// record the compass picture angle turned
private float currentDegree = 0f;
 
// device sensor manager
private SensorManager mSensorManager;
 
TextView tvHeading;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
 
// our compass image
image = (ImageView) findViewById(R.id.imageViewCompass);
 
// TextView that will tell the user what degree is he heading
tvHeading = (TextView) findViewById(R.id.tvHeading);
 
// initialize your android device sensor capabilities
mSensorManager = (SensorManager) getSystemService(SENSOR_SERVICE);
}
 
@Override
protected void onResume() {
super.onResume();
 
// for the system's orientation sensor registered listeners
mSensorManager.registerListener(this, mSensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION),
SensorManager.SENSOR_DELAY_GAME);
}
 
@Override
protected void onPause() {
super.onPause();
 
// to stop the listener and save battery
mSensorManager.unregisterListener(this);
}
 
@Override
public void onSensorChanged(SensorEvent event) {
 
// get the angle around the z-axis rotated
float degree = Math.round(event.values[0]);
 
tvHeading.setText("Heading " + Float.toString(degree) + "°");
 
// create a rotation animation (reverse turn degree degrees)
RotateAnimation ra = new RotateAnimation(
currentDegree,
-degree,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF,
0.5f);
 
// how long the animation will take place
ra.setDuration(60);
 
// set the animation after the end of the reservation status
ra.setFillAfter(true);
 
// Start the animation
image.startAnimation(ra);
currentDegree = -degree;
 
}
 
@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {
// not in use
}
}

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

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rifqifai.compass">
 
<application
android:allowBackup="true"
android:icon="@drawable/app_icon"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
 
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
 
</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
  • LinkedIn
Previous

Mengenal apa itu AI ( Artificial Intelligence / Kecerdasan Buatan )

Next

Diseminasi University Research Colloquium (URECOL) IV di Stikes Muhammadiyah Pekajangan

The Author

Rifqi Fauzi Rahmadzani

Being someone who is able to contend with my interest and to learn new imaginative, intuitive, and communicative things. The greatest hope of my ability can be beneficial to others.

  • facebook
  • twitter
  • instagram
  • linkedin

7 Comments

  • ilyas
    5 years ago
    Reply

    minta kontaknya admin?
    Saya tertarik dengan cara membuat aplikasi kompas,soalnya ada tugas juga dari sekolah

  • anto
    5 years ago
    Reply

    Tutorial yang bagus. Terimakasih 🙂

    • Rifqi Fauzi Rahmadzani
      4 years ago
      Reply

      Sama-sama. Semoga bermanfaat kak 🙂

    • User
      2 years ago
      Reply

      Bagaimana menampilkan ketelitian sampai 1/1000. Contoh: 90,123

  • rizky ariawan
    4 years ago
    Reply

    lanjutkan mas rifqi, tak dukuuung.. semoga sukses yaa ^^

    • Rifqi Fauzi Rahmadzani
      4 years ago
      Reply

      Thank you ^_^

  • Najwa Aulia
    1 year ago
    Reply

    Halo mas rifqi, untuk gambar drawable yang disiapkan apa saja ya?
    Terima Kasih

Leave A Comment Cancel reply

author image

The Author

Rifqi Fauzi Rahmadzani

  • facebook
  • twitter
  • instagram

Being someone who is able to contend with my interest and to learn new imaginative, intuitive, and communicative things. The greatest hope of my ability can be beneficial to others.

Logo

© 2021 Rifqifai.com. Developed by Rifqi Fauzi Rahmadzani