Menampilkan Google Maps Pada Aplikasi Android Dengan Android Studio

Ngulik Kode - Haii, pada kesempatan kali ini saya membagikan tutorial cara menampilkan google map pada aplikasi android dengan menggunakan Android Studio yang nantinya bisa anda kembangkan menjadi aplikasi LBS ( Location Base Service ) yang fungsinya untuk mencari lokasi terdekat dari user. Sebenarnya sudah banyak tutorial yang membahas google map, tetapi tidak ada salahnya saya membagikan kembali kepada anda dengan cara dan gaya saya sendiri.

Pada tutorial sebelumnya saya sudah membahas, tutorial cara mendapatkan Google Maps API Key dan sekarang kita lanjutkan untuk menampilkan Google Maps pada aplikasi android menggunakan android studio. Jika anda belum membacanya tutorial yang saya bagikan sebelumnya anda bisa melihatnya terlebih dahulu pada link dibawah ini :

• Baca Artikel Sebelumnya : Membuat Project Baru dan Menjalankan Project di Android Studio
• Baca Artikel Sebelumnya : Cara Mendapatkan Google Map API Key

Jika anda menggunakan android studio maka pembuatan aplikasi dengan pemanfaatan google map akan semakin mudah, karena template proyek google map sudah disediakan pada android studionya. anda tinggal membuat proyek baru android studio dan memilih template proyek yang sudah disediakan yaitu google map.

Jika sudah siap lanjut saja pada tutorial ini, ikuti langkah-langkahnya seperti yang saya berikan dibawah ini. Langkah yang paling utama adalah buka Android Studionya dan membuat project baru.

1. Membuat Proyek Baru Android Studio

Langkah pertama, anda harus membuat proyek baru dari android studio terlebih dahulu, lalu beri nama sesuai dengan proyek yang anda ingin buat dan lokasi file proyek sesuaikan juga agar mudah dalam pencarian. Untuk contoh saya menggunakan seperti gambar dibawah ini. Jika sudah klik Next.

Selanjutnya adalah anda tentukan Target Android Device dari proyek aplikasi anda, pada contoh saya menggunakan API 17 : Android 4.2 (Jelly Bean) untuk minimum versi. Jika sudah memilih anda bisa Next.

Nah Selanjutnya pada bagian Add an activity to Mobile anda bisa langsung memilih pada bagian activity Google Maps Activity. Seperti yang sudah dijelaskan di atas pada bagian ini lah Google sudah menyediakan template proyek google maps atau source code nya yang bisa kita gunakan. Selanjutnya, jika sudah pilih Next.

Selanjutnya pada bagian Customize the Activity anda tidak perlu melakukan perubahan apapun jika tidak benar-bener harus untuk merubahnya. Langsung saja pilih Finish.

Setelah itu tunggu beberapa saat sampai proses loading building project gradle selesai.

2. Perubahan dan Jalankan Proyek

Selanjutnya pada tahap ini anda melakukan prubahan sedikit untuk menempatkan Google Maps API Key yang pada tutorial sebelumnya sudah dijelaskan dan pastikan juga anda sudah membuatnya. Letakkan Google Maps API Key yang telah anda buat seperti cotoh dibawah ini.

Jika semua sudah dilakukan maka masuk pada tahap terakhir yaitu menjalankan proyek apakah terjadi error atau tidak. Jika tidak ada yang error maka hasilnya akan seperti gambar dibawah ini.

Sampai disini proses menampilkan google maps pada aplikasi android dengan android studio sudah selesai. Semoga dapat bermanfaat.

*Update : Bagi anda yang error ketika build gradle coba anda tambahkan kode seperti dibawah ini pada gradle anda.

defaultConfig {
   multiDexEnabled true
}

Jika sudah bulid kembali gradle nya atau menjalankan project nya apakah masih terdapat error atau tidak.

Cara Menggunakan Font Awesome Icon di Aplikasi Android

Ngulik Kode - Pada tutorial ini, saya akan mencoba menerapkan FontAwesome icon pada android project menggunakan android studio. FontAwesome adalah semacam framework yang disediakan untuk menghemat waktu ketika pemasangannya.

Pertama, anda tidak perlu khawatir tentang masalah ukuran layar yang berbeda-beda pada smartphone. jika anda ingin menggunakan file PNG, anda harus membuat empat versi ukuran yang berbeda dari setiap icon. tidak hanya itu, jika ukuran layar yang terlalu besar dan tidak sebanding dengan icon yang dibuat maka gambar akan terlihat pecah. hal ini pasti yang ingin anda hindari, dengan FontAwesome anda hanya memerlukan satu berkas file TTF.

Kedua, anda dapat mengandalkan salah satu yang paling kaya dan lengkap dari icon set yang tersedia secara gratis. Sekarang, pengguna sudah mulai terbiasa dengan gaya FontAwesome, karena itu banyak digunakan pada web. Anda tidak perlu banyak membuang waktu hanya untuk mencari icon yang indah, komprenshif, dan gratis untuk pengguna komersial. 

1. Bagaimana FontAwesome Bekerja

Mari kita luangkan waktu untuk memahami bagaimana FontAwesome bekerja. Ide yang muncul dibalik paket icon FontAwesome sederhana, icon diperlukan sebagai karakter. Mungkin anda memperhatikan beberapa karakter diperlukan sebagai teks. Misalnya anda dapat dengan mudah copy dan paste karakter ini ф atau juga karakter ini ♥. Bahkan anda dapat dengan mudah menggunakannya dengan text editor sederhana. hal ini mungkin juga untuk mengubah ukuran dan warna karakter.

Lihatlah pada daftar icon yang tersedia FontAwesome ini. Anda memilih icon dari daftar yang sudah disediakan, dan perhatikan karakter unicode, serta penggunaanya pada TextView, di android studio untuk membuat icon dengan menggunakan Font Awesome.

2. Iport Berkas FontAwesome

Sebelum masuk ke pembuatan terlebih dahulu anda harus memiliki file yang dibutuhkan dari FontAwesome anda dapat men-downloadnya dari github atau anda juga dapat men-downloadnya langsung dari web resmi FontAwesome.

Setelah anda men-download file FontAwesome, dalam kasus ini anda tidak perlu menggunakanya semua dari file FontAwesome yang telah anda download. Anda hanya membutuhkan file fontawesome-webfont.ttf yang terletak pada folder.

Dalam proyek Android anda, arahkan app ► src ►main, dalam direktori main harus terdapat folder bernama assets. Jika belum ada folder assets dalam direktori main anda dapat membuatnya terlebih dahulu, seperti membuat folder biasa. Dan jika sudah membuat folder anda dapat meletakan file yang bernama fontawesome-webfont.ttf tadi kedalam folder assets.

3. Tempatkan Kode Icon di File String.xml

Sekarang anda telah berhasil memasukan file fontawesome-webfont.ttf kedalam proyek Android anda untuk menggunakannya. Untuk menempatkan huruf icon menggunakan kode di android pada file string.xml maka anda hanya menuliskan pada file string.xml di direktori res/values/string.xml seperti kode dibawah ini.

res/values/string.xml

Dapatkan kode icon disini

4. Menampilkan Font Awesome Pada Layout

Dalam file layout android ini, yang nantinya akan menampilkan FontAwesome dengan menggunakan TextView, Button dan lain-lain untuk menempatkan icon yang mengagumkan dimanapun anda inginkan. Contoh kode layout dengan bentuk file XML android akan terlihat seperti kode dibawah ini.

res/layout/activity_main.xml

Pada tata letak anda sudah selesai, sekarang saatnya untuk bekerja dengan menggunakan file activity java. Buka file activity java anda yaitu file MainActivity.java dan menempatkan sedikit kode pada method onCreate. Maka file MainActivity.java akan terlihat seperti kode dibawah ini.

app/java/namapackage/MainActivity.java

Setelah melakukan perubahan sedikit dan menambahkan kode-kode seperti diatas proses sudah selesai sampai disini, sekarang anda dapat mencobanya dengan menjalankan project android studio anda menggunakan emulator atau menggunakan smartphone android langsung. Maka hasilnya akan seperti gambar dibawah ini.

 

Cara Pasang Iklan Page-Level Ads Google Adsense Pada Blog

Ngulik Kode - Iklan Page-Level Ads Google Adsense bagi para sesepuh dari publisher google adsense mungkin tidak asing lagi terdengar oleh mereka. namun tidak bagi pemula yang baru-baru mendaftar google adnsense dan baru diterima sepenuhnya untuk menayangkan iklan pada blog mereka. ketika masuk ke halaman utama didapati penayang untuk memasang iklan page-level ads, yang jadi pertanyaan mereka, apa itu iklan page-level ads ? page-level ads itu adalah jenis iklan baru yang ditawarkan oleh google kepada publisher untuk ditempatkan pada blog atau web milik publisher itu sendiri. Biasanya iklan yang sudah dipasang akan muncul ketika pengunjung membuka web atau blog melalui perangkat mobile.

Bagi anda publisher google adsense pada halaman dasboardnya muncul notifikasi tentang page-level ads berikut ini penjelasan cara memasang iklan page-level ads pada blog anda. berikut penjelasannya :

1. Login Google Adsense

Sebelum anda ingin menempatkan kode iklan page-level ads anda diharuskan terlebuh dahulu melakukan login. Jika sudah anda bisa langsung masuk ke halaman page-level ads, halaman page-level ads ini ini terletak pada menu My ads ► Page-Level Ads atau Jika ada notifikasi pada dasboard anda langsung klik button yang akan diarahkan langsung ke halaman page-level ads.

2. Mengambil Kode Iklan

Selanjutnya anda aktifkan terlebuh dahulu kedua format iklan, yaitu Anchor/overvlay dan Vignette ads di sana sudah terdapat penjelasan dari masing-masing format. Jika kedua format iklan sudah di aktifkan selanjutnya anda mengambil kode iklan dengan klik button Get code 

Setelah mendapatkan kode page-level ads, anda tidak bisa langsung menempatkannya pada blog anda. anda harus parse kode iklan terlebih dahulu agar tidak terjadi error ketika disimpan.

Contoh Kode Iklan Belum Diparse :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "xxxxxxxxxxxxxxxxxxxxxx",
    enable_page_level_ads: true
  });
</script>

Contoh Kode Iklan Sudah Diparse :

&lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;

&lt;script&gt;

  (adsbygoogle = window.adsbygoogle || []).push({

    google_ad_client: "xxxxxxxxxxxxxxxxxxxxxx",

    enable_page_level_ads: true

  });

&lt;/script&gt;

Diatas merupakan contoh kode yang belum diparse dan yang sudah diparse, jika anda membutuhkan tools untuk memparse kode yang anda miliki anda bisa copy kode anda disini : http://www.ngulikode.com/p/ad-converter.html

3. Memasang Kode Iklan

Jika sudah copy semua kode yang sudah diparse dan letakan kode pada blog anda tepat dibawah <head>

Jika sudah jangan lupa untuk menyimpan templatenya.

Perlu anda ingat page-level ads hanya dapat muncul pada smartphone android dengan versi android 4.0 keatas menggunakan google chrome. Page-level ads ini tidak akan muncul pada desktop.

Jika semua sudah dilakukan tinggal anda cek menggunakan #googleads pada akhir link url blog anda contoh www.namadomain.com#googleads, dibawah ini beberapa screenshot iklan page-level yang muncul.

 

Berikut adalah dua jenis page-level ads yang berbeda, ketika diakses menggunakan perangkat smartphone. Sekian penjelasan yang singkat dari saya semoga dapat bermanfaat untuk anda semua.