Membuat Aplikasi Kompas Menggunakan Android Studio

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