Example of Integrating Native Ads in between RecyclerView items - ADS KIT - Huawei Developers

Introduction
Huawei offer a range of ad formats so you can choose whichever that suits your app best. Currently, you can integrate Banner, Native, Rewarded, Interstitial, Splash, and Roll ads, and we will be launching even more formats in the future.
Use the HUAWEI Ads SDK to quickly integrate HUAWEI Ads into your app.
Native Ads
Native ads fit seamlessly into the surrounding content to match your app design. Such ads can be customized as needed.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
In this article we can learn about how to integrate Native image and video Ads in between RecyclerView items.
Check the below activity_main.xml
Code:
<?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"
android:id="@+id/rl_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">
<RelativeLayout
android:id="@+id/rl_tool"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Music Player"
android:textColor="#fff"
android:textSize="16sp" />
</RelativeLayout>
<TextView
android:id="@+id/txt_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/rl_tool"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:text="Playlist"
android:textColor="#fff"
android:textSize="16sp" />
<com.yarolegovich.discretescrollview.DiscreteScrollView
android:id="@+id/discrete_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/hw_banner_view"
android:layout_below="@id/txt_category"
app:dsv_orientation="vertical" />
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminate="false"
android:indeterminateDrawable="@drawable/circular_progress"
android:visibility="invisible" />
<com.huawei.hms.ads.banner.BannerView
android:id="@+id/hw_banner_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
After that check below MainActivity for how to get API response data by using Volley library
Code:
public class MainActivity extends AppCompatActivity {
private DiscreteScrollView discreteScrollView;
public static String BASE_URL = "https://beatsapi.media.jio.com/v2_1/beats-api/jio/src/response/home/";
private String BASE_IMAGE_URL;
private ArrayList<PlaylistModel> playlist = new ArrayList();
private boolean isConnected = false;
private HomeAdapterNew homeAdapter;
private SharedPreferences preferences;
private SharedPreferences.Editor editor;
private ProgressBar progressBar;
private BannerView bannerView;
private RelativeLayout rlRoot;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
addBannerAd();
initHomeAdapter();
if (NetworkUtil.isNetworkConnected(this))
callHomeResponseApiVolley();
else {
String homeResponse = preferences.getString("HomeResponse", "");
filterResponse(homeResponse);
}
}
private void init() {
preferences = this.getSharedPreferences("MyPref", Context.MODE_PRIVATE);
discreteScrollView = findViewById(R.id.discrete_scroll_view);
progressBar = findViewById(R.id.progress_bar);
bannerView = findViewById(R.id.hw_banner_view);
rlRoot = findViewById(R.id.rl_root);
}
private void initHomeAdapter() {
homeAdapter = new HomeAdapterNew(this);
discreteScrollView.setAdapter(homeAdapter);
discreteScrollView.setSlideOnFling(true);
discreteScrollView.setItemTransformer(new ScaleTransformer.Builder()
.setMaxScale(1.05f)
.setMinScale(0.8f)
.setPivotX(Pivot.X.CENTER)
.setPivotY(Pivot.Y.CENTER)
.build());
discreteScrollView.addScrollStateChangeListener(new DiscreteScrollView.ScrollStateChangeListener<RecyclerView.ViewHolder>() {
@Override
public void onScrollStart(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
}
@Override
public void onScrollEnd(@NonNull RecyclerView.ViewHolder viewHolder, int adapterPosition) {
}
@Override
public void onScroll(float v, int i, int i1, @Nullable RecyclerView.ViewHolder viewHolder, @Nullable RecyclerView.ViewHolder t1) {
}
});
}
private void addBannerAd() {
bannerView.setAdId("testw6vs28auh3");
bannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_360_57);
AdParam adParam = new AdParam.Builder().build();
bannerView.loadAd(adParam);
}
private void callHomeResponseApiVolley() {
progressBar.setVisibility(View.VISIBLE);
StringRequest request = new StringRequest(Request.Method.GET, BASE_URL + "Telugu", new com.android.volley.Response.Listener<String>() {
@Override
public void onResponse(String response) {
progressBar.setVisibility(View.INVISIBLE);
if (response != null) {
editor = preferences.edit();
editor.putString("HomeResponse", response);
editor.apply();
filterResponse(response);
}
}
}, new com.android.volley.Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
progressBar.setVisibility(View.INVISIBLE);
}
});
RequestQueue requestQueue = Volley.newRequestQueue(this);
requestQueue.add(request);
}
void filterResponse(String response) {
try {
JSONObject object = new JSONObject(response);
JSONObject resultObject = object.getJSONObject("result");
JSONArray jsonDataArray = resultObject.getJSONArray("data");
BASE_IMAGE_URL = resultObject.getString("imageurl");
Log.e("BASE_URL_IMAGE", BASE_IMAGE_URL);
for (int i = 0; i < jsonDataArray.length(); i++) {
String type = jsonDataArray.getJSONObject(i).getString("type");
JSONArray songsListArray = jsonDataArray.getJSONObject(i).getJSONArray("list");
if (type.equalsIgnoreCase("playlist")) {
getSongsFromArray(songsListArray);
}
}
} catch (JSONException e) {
e.printStackTrace();
}
}
private void getSongsFromArray(JSONArray songsListArray) throws JSONException {
for (int i = 0; i < songsListArray.length(); i++) {
JSONObject jsonObject = songsListArray.getJSONObject(i);
String title = jsonObject.getString("title");
String imageUrl = jsonObject.getString("image");
Log.e("ImageUrl", imageUrl);
String playlistID = jsonObject.getString("playlistid");
playlist.add(new PlaylistModel(title, playlistID, BASE_IMAGE_URL + imageUrl));
}
ArrayList<AdsListModel> adsList = new ArrayList<>();
adsList.add(new AdsListModel(getString(R.string.ad_id_native_image)));
adsList.add(new AdsListModel(getString(R.string.ad_id_native_video)));
homeAdapter.addList(playlist, adsList);
}
}
Banner Ads
Banner ads are rectangular images that occupy a spot at the top, middle, or bottom within an app layout. Banner ads refresh automatically at regular intervals. When a user clicks a banner ad, the user is usually redirected to the advertiser page.
Here in addBannerAd method bannerView taken from xml. We can integrate programatically. Check the below code
Code:
BannerView bannerView = new BannerView(this);
bannerView.setAdId("testw6vs28auh3");
bannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_SMART);
AdParam adParam = new AdParam.Builder().build();
bannerView.loadAd(adParam);
RelativeLayout.LayoutParams rLParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
rLParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, 1);
rlRoot.addView(bannerView, rLParams);
Standard Banner Ad Sizes
The following table lists the standard banner ad sizes.
NOTE :
In the Chinese mainland, only BANNER_SIZE_360_57 and BANNER_SIZE_360_144 are supported.
In the above getSongsFromArray method, We are passing both playlist data and ads data to RecyclerView adapter
with the help of addList method in HomeAdapter
Check below for Native Ad slot id
Code:
<string name="ad_id_native_image">testu7m3hc4gvm</string>
<string name="ad_id_native_video">testy63txaom86</string>
Check the below PlaylistModel class for playlist data
Code:
public class PlaylistModel extends BaseListModel implements Serializable {
String playlistTitle;
String playlistID;
String playlistImage;
public PlaylistModel(String title, String playlistID, String playlistImage) {
this.playlistID = playlistID;
this.playlistImage = playlistImage;
this.playlistTitle = title;
}
public String getPlaylistID() {
return playlistID;
}
public String getPlaylistImage() {
return playlistImage;
}
public String getPlaylistTitle() {
return playlistTitle;
}
}
Check the below code for AdsListModel
Code:
public class AdsListModel extends BaseListModel {
private String adID;
AdsListModel(String ID) {
this.adID = ID;
}
public String getAdID() {
return adID;
}
}
Check the below code for BaseListModel
Code:
public class BaseListModel {
}
After that for showing content item and ad item, Need to create two different layouts. One for actual content and another for ad.
Check the below inflate_home_item.xml for showing actual content
Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="350dp"
android:layout_margin="10dp"
app:cardBackgroundColor="#000"
app:cardCornerRadius="5dp"
app:cardElevation="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/txt_playlist_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:singleLine="true"
android:text="Prabhas Playlist"
android:textColor="#fff"
android:textSize="16sp" />
<ImageView
android:id="@+id/img_home"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_below="@id/txt_playlist_name"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:transitionName="PlaylistImage" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0204417759943370014

---

Very useful.

---

Really interesting. Thanks.

---

Quite helpful.

---

Quite interesting.

---

How ad layout behaves when device orientation is changed?