Cara menampilkan Google Maps dan Video YouTube di Aplikasi Android Java

Hai teman-teman, Perkenalkan nama saya Taufiq Rizky. saat ini saya sedang menempuh pendidikan S1 di Universitas Komputer Indonesia (UNIKOM) pada jurusan Teknik Informatika.

Pada artikel pertama ini saya akan membahas bagaimana sih cara mencantumkan Google Maps dan Video YouTube Di aplikasi android yang kita buat.

Pada artikel ini saya menggunakan Android Studio sebagai IDE untuk mengembangkan aplikasi ini maka persiapkan dulu Android Studio teman-teman agar dapat mengikuti tutorial ini dengan baik. Oke jika sudah siap langsung saja ke cara pembuatan aplikasi nya.

1. Pertama buka Android Studio dulu lalu buat Project baru , lalu pilih empty Activity

2. jika sudah setting project sesuai kebutuhan lalu pilih bahasa java jika sudah klik finish

3. Selanjutnya buka activity_Main.xml, di sini saya menggunakan LinearLayout untuk layout utama nya dan jangan lupa di set orientation Vertical. Lalu Tambahkan 2 LinearLayout dengan width dan height Match_parent dan tambahkan layout_weight 1 di keduannya.

linear layout yang didalam untuk membagi tampilan gmaps dan video

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        >
        
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
       >
        
    </LinearLayout>

</LinearLayout>

4. jika sudah selanjutnya kita akan buat video Youtube terlebih dahulu, pertama silahkan kunjungi YouTube Library lalu copy core depedencies ke gradle module project teman-teman.

implementation 'com.pierfrancescosoffritti.androidyoutubeplayer:core:10.0.5'

5. Jika sudah langsung klik Sync Now, dan kembali ke sini Copy paste bagian Quick Start ke tampilan aplikasi teman-teman.

jika video tidak mucul pastikan 2 LinearLayout yang di buat sebelumnya memiliki orientation vertical

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:textSize="18dp"
    android:textColor="@color/black"
    android:text="Contoh Video Youtube"/>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.pierfrancescosoffritti.androidyoutubeplayer.core.player.views.YouTubePlayerView
        android:id="@+id/youtube_player_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        
        app:videoId="isiIdDisini"
        app:autoPlay="true"
        app:showFullScreenButton="false" />
</LinearLayout>

6. Selanjutnya ganti VideoId sesuai Video yang ingin teman teman tampilkan. video id di dapat dari link youtube.

contoh id video YouTube

7. jika sudah maka sudah selesai untuk menampilkan video YouTube, Selanjutnya kita akan meanmpilkan Google Maps pertama klik kanan pada main package teman-teman lalu pilih new -> Fragment -> Google Maps Fragment.

8. Isi nama Fragment sesuai kebutuhan lalu klik Finish.

9. jika sudah pastikan library gmaps sudah ada pada gradle teman-teman jika belum maka silahkan tambahkan terlebih dahulu jang lupa sync now.

implementation ‘com.google.android.gms:play-services-maps:17.0.1’

implementation 'com.google.android.gms:play-services-maps:17.0.1'

10. selanjutnya buka file google_maps_api.xml. jika sudah memeliki API key tinggal isikan saja namun jika belum buka linkuntuk membuat API Key terlebih dahulu

11. pilih create a project lalu continue, tunggu sebentar lalu klik create API key

12. selanjutnya copy Api key yang sudah di buat ke google_maps_api.xml.

13. selanjutnya kita kembali ke Activity_main.xml untuk membuat frameLayout untuk maps, oiya jangan lupa tambahkan id pada frameLayout

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:textSize="18dp"
    android:textColor="@color/black"
    android:text="Contoh Maps Dengan Marker Gedung Sate"/>

<FrameLayout
    android:id="@+id/frame_gmaps"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

14. selanjutnya menempelkan fragment maps pada FrameLayout Yang sudah di buat sebelumnya, buka MainActivity.java lalu tambahkan code berikut

Fragment fragmentMaps = new MapsFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.frame_gmaps,fragmentMaps).commit();

sesuaikan frame_gmaps dengan id dari framelayout

15. Terakhir atur marker maps sesuai lokasi yang teman teman ingin kan. pertama buka MapsFragment.java lalu pada bagian function onMapReady ganti nama variable sydney sesuai keinginan dan ganti coordinate nya beserta label pada marker. jika tidak mengetahui coordinate lokasi bisa buka dulu google maps lalu copy coordinate nya yang ada pada url gmaps.

contoh coordinate gedung sate pada url gmaps

16. Terakhir jika ingin atur zoom level pada mapas maka ganti function newLatLng(lokasi) jadi newLatLngZoom(lokasi,15)

15 merupakan zoom level , semakin besar zoom level maka maps akan semakin dekat begitu juga sebaliknya. berikut zoom level yang di kutip dari google sesuai fungsinya.
zoom level:
1: World
5: Landmass/continent
10: City
15: Streets
20: Buildings

nah sudah selesai selanjutnya tinggal run saja ke HP atau emulator maka akan tampil seperti ini.

Hasil akhir aplikasi

Gimana? mudah bukan mencantumkan google maps dan video Youtube di aplikasi Android teman-teman. Oiya teman - teman dapat membuat costum tampilan sesuai kreatifitas masing-masing dan dapat juga menambahkan fitur atau mengganti tampilan dari YouTube Player dan google maps contohnya mengganti tampilan google maps menjadi street View atau mengganti menjadi tampilan maps 3D, semua setting tersebut dapat teman- teman temukan di documentasi penyedia library masing — masing yang dapat di liat di sini unuk Youtube Player dan ini untuk Google maps.

Cara diatas masih susah? gamau nambah library atau pake API? tenang ada cara yang lebih mudah ko teman teman bisa menggunakan action button yang di arahkan langsung ke Google maps atau video YouTube, langsung aja simak cara nya di bawah ini.

1. Tambahkan button di bawah video Player Youtube dan Google Maps, jangan lupa kasih id ya!

Button Youtube

Button Maps

//Code xml button Youtube
<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/btn_yt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Buka di Youtube"
    android:textColor="@color/white"
    android:background="#e74c3c"
    android:layout_marginTop="10dp"/>
//code xml button Google maps
<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/btn_maps"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="Buka di Google Maps"
    android:textColor="@color/white"
    android:background="#1abc9c"/>

2. selanjutnya kita tinggal memberikan aksi pada setiap button di MainActivity.java, jangan lupa ganti link sesui kebutuhan ya jika saat buka google maps ingin langsung ada marker pada lokasi maka tandai dulu lokasi pada google maps baru copy link ke aksi button.

// jangan lupa sesuaikan id dengan yang di xml
Button btn_yt = findViewById(R.id.btn_yt);
Button btn_maps = findViewById(R.id.btn_maps);
//aksi button Youtube
btn_yt.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Uri uri = Uri.parse("https://www.youtube.com/watch?v=FGD-6Ob_k28&t=13s");
        Intent yt= new Intent(Intent.ACTION_VIEW, uri);
        yt.setPackage("com.google.youtube");
        try {
            startActivity(yt);
        }catch (ActivityNotFoundException e){
            startActivity(new Intent(Intent.ACTION_VIEW,Uri.parse("https://www.youtube.com/watch?v=FGD-6Ob_k28&t=13s")));
        }
    }
});
//aksi button maps
btn_maps.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Uri uri = Uri.parse("https://www.google.com/maps/place/Gedung+Sate/@-6.8978036,107.613544,15.57z/data=!4m5!3m4!1s0x0:0x37be7ac9d575f7ed!8m2!3d-6.9024812!4d107.61881");
        Intent maps= new Intent(Intent.ACTION_VIEW, uri);
        maps.setPackage("com.google.maps");
        try {
            startActivity(maps);
        }catch (ActivityNotFoundException e){
            startActivity(new Intent(Intent.ACTION_VIEW,Uri.parse("https://www.google.com/maps/place/Gedung+Sate/@-6.8978036,107.613544,15.57z/data=!4m5!3m4!1s0x0:0x37be7ac9d575f7ed!8m2!3d-6.9024812!4d107.61881")));
        }
    }
});

Selanjutnya tinggal run saja program ke Hp atau emulator teman-teman . Selesai deh jauh lebih mudah kan dari cara yang pertama? tapi saya lebih sarankan gunakan cara yang pertama agar user tidak keluar masuk aplikasi, Semoga bermanfaat ya teman-teman.

Kurang lebihnya seperti itu penjelasan mengenai “Cara menampilkan Google Maps dan Video YouTube di Aplikasi Android Java” yang dapat saya sampaikan semoga bermanfaat ya teman-teman. Mohon maaf jika ada kesalahan kata dalam penulisan atau kesalahan dalam menyampaikan materi.

Sekian dari saya Terimakasih sudah membaca artikel ini semoga kita dapat bertemu kembali di artikel selanjutnya.

10118080 — Taufiq Rizky
Teknik Informatika
Fakultas Teknik dan Ilmu Komputer
Universitas komputer Indonesia