MOB-3869-Add a sample screen to example app of API customization

Java/app/build.gradle

@@ -41,7 +41,7 @@ dependencies {
     implementation 'androidx.annotation:annotation:1.1.0'
 
     //Taboola
-    implementation 'com.taboola:android-sdk-beta:meta-unified-1.0.2-615-b6bbebdb0'
+    implementation 'com.taboola:android-sdk-beta:meta-global-beta-1.0.10-638-5287bf970'
 
     implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
 

Java/app/src/main/java/com/taboola/sdk4example/MetaConst.java

@@ -12,4 +12,11 @@ public class MetaConst {
     public static final String DEFAULT_LAYOUT_KEY = "default";
     public static final String TEST_LAYOUT_IMAGE_LINK_TYPE = "image_link";
     public static final String TEST_LAYOUT_CAROUSEL_TYPE = "carousel";
+    // UI customization
+    public static final String ELEMENT_TYPE_BRANDING = "branding";
+    public static final String DARK_NODE = "darkMode";
+    public static final String TYPEFACE_ARIAL_BOLD = "arial_bold";
+    public static final int TEXT_FONT_SIZE = 20;
+    public static final int NUMBER_OF_LINES = 2;
+    public static final float AMOUNT_OF_SPACE_BETWEEN_LINES = 0.5f;
 }

Java/app/src/main/java/com/taboola/sdk4example/SDKClassicMenuFragment.java

@@ -18,7 +18,9 @@
 import com.taboola.sdk4example.sdk_classic.FeedWithMiddleArticleInsideScrollViewFragment;
 import com.taboola.sdk4example.sdk_classic.MetaAdCarouselFragment;
 import com.taboola.sdk4example.sdk_classic.MetaAdInsideScrollViewFragment;
+import com.taboola.sdk4example.sdk_classic.MetaAdUICustomization;
 import com.taboola.sdk4example.sdk_classic.MetaClassicUnitFragment;
+import com.taboola.sdk4example.sdk_classic.MetaClassicUnitFragmentUICustomization;
 import com.taboola.sdk4example.sdk_classic.OCClickHandlerFragment;
 import com.taboola.sdk4example.sdk_classic.PullToRefreshFragment;
 import com.taboola.sdk4example.sdk_classic.RecyclerViewPreloadFragment;
@@ -68,6 +70,8 @@ public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceStat
         addButton(getString(R.string.std_feed_lazy_loading_rv), R.id.std_feed_lazy_loading_rv, viewGroup);
         addButton(getString(R.string.std_mid_article_with_feed_dark_mode_rv), R.id.std_mid_article_with_feed_dark_mode_rv, viewGroup);
         addButton(getString(R.string.std_meta), R.id.std_meta_ad, viewGroup);
+        addButton(getString(R.string.std_meta_ad_UI_customization), R.id.std_meta_ad_UI_customization, viewGroup);
+        addButton(getString(R.string.std_meta_tbl_classic_unit_ad_UI_customization), R.id.std_meta_tbl_classic_unit_ad_UI_customization, viewGroup);
         addButton(getString(R.string.std_meta_classic_unit), R.id.std_meta_classic_unit, viewGroup);
         addButton(getString(R.string.std_meta_carousel), R.id.std_meta_carousel, viewGroup);
     }
@@ -115,6 +119,12 @@ public void onClick(View v) {
             case R.id.std_meta_classic_unit:
                 fragmentToOpen = new MetaClassicUnitFragment();
                 break;
+            case R.id.std_meta_ad_UI_customization:
+                fragmentToOpen = new MetaAdUICustomization();
+                break;
+            case R.id.std_meta_tbl_classic_unit_ad_UI_customization:
+                fragmentToOpen = new MetaClassicUnitFragmentUICustomization();
+                break;
             case R.id.std_meta_carousel:
                 fragmentToOpen = new MetaAdCarouselFragment();
                 break;

Java/app/src/main/java/com/taboola/sdk4example/sdk_classic/MetaAdUICustomization.java

@@ -0,0 +1,126 @@
+package com.taboola.sdk4example.sdk_classic;
+
+import static com.taboola.sdk4example.Const.META_WIDGET_MODE;
+import static com.taboola.sdk4example.Const.META_WIDGET_PLACEMENT_NAME;
+import static com.taboola.sdk4example.MetaConst.AMOUNT_OF_SPACE_BETWEEN_LINES;
+import static com.taboola.sdk4example.MetaConst.ELEMENT_TYPE_BRANDING;
+import static com.taboola.sdk4example.MetaConst.NUMBER_OF_LINES;
+import static com.taboola.sdk4example.MetaConst.TEXT_FONT_SIZE;
+import static com.taboola.sdk4example.MetaConst.TYPEFACE_ARIAL_BOLD;
+import static com.taboola.sdk4example.utils.Utils.loadFont;
+
+import android.graphics.Color;
+import android.graphics.Typeface;
+import android.os.Bundle;
+import android.util.Log;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.ads.NativeAdLayout;
+import com.taboola.android.TBLClassicPage;
+import com.taboola.android.TBLClassicUnit;
+import com.taboola.android.TBLPublisherInfo;
+import com.taboola.android.Taboola;
+import com.taboola.android.annotations.TBL_PLACEMENT_TYPE;
+import com.taboola.android.listeners.TBLClassicListener;
+
+import com.taboola.android.utils.style_properties.TBLTitleStylePropertiesBuilder;
+import com.taboola.android.utils.style_properties.TBLUiStyleProperties;
+import com.taboola.android.utils.style_properties.TBLCallToActionButtonStylePropertiesBuilder;
+import com.taboola.sdk4example.Const;
+import com.taboola.sdk4example.MetaConst;
+import com.taboola.sdk4example.R;
+import com.taboola.sdk4example.tabs.BaseTaboolaFragment;
+import com.taboola.android.utils.style_properties.TBLTextStylePropertiesBuilder;
+
+import java.util.HashMap;
+
+public class MetaAdUICustomization extends BaseTaboolaFragment {
+
+
+    private static final String TAG = MetaAdUICustomization.class.getSimpleName();
+
+
+    @Nullable
+    @Override
+    public View onCreateView(LayoutInflater inflater,
+                             @Nullable ViewGroup container,
+                             @Nullable Bundle savedInstanceState) {
+        Taboola.init(new TBLPublisherInfo(MetaConst.META_PUBLISHER_NAME));
+        View rootView = inflater.inflate(R.layout.fragment_meta_ad_classic_unit, null);
+        NativeAdLayout adContainerTop = rootView.findViewById(R.id.native_ad_container_top);
+
+        Taboola.setGlobalExtraProperties(new HashMap<String, String>() {{
+            put(MetaConst.AUDIENCE_NETWORK_APPLICATION_ID_KEY, MetaConst.AUDIENCE_NETWORK_APP_ID);
+            put(MetaConst.ENABLE_META_DEMAND_DEBUG_KEY, "true");
+        }});
+
+        setupAndLoadTaboolaAd(adContainerTop);
+        return rootView;
+    }
+
+
+    private void setupAndLoadTaboolaAd(NativeAdLayout adContainer) {
+        TBLClassicPage tblClassicPage = Taboola.getClassicPage(Const.PAGE_URL, Const.PAGE_TYPE);
+        TBLClassicUnit tblClassicUnit = tblClassicPage.build(getContext(), META_WIDGET_PLACEMENT_NAME, META_WIDGET_MODE, TBL_PLACEMENT_TYPE.PAGE_MIDDLE, new TBLClassicListener() {
+            @Override
+            public boolean onItemClick(String placementName, String itemId, String clickUrl, boolean isOrganic, String customData) {
+                Log.d(TAG, "onItemClick");
+                return super.onItemClick(placementName, itemId, clickUrl, isOrganic, customData);
+            }
+
+            @Override
+            public void onAdReceiveSuccess() {
+                super.onAdReceiveSuccess();
+                Log.d(TAG, "onAdReceiveSuccess");
+            }
+
+            @Override
+            public void onAdReceiveFail(String error) {
+                super.onAdReceiveFail(error);
+                Log.d(TAG, "onAdReceiveFail " + error);
+            }
+        });
+        tblClassicUnit.setUnitExtraProperties(new HashMap<String, String>() {{
+            put(MetaConst.AUDIENCE_NETWORK_PLACEMENT_ID_KEY, MetaConst.AUDIENCE_NETWORK_PLACEMENT_ID);
+        }});
+        Typeface font = loadFont(getActivity(), TYPEFACE_ARIAL_BOLD);
+
+        // Create custom style properties for the branding
+        TBLUiStyleProperties brandingStyleProperties = new TBLTextStylePropertiesBuilder(ELEMENT_TYPE_BRANDING)
+                .setFontLightColor(R.color.design_default_color_error)
+                .setFontDarkColor(R.color.colorPrimary)
+                .setFontSize(TEXT_FONT_SIZE)
+                .setTypeface(font)
+                .build();
+
+        // Create custom style properties for the title
+        TBLUiStyleProperties titleStyleProperties = new TBLTitleStylePropertiesBuilder()
+                .setAmountOfSpaceBetweenLines(AMOUNT_OF_SPACE_BETWEEN_LINES)
+                .setLines(NUMBER_OF_LINES)
+                .setFontLightColor(Color.RED)
+                .setFontSize(TEXT_FONT_SIZE)
+                .setFontDarkColor(Color.BLUE)
+                .setTypeface(font)
+                .build();
+
+        // Create custom style properties for the call to action button
+//        TBLUiStyleProperties ctaStyleProperties = new TBLCallToActionButtonStylePropertiesBuilder()
+//                // Sets the visibility of the call-to-action (CTA) button.
+//                // The button is visible by default. Pass true to this method to hide it.
+//                .setVisibility(true)
+//                .build();
+
+        // Set the custom UI properties to the Meta native Ad
+        tblClassicUnit.setNativeUI(MetaConst.DEFAULT_LAYOUT_KEY, brandingStyleProperties, titleStyleProperties
+//                ctaStyleProperties
+        );
+        adContainer.addView(tblClassicUnit);
+        tblClassicUnit.fetchContent();
+    }
+
+
+}

Java/app/src/main/java/com/taboola/sdk4example/sdk_classic/MetaClassicUnitFragmentUICustomization.java

@@ -0,0 +1,140 @@
+package com.taboola.sdk4example.sdk_classic;
+
+import static com.taboola.sdk4example.Const.META_FEED_MODE;
+import static com.taboola.sdk4example.Const.META_FEED_PLACEMENT_NAME;
+import static com.taboola.sdk4example.Const.META_WIDGET_MODE;
+import static com.taboola.sdk4example.Const.META_WIDGET_PLACEMENT_NAME;
+import static com.taboola.sdk4example.MetaConst.AMOUNT_OF_SPACE_BETWEEN_LINES;
+import static com.taboola.sdk4example.MetaConst.DARK_NODE;
+import static com.taboola.sdk4example.MetaConst.ELEMENT_TYPE_BRANDING;
+import static com.taboola.sdk4example.MetaConst.NUMBER_OF_LINES;
+import static com.taboola.sdk4example.MetaConst.TEXT_FONT_SIZE;
+import static com.taboola.sdk4example.MetaConst.TYPEFACE_ARIAL_BOLD;
+import static com.taboola.sdk4example.utils.Utils.loadFont;
+
+import android.content.res.Configuration;
+import android.graphics.Color;
+import android.graphics.Typeface;
+import android.os.Bundle;
+import android.util.Log;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.ads.NativeAdLayout;
+import com.taboola.android.MetaPlacementProperties;
+import com.taboola.android.TBLClassicPage;
+import com.taboola.android.TBLMetaClassicUnit;
+import com.taboola.android.TBLPublisherInfo;
+import com.taboola.android.Taboola;
+import com.taboola.android.annotations.TBL_PLACEMENT_TYPE;
+import com.taboola.android.listeners.TBLClassicListener;
+import com.taboola.android.utils.style_properties.TBLCallToActionButtonStylePropertiesBuilder;
+import com.taboola.android.utils.style_properties.TBLTextStylePropertiesBuilder;
+import com.taboola.android.utils.style_properties.TBLTitleStylePropertiesBuilder;
+import com.taboola.android.utils.style_properties.TBLUiStyleProperties;
+import com.taboola.sdk4example.Const;
+import com.taboola.sdk4example.MetaConst;
+import com.taboola.sdk4example.R;
+import com.taboola.sdk4example.tabs.BaseTaboolaFragment;
+
+import java.util.HashMap;
+
+public class MetaClassicUnitFragmentUICustomization extends BaseTaboolaFragment {
+
+    private static final String TAG = MetaClassicUnitFragmentUICustomization.class.getSimpleName();
+
+    @Nullable
+    @Override
+    public View onCreateView(LayoutInflater inflater,
+                             @Nullable ViewGroup container,
+                             @Nullable Bundle savedInstanceState) {
+        int isOSDarkMode =
+                getContext().getResources().getConfiguration().uiMode &
+                        Configuration.UI_MODE_NIGHT_MASK;
+        Taboola.init(new TBLPublisherInfo(MetaConst.META_PUBLISHER_NAME));
+        View rootView = inflater.inflate(R.layout.fragment_meta_ad_classic_unit, null);
+        NativeAdLayout adContainerTop = rootView.findViewById(R.id.native_ad_container_top);
+
+        Taboola.setGlobalExtraProperties(new HashMap<String, String>() {{
+            put(MetaConst.AUDIENCE_NETWORK_APPLICATION_ID_KEY, MetaConst.AUDIENCE_NETWORK_APP_ID);
+            put(MetaConst.ENABLE_META_DEMAND_DEBUG_KEY, "true");
+            if (isOSDarkMode == Configuration.UI_MODE_NIGHT_YES) {
+                put(DARK_NODE, "true");
+            }
+        }});
+
+        setupAndLoadTaboolaAd(adContainerTop);
+        return rootView;
+    }
+
+
+    private void setupAndLoadTaboolaAd(NativeAdLayout adContainer) {
+        TBLClassicPage tblClassicPage = Taboola.getClassicPage(Const.PAGE_URL, Const.PAGE_TYPE);
+        MetaPlacementProperties metaPlacementProperties = new MetaPlacementProperties(META_WIDGET_PLACEMENT_NAME, META_WIDGET_MODE);
+        TBLMetaClassicUnit tblMetaClassicUnit = tblClassicPage.buildWithMeta(getContext(), META_FEED_PLACEMENT_NAME, META_FEED_MODE, TBL_PLACEMENT_TYPE.PAGE_MIDDLE, metaPlacementProperties, new TBLClassicListener() {
+            @Override
+            public boolean onItemClick(String placementName, String itemId, String clickUrl, boolean isOrganic, String customData) {
+                Log.d(TAG, "onItemClick");
+                return super.onItemClick(placementName, itemId, clickUrl, isOrganic, customData);
+            }
+
+            @Override
+            public void onAdReceiveSuccess() {
+                super.onAdReceiveSuccess();
+                Log.d(TAG, "onAdReceiveSuccess");
+            }
+
+            @Override
+            public void onAdReceiveFail(String error) {
+                super.onAdReceiveFail(error);
+                Log.d(TAG, "onAdReceiveFail " + error);
+            }
+
+            @Override
+            public void onResize(int height) {
+                super.onResize(height);
+                Log.d(TAG, "onResize");
+            }
+        });
+        tblMetaClassicUnit.setMetaAdTypeForDebug(MetaConst.TEST_LAYOUT_IMAGE_LINK_TYPE);
+        tblMetaClassicUnit.setUnitExtraProperties(new HashMap<String, String>() {{
+            put(MetaConst.AUDIENCE_NETWORK_PLACEMENT_ID_KEY, MetaConst.AUDIENCE_NETWORK_PLACEMENT_ID);
+        }});
+
+        Typeface font = loadFont(getActivity(), TYPEFACE_ARIAL_BOLD);
+
+        // Create custom style properties for the branding
+        TBLUiStyleProperties brandingStyleProperties = new TBLTextStylePropertiesBuilder(ELEMENT_TYPE_BRANDING)
+                .setFontLightColor(R.color.design_default_color_error)
+                .setFontDarkColor(R.color.colorPrimary)
+                .setFontSize(TEXT_FONT_SIZE)
+                .setTypeface(font)
+                .build();
+
+        // Create custom style properties for the title
+        TBLUiStyleProperties titleStyleProperties = new TBLTitleStylePropertiesBuilder()
+                .setAmountOfSpaceBetweenLines(AMOUNT_OF_SPACE_BETWEEN_LINES)
+                .setLines(NUMBER_OF_LINES)
+                .setFontLightColor(Color.RED)
+                .setFontSize(TEXT_FONT_SIZE)
+                .setFontDarkColor(Color.BLUE)
+                .setTypeface(font)
+                .build();
+
+        // Create custom style properties for the call to action button
+        TBLUiStyleProperties ctaStyleProperties = new TBLCallToActionButtonStylePropertiesBuilder()
+                // Set the visibility of the call to action, the CTA button will be displayed by default if
+                // you want to hide it you need to pass true to the setVisibility method
+                .setVisibility(true)
+                .build();
+
+        // Set the custom UI properties to the Meta native Ad
+        tblMetaClassicUnit.setMetaNativeUI(MetaConst.DEFAULT_LAYOUT_KEY, brandingStyleProperties, titleStyleProperties, ctaStyleProperties);
+        adContainer.addView(tblMetaClassicUnit);
+        tblMetaClassicUnit.fetchContent();
+    }
+
+}

Java/app/src/main/java/com/taboola/sdk4example/utils/Utils.java

@@ -0,0 +1,16 @@
+package com.taboola.sdk4example.utils;
+
+import android.content.res.AssetManager;
+import android.graphics.Typeface;
+
+import androidx.fragment.app.FragmentActivity;
+
+public class Utils {
+    private static final String FONTS_PATH = "fonts/";
+    private static final String FONT_SUFFIX = ".ttf";
+
+    public static Typeface loadFont(FragmentActivity activity, String fontName) {
+        AssetManager assets = activity.getAssets();
+        return Typeface.createFromAsset(assets, FONTS_PATH + fontName + FONT_SUFFIX);
+    }
+}

Java/app/src/main/res/values/ids.xml

@@ -21,6 +21,8 @@
     <item name="std_meta_ad" type="id" />
     <item name="std_meta_carousel" type="id" />
     <item name="std_meta_classic_unit" type="id" />
+    <item name="std_meta_ad_UI_customization" type="id" />
+    <item name="std_meta_tbl_classic_unit_ad_UI_customization" type="id" />
     <item name="native_widget" type="id" />
     <item name="native_feed" type="id" />
 

Java/app/src/main/res/values/strings.xml

@@ -107,6 +107,8 @@ These will help you remember what the consumer really wants to engage with and w
     <string name="std_feed_lazy_loading_rv">Feed Lazy Loading (RecyclerView)</string>
     <string name="std_mid_article_with_feed_dark_mode_rv">Feed with Dark Mode (RecyclerView)</string>
     <string name="std_meta">Meta Ad Inside ScrollView Fragment</string>
+    <string name="std_meta_ad_UI_customization">MetaAd UI customization</string>
+    <string name="std_meta_tbl_classic_unit_ad_UI_customization">MeteTBLClassicUnit UI customization</string>
     <string name="std_meta_classic_unit">Meta Ad Above Feed Fragment</string>
     <string name="std_meta_carousel">Meta Ad Carousel Fragment</string>
     <string name="native_widget">Native Widget</string>

Kotlin/app/build.gradle

@@ -50,7 +50,7 @@ android {
 
 dependencies {
     // Import Taboola SDK
-    implementation 'com.taboola:android-sdk-beta:meta-unified-1.0.2-615-b6bbebdb0'
+    implementation 'com.taboola:android-sdk-beta:meta-global-beta-1.0.10-638-5287bf970'
 
     implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
     implementation 'androidx.core:core-ktx:1.3.2'

Kotlin/app/src/main/java/com/taboola/kotlin/examples/MetaConst.kt

@@ -12,5 +12,13 @@ class MetaConst {
         const val DEFAULT_LAYOUT_KEY = "default"
         const val TEST_LAYOUT_IMAGE_LINK_TYPE = "image_link"
         const val TEST_LAYOUT_CAROUSEL_TYPE = "carousel"
+
+        // UI customizations values
+        const val ELEMENT_TYPE_BRANDING: String = "branding"
+        const val TEXT_FONT_SIZE: Float = 20.0f
+        const val NUMBER_OF_LINES: Int = 2
+        const val AMOUNT_OF_SPACE_BETWEEN_ELEMENTS: Float = 0.5f
+        const val FONT_TYPEFACE_ARIAL_BOLD = "arial_bold"
+        const val DARK_MODE = "darkMode"
     }
 }