Native Ads Android Setup - cleveradssolutions/CAS-Flutter GitHub Wiki

Native ads are presented to users using UI components native to the platform: a View on Android or a UIView on iOS.

This guide shows you how to load, display, and customize native ads using platform-specific code.

1. Import the CASMobileAdsPlugin class
2. Layout the views
3. Implement Native Ad Factory
4. Register Native Ad Factory in CAS Plugin
5. Load ad content with factory ID

The Android implementation of the CAS Mobile Ads plugin requires a class implementing theNativeAdFactory API. In order to reference this API from your Android project, add the following lines to your android/settings.gradle:

def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withInputStream { stream -> plugins.load(stream) }
}

plugins.each { name, path ->
    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
    include ":$name"
    project(":$name").projectDir = pluginDirectory
}

Navigate to <project>/android/app/main/res/layout and create a new XML layout file.

The view hierarchy for a native ad that uses a CASNativeView to display its asset views might look like this:

<com.cleveradssolutions.sdk.nativead.CASNativeView
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout android:orientation="vertical">
        <LinearLayout android:orientation="horizontal">
            <ImageView android:id="@+id/ad_icon" />
            <TextView android:id="@+id/ad_headline" />
            <com.cleveradssolutions.sdk.nativead.CASChoicesView
                android:id="@+id/ad_choices_view" />
        </LinearLayout>
        <com.cleveradssolutions.sdk.nativead.CASMediaView
            android:id="@+id/ad_media_view" />
        <com.cleveradssolutions.sdk.nativead.CASStarRatingView
            android:id="@+id/ad_star_rating" />

        <!-- Other assets such as image or call to action, etc follow. -->
    </LinearLayout>
</com.cleveradssolutions.sdk.nativead.CASNativeView>

Navigate to <project>/android/app/main and create a new class that implements the CASNativeAdViewFactoryinterface. Override the createNativeAdView function, in which you need to create and return the CASNativeView.

Register all the view assets you use in the layout to the adView, and the CAS SDK will automatically populate them with ad content, or make the view invisible if the corresponding asset is not provided in the ad content.

import android.content.Context  
import android.view.LayoutInflater  
import com.cleveradssolutions.plugin.flutter.CASMobileAdsPlugin  
import com.cleveradssolutions.plugin.flutter.CASNativeAdViewFactory  
import com.cleveradssolutions.sdk.nativead.CASNativeView  
import com.cleveradssolutions.sdk.nativead.NativeAdContent

class NativeAdFactoryExample : CASNativeAdViewFactory {  
    override fun createNativeAdView(  
        context: Context,  
        nativeAd: NativeAdContent,  
        customOptions: Map<String, Any?>  
    ): CASNativeView? {  
        val adView = LayoutInflater.from(context).inflate(  
            R.layout.native_ad_layout, null, false  
        ) as CASNativeView  
  
        adView.mediaView = adView.findViewById(R.id.ad_media_view)  
        adView.adLabelView = adView.findViewById(R.id.ad_label)  
        adView.headlineView = adView.findViewById(R.id.ad_headline)  
        adView.iconView = adView.findViewById(R.id.ad_icon)  
        adView.callToActionView = adView.findViewById(R.id.ad_call_to_action)  
        adView.bodyView = adView.findViewById(R.id.ad_body)  
        adView.advertiserView = adView.findViewById(R.id.ad_advertiser)  
        adView.storeView = adView.findViewById(R.id.ad_store)  
        adView.priceView = adView.findViewById(R.id.ad_price)  
        adView.reviewCountView = adView.findViewById(R.id.ad_review_count)  
        adView.starRatingView = adView.findViewById(R.id.ad_star_rating)  
  
        return adView  
    }  
}

The CAS Flutter plugin will automatically call adView.setNativeAd(nativeAd) later in any case.

You can find more details about the implementation of platform native ad view on the CAS Android wiki page.

Each CASNativeAdViewFactory implementation is required to be registered with a factoryId, a unique String identifier, when calling configureFlutterEngine(). The factoryId will be used later when loading a native ad from Dart code.

A CASNativeAdViewFactory can be implemented and registered for each unique native ad layout used by your app, or a single one can handle all layouts.

Note that when building with add-to-app, the NativeAdFactory should also be unregistered incleanUpFlutterEngine().

Once you've created NativeAdFactoryExample, set up yourFlutterActivity as follows:

import com.cleveradssolutions.plugin.flutter.CASMobileAdsPlugin 

class MainActivity : FlutterActivity() {  
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {  
        super.configureFlutterEngine(flutterEngine)  
  
        CASMobileAdsPlugin.nativeAdFactories = mapOf(  
            "nativeFactoryIdExample" to NativeAdFactoryExample()  
        )
    }  
  
    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {  
        super.cleanUpFlutterEngine(flutterEngine)  
  
        CASMobileAdsPlugin.nativeAdFactories = null  
    }  
}

After you've added your platform-specific code, turn to Dart to load ads.

• Make sure factoryId match the ID you registered earlier.
• сustomOptions are optional parameters for creating your native ad view. These parameters will be passed as a Map to the ad view creation function on both Android and iOS.

class NativeAdExampleState extends State<NativeAdExample> {
  AdViewInstance? _nativeAd;
  
  void _loadAd() {
    CASNativeContent.load( 
      factoryId: 'nativeFactoryIdExample',  
      customOptions: {  
        'exampleOptionKey': 'exampleValue',  
      },
      onAdLoaded: (AdViewInstance ad) { 
        // Called when an ad is successfully loaded. 
        print('$ad loaded'); 
        setState(() { 
          _nativeAd = ad;
        });
      },  
    );
  }
}

🔗 Next
Use native ads as described on the Get Started page.