SDK Native - Custom Layout

Native SDK — Custom Layouts

Prerequisite: Familiar with the Customizations options.

When the default layout doesn't fit your design, you can provide a completely custom XML layout. You control every pixel — the SDK only handles data fetching, impression tracking, and click handling.

---

How It Works

You provide an implementation of MCNativeAdRenderer — an interface with two methods:

Method	What it does
getItemLayoutId()	Returns your custom XML layout resource for a single campaign card
onBindCampaign(View, MCCampaign, int)	Binds campaign data to your views — you decide what to show

The SDK handles everything else: fetching, scrolling, impression tracking, click handling.

The SDK inflates your layout for each campaign and calls onBindCampaign on the UI thread.

Here we present three different custom layout examples that you can use as an inspiration for your implementation. These are just examples, you can customize the layout however you'd like.

---

Example A: Circular Thumbnails

This example creates a horizontal scroll of campaigns with circular images, promo badges, in-progress indicators, and a currency icon.

Step A.1: Create the item layout

<!-- res/layout/item_campaign_circular.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="140dp"
    android:layout_height="wrap_content"
    android:minHeight="222dp"
    android:layout_marginEnd="24dp"
    android:orientation="vertical"
    android:clipChildren="false"
    android:clipToPadding="false">

    <!-- Circular thumbnail + promo badge -->
    <FrameLayout
        android:layout_width="140dp"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:paddingTop="12dp">

        <!-- Circular image -->
        <ImageView
            android:id="@+id/mc_ivIcon"
            android:layout_width="140dp"
            android:layout_height="140dp"
            android:scaleType="centerCrop"
            android:background="@drawable/bg_circle"
            android:clipToOutline="true" />

        <!-- Promo badge (top-left, overlapping) -->
        <TextView
            android:id="@+id/mc_tvPromo"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_gravity="top|start"
            android:layout_marginTop="-12dp"
            android:background="@drawable/mc_bg_badge_promo"
            android:gravity="center"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"
            android:textColor="#FFFFFFFF"
            android:textSize="12sp"
            android:textStyle="bold"
            android:visibility="gone" />

    </FrameLayout>

    <!-- Campaign name -->
    <TextView
        android:id="@+id/mc_tvName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:ellipsize="end"
        android:maxLines="2"
        android:fontFamily="sans-serif-medium"
        android:textColor="?android:attr/textColorPrimary"
        android:textSize="14sp" />

    <!-- Currency icon + reward value -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/mc_ivCurrency"
            android:layout_width="14dp"
            android:layout_height="14dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/mc_tvReward"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="3dp"
            android:textColor="?android:attr/textColorPrimary"
            android:textSize="16sp"
            android:textStyle="bold" />

    </LinearLayout>

    <!-- In Progress badge -->
    <TextView
        android:id="@+id/mc_tvProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:background="@drawable/mc_bg_badge_progress"
        android:paddingStart="8dp"
        android:paddingEnd="8dp"
        android:paddingTop="2dp"
        android:paddingBottom="2dp"
        android:text="In Progress"
        android:textColor="#FF424B5A"
        android:textSize="12sp"
        android:visibility="invisible" />

</LinearLayout>

You'll also need these drawables:

res/drawable/bg_circle.xml — circular background for the image:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FFE8E8E8" />
</shape>

Note: The SDK bundles mc_bg_badge_promo and mc_bg_badge_progress drawables. You can reference them directly from your layouts using @drawable/mc_bg_badge_promo and @drawable/mc_bg_badge_progress.

Step A.2: Set the renderer

You can just copy-paste this code to try it out, but remember to replace https://my-cdn/my-coin-image.png with your actual icon:

Kotlin

val adView = findViewById<MCNativeAdView>(R.id.adView)

adView.setRenderer(object : MCNativeAdRenderer {
    override fun getItemLayoutId() = R.layout.item_campaign_circular

    override fun onBindCampaign(itemView: View, campaign: MCCampaign, position: Int) {
        val tvName = itemView.findViewById<TextView>(R.id.mc_tvName)
        val tvReward = itemView.findViewById<TextView>(R.id.mc_tvReward)
        val ivIcon = itemView.findViewById<ImageView>(R.id.mc_ivIcon)
        val ivCurrency = itemView.findViewById<ImageView>(R.id.mc_ivCurrency)
        val tvPromo = itemView.findViewById<TextView>(R.id.mc_tvPromo)
        val tvProgress = itemView.findViewById<TextView>(R.id.mc_tvProgress)

        tvName.text = campaign.name

        // Locale-formatted reward
        val nf = java.text.NumberFormat.getNumberInstance()
        nf.maximumFractionDigits = 0
        tvReward.text = nf.format(campaign.totalConvertedValue)

        // Images
        ivIcon.clipToOutline = true
        val url = campaign.creatives?.thumbnail ?: campaign.creatives?.cover
        MCOfferwallSDK.LoadImage(url, ivIcon)
        // Replace with your currency icon URL
        MCOfferwallSDK.LoadImage("https://my-cdn/my-coin-image.png", ivCurrency)

        // Promo badge
        if (campaign.promoRatio > 1.0) {
            tvPromo.visibility = View.VISIBLE
            tvPromo.text = "x" + campaign.promoRatio + " Rewards";
        } else {
            tvPromo.visibility = View.GONE
        }

        // In Progress badge
        if (campaign.progress != null
            && campaign.progress.status != null
            && campaign.progress.status != MCCampaignStatus.COMPLETED
            && campaign.progress.status != MCCampaignStatus.CLOSED) {
            tvProgress.visibility = View.VISIBLE
        } else {
            tvProgress.visibility = View.INVISIBLE
        }
    }
})

adView.load()

Java

---

Example B: Vertical Layout (small cards)

This example renders a vertical list of compact row cards. Each item shows a rounded thumbnail on the left, the title and an "In Progress" badge in the center, and the reward with currency icon on the right. The promo badge floats above the top-right corner of the card.

Step B.1: create the item layout

<!-- res/layout/item_campaign_small.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    android:layout_marginBottom="8dp"
    android:clipChildren="false"
    android:clipToPadding="false">

    <!-- Card background -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="92dp"
        android:background="@drawable/bg_card"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingStart="16dp"
        android:paddingEnd="16dp">

        <!-- Thumbnail (60x60, rounded) -->
        <ImageView
            android:id="@+id/mc_ivIcon"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/mc_bg_thumbnail"
            android:clipToOutline="true"
            android:scaleType="centerCrop"
            android:contentDescription="Campaign icon" />

        <!-- Center: title + in-progress badge -->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="12dp"
            android:gravity="center_vertical"
            android:orientation="vertical">

            <TextView
                android:id="@+id/mc_tvName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                android:fontFamily="sans-serif-medium"
                android:textColor="#FF212121"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/mc_tvProgress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:background="@drawable/mc_bg_badge_progress"
                android:paddingStart="8dp"
                android:paddingEnd="8dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:text="In Progress"
                android:textColor="#FF424B5A"
                android:textSize="12sp"
                android:visibility="gone" />
        </LinearLayout>

        <!-- Right: currency icon + reward -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/mc_ivCurrency"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:scaleType="centerCrop"
                android:contentDescription="Currency" />

            <TextView
                android:id="@+id/mc_tvReward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="3dp"
                android:textColor="#FF212121"
                android:textSize="16sp"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>

    <!-- Promo badge (top-right, overlapping top edge) -->
    <TextView
        android:id="@+id/mc_tvPromo"
        android:layout_width="wrap_content"
        android:layout_height="25dp"
        android:layout_gravity="top|end"
        android:layout_marginEnd="12dp"
        android:layout_marginTop="-12dp"
        android:background="@drawable/mc_bg_badge_promo"
        android:gravity="center"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:textColor="#FFFFFFFF"
        android:textSize="12sp"
        android:textStyle="bold"
        android:visibility="gone" />

</FrameLayout>

The mc_bg_badge_progress and mc_bg_badge_promo drawables are bundled with the SDK. bg_card and mc_bg_thumbnail are examples of your own drawables.

Step B.2: wire the renderer

Set the orientation to vertical and provide an MCNativeAdRenderer that inflates the layout above and binds each MCCampaign to its views. Also in this case, remember to replace https://your.cdn/currency.png with your actual currency icon.

private void setupVerticalSmallView() {
    MCNativeAdView adView = findViewById(R.id.adViewVerticalSmall);

    adView.setOrientation(RecyclerView.VERTICAL);

    adView.setRenderer(new MCNativeAdRenderer() {
        @Override
        public int getItemLayoutId() {
            return R.layout.item_campaign_small;
        }

        @Override
        public void onBindCampaign(View itemView, MCCampaign campaign, int position) {
            TextView tvName = itemView.findViewById(R.id.mc_tvName);
            TextView tvReward = itemView.findViewById(R.id.mc_tvReward);
            TextView tvPromo = itemView.findViewById(R.id.mc_tvPromo);
            TextView tvProgress = itemView.findViewById(R.id.mc_tvProgress);
            ImageView ivIcon = itemView.findViewById(R.id.mc_ivIcon);
            ImageView ivCurrency = itemView.findViewById(R.id.mc_ivCurrency);

            // Title
            tvName.setText(campaign.name);

            // Reward
            try {
                java.text.NumberFormat nf = java.text.NumberFormat.getNumberInstance(Locale.getDefault());
                nf.setMaximumFractionDigits(0);
                tvReward.setText(nf.format(campaign.totalConvertedValue));
            } catch (Exception e) {
                tvReward.setText(String.format(Locale.US, "%.0f", campaign.totalConvertedValue));
            }

            // Promo badge
            if (campaign.promoRatio > 1.0) {
                tvPromo.setVisibility(View.VISIBLE);
                tvPromo.setText(MCDefaultAdRenderer.formatPromo(campaign.promoRatio));
            } else {
                tvPromo.setVisibility(View.GONE);
            }

            // In Progress badge (hide when completed/closed)
            if (campaign.progress != null
                    && campaign.progress.status != null
                    && !MCCampaignStatus.COMPLETED.equals(campaign.progress.status)
                    && !MCCampaignStatus.CLOSED.equals(campaign.progress.status)) {
                tvProgress.setVisibility(View.VISIBLE);
            } else {
                tvProgress.setVisibility(View.GONE);
            }

            // Thumbnail (fallback to cover if missing)
            String url = campaign.creatives != null ? campaign.creatives.thumbnail : null;
            if (url == null || url.isEmpty()) {
                url = campaign.creatives != null ? campaign.creatives.cover : null;
            }
            MCOfferwallSDK.LoadImage(url, ivIcon);

            // Currency icon
            MCOfferwallSDK.LoadImage("https://your.cdn/currency.png", ivCurrency);
        }
    });

    adView.load();
}

---

Example C: Vertical Layout (big cards)

This example creates a vertical list of large cover cards. Each item shows a wide cover image at the top, and a full-width green reward pill at the bottom.

Step C.1: set the item layout

<!-- res/layout/item_campaign_big.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="343dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:clipChildren="false"
    android:clipToPadding="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_cover_card"
        android:orientation="vertical">

        <!-- Cover image + promo badge overlay -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipChildren="false"
            android:clipToPadding="false">

            <ImageView
                android:id="@+id/mc_ivCover"
                android:layout_width="match_parent"
                android:layout_height="172dp"
                android:background="@drawable/bg_cover_top"
                android:clipToOutline="true"
                android:scaleType="centerCrop"
                android:contentDescription="Campaign cover" />

            <TextView
                android:id="@+id/mc_tvPromo"
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_gravity="bottom|end"
                android:layout_marginEnd="12dp"
                android:layout_marginBottom="12dp"
                android:background="@drawable/bg_promo_badge_bordered"
                android:gravity="center"
                android:paddingStart="10dp"
                android:paddingEnd="10dp"
                android:textColor="#FFFFFFFF"
                android:textSize="12sp"
                android:textStyle="bold"
                android:visibility="gone" />
        </FrameLayout>

        <!-- Title -->
        <TextView
            android:id="@+id/mc_tvName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="12dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="#FF212121"
            android:textSize="16sp"
            android:textStyle="bold" />

        <!-- In Progress badge -->
        <TextView
            android:id="@+id/mc_tvProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="12dp"
            android:layout_marginTop="2dp"
            android:background="@drawable/mc_bg_badge_progress"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:paddingTop="2dp"
            android:paddingBottom="2dp"
            android:text="In Progress"
            android:textColor="#FF424B5A"
            android:textSize="12sp"
            android:visibility="gone" />

        <!-- Green reward pill -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="47dp"
            android:layout_marginTop="10dp"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="12dp"
            android:layout_marginBottom="12dp"
            android:background="@drawable/bg_reward_pill"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/mc_ivCurrency"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:scaleType="centerCrop"
                android:contentDescription="Currency" />

            <TextView
                android:id="@+id/mc_tvReward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="4dp"
                android:textColor="#FFFFFFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>

</FrameLayout>

bg_cover_card, bg_cover_top, bg_reward_pill and bg_promo_badge_bordered are examples of your own drawables. mc_bg_badge_progress is bundled with the SDK.

Step C.2: wire the renderer

Remember to replace https://your.cdn/currency.png with your actual currency icon when copying this code.

private void setupVerticalBigView() {
    MCNativeAdView adView = findViewById(R.id.adViewVerticalBig);

    adView.setOrientation(RecyclerView.VERTICAL);

    adView.setRenderer(new MCNativeAdRenderer() {
        @Override
        public int getItemLayoutId() {
            return R.layout.item_campaign_big;
        }

        @Override
        public void onBindCampaign(View itemView, MCCampaign campaign, int position) {
            ImageView ivCover = itemView.findViewById(R.id.mc_ivCover);
            TextView tvName = itemView.findViewById(R.id.mc_tvName);
            TextView tvProgress = itemView.findViewById(R.id.mc_tvProgress);
            TextView tvReward = itemView.findViewById(R.id.mc_tvReward);
            ImageView ivCurrency = itemView.findViewById(R.id.mc_ivCurrency);
            TextView tvPromo = itemView.findViewById(R.id.mc_tvPromo);

            // Cover image (fallback to thumbnail if missing)
            String coverUrl = campaign.creatives != null ? campaign.creatives.cover : null;
            if (coverUrl == null || coverUrl.isEmpty()) {
                coverUrl = campaign.creatives != null ? campaign.creatives.thumbnail : null;
            }
            MCOfferwallSDK.LoadImage(coverUrl, ivCover);

            // Title
            tvName.setText(campaign.name);

            // In Progress badge (hide when completed/closed)
            boolean hasProgress = campaign.progress != null
                    && campaign.progress.status != null
                    && !MCCampaignStatus.COMPLETED.equals(campaign.progress.status)
                    && !MCCampaignStatus.CLOSED.equals(campaign.progress.status);
            tvProgress.setVisibility(hasProgress ? View.VISIBLE : View.GONE);

            // Reward
            try {
                java.text.NumberFormat nf = java.text.NumberFormat.getNumberInstance(Locale.getDefault());
                nf.setMaximumFractionDigits(0);
                tvReward.setText(nf.format(campaign.totalConvertedValue));
            } catch (Exception e) {
                tvReward.setText(String.format(Locale.US, "%.0f", campaign.totalConvertedValue));
            }

            // Currency icon
            MCOfferwallSDK.LoadImage("https://your.cdn/currency.png", ivCurrency);

            // Promo badge
            if (campaign.promoRatio > 1.0) {
                tvPromo.setVisibility(View.VISIBLE);
                tvPromo.setText(MCDefaultAdRenderer.formatPromo(campaign.promoRatio));
            } else {
                tvPromo.setVisibility(View.GONE);
            }
        }
    });

    adView.load();
}

---

Key Points for Custom Layouts

Click Handling

The SDK wires click handlers automatically — tapping any item opens the campaign's detail page. You can override this with setOnCampaignClickListener().

Image Loading

Use the SDK's built-in image loader in your renderer:

MCOfferwallSDK.LoadImage(url, imageView);

It handles background downloading, bitmap decoding, and RecyclerView recycling. No external library needed.

RecyclerView Recycling Tip

For horizonatl layouts, set android:minHeight on the root layout to ensure consistent item heights.

---

Next Steps

• Need the full data reference? See Data Reference →

• Need simpler tweaks? See Simple Customization →