Admob Native Advanced Implementation Guide – with code

Native Ads Advanced is a format in which ad assets are presented to users via UI components that are native to the platform. They’re shown using the same types of views with which you’re already building your layouts so they can be formatted to match the visual design of the user experience in which they live. This is the latest update made by AdMob and these ad units are unique in them self and so is there code it is a bit complex unlike the native ad code, we have simplified it and the code is made available to you in the section below,

Here is the exact code very well simplified and made easy to understand considering the new developers you can directly copy and paste from here to access the latest native advance ads

  1.  Update the gradle by latest play services
compile 'com.google.android.gms:play-services-ads:11.8.0'

 

2.  Give the internet permission in manifest

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

3.  Add a special ad style in values -> Styles

<style name=”AppTheme.AdAttribution”>
<item name=”android:layout_width”>wrap_content</item>
<item name=”android:layout_height”>wrap_content</item>
<item name=”android:layout_gravity”>left</item>
<item name=”android:textColor”>#FFFFFF</item>
<item name=”android:textSize”>12sp</item>
<item name=”android:text”>Ad</item>
<item name=”android:background”>#FFCC66</item>
<item name=”android:width”>15dp</item>
<item name=”android:height”>15dp</item>
</style>

 

4. Here we will need two XML files to show app install ads and content ads

First make an XML – ad_app_install.xml, this layout will be used for app install ads. then you can copy paste this code.

<com.google.android.gms.ads.formats.NativeAppInstallAdView
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:background=”#FFFFFF”
android:minHeight=”50dp”
android:orientation=”vertical”>

<TextView style=”@style/AppTheme.AdAttribution”/>

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical”
android:paddingLeft=”20dp”
android:paddingRight=”20dp”
android:paddingTop=”3dp”>

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal”>

<ImageView
android:id=”@+id/appinstall_app_icon”
android:layout_width=”40dp”
android:layout_height=”40dp”
android:adjustViewBounds=”true”
android:paddingBottom=”5dp” />

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical”>

<TextView
android:id=”@+id/appinstall_headline”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:textSize=”14sp”
android:textStyle=”bold” />

<RatingBar
android:id=”@+id/appinstall_stars”
style=”?android:attr/ratingBarStyleSmall”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:isIndicator=”true”
android:numStars=”5″
android:stepSize=”0.5″ />
</LinearLayout>
</LinearLayout>

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical”>

<TextView
android:id=”@+id/appinstall_body”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginRight=”20dp”
android:layout_marginEnd=”20dp”
android:textSize=”12sp” />

<ImageView
android:id=”@+id/appinstall_image”
android:layout_width=”250dp”
android:layout_height=”175dp”
android:layout_gravity=”center_horizontal”
android:layout_marginTop=”5dp” />

<com.google.android.gms.ads.formats.MediaView
android:id=”@+id/appinstall_media”
android:layout_gravity=”center_horizontal”
android:layout_width=”250dp”
android:layout_height=”175dp”
android:layout_marginTop=”5dp” />

<LinearLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”end”
android:orientation=”horizontal”
android:paddingBottom=”10dp”
android:paddingTop=”10dp”>

<TextView
android:id=”@+id/appinstall_price”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:paddingLeft=”5dp”
android:paddingStart=”5dp”
android:paddingRight=”5dp”
android:paddingEnd=”5dp”
android:textSize=”12sp” />

<TextView
android:id=”@+id/appinstall_store”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:paddingLeft=”5dp”
android:paddingStart=”5dp”
android:paddingRight=”5dp”
android:paddingEnd=”5dp”
android:textSize=”12sp” />

<Button
android:id=”@+id/appinstall_call_to_action”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center”
android:textSize=”12sp” />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.google.android.gms.ads.formats.NativeAppInstallAdView>

 

then make another XML file – ad_content.xml , this layout will be used to show content ads.

<com.google.android.gms.ads.formats.NativeContentAdView
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:background=”#FFFFFF”
android:minHeight=”50dp”>

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:orientation=”vertical”>

<TextView style=”@style/AppTheme.AdAttribution”/>

<TextView
android:id=”@+id/contentad_headline”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_horizontal”
android:layout_marginTop=”16dp”
android:textColor=”#0000FF”
android:textSize=”24sp”
android:textStyle=”bold” />

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginTop=”16dp”
android:layout_marginBottom=”8dp”
android:orientation=”horizontal” >

<LinearLayout
android:layout_width=”0dp”
android:layout_height=”match_parent”
android:layout_weight=”0.35″
android:orientation=”vertical” >

<ImageView
android:id=”@+id/contentad_image”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:layout_margin=”8dp”
android:maxHeight=”100dp”
android:adjustViewBounds=”true” />

<TextView
android:id=”@+id/contentad_call_to_action”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_horizontal”
android:layout_marginTop=”8dp”
android:textColor=”#0000FF”
android:textSize=”16sp”
android:textStyle=”bold” />
</LinearLayout>

<LinearLayout
android:layout_width=”0dp”
android:layout_height=”match_parent”
android:layout_weight=”0.5″
android:orientation=”vertical”>

<TextView
android:id=”@+id/contentad_body”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textSize=”16sp” />

<LinearLayout
android:layout_width=”wrap_content”
android:layout_height=”match_parent”
android:layout_gravity=”right”
android:layout_marginTop=”16dp”
android:gravity=”bottom”
android:orientation=”horizontal”>

<TextView
android:id=”@+id/contentad_advertiser”
android:layout_width=”wrap_content”
android:layout_height=”match_parent”
android:gravity=”bottom”
android:textSize=”14sp”
android:textStyle=”bold” />

<ImageView
android:id=”@+id/contentad_logo”
android:layout_width=”25dp”
android:layout_height=”25dp”
android:layout_marginRight=”8dp”
android:gravity=”bottom” />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.google.android.gms.ads.formats.NativeContentAdView>

 

5. Then go to the activity XML file where you want to show the ad and copy paste this code.

<FrameLayout
android:id=”@+id/adplace”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginTop=”16dp” />

 

6. The last step is adding the java code. I’m adding complete java activity code so that you can understend how much code you need and where to place the code. Implement the exact library file. then add those two lines(App id and Ad unit id) to the main method. Then exactly add remaining code to the java file.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RatingBar;
import android.widget.TextView;

import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdLoader;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.VideoController;
import com.google.android.gms.ads.VideoOptions;
import com.google.android.gms.ads.formats.MediaView;
import com.google.android.gms.ads.formats.NativeAd;
import com.google.android.gms.ads.formats.NativeAdOptions;
import com.google.android.gms.ads.formats.NativeAppInstallAd;
import com.google.android.gms.ads.formats.NativeAppInstallAdView;
import com.google.android.gms.ads.formats.NativeContentAd;
import com.google.android.gms.ads.formats.NativeContentAdView;

import java.util.List;

public class test_Ads extends AppCompatActivity {

private static final String ADMOB_AD_UNIT_ID = “ca-app-pub-3940256099942544/2247696110”;
private static final String ADMOB_APP_ID = “ca-app-pub-3940256099942544~3347511713”;

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

MobileAds.initialize(this, ADMOB_APP_ID);
refreshAd(true,true);
}

private void populateAppInstallAdView(NativeAppInstallAd nativeAppInstallAd,
NativeAppInstallAdView adView) {
VideoController vc = nativeAppInstallAd.getVideoController();

vc.setVideoLifecycleCallbacks(new VideoController.VideoLifecycleCallbacks() {
public void onVideoEnd() {
super.onVideoEnd();
}
});

adView.setHeadlineView(adView.findViewById(R.id.appinstall_headline));
adView.setBodyView(adView.findViewById(R.id.appinstall_body));
adView.setCallToActionView(adView.findViewById(R.id.appinstall_call_to_action));
adView.setIconView(adView.findViewById(R.id.appinstall_app_icon));
adView.setPriceView(adView.findViewById(R.id.appinstall_price));
adView.setStarRatingView(adView.findViewById(R.id.appinstall_stars));
adView.setStoreView(adView.findViewById(R.id.appinstall_store));

((TextView) adView.getHeadlineView()).setText(nativeAppInstallAd.getHeadline());
((TextView) adView.getBodyView()).setText(nativeAppInstallAd.getBody());
((Button) adView.getCallToActionView()).setText(nativeAppInstallAd.getCallToAction());
((ImageView) adView.getIconView()).setImageDrawable(
nativeAppInstallAd.getIcon().getDrawable());

MediaView mediaView = adView.findViewById(R.id.appinstall_media);
ImageView mainImageView = adView.findViewById(R.id.appinstall_image);

if (vc.hasVideoContent()) {
adView.setMediaView(mediaView);
mainImageView.setVisibility(View.GONE);
vc.getAspectRatio();
} else {
adView.setImageView(mainImageView);
mediaView.setVisibility(View.GONE);

List<NativeAd.Image> images = nativeAppInstallAd.getImages();
mainImageView.setImageDrawable(images.get(0).getDrawable());

}

if (nativeAppInstallAd.getPrice() == null) {
adView.getPriceView().setVisibility(View.INVISIBLE);
} else {
adView.getPriceView().setVisibility(View.VISIBLE);
((TextView) adView.getPriceView()).setText(nativeAppInstallAd.getPrice());
}

if (nativeAppInstallAd.getStore() == null) {
adView.getStoreView().setVisibility(View.INVISIBLE);
} else {
adView.getStoreView().setVisibility(View.VISIBLE);
((TextView) adView.getStoreView()).setText(nativeAppInstallAd.getStore());
}

if (nativeAppInstallAd.getStarRating() == null) {
adView.getStarRatingView().setVisibility(View.INVISIBLE);
} else {
((RatingBar) adView.getStarRatingView())
.setRating(nativeAppInstallAd.getStarRating().floatValue());
adView.getStarRatingView().setVisibility(View.VISIBLE);
}

adView.setNativeAd(nativeAppInstallAd);
}

private void populateContentAdView(NativeContentAd nativeContentAd,
NativeContentAdView adView) {

adView.setHeadlineView(adView.findViewById(R.id.contentad_headline));
adView.setImageView(adView.findViewById(R.id.contentad_image));
adView.setBodyView(adView.findViewById(R.id.contentad_body));
adView.setCallToActionView(adView.findViewById(R.id.contentad_call_to_action));
adView.setLogoView(adView.findViewById(R.id.contentad_logo));
adView.setAdvertiserView(adView.findViewById(R.id.contentad_advertiser));

((TextView) adView.getHeadlineView()).setText(nativeContentAd.getHeadline());
((TextView) adView.getBodyView()).setText(nativeContentAd.getBody());
((TextView) adView.getCallToActionView()).setText(nativeContentAd.getCallToAction());
((TextView) adView.getAdvertiserView()).setText(nativeContentAd.getAdvertiser());

List<NativeAd.Image> images = nativeContentAd.getImages();

if (images.size() > 0) {
((ImageView) adView.getImageView()).setImageDrawable(images.get(0).getDrawable());
}

NativeAd.Image logoImage = nativeContentAd.getLogo();

if (logoImage == null) {
adView.getLogoView().setVisibility(View.INVISIBLE);
} else {
((ImageView) adView.getLogoView()).setImageDrawable(logoImage.getDrawable());
adView.getLogoView().setVisibility(View.VISIBLE);
}

adView.setNativeAd(nativeContentAd);
}

private void refreshAd(boolean requestAppInstallAds, boolean requestContentAds) {

AdLoader.Builder builder = new AdLoader.Builder(this, ADMOB_AD_UNIT_ID);

if (requestAppInstallAds) {
builder.forAppInstallAd(new NativeAppInstallAd.OnAppInstallAdLoadedListener() {
@Override
public void onAppInstallAdLoaded(NativeAppInstallAd ad) {
FrameLayout frameLayout1 =
findViewById(R.id.adplace);
NativeAppInstallAdView adView1 = (NativeAppInstallAdView) getLayoutInflater()
.inflate(R.layout.ad_app_install, null);
populateAppInstallAdView(ad, adView1);
frameLayout1.removeAllViews();
frameLayout1.addView(adView1);
}
});
}

if (requestContentAds) {
builder.forContentAd(new NativeContentAd.OnContentAdLoadedListener() {
@Override
public void onContentAdLoaded(NativeContentAd ad) {
FrameLayout frameLayout1 =
findViewById(R.id.adplace);
NativeContentAdView adView1 = (NativeContentAdView) getLayoutInflater()
.inflate(R.layout.ad_content, null);
populateContentAdView(ad, adView1);
frameLayout1.removeAllViews();
frameLayout1.addView(adView1);
}
});
}

VideoOptions videoOptions = new VideoOptions.Builder()
.setStartMuted(true)
.build();

NativeAdOptions adOptions = new NativeAdOptions.Builder()
.setVideoOptions(videoOptions)
.build();

builder.withNativeAdOptions(adOptions);

AdLoader adLoader = builder.withAdListener(new AdListener() {
@Override
public void onAdFailedToLoad(int errorCode) {

}
}).build();

adLoader.loadAd(new AdRequest.Builder().build());

}

}


After finishing this code you can run your app to check the ads. 

Note. Ad unit used in this code is a test Ad unit code, please replace it with your App ad unit when you are updating your app.

 

 

 

 

 

 

 

 

 

 

 

 

 

%d bloggers like this: