Kiblat by Map

Kepingin juga ngoding Android, ya belajarlah koding Android. Ternyata diperlukan sumber daya yg bener-2 mumpuni. Terpaksalah ngoding Android ini pake kompi “seadanya” dengan spek core-2-duo, RAM 1GB, Win7. Spek segini nih gak mampu menjalankan simulator Android, jadi musti nyiapin HP buat nge-test hasil koding.

Acara dimulai dengan donlot s/w yang diperlukan: Eclipse dan Android Studio (IDE development), ADT (Android Development Tool) untuk Eclipse. SDK di donlot menyusul dan hanya ndonlot dikit aja: versi 19 (KitKat) dan 23. Google Play service (diperlukan untuk map/peta, tentunya juga AdMob) juga harus di donlot. Lanjut dengan instalasi, semuanya dilakukan sambil jalan dan atas saran mbah G.

Mulai koding Map (peta), ternyata perlu Google Map API key, ndaftar lagi di situs mbah G. Kepalang tanggung, sekalian ndaftar AdMob buat ndapatin Ad-unit ID buat masang iklan AdMob. Buat kalian yang pengin tau 2 item diatas, tanya mbah G aja yah....

Kode program ini gak sepenuhnya saya buat sendiri, “Cuma” nyontek contoh kode program yang dah setengah jadi dari web juga. Di stackoverflow.com nyaris ada semua yang diperlukan.

Gitu aja prolognya, ini kode program yang saya “jahit” dari berbagai sumber

1.      strings.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <resources>  
   <string name="app_name">Qibla Time</string>  
   <string name="action_peta">Qibla [map]</string>  
   <string name="action_kompas">Qibla [compass]</string>  
   <string name="tgl">Date</string>  
   <string name="lat_lon">Lat / Lon</string>  
   <string name="alamat">Location</string>  
   <string name="hi">Altitude (m asl)</string>  
   <string name="tz">Time zone (GMT+)</string>  
   <string name="subuh">Subuh</string>  
   <string name="terbit">Sunrise</string>  
   <string name="duhur">Zuhur</string>  
   <string name="ashar">Asr</string>  
   <string name="maghrib">Maghrib</string>  
   <string name="isya">Isha</string>  
   <string name="set_asar">Asr\ntime</string>  
   <string name="twilit">Twilight\nangle</string>  
   <string name="cari_almt">Address not found</string>  
   <string name="no_ijin">Permission denied</string>  
   <string name="syafi">Syafi\'i</string>  
   <string name="x_sfafii">Shadow length = object height + 2x long shadow when Duhur</string>  
   <string name="hanafi">Hanafi</string>  
   <string name="x_hanafi">Shadow length = 2x object height + 2x long shadow when Duhur</string>  
   <string name="sudut_if">Dawn angle = </string>  
   <string name="sudut_is">; Isha = </string>  
   <string-array name = "spinner_twilit">  
     <item>Ithna Ashari</item>  
     <item>University of Islamic Sciences, Karachi</item>  
     <item>Islamic Society of North America (ISNA)</item>  
     <item>Muslim World League (MWL)</item>  
     <item>Umm al-Qura, Makkah</item>  
     <item>Egyptian General Authority of Survey</item>  
     <item>Institute of Geophysics, University of Tehran</item>  
     <item>Indoneisan Ministry of Religion</item>  
   </string-array>  
   <string name="kompas_1">Compass sensor accuracy is affected by many things !!!</string>  
   <string name="kompas_2">There is no compass sensor</string>  
   <string name="tab_1">Prayer Time</string>  
   <string name="tab_2">Compass Qibla</string>  
   <string name="tab_3">Map Qibla</string>  
   <string name="google_maps_key"  
     templateMergeStrategy="preserve"  
     translatable="false">AIzaSyBHfJlwDMNPKXzp0qR0WEvb30V9VFCY1PM</string>  
 </resources>  

 

  

Yang warna merah itu unik untuk setiap program, jadi harus disesuaikan dengan ID milik kalian sendiri.

-         google_map_key diperoleh harus sesuai dengan nama project

-         banner_ad_unit_id, boleh pake punya saya dulu kalo mau nyoba, ato hilangin unit iklan di activity.java

2.      activity_maps.xml

Spolier activity_maps.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:ads="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.munengan7camp.kiblatbymap.MapsActivity">

    <fragment

        android:id="@+id/map"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:clickable="true"

        class="com.google.android.gms.maps.SupportMapFragment" />

    <TextView

        android:id="@+id/textView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textColor="#222222"

        android:background="#ffffff"

        android:layout_marginTop="16dp"

        android:layout_centerHorizontal="true"

        android:textSize="18sp"

        android:text="@string/txt_init" />

    <ImageButton

        android:id="@+id/buttonKabah"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="12dp"

        android:layout_marginLeft="12dp"

        android:layout_marginStart="12dp"

        android:src="@drawable/kabah"

        android:contentDescription="@string/img_kabah" />

    <!-- view for AdMob Banner Ad -->

    <com.google.android.gms.ads.AdView

        android:id="@+id/adView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        ads:adSize="SMART_BANNER"

        ads:adUnitId="@string/banner_ad_unit_id" />

</RelativeLayout>

-         Yang warna merah adalah nama project, sesuaikan dengan project kalian

-         Yang warna biru, gambar Ka’bah di folder drawable (ganti dengan gambar lain juga bisa, nama file harus disesuaikan tentunya) akan jadi tombol untuk “menuju” ke Ka’bah di google map.

3.      manifest.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
   package="com.munengan7camp.kiblatbymap"  
   android:installLocation="preferExternal"  
   android:versionCode="2"  
   android:versionName="1.1" >  
   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />  
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />  
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  
   <uses-permission android:name="android.permission.INTERNET" />  
   <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />  
   <!--  
   <uses-feature  
     android:glEsVersion="0x00020000"  
     android:required="true" />  
   -->  
   <uses-sdk  
     android:minSdkVersion="15"  
     android:targetSdkVersion="26" />  
   <application  
     android:allowBackup="true"  
     android:icon="@drawable/ic_launcher"  
     android:label="Waktu Kiblat"  
     android:theme="@style/AppTheme" >  
     <activity  
       android:name=".MainActivity"  
       android:label="@string/app_name"  
       android:theme="@android:style/Theme.Holo.Light.NoActionBar" >  
       <intent-filter>  
         <action android:name="android.intent.action.MAIN" />  
         <category android:name="android.intent.category.LAUNCHER" />  
       </intent-filter>  
     </activity>  
     <activity  
       android:name=".WaktuActivity" >  
     </activity>  
     <activity  
       android:name=".KompasActivity" >  
     </activity>  
     <activity  
       android:name=".PetaActivity" >  
     </activity>  
     <meta-data  
       android:name="com.google.android.gms.version"  
       android:value="@integer/google_play_services_version" />  
     <meta-data  
       android:name="com.google.android.geo.API_KEY"  
       android:value="@string/google_maps_key" />  
     <activity  
       android:name="com.google.android.gms.ads.AdActivity"  
       android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"  
       android:theme="@android:style/Theme.Translucent" />  
   </application>  
 </manifest>  

Yang warna ungu, cuma buat aplikasi jadi full-screen, hapus bagian itu juga boleh

4.      activity.java

Spoiler Activity.java:

package com.munengan7camp.kiblatbymap;

import android.app.Activity;

import android.content.Context;

import android.graphics.Color;

import android.location.Criteria;

import android.location.Location;

import android.location.LocationManager;

import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

import android.view.View;

import android.widget.ImageButton;

import android.widget.TextView;

import android.widget.Toast;

import com.google.android.gms.ads.AdListener;

import com.google.android.gms.ads.AdRequest;

import com.google.android.gms.ads.AdView;

import com.google.android.gms.ads.InterstitialAd;

import com.google.android.gms.maps.CameraUpdateFactory;

import com.google.android.gms.maps.GoogleMap;

import com.google.android.gms.maps.OnMapReadyCallback;

import com.google.android.gms.maps.SupportMapFragment;

import com.google.android.gms.maps.model.LatLng;

import com.google.android.gms.maps.model.Polyline;

import com.google.android.gms.maps.model.PolylineOptions;

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback ,

        GoogleMap.OnMapLongClickListener {

    private GoogleMap mMap;

    private AdView adView;

    private Polyline garis;

    private TextView txtView;

    private ImageButton btnKaabah;

    private InterstitialAd interstitial;

    public LocationManager locationManager;

    private static final LatLng mecca = new LatLng(21.422487 , 39.826206);

    double jarak;

    String provider;

    private double hitungJarak(double lat1, double lon1, double lat2, double lon2){

        return (

                (

                        ( Math.acos(Math.sin(lat1 * Math.PI / 180) *

                                Math.sin(lat2 * Math.PI / 180) +

                                Math.cos(lat1 * Math.PI / 180) *

                                        Math.cos(lat2 * Math.PI / 180) *

                                        Math.cos((lon1 - lon2) * Math.PI / 180)) *

                                180 / Math.PI

                        ) * 60 * 1.1515

                ) *  1.609344

        );

    }

    private void getLokasi() {

        Criteria kriteria = new Criteria();

        String prov = locationManager.getBestProvider (kriteria,true);

        if (prov != provider) {

            provider = prov; //locationManager.getBestProvider (kriteria,true);

            Toast.makeText(this, "Provider : " + provider, Toast.LENGTH_SHORT).show();

        }

        Location location = locationManager.getLastKnownLocation(provider);

        if (location != null) {

            double lat_pos=location.getLatitude();

            double lng_pos=location.getLongitude();

            LatLng lokasi = new LatLng(lat_pos, lng_pos);

            float zoomVal = mMap.getCameraPosition().zoom;

            if (zoomVal < 9) zoomVal=16;

            mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(lokasi,zoomVal));

            garis = mMap.addPolyline(new PolylineOptions().add(mecca,lokasi).width(3).color(Color.BLUE).geodesic(true));

            jarak = hitungJarak(mecca.latitude,mecca.longitude,lat_pos,lng_pos);

            txtView.setText(" "+String.format("%.2f",jarak)+" Km ");

        } else {

            txtView.setText(" Location fail ");

        }

    }

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_maps);

        // TextView init

        txtView = (TextView) findViewById(R.id.textView);

        btnKaabah = (ImageButton) findViewById(R.id.buttonKabah);

        // Map init

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);

        mapFragment.getMapAsync(this);

         // Mecca button act

        btnKaabah.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                float zoomVal = mMap.getCameraPosition().zoom;

                mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(mecca, zoomVal));

            }

        });

        // Ads [banner] init

        adView = (AdView) findViewById(R.id.adView);

        // Ads [interstitial] init

        interstitial = new InterstitialAd(this);

        interstitial.setAdUnitId(getString(R.string.interstitial_ad_unit_id));

        // Ads proceed

        AdRequest adRequest = new AdRequest.Builder().build();

        adView.loadAd(adRequest);

        interstitial.loadAd(adRequest);

        interstitial.setAdListener(new AdListener() {

            public void onAdLoaded() {

                displayInterstitial();

            }

        });

        locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE);

    }

    public void displayInterstitial() {

        if (interstitial.isLoaded()) {

            interstitial.show();

        }

    }

    @Override

    public void onMapReady(GoogleMap googleMap) {

        mMap = googleMap;

        mMap.setPadding(0,0,0,62);

        mMap.setMyLocationEnabled(true);

        mMap.getUiSettings().setZoomControlsEnabled(true);

        mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);

        getLokasi();

        mMap.setOnMyLocationButtonClickListener(new GoogleMap.OnMyLocationButtonClickListener(){

            @Override

            public boolean onMyLocationButtonClick() {

                if (garis != null) {

                    garis.remove();

                }

                getLokasi();

                return false;

            }

        });

        mMap.setOnMapLongClickListener(this);

    }

    @Override

    public void onMapLongClick(LatLng point) {

        if (garis != null) {

            garis.remove();

        }

        garis = this.mMap.addPolyline(new PolylineOptions().add(mecca,point).width(2).color(Color.RED).geodesic(true));

        // tampilkan jarak

        jarak = hitungJarak(mecca.latitude,mecca.longitude,point.latitude,point.longitude);

        txtView.setText(" "+String.format("%.2f",jarak)+" Km ");

    }

    @Override

    protected void onPause() {

        if (adView != null){

            adView.pause();

        }

        super.onPause();

    }

    @Override

    protected void onResume() {

        super.onResume();

        if (adView != null){

            adView.resume();

        }

    }

    @Override

    protected void onDestroy()  {

        if (adView != null){

            adView.destroy();

        }

        super.onDestroy();

    }

}

5.      gradle

apply plugin: 'com.android.application'

android {

    compileSdkVersion 19

    buildToolsVersion "23.0.3"

    defaultConfig {

        applicationId "com.munengan7camp.kiblatbymap"

        minSdkVersion 8

        targetSdkVersion 19

        multiDexEnabled true

    }

    buildTypes {

        release {

            minifyEnabled false

            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'

        }

    }

}

dependencies {

    compile 'com.android.support:support-v4:19.1.0'

    compile 'com.google.android.gms:play-services-ads:8.4.0'

    compile 'com.google.android.gms:play-services-maps:8.4.0'

}

Yang penting dari gradle ini adalah bagian multiDexEnabled true, karna kebanyakan program Android yang menggunakan google play service, bagian header program akan melar melebihi 65Kbyte. Kalo mau cari info lebih lanjut tentang hal ini, tanya mbah G dengan keyword Dalvik.

Yang gak sempet ngoding sendiri, donlot aja Kiblat by Map.apk yang dah jadi liwat link ini. Belom sempet ngaplod ke google play store karna lom ada modal $25 yang musti pake CC buat mbuka kapling di sono.

Link itu masih file kompresi 7z, donlot dulu, uncompress dan copy ke Android-mu, trus install.

SKRIN-SOT

kbm_satelit

kbm_road

Njalanin program mudah ko:
1. klik gambar Kaabah di kiri atas untuk menuju Ka'bah
2. Klik MyLocation di kanan atas untuk menuju lokasi kalian
3. Long-klik di peta untuk nggambar garis kiblat dari tempat itu ke Kaabah
4. ganti jenis peta cuma ada di apk yg bisa di dinlot di link diata


[update link 2 juli 2017 via mediafire] 

[ update 13 juli 2018 via playstore ]