th_studio_common_module

Description:

th studio common module

TH Studio Advertisement 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'

copied to clipboard
2. 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>
copied to clipboard
3. 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>

copied to clipboard
4. 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")
}
}
copied to clipboard
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>

copied to clipboard
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
}
}
copied to clipboard
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());
}
copied to clipboard
Ok so let start using.
I. Using Admod #
1. Banner #
Create an banner widget by using the following method
BannerAdMod().createBannerWidget('YOUR BANNER ID')
copied to clipboard
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.
}

}
copied to clipboard
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()));
}
}
copied to clipboard
4. Show native ads #
Create an Widget to display native ads by using following method
NativeAdMod().createNativeWidget('Your native id', 300, 300),
copied to clipboard
II. Using Facebook #
1. Banner #
Create an banner widget by using the following method
BannerFacebook().createBannerWidget(FB_BANNER,
bannerSize: NativeBannerAdSize.HEIGHT_50),
copied to clipboard
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
}
}
copied to clipboard
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()));
}

}
copied to clipboard
4. Show native ads #
Create an Widget to display native ads by using following method
NativeFacebook().createNativeWidget('Your native id', 300, 300),
copied to clipboard