Cara Membuat Custom Toolbar Material Design

Cara Membuat Custom Toolbar Material Design

Assalamualaikum Warahmatullahi Wabarakatuh. Toolbar salah satu komponen yang sangat penting bagi seorang developer untuk membuat sebuh aplikasi, toolbar sendiri berfungsi sebagai manu navigasi yang memudahkan pengguna dalam berinteraksi pada aplikasi kita.

Panduan Cara Membuat Custom Toolbar Material Design, AppBar Layout, Toolbar, design, actionBar, support actionBar, actionBar Size,  java programming, android studio. Dari WILDAN TECHNO ART.

Toolbar merupakan pengganti/kelanjutan dari versi sebelumnya yaitu ActionBar, dimana komponen tersebut merupakan bagian dari material design, jika dibadingkan dengan actionBar, toolbar lebih custom sehingga kita bisa merubah tampilan serta komponen didalamnya sesuka hati.

Tapi untuk tutorial ini, kita akan membuat toolbar yang sederhana saja, dengan konsep material design, agar terlihat lebih menarik, dan menambahkan beberapa item pada toolbar tersebut.

Cara Membuat Custom Toolbar Material Design

1) Buatlah project baru pada android studio kalian, jika sudah selesai, selanjutnya buka file build.gradle(app-level), setelah itu masukan library berikut ini pada dependencies.
WildanTechnoArt-BuildGradle App-Level
Build Gradle (App-Level)

compile 'com.android.support:appcompat-v7:26.0.2'
compile 'com.android.support:design:26.0.2'

2) Pertama tama kita akan membuat icon/image terlebih dahulu yang akan kita gunakan sebagai menu navigasi pada toolbar tersebut, sebagai contoh, kita akan membuat icon search, yang nantinya jika icon tersebut di klik maka akan terjadi sesuatu.

Klik kalan pada direktori res > new > Image Asset.
WildanTechnoArt-Membuat Image Asset
Membuat Image Asset

3) Ubah Icon Type menjadi Action Bar and Tab Icon, berinama, pilih Clip Art, karena kita akan mengunakan icon bawaan android studio, klik pada icon Clip Art(yang ada gambar androidnya), terakhir, Ubah Themenya menjadi HOLO_LIGHT atau kalian bisa menyesuaikannya warnanya sendiri.
WildanTechnoArt-Setelan Icon Image Asset
Setelan Image Asset

4) Pilih gambar Icon Search pada kategori Action, lalu klik OK..
WildanTechnoArt-Setelan Icon Image Asset
Memilih Icon/Image Asset

5) Sekarang kita akan membuat menu, untuk kita pasang pada toolbar tersebut. Caranya klik kanan pada direktori res > new > Android resource file.
WildanTechnoArt-Membuat Layout Menu
Membuat Menu Item

Baca Juga:

6) Berinama file tersebut lalu ubah Resource type menjadi Menu, Klik OK.
WildanTechnoArt-Resources Type Menu
Memilih Resource type

Setelah itu akan terlihat folder menu pada drektori res, didalamnya terdapat file menu yang sudah kita but tadi, klik/buka file tersebut.
WildanTechnoArt-Direktori Menu
Direktori Menu

7) Buatlah file menu tersebut dengan memasukan kode seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:title="Cari"
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"/>

    <item android:title="Tentang"
        android:id="@+id/about"
        app:showAsAction="never"/>

</menu>

Penjelasan:
  • Tag Item disunakan untuk membuat item baru pada toolbar/actionBar.
  • atribut android:title digunakan untuk memberi nama pada item tersebut.
  • android:id digunakan untuk memberi id.
  • android:icon untuk menambahkan icon pada item, disini saya hanya menambahkan item pada menu search saja.
  • app:showAsAction untuk manambahkan menu item sebagai action item, pada atribut tersebut terdapat beberapa pilihan, yaitu always, ifRoom, never dan withText.
  • always: yang berarti menu item akan selalu muncul pada actionBar/toolbar.
  • ifRoom: digunakan agar item tersebut bisa tampil di actionBar/toolbar jika ruang tersedia, jika tidak, item/menu akan di tempatkan di menu overflow.
  • never: action item akan selalu disembunyikan dan hanya tampil di menu overflow, jika kalian ingin tahu apa itu menu overflow, contohnya seperti pada gambar berikut ini:
Screenshot_menu everflow example
Screenshot menu everflow example
  • withText: item akan ditampilkan berupa ikon dan akan berdampingan bersama teks, withText dapat digabung dengan nilai lain menggunakan karakter | (pipe), contohnya seperti ini app:showAsAction="withText|always"

8) Buka file activity_main.xml kalian, lalu tambahkan kode dibawah ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@android:color/white"
    tools:context="cianjur.developer.net.toolbar.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:minHeight="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/AppTheme">

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

</RelativeLayout>

Coba kalian perhatikan, pada code tersebut kita menggunakan widget AppBarLayout, yang brfungsi agar toolbar kita terlihat memiliki konsep material design dan didalamnya terdapat widget toolbar, yang digunakan sebagai pembungkus isi konten dari toolbar yang akan kita gunakan.

Dan berikut ini merupakan gambar activity_main.xml jika dilihat dalam mode design:
WildanTechnoArt-Toolbar Layout Example
Toolbar Layout Example

Selanjutnya kita akan menerapkan toolbar tersebut dengan menggunakan java, buka file ActivityMain.java kalian, lalu msukan code berikut ini:

package cianjur.developer.net.toolbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar); //Inisialisasi dan Implementasi id Toolbar

        setSupportActionBar(toolbar); // Memasang Toolbar pada Aplikasi
        getSupportActionBar().setTitle("Toolbar MD"); // Memasang Dudul pada Toolbar
        //Menghilangkan Title Bar Bawaan
        if(toolbar != null){
            getSupportActionBar().setDisplayShowTitleEnabled(false);
        }
    }

    //Code Program pada Method dibawah ini akan Berjalan saat Option Menu Dibuat
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //Memanggil/Memasang menu item pada toolbar dari layout menu_bar.xml
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.manu_bar, menu);
        return super.onCreateOptionsMenu(menu);
    }

    //Membuat event/kejadian saat salah satu item pada toolbar di klik
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.about :
                //Kode disini akan di eksekusi saat tombol about di klik
                Toast.makeText(this, "Developer By: Wildan", Toast.LENGTH_SHORT).show();
                break;
            case R.id.search :
                //Kode disini akan di eksekusi saat tombol search di klik
                Toast.makeText(this, "Silakan Cari Sesuatu", Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

Selasai!, seletah itu jalankan project tersebut, maka liharlah hasilnya.

Silakan Download Projectnya Disini

Kalian bisa bereksperimen sendiri dan membuatnya lebih bagus lagi, semoga tutorial yang saya buat ini bisa bermanfaat untuk kalian semua. Wassalamualaikum Warahmatullahi Wabarakatuh.

AdMob: Cara Menampilkan Native Express Video

AdMob: Cara Menampilkan Native Express Video

Assalamualaikum Warahmatullahi Wabarakatuh. Sebelumnya kita sudah belajar bagaimana cara menggunakan iklan jenis Native Express pada AdMob, pada tutorial sebelumnya kita membuat unit iklan Native dengan ukuran kecil mirip dengan spanduk/banner jika kita set/pilih ke ukuran besar, jenis ini bisa menampilkan iklan berupa video, yang tentunya bisa meningkatkan penghasilan kita.

Tutorial Cara Memasang Iklan Jenis Native Express Video pada Aplikasi Android, adRequest, AdSize, AdUnitId, loadAd, adListener, Video Option, Video Controller, Android Studio. Dari WILDAN TECHO ART.

Native Ads berukuran besar sangat cocok digunakan jika kita membuat sebuah list pada activity kita, jadi iklan tersebut bisa kita pasang pada list tersebut agar tidak mengganggu user. Tapi pada tutorial ini kita tidak akan menggunakan list untuk menempatkan iklan tersebut, kita akan membuatnya sesederhana mungkin supaya mudah dipahami.

Cara Menampilkan Native Express Video

1) Kunjungi situs AdMob, dan login dengan akun Gmail kalian https://www.google.co.id/admob/

2) Pada menu beranda, klik Tambahkan Aplikasi, lalu msukan nama aplikasi, maka akan terlihat ID Aplikasi tersebut, seperti gambar dibawah ini, setelah itu klik BUAT UNIT IKLAN.
WildanTechnoArt-Menambahkan Aplikasi baru Pada AdMob
Menambahkan Aplikasi ke AdMob

3) Pilih jenis format iklan Native.
WildanTechnoArt-Memilih Jenis Format Iklan
Memilih Jenis Format Iklan

4) Berinama pada unit iklan tersebut, supaya videonya bisa tampil, disini kalian harus memilih ukuran Besar:
WildanTechnoArt-AdMob Memilih Jenis Ukuran
Memilih Ukuran Iklan

5) Pilih kerangka yang ingin disesuaikn pada iklan tersebut.
WildanTechnoArt-AdMob Memilih Jenis Kerangka yang ingin disesuaikan
Memilih Kerangka

6) Sesuaikan kerangka yang ingin kalian buat, disini kalian bisa mendesign style dari iklan tersebut, seperti warna font, backgrund, text, dll. menggunakan CSS atau Secara langsung, jangan lupa untuk menceklis Pemasangan Aplikasi Video, setelah itu klik Simpan.
WildanTechnoArt-AdMob Menyesuaikan Kerangka
Menyesuaikan Kerangka

7) Lihat petunjuk penerapannya dan jangan lupa untuk mencatat ID Unit Iklan Tersebut.
WildanTechnoArt-AdMob Petunjuk Penerapan
Petunjuk Penerapan Iklan

8) Selanjutnya kita buat project pada android studio, lalu buka file AndroidManifest.xml, masukan uses-permisson berikut ini:

<uses-permission android:name="android.permission.INTERNET"/>
WildanTechnoArt-Uses-Permission INTERNET
uses-permission INTERNET

Baca Juga:

9) Sekarang buka file build.gradle(App-level) lalu masukan library berikut ini, didalam dependencies:

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

10) Berikut ini merupakan screenshot design layout yang akan kita buat:
WildanTechnoArt-AdMob Native Video Ads Example
Native Video Ads Example

Seperti biasa, kita akan mengguanakan RelativeLayout sebagai containernya, lalu kita pasang widget NativeExpressAdsView berada di tengah, kalian buat file.xmlnya seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:gravity="center"
    tools:context="cianjur.developer.net.admobexample.AdMob_By_Google">

    <com.google.android.gms.ads.NativeExpressAdView
        android:id="@+id/nativeVideo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ads:adSize="FULL_WIDTHx250"
        ads:adUnitId="ca-app-pub-xxxxxx">

    </com.google.android.gms.ads.NativeExpressAdView>

</RelativeLayout>

11) Source Code untuk menampilkan Video pada NativeExpress hampir sama dengan tutorial sebelumnya, yang berbeda yaitu disini kita akan menggunakan setVideoOptions serta Video Controller:

package cianjur.developer.net.admobexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.NativeExpressAdView;
import com.google.android.gms.ads.VideoController;
import com.google.android.gms.ads.VideoOptions;

public class AdMob_By_Google extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_admob_by_google);

        //Memuat Iklan NativeExpress Ads
        final NativeExpressAdView nativeExpressAdView = findViewById(R.id.nativeVideo);
        nativeExpressAdView.loadAd(new AdRequest.Builder().build());

        //Membuat Event/Kejadian Pada Siklus Hidup Interstitial Ads
        nativeExpressAdView.setAdListener(new AdListener() {

            @Override
            public void onAdFailedToLoad(int i) {
                super.onAdFailedToLoad(i);
                //Kode disini akan di eksekusi saat Iklan Gagal Dimuat
                Toast.makeText(getApplicationContext(), "Iklan Gagal Dimuat", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAdLoaded() {
                super.onAdLoaded();
                //Kode disini akan di eksekusi saat Iklan Selesai Dimuat
                Toast.makeText(getApplicationContext(), "Iklan Selesai Dimuat", Toast.LENGTH_SHORT).show();
            }
        });

        //
        nativeExpressAdView.setVideoOptions(new VideoOptions.Builder()
        .setStartMuted(true)
        .build());

        final VideoController VC = nativeExpressAdView.getVideoController();
        VC.setVideoLifecycleCallbacks(new VideoController.VideoLifecycleCallbacks(){
            @Override
            public void onVideoEnd() {
                super.onVideoEnd();
                //Kode disini akan di eksekusi saat video selesai diputar
                Toast.makeText(getApplicationContext(), "Video Ads Selesai", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

Penjelsan:
  • VideoOptions memungkinkan aplikasi untuk mengonfigurasi bagaimana aset video bawaan harus berperilaku.
  • VideoOptions.Builder terdapat metode bernama setStartMuted (), yang memberi tahu SDK apakah aset video harus dimulai dalam status yang tidak diucapkan/bisu.
  • VideoController digunakan untuk mengambil informasi tentang aset video. dengan menggunakan method getVideoController ()
  • setVideoLifecycleCallbacks digunakan untuk mendapatkan pemberitahuan saat terjadi peristiwa dalam siklus hidup aset video.

12) Jalankan project tersebut, iklan akan muncul tapi karena iklan yang tampil secara acak, jadi kemungkinan, iklan yang bebentuk video jarang muncul dan terkadang sering muncul juga.

Itulah tutorial mengenai cara menampilkan video pada unit iklan Native Express, terimkasih telah berkunjung ke blog pribadi saya, semoga tutorial yang saya buat bermanfaat untuk kalian semua. Wassalamualaikum Warahmatullahi Wabarakatuh.

AdMob: Tingkatkan Penghasilan Dengan Native Express

AdMob: Tingkatkan Penghasilan Dengan Native Express

Assalamualaikum Warahmatullahi Wabarakatuh. Pada Postingan sebelumnya, saya sudah menjalaskan mengendai Apa itu Native Ads?. Pada tutorial kalian ini kita akan belajar cara menggunakan iklan jenis native express untuk monetisasi aplikasi, iklan jenis ini sangat unik, karena tampilannya bisa kita edit sesuai keinginan, seperti warna font, background, judul, dll, secara langsung atau menggunakan CSS.

Cara Meningkatkan Penghasilan Publisher Dengan Menggunakan Native Ads Express, Google AdMob, NativeExpress AdView, AdRequest, LoadAds, Android Studio, Java Progrmming. Dari WILDAN TECHO ART.

Iklan Jenis ini mirip dengan Iklan Spanduk/Banner Ads karena iklan persegi empat ini dapat kita pasang ke tata letak dan ukuran yang kita inginkan. Perbedaan utamanya adalah kita dapat mengontrol tampilan/style iklan tersebut, seperti ukuran gambar, font, warna, dan lain-lain dengan menggunakan CSS. AdMob menggabungkan template ini dengan aset pengiklan, seperti ikon, gambar, dan teks, sehingga iklan yang ditampilkan menjadi lebih bagus.

Tingkatkan Penghasilan Dengan Native Express

1) Kunjungi situs AdMob, dan login dengan akun Gmail kalian https://www.google.co.id/admob/

2) Pada menu beranda, klik Tambahkan Aplikasi, lalu msukan nama aplikasi, maka akan terlihat ID Aplikasi tersebut, seperti gambar dibawah ini, setelah itu klik BUAT UNIT IKLAN.
WildanTechnoArt-Menambahkan Aplikasi baru Pada AdMob
Menambahkan Aplikasi ke AdMob

3) Pilih jenis format iklan Native.
WildanTechnoArt-Memilih Jenis Format Iklan
Memilih Jenis Format Iklan

4) Berinama pada Unit iklan tersebut, pilih ukuran yang ingin kita gunakan, pada tutorial ini, kita akan menggunakan ukuran kecil, lalu klik gambar tersebut:
WildanTechnoArt-AdMob Memilih Jenis Ukuran Untuk Unit Iklan Netive Express
Memilih dan Menentukan Ukuran Iklan

5) Disini kalian bisa memilih jenis kerangka apa yang ingin digunakan, pilihlah sesuai dengan selera kalian.
WildanTechnoArt-AdMob Memilih Kerangka Kecil Untuk Unit Iklan Netive Express
Memilih kerangka kecil yang ingin digunakan

6) Pada bagian ini, kalian bisa mendesign gaya/tampilan pada unit iklan tersebut yang akan ditampilkan pada aplikasi, kalian bisa mendesignnya secara langsung atau menggunakan CSS.
WildanTechnoArt-AdMob Menyesuaikan kerangka Netive Express
Menyesuaikan Kerangka

7) Jangan lupa untuk mencatat ID Unit Iklan tersebut, untuk kita gunakan pada project aplikasi.
WildanTechnoArt-AdMob Petunjuk Penerapan Iklan
Petunjuk Penerapan

8) Pada project yang kalian buat, buka file AndroidManifest.xml, lalu masukan uses-permisson berikut ini, untuk mengizinkan aplikasi membuka soket jaringan:

<uses-permission android:name="android.permission.INTERNET"/>
WildanTechnoArt-Uses-Permission INTERNET
uses-permission INTERNET

9) Buka file build.gradle(App-level) lalu masukan library berikut ini, didalam dependencies dan akan terdownload secara otomatis.

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

10) Kita akan menggunakan widget/komponen NativeExpressAdView dan menggunakan RelativeLayout sebagai containernya.
WildanTechnoArt-AdMob NativeExpress Ads Example
NativeExpress Ads Example

Kalian edit file.xmlnya seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:gravity="bottom"
    tools:context="cianjur.developer.net.admobexample.AdMob_By_Google">

    <com.google.android.gms.ads.NativeExpressAdView
        android:id="@+id/nativeExpress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ads:adSize="FULL_WIDTHx80"
        ads:adUnitId="ca-app-pub-xxxxxx"/>

    </com.google.android.gms.ads.NativeExpressAdView>

</RelativeLayout>

Berikut ini merupakan atribut-atribut yang perlu dipasang:
  • android:layout_width & android layout_height: keduanya harus kita atur ke wrap_content
  • ads:adSize: Digunakan untuk mengatur ukuran iklan, untuk lebar pada iklan tersebut, saya menggunakan FULL_WIDTH, artinya lebar pada iklan akan menyesuaikan layar ponsel.
  • ads:dUnitId: Masukan ID Unit Iklan kalian disini.

Jenis iklan ini mempunyai berbagai macam ukuran, yaitu:
Size Min Width Max width Min height Max height
Small 280 1200 80 612
Medium 280 1200 132 1200
Large 280 1200 250 1200
Pada activity kalian, masukan source code berikut ini:

package cianjur.developer.net.admobexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

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

public class AdMob_By_Google extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_admob_by_google);

        //Memuat Iklan NativeExpress Ads
        NativeExpressAdView nativeExpressAdView = findViewById(R.id.nativeExpress);
        nativeExpressAdView.loadAd(new AdRequest.Builder().build());

        //Membuat Event/Kejadian Pada Siklus Hidup Interstitial Ads
        nativeExpressAdView.setAdListener(new AdListener(){

            @Override
            public void onAdFailedToLoad(int i) {
                super.onAdFailedToLoad(i);
                //Kode disini akan di eksekusi saat Iklan Gagal Dimuat
                Toast.makeText(getApplicationContext(), "Iklan Gagal Dimuat", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAdLoaded() {
                super.onAdLoaded();
                //Kode disini akan di eksekusi saat Iklan Selesai Dimuat
                Toast.makeText(getApplicationContext(), "Iklan Selesai Dimuat", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Jalankan project tersebut, maka hasilnya akan seperti ini:
WildanTechnoArt-Screenshot_NativeExpress Ads Example
NativeExpress Ads Example

Sekian dari saya, mohon maaf bila ada kesalahan, dan jangan lupa untuk follow fansPage WILDAN TECHNO ART untuk mendaptkan update terbaru dari blog ini, jika ada yang ingin kalian tanyakan, silakan isi komentar dibawah. Wassalamualaikum Warahmatullahi Wabarakatuh.

AdMob: Apa Itu Native Ads?

AdMob: Apa Itu Native Ads?

Assalamualaikum Warahmatullahi Wabarakatuh. Pada Google AdMob terdapat salah satu Unit Iklan yang menurut saya unik dan keren, yaitu Naitve Ads, Unit iklan ini mirip dengan iklan jenis banner, hanya saja iklan ini memiliki tampilan yang menarik serta terdapat fitur custom CSS, jadi kita bisa mengedit tampilan tersebut.

Pengertian Native Ads pada AdMob, Jenis-jenis Native Ads, Native Ads Express, Native Ads Advanced, Custom CSS, Android Studio, Java Programming, Google AdMob. Dari WILDAN TECHNO ART

Apa Itu Native Ads ?

Native ads adalah janis format iklan yang memberi kebebasan kepada publisher untuk menyesuaikan bagaimana tampilan iklan pada aplikasi mereka. seperti menentukan jenis font, warna, background dan pengaturan lainnya, menggunakan CSS.

Berikut ini merupakan screenshot penggunaan Native Ads pada Aplikasi yang saya buat:
WildanTechnoArt-Contoh penerapan Native Ads
Native Ads Example

Jika mau kalian bisa mendownload aplikasinya disini

Google AdMob menawarkan dua cara/jenis yang berbeda untuk menerapkan unit iklan Native, yaitu Native Ads Express dan Native Ads Advanced. kedua jenis ini sangat dibutuhkan bagi seorang publisher, karena kemudahannya serta dirancang untuk memaksimalkan dan membari kebabasan kepada publisher dalam membuat persentasi mereka.

Native Ads Express

Dengan menggunakanNative Ads Express, aset iklan bawaan seperti text dan gambar digabungkan dengan kerangka CSS dan ditampilkan dalam tampilan iklan dalam sebuah aplikasi. Publisher bisa menyesuaikan tampilan iklan tersebut dengan memodifikasi template CSS yang terkait dengan masing-masing unit iklan mereka.

Manfaat dan keistimewahan dari iklan jenis ini adalah kita bisa dengan bebas memodifikasi iklan tersebut secara langsung pada akun admob kita, serta membarikan tampilan yang lebih modern dibandingkan iklan jenis banner.

Kalian bisa membuat dan mempelajarinya disini

Native Ads Advanced

Dengan Native Ads Advanced, aplikasi akan menerima aset iklan bawaan langsung dari SDK Iklan Seluler dan kemudian menampilkannya menggunakan elemen UI yang asli ke platform. Sebuah aset string dapat ditampilka, misalnya dalam TextView.

Manfat dan kelebihan dari jenis ini adalah publisher dapat menampilkan aset itu sendiri, kita memiliki banyak kontrol atas bagaimana iklan disajikan. Tidak hanya menentukan font, warna, dan posisi saat runtime, namun penayang juga dapat menampilkan aset iklan bawaan menggunakan kelas UI khusus pada platform yang telah mereka gunakan untuk menampilkan konten.

Itulah penjelasan singkat megenai Native Ads pada AdMob, somoga bisa menambah wawasan kalian, serta penghasilan dari aplikasi yang kalian buat semakin meningkat. Wassalamualaikum Warahmatullahi Wabarakatuh.

AdMob: Memonetisasi Aplikasi Dengan Interstitial Ads

AdMob: Memonetisasi Aplikasi Dengan Interstitial Ads

Assalamualaikum Warahmatullahi Wabarakatuh. Iklan jenis biasanya digunakan oleh developer game untuk mendapatkan pendapatan dari project atau karyanya tersebut, karena dengan menggunakan iklan jenis ini lebih menguntungkan. Untuk contoh penerapannya, misalnya saat kita menyelesaikan sebuah stage/level pada game, maka iklan tersebut akan muncul, atau saat user menghentikan/meninggalkan aplikasi.


Interstitial Ads adalah iklan layar penuh/full screen yang mencakup antarmuka aplikasi. Jenis ini biasanya ditampilkan pada titik transisi alami dalam arus aplikasi, seperti antara aktivitas atau selama jeda antara tingkat dalam permainan. Saat sebuah aplikasi menampilkan iklan pengantara, pengguna memiliki pilihan untuk mengetuk iklan dan melanjutkan ke tujuannya atau menutupnya dan kembali ke aplikasi.

Memonetisasi Aplikasi Dengan Interstitial Ads

1) Login pada akun AdMob kalian https://www.google.co.id/admob/

2) Selanjutnya Tambahkan Aplikasi, lalu isi nama aplikasi kalian, maka akan terlihat ID Aplikasi tersebut, seperti gambar dibawah ini, setelah itu klik BUAT UNIT IKLAN.
WildanTechnoArt-Menambahkan Aplikasi baru Pada AdMob
Menambahkan Aplikasi ke AdMob

3) Pilih jenis format iklan Interstitial.
WildanTechnoArt-Memilih Jenis Format Iklan
Memilih Jenis Format Iklan

4) Berinama pada Unit iklan tersebut, lalu atur setelannya seperti berikut ini:
WildanTechnoArt-Setelan Unit Iklan Interstitial Ads
Setelan Unit Iklan Interstitial Ads

5) Klik Simpan, setelah itu akan terlihat ID Aplikasi dan ID Unit Iklan tersebut:
WildanTechnoArt-Petunjuk Penerapan Untuk Unit Iklan Interstitial Ads
Petunjuk Penerapan Google AdMob

Baca Juga:

6) Buat project baru, setelah itu buka file AndroidManifest.xml pada project tersebut, lalu masukan uses-permisson berikut ini, untuk mengizinkan aplikasi membuka soket jaringan:

<uses-permission android:name="android.permission.INTERNET"/>
WildanTechnoArt-Uses-Permission INTERNET
uses-permission INTERNET

7) Buka file build.gradle(App-level) lalu masukan library berikut ini, didalam dependencies selanjutnya akan terdownload secara otomatis.

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

8) Untuk design layoutnya, kita cukup menggunakan satu Button saja, dan RelativeLayout sebagai containernya.
WildanTechnoArt-AdMob Example Interstitial Ads Layout Design
Layout Design

Dan berikut ini merupakan file.xml dari layout tersebut:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cianjur.developer.net.admobexample.AdMob_By_Google">

    <Button
        android:id="@+id/showAds"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Show Ads" />
</RelativeLayout>

9) Buka file.java pada activity kalian, lalu masukan source code berikut ini:

package cianjur.developer.net.admobexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

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

public class AdMob_By_Google extends AppCompatActivity {

    private InterstitialAd interstitialAd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_admob_by_google);
        Button showAds = findViewById(R.id.showAds);

        //Implementasi dan Membuat Objek Interstitial Ads
        interstitialAd = new InterstitialAd(this);
        //Masukan ID Unit Iklan Interstitial Kalian Disini
        interstitialAd.setAdUnitId("ca-app-pub-xxxxxx");
        interstitialAd.loadAd(new AdRequest.Builder().build());

        //Membuat Event/Kejadian Pada Siklus Hidup Interstitial Ads
        interstitialAd.setAdListener(new AdListener(){
            @Override
            public void onAdClosed() {
                super.onAdClosed();
                //Kode disini akan di eksekusi saat Iklan Ditutup
                Toast.makeText(getApplicationContext(), "Iklan Dititup", Toast.LENGTH_SHORT).show();
                //Setelah ditutup, Iklan akan memuat ulang kembali
                interstitialAd.loadAd(new AdRequest.Builder().build());
            }

            @Override
            public void onAdFailedToLoad(int i) {
                super.onAdFailedToLoad(i);
                //Kode disini akan di eksekusi saat Iklan Gagal Dimuat
                Toast.makeText(getApplicationContext(), "Iklan Gagal Dimuat", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAdLeftApplication() {
                super.onAdLeftApplication();
                //Kode disini akan di eksekusi saat Pengguna Meniggalkan Aplikasi/Membuka Aplikasi Lain
                Toast.makeText(getApplicationContext(), "Iklan Ditinggalkan", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAdOpened() {
                super.onAdOpened();
                //Kode disini akan di eksekusi saat Pengguna Mengklik Iklan
                Toast.makeText(getApplicationContext(), "Iklan Diklik", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAdLoaded() {
                super.onAdLoaded();
                //Kode disini akan di eksekusi saat Iklan Selesai Dimuat
                Toast.makeText(getApplicationContext(), "Iklan Selesai Dimuat", Toast.LENGTH_SHORT).show();
            }
        });

        //Setelah Iklan Selesai dimuat, pada saat Button di Klik, iklan akan muncul
        showAds.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(interstitialAd.isLoaded()){
                    interstitialAd.show();
                }
            }
        });
    }
}

10) Coba kalian jalankan project tersebut, tunggu hingga iklan selesai di muat(muncul pesan yang terdapat pada Toast), setelah itu klik Button tersebut.
Screenshot-AdMob_InterstitialAds_Example
screenshot Interstitial Ads Ecample

Kalian juga bisa menggunakan Interstitial Ads saat user meninggalkan/menutup aplikasi sepenuhnya, kalian tinggal menambahkan method onDestroy(), seperti ini:

@Override
    protected void onDestroy() {
        super.onDestroy();
        if(interstitialAd.isLoaded()){
            interstitialAd.show();
        }
    }

Sampai disini saja, terimakasih telah berkunjung ke blog pribadi saya, semoga ilmu yang saya berikan bisa bermanfaat untuk kalian semua, Terakhir dari saya. Wassalamualaikum Warahmatullahi Wabarakatuh.

AdMob: Memasang Iklan Spanduk/Banner Ads

AdMob: Memasang Iklan Spanduk/Banner Ads

Assalamualaikum Warahmatullahi Wabarakatuh. Pada tutorial kali ini, saya akan mengajarkan pada kalian bagaimana cara memasang unik iklan jenis Spanduk/Banner dari Google AdMob, unit iklan ini sering sekali digunakan oleh para developer untuk mendapatkan penghasilan, karena unit iklan ini sangat simple dan sederhana, sehingga tidak menggangu User saat menggunakan aplikasi mereka.

Cara Membuat dan Memasang Unit Iklan Sepanduk/Banner Ads, AdRequest, Ad Events, Banner Sizes, Smart Banners, Load Ads, Ad Sizes, Google Admob, Android Studio, Java Programming.Dari WILDAN TECHNO ART.

Banner Ads atau Iklan spanduk merupakan gambar segi empat/segi panjang serta iklan teks yang menempati tempat di dalam tata letak aplikasi. Iklan ini tetap berada di layar selama pengguna berinteraksi dengan aplikasi, dan dapat merefresh/menyegarkan secara otomatis setelah jangka waktu tertentu.

AdMob: Memasang Iklan Spanduk/Banner Ads

1) Kunjungi situs resmi AdMob https://www.google.co.id/admob/ lalu Login menggunakan akun Gmail kalian.

2) Di menu beranda, Klik Tambahkan Aplikasi, jika aplikasi kalian berada di playStore, pilih ya dan jika tidak, pilih tidak, lalu isi nama project aplikasi yang kalian buat, maka kalian akan dapat ID Aplikasi tersebut, seperti gambar dibawah ini, setelah itu klik BUAT UNIT IKLAN.
WildanTechnoArt-Menambahkan Aplikasi baru Pada AdMob
Menambahkan Aplikasi ke AdMob

3) Pilih jenis format iklan Banner.
WildanTechnoArt-Memilih Jenis Format Iklan
Memilih Jenis Format Iklan

4) Berinama Unit iklan tersebut, direkomendasikan untuk setelan iklannya seperti ini:
WildanTechnoArt-Setelan Unit Iklan Spanduk/Banner Ads
Setelan Unit Iklan Banner Ads

5) Klik Simpan, setelah itu akan terlihat ID Aplikasi dan ID Unit Iklan tersebut:
WildanTechnoArt-Petunjuk Penerapan Untuk Unit Iklan Banner Ads
Petunjuk Penerapan Google AdMob

6) Buka Android Studio kalian, lalu buat project baru, jika sudah, selanjutnya buka file AndroidManifest.xml pada project tersebut, lalu masukan uses-permisson berikut ini, untuk mengizinkan aplikasi membuka soket jaringan:

<uses-permission android:name="android.permission.INTERNET"/>
WildanTechnoArt-Uses-Permission INTERNET
uses-permission INTERNET

Baca Juga:

7) Buka file build.gradle(App-level) lalu masukan library berikut ini, didalam dependencies, jika terjadi error, disarankan koneksi Internet kalian sedang aktif:

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

8) Pada contoh berikut ini, kita akan memasang Banner Ads di bawah layar, menggunakan AdView:
WildanTechnoArt-Memasang Widget AdView pada Container
Layout Design

Untuk lebih jelasnya, edit file.xml pada layout tersebut seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    tools:context="cianjur.developer.net.admobexample.AdMob_By_Google">

    <com.google.android.gms.ads.AdView
        android:id="@+id/spanduk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="ca-app-pub-xxxx" /> <!-- Masukan ID Unit Iklan Kalian Disini -->
</RelativeLayout>

Masukan ID Unit Iklan Kalian pada artibut ads:adUnitId="xxxxx" dan jangan lupa untuk menetapkan ukuran Banner Ads, disini saya menggunakan ukuran SMART_BANNER agar ukuran banner tersebut menyesuaikan dengan layar posel, selain SMART_BANNER, terdapat berbagai macam ukuran lainnya yaitu:
  • BANNER: Banner ukuran standar, yaitu 320x50, digunakan untuk telepon dan tablet.
  • LARGE_BANNER: Banner ukuran besar, yaitu 320x100, digunakan untuk telepon dan tablet.
  • MEDIUM_RECTANGLE: Banner ukuran Medium Empat Persegi Panjang, yaitu 300x250, digunakan untuk telepon dan tablet.
  • FULL_BANNER: Banner ukuran besar, yaitu 468x60, digunakan untuk tablet.
  • LEADERBOARD: Banner ukuran besar, yaitu 728x90, digunakan untuk tablet.
  • SMART_BANNER: Banner ukuran menyesuaikan layar, yaitu LebarLayar x 32|50|90, digunakan untuk telepon dan tablet.

9) Selanjutnya pada Activity yang kita buat, masukan Source Code seperti berikut ini:

package cianjur.developer.net.admobexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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;

public class AdMob_By_Google extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_admob_by_google);

        //Inisialisasi Banner Ads
        AdView adView = findViewById(R.id.spanduk);
        adView.loadAd(new AdRequest.Builder().build());

        //Membuat Event Pada Siklus Hidup Iklan
        adView.setAdListener(new AdListener(){
            @Override
            public void onAdClosed() {
                //Kode disini akan di eksekusi saat Iklan Ditutup
                Toast.makeText(getApplicationContext(), "Iklan Dititup", Toast.LENGTH_SHORT).show();
                super.onAdClosed();
            }

            @Override
            public void onAdFailedToLoad(int i) {
                //Kode disini akan di eksekusi saat Iklan Gagal Dimuat
                Toast.makeText(getApplicationContext(), "Iklan Gagal Dimuat", Toast.LENGTH_SHORT).show();
                super.onAdFailedToLoad(i);
            }

            @Override
            public void onAdLeftApplication() {
                //Kode disini akan di eksekusi saat Pengguna Meniggalkan Aplikasi/Membuka Aplikasi Lain
                Toast.makeText(getApplicationContext(), "Iklan Ditinggalkan", Toast.LENGTH_SHORT).show();
                super.onAdLeftApplication();
            }

            @Override
            public void onAdOpened() {
                //Kode disini akan di eksekusi saat Pengguna Mengklik Iklan
                Toast.makeText(getApplicationContext(), "Iklan Diklik", Toast.LENGTH_SHORT).show();
                super.onAdOpened();
            }

            @Override
            public void onAdLoaded() {
                //Kode disini akan di eksekusi saat Iklan Selesai Dimuat
                Toast.makeText(getApplicationContext(), "Iklan Selesai Dimuat", Toast.LENGTH_SHORT).show();
                super.onAdLoaded();
            }
            
        });
    }
}

10) Terakhir jalankan project tersebut, maka hasilnya akan seperti berikut ini:
WildanTechnoArt-AdMob Banner Ads Example
Banner Ads Example

Jika ada yang ingin kalian tanyakan, silakan ini komentar dibawah dan jangan lupa untuk follow FansPage WILDAN TECHNO ART untuk mendapatkan update terbaru, terakhir dari saya. Wassalamualaikum Warahmatullahi Wabarakatuh.