th_studio_common_module 0.0.4

A Package to handle advertisement

th_studio_common_module

A Package to handle advertisement

Getting Started

1. Update root project class patch build gradle to at least 4.0.0

buildscript {
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:4.0.0'

1. Add INTERNET permission

Open AndroidManifest.xml and add below permission code.

<manifest  ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    ...
</manifest>

2. Register Admod application

Register admod application https://admob.google.com/home/ and update into AndroidManifest.xml

<manifest ..>
    ....
    <application ...>
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            // Put admod app id here, This is the test id.
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>
</manifest>

3. Add necessary code for Admod Navtive App

a. Update MainActivity.kt

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "NATIVE_APP_FACTORY",
            NativeAdFactory(context))
    }

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)
        // COMPLETE: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "NATIVE_APP_FACTORY")
    }
}

b. Create add layout

Open app/res and create th_studio_native_ad.xml then put these info

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.formats.UnifiedNativeAdView
    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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.formats.UnifiedNativeAdView>

c. Create NativeAdFactory.kt

package com.thstudio.example_app

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.google.android.gms.ads.formats.NativeAd
import com.google.android.gms.ads.formats.UnifiedNativeAd
import com.google.android.gms.ads.formats.UnifiedNativeAdView
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory

class NativeAdFactory(
    private val context: Context
) : NativeAdFactory {
    override fun createNativeAd(
        nativeAd: UnifiedNativeAd, customOptions: Map<String, Any>): UnifiedNativeAdView {
        val nativeAdView = LayoutInflater.from(context)
            .inflate(R.layout.th_studio_native_ad, null) as UnifiedNativeAdView
        nativeAdView.setNativeAd(nativeAd)
        val attributionViewSmall = nativeAdView
            .findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_small)
        val attributionViewLarge = nativeAdView
            .findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_large)
        val iconView: ImageView = nativeAdView.findViewById(R.id.iv_list_tile_native_ad_icon)
        val icon: NativeAd.Image? = nativeAd.icon
        if (icon != null) {
            attributionViewSmall.visibility = View.VISIBLE
            attributionViewLarge.visibility = View.INVISIBLE
            iconView.setImageDrawable(icon.drawable)
        } else {
            attributionViewSmall.visibility = View.INVISIBLE
            attributionViewLarge.visibility = View.VISIBLE
        }
        nativeAdView.iconView = iconView
        val headlineView = nativeAdView.findViewById<TextView>(R.id.tv_list_tile_native_ad_headline)
        headlineView.text = nativeAd.headline
        nativeAdView.headlineView = headlineView
        val bodyView = nativeAdView.findViewById<TextView>(R.id.tv_list_tile_native_ad_body)
        bodyView.text = nativeAd.body
        bodyView.visibility = if (nativeAd.body != null) View.VISIBLE else View.INVISIBLE
        nativeAdView.bodyView = bodyView
        return nativeAdView
    }
}

Init facebook and admod

Open your main class, and put these line before runing app Testing id is optional, this require for facebook SDK. If you are using emulator please follow the following guide to get your emulartor testing id.

void main() {
  // Important
  MobileAdModSdk.initialize(testingId: '454d0cab-45aa-4a94-bde4-c12c1a62e07c');
  runApp(HomePage());
}

Ok so let start using.

I. Using Admod

1. Banner

Create an banner widget by using the following method

BannerAdMod().createBannerWidget('YOUR BANNER ID')

2. Show Interstitial AdMod

class GoogleAdPageContent extends StatefulWidget {
  GoogleAdPageContent({Key key}) : super(key: key);

  @override
  _GoogleAdPageContentState createState() => _GoogleAdPageContentState();
}

class _GoogleAdPageContentState extends State<GoogleAdPageContent> {
  InterstitialAdMod interstitialAdMod = InterstitialAdMod();
  @override
  void initState() {
    super.initState();
    interstitialAdMod.loadAd('YOUR Interstitial ID');
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google SDK'),
      ),
      body: ListView(
        children: [
          _createButton('Interstitial ads', () => onClickInterstitial()),
        ],
      ),
    );
  }
  
  Widget _createButton(String title, VoidCallback onClick) {
    return Padding(
        padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
        child: SizedBox(
            width: double.infinity,
            child: ElevatedButton(onPressed: onClick, child: Text(title))));
  }

  onClickInterstitial() {
    interstitialAdMod.show(
        listener: AdListener(
            onAdClosed: (ad) => navigateToOtherScreen(),
            onAdFailedToLoad: (ad, error) =>navigateToOtherScreen());
  }
  
  void navigateToOtherScreen() async {
    // Finish your route.
  }

}

3. Show Reward ad

class GoogleAdPageContent extends StatefulWidget {
  GoogleAdPageContent({Key key}) : super(key: key);

  @override
  _GoogleAdPageContentState createState() => _GoogleAdPageContentState();
}

class _GoogleAdPageContentState extends State<GoogleAdPageContent> {
  InterstitialAdMod interstitialAdMod = InterstitialAdMod();
  RewardAdMod rewardAd = RewardAdMod();

  @override
  void initState() {
    super.initState();
    interstitialAdMod.loadAd(INTERSTITIAL1);
    rewardAd.loadAd(REWARDED1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google SDK'),
      ),
      body: ListView(
        children: [
          _createButton('Reward ads', () => onClickRewardAd())
        ],
      ),
    );
  }

  Widget _createButton(String title, VoidCallback onClick) {
    return Padding(
        padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
        child: SizedBox(
            width: double.infinity,
            child: ElevatedButton(onPressed: onClick, child: Text(title))));
  }

  void navigateToOtherScreen() async {
    // Finish your route.
  }

  onClickRewardAd() {
    rewardAd.show(
        listener: AdListener(
            onAdClosed: (ad) => navigateToOtherScreen(),
            onAdFailedToLoad: (ad, error) => navigateToOtherScreen()));
  }
}

4. Show navtive ads

Create an Widget to display native ads by using following method

   NativeAdMod().createNativeWidget('Your native id', 300, 300),

II. Using Facebook

1. Banner

Create an banner widget by using the following method

 BannerFacebook().createBannerWidget(FB_BANNER,
              bannerSize: NativeBannerAdSize.HEIGHT_50),

2. Show Interstitial AdMod

class FacebookAdPageContent extends StatefulWidget {
  FacebookAdPageContent({Key key}) : super(key: key);

  @override
  _FacebookAdPageContentState createState() => _FacebookAdPageContentState();
}

class _FacebookAdPageContentState extends State<FacebookAdPageContent> {
  InterstitialFacebook interstitialAdMod = InterstitialFacebook();

  @override
  void initState() {
    super.initState();
    interstitialAdMod.loadAd('YOUR ADS ID');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Facebook SDK'),
      ),
      body: ListView(
        children: [
          _createButton('Interstitial ads', () => onClickInterstitial()),
        ],
      ),
    );
  }

  Widget _createButton(String title, VoidCallback onClick) {
    return Padding(
        padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
        child: SizedBox(
            width: double.infinity,
            child: ElevatedButton(onPressed: onClick, child: Text(title))));
  }

  onClickInterstitial() {
    interstitialAdMod.show(
        listener: THStudioAdListener(
            onAdClosed: () => navigateToOtherScreen(),
            onAdFailedToLoad: (error) => navigateToOtherScreen()));
  }

  void navigateToOtherScreen() async {
    // TODO
  }
}

3. Show Reward ad

class FacebookAdPageContent extends StatefulWidget {
  FacebookAdPageContent({Key key}) : super(key: key);

  @override
  _FacebookAdPageContentState createState() => _FacebookAdPageContentState();
}

class _FacebookAdPageContentState extends State<FacebookAdPageContent> {
  RewardFacebook rewardAd = RewardFacebook();

  @override
  void initState() {
    super.initState();
    rewardAd.loadAd('YOUR REWARD ID');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Facebook SDK'),
      ),
      body: ListView(
        children: [
          _createButton('Reward ads', () => onClickRewardAd())
        ],
      ),
    );
  }

  Widget _createButton(String title, VoidCallback onClick) {
    return Padding(
        padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
        child: SizedBox(
            width: double.infinity,
            child: ElevatedButton(onPressed: onClick, child: Text(title))));
  }

  void navigateToOtherScreen() async {
    // TODO
  }

  onClickRewardAd() {
    rewardAd.show(
        listener: THStudioAdListener(
            onAdClosed: () => navigateToOtherScreen(),
            onAdFailedToLoad: (error) => navigateToOtherScreen()));
  }

}

4. Show native ads

Create an Widget to display native ads by using following method

   NativeFacebook().createNativeWidget('Your native id', 300, 300),