Fixed ObjectiveC APIDemo custom playback controls issue.

PiperOrigin-RevId: 676606721

Author: Nicholas Ventimiglia

java/advanced/APIDemo/app/src/main/java/com/google/android/gms/example/apidemo/AdManagerCustomControlsFragment.java

@@ -56,16 +56,14 @@ public class AdManagerCustomControlsFragment extends Fragment {
   private CheckBox customControlsCheckbox;
   private CheckBox nativeAdsCheckbox;
   private CheckBox customFormatAdsCheckbox;
-  private CustomControlsView customControlsView;
   private NativeAd nativeAd;
   private NativeCustomFormatAd nativeCustomFormatAd;
 
-  public AdManagerCustomControlsFragment() {
-  }
+  public AdManagerCustomControlsFragment() {}
 
   @Override
-  public View onCreateView(LayoutInflater inflater, ViewGroup container,
-      Bundle savedInstanceState) {
+  public View onCreateView(
+      LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
     return inflater.inflate(R.layout.fragment_gam_customcontrols, container, false);
   }
 
@@ -77,7 +75,6 @@ public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceStat
     customControlsCheckbox = view.findViewById(R.id.cb_custom_controls);
     nativeAdsCheckbox = view.findViewById(R.id.cb_native);
     customFormatAdsCheckbox = view.findViewById(R.id.cb_custom_format);
-    customControlsView = view.findViewById(R.id.custom_controls);
 
     refresh.setOnClickListener(unusedView -> refreshAd());
 
@@ -111,6 +108,7 @@ private void populateNativeAdView(NativeAd nativeAd, NativeAdView adView) {
     adView.setPriceView(adView.findViewById(R.id.ad_price));
     adView.setStarRatingView(adView.findViewById(R.id.ad_stars));
     adView.setStoreView(adView.findViewById(R.id.ad_store));
+    adView.setMediaView(adView.findViewById(R.id.ad_media));
 
     // Some assets are guaranteed to be in every NativeAd.
     ((TextView) adView.getHeadlineView()).setText(nativeAd.getHeadline());
@@ -137,20 +135,20 @@ private void populateNativeAdView(NativeAd nativeAd, NativeAdView adView) {
     if (nativeAd.getStarRating() == null) {
       adView.getStarRatingView().setVisibility(View.INVISIBLE);
     } else {
-      ((RatingBar) adView.getStarRatingView())
-          .setRating(nativeAd.getStarRating().floatValue());
+      ((RatingBar) adView.getStarRatingView()).setRating(nativeAd.getStarRating().floatValue());
       adView.getStarRatingView().setVisibility(View.VISIBLE);
     }
 
-    // Assign native ad object to the native view.
-    adView.setNativeAd(nativeAd);
-
-    // Set up the custom video controls functionality.
+    // Set up the custom video controls.
     MediaContent mediaContent = nativeAd.getMediaContent();
     if (mediaContent != null) {
-      customControlsView.setMediaContent(mediaContent);
+      CustomControlsView customControls = adView.findViewById(R.id.custom_video_controls);
+      customControls.initialize(mediaContent, startVideoAdsMuted.isChecked());
     }
 
+    // Assign native ad object to the native view.
+    adView.setNativeAd(nativeAd);
+
     refresh.setEnabled(true);
   }
 
@@ -161,8 +159,8 @@ private void populateNativeAdView(NativeAd nativeAd, NativeAdView adView) {
    * @param nativeCustomFormatAd the object containing the ad's assets
    * @param adView the view to be populated
    */
-  private void populateSimpleTemplateAdView(final NativeCustomFormatAd nativeCustomFormatAd,
-      View adView) {
+  private void populateSimpleTemplateAdView(
+      final NativeCustomFormatAd nativeCustomFormatAd, View adView) {
     TextView headline = adView.findViewById(R.id.simplecustom_headline);
     TextView caption = adView.findViewById(R.id.simplecustom_caption);
 
@@ -175,11 +173,15 @@ private void populateSimpleTemplateAdView(final NativeCustomFormatAd nativeCusto
 
     // Apps can check the MediaContent's hasVideoContent property to determine if the
     // NativeCustomTemplateAd has a video asset.
-    if (nativeCustomFormatAd.getMediaContent() != null
-        && nativeCustomFormatAd.getMediaContent().hasVideoContent()) {
+    MediaContent mediaContent = nativeCustomFormatAd.getMediaContent();
+    if (mediaContent != null && mediaContent.hasVideoContent()) {
       MediaView mediaView = new MediaView(requireActivity());
-      mediaView.setMediaContent(nativeCustomFormatAd.getMediaContent());
+      mediaView.setMediaContent(mediaContent);
       mediaPlaceholder.addView(mediaView);
+      CustomControlsView customControls = new CustomControlsView(getContext());
+      customControls.initialize(mediaContent, startVideoAdsMuted.isChecked());
+      ViewGroup videoControlHolder = adView.findViewById(R.id.simplecustom_video_control_holder);
+      videoControlHolder.addView(customControls);
     } else {
       ImageView mainImage = new ImageView(getActivity());
       mainImage.setAdjustViewBounds(true);
@@ -188,12 +190,10 @@ private void populateSimpleTemplateAdView(final NativeCustomFormatAd nativeCusto
       mainImage.setOnClickListener(unusedView -> nativeCustomFormatAd.performClick("MainImage"));
       mediaPlaceholder.addView(mainImage);
     }
-    customControlsView.setMediaContent(nativeCustomFormatAd.getMediaContent());
 
     refresh.setEnabled(true);
   }
 
-
   /**
    * Creates a request for a new native ad based on the boolean parameters and calls the
    * corresponding "populate" method when one is successfully returned.
@@ -202,8 +202,9 @@ private void refreshAd() {
     refresh.setEnabled(false);
 
     Resources resources = getActivity().getResources();
-    AdLoader.Builder builder = new AdLoader.Builder(getActivity(),
-        resources.getString(R.string.customcontrols_fragment_ad_unit_id));
+    AdLoader.Builder builder =
+        new AdLoader.Builder(
+            getActivity(), resources.getString(R.string.customcontrols_fragment_ad_unit_id));
 
     if (customFormatAdsCheckbox.isChecked()) {
       builder.forCustomFormatAd(
@@ -264,14 +265,13 @@ public void onNativeAdLoaded(NativeAd ad) {
           });
     }
 
-    VideoOptions videoOptions = new VideoOptions.Builder()
-        .setStartMuted(startVideoAdsMuted.isChecked())
-        .setCustomControlsRequested(customControlsCheckbox.isChecked())
-        .build();
+    VideoOptions videoOptions =
+        new VideoOptions.Builder()
+            .setStartMuted(startVideoAdsMuted.isChecked())
+            .setCustomControlsRequested(customControlsCheckbox.isChecked())
+            .build();
 
-    NativeAdOptions adOptions = new NativeAdOptions.Builder()
-        .setVideoOptions(videoOptions)
-        .build();
+    NativeAdOptions adOptions = new NativeAdOptions.Builder().setVideoOptions(videoOptions).build();
 
     builder.withNativeAdOptions(adOptions);
 
@@ -296,7 +296,5 @@ public void onAdFailedToLoad(LoadAdError loadAdError) {
                 })
             .build();
     adLoader.loadAd(new AdManagerAdRequest.Builder().build());
-
-    customControlsView.reset();
   }
 }

java/advanced/APIDemo/app/src/main/java/com/google/android/gms/example/apidemo/CustomControlsView.java

@@ -2,12 +2,13 @@
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.graphics.drawable.Drawable;
 import android.util.AttributeSet;
 import android.view.LayoutInflater;
 import android.view.View;
-import android.widget.Button;
+import android.widget.ImageButton;
 import android.widget.LinearLayout;
-import android.widget.TextView;
+import androidx.core.content.ContextCompat;
 import com.google.android.gms.ads.MediaContent;
 import com.google.android.gms.ads.VideoController;
 
@@ -17,10 +18,9 @@
  */
 public class CustomControlsView extends LinearLayout {
 
-  private Button playButton;
-  private Button muteButton;
+  private ImageButton playButton;
+  private ImageButton muteButton;
   private View controlsView;
-  private TextView videoStatusText;
   private boolean isVideoPlaying;
 
   public CustomControlsView(Context context) {
@@ -43,42 +43,40 @@ private void init(Context context, AttributeSet unusedAttrs, int unusedDefStyle)
         .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     inflater.inflate(R.layout.custom_video_controls, this, true);
 
-    videoStatusText = findViewById(R.id.tv_video_status);
     playButton = findViewById(R.id.btn_play);
     muteButton = findViewById(R.id.btn_mute);
     controlsView = findViewById(R.id.video_controls);
     controlsView.setVisibility(View.GONE);
   }
 
   /*
-   * Reset the custom controls view.
-   */
-  public void reset() {
-    controlsView.setVisibility(View.GONE);
-    videoStatusText.setText("");
-  }
-
-  /*
-   * Sets up the custom controls view with the provided VideoController.
+   * Sets up the custom controls view with the provided VideoController and mute state.
    */
   @SuppressLint("SetTextI18n")
-  public void setMediaContent(MediaContent mediaContent) {
+  public void initialize(MediaContent mediaContent, final boolean muted) {
     controlsView.setVisibility(View.GONE);
     if (mediaContent.hasVideoContent()) {
-      videoStatusText.setText("Video status: Ad contains a video asset.");
       configureVideoContent(mediaContent.getVideoController());
-    } else {
-      videoStatusText.setText("Video status: Ad does not contain a video asset.");
     }
+    setMuteImage(muted);
   }
 
   private boolean isVideoPlaying() {
     return isVideoPlaying;
   }
 
+  private void setMuteImage(final boolean muted) {
+    Drawable img;
+    if (muted) {
+      img = ContextCompat.getDrawable(getContext(), R.drawable.video_mute);
+    } else {
+      img = ContextCompat.getDrawable(getContext(), R.drawable.video_unmute);
+    }
+    muteButton.setImageDrawable(img);
+  }
+
   private void configureVideoContent(final VideoController videoController) {
     if (videoController.isCustomControlsEnabled()) {
-      muteButton.setText(videoController.isMuted() ? "Unmute" : "Mute");
       controlsView.setVisibility(View.VISIBLE);
 
       muteButton.setOnClickListener(new View.OnClickListener() {
@@ -109,44 +107,43 @@ public void onClick(View unusedView) {
           @SuppressLint("SetTextI18n")
           @Override
           public void onVideoMute(final boolean muted) {
-            videoStatusText.setText(
-                ("Video status: " + (muted ? "Video did mute" : "Video did un-mute")));
-            muteButton.setText(muted ? "Unmute" : "Mute");
+            setMuteImage(muted);
             super.onVideoMute(muted);
           }
 
           @SuppressLint("SetTextI18n")
           @Override
           public void onVideoPause() {
-            videoStatusText.setText("Video status: Video did pause.");
-            playButton.setText("Play");
+            Drawable img = ContextCompat.getDrawable(getContext(), R.drawable.video_play);
+            playButton.setImageDrawable(img);
             isVideoPlaying = false;
             super.onVideoPause();
           }
 
           @SuppressLint("SetTextI18n")
           @Override
           public void onVideoPlay() {
-            videoStatusText.setText("Video status: Video did play.");
-            playButton.setText("Pause");
+            Drawable img = ContextCompat.getDrawable(getContext(), R.drawable.video_pause);
+            playButton.setImageDrawable(img);
             isVideoPlaying = true;
+            setMuteImage(videoController.isMuted());
             super.onVideoPlay();
           }
 
           @SuppressLint("SetTextI18n")
           @Override
           public void onVideoStart() {
-            videoStatusText.setText("Video status: Video did start.");
-            playButton.setText("Pause");
+            Drawable img = ContextCompat.getDrawable(getContext(), R.drawable.video_pause);
+            playButton.setImageDrawable(img);
             isVideoPlaying = true;
             super.onVideoStart();
           }
 
           @SuppressLint("SetTextI18n")
           @Override
           public void onVideoEnd() {
-            videoStatusText.setText("Video status: Video playback has ended.");
-            playButton.setText("Play");
+            Drawable img = ContextCompat.getDrawable(getContext(), R.drawable.video_play);
+            playButton.setImageDrawable(img);
             isVideoPlaying = false;
             super.onVideoEnd();
           }

java/advanced/APIDemo/app/src/main/res/drawable/video_mute.png

@@ -32,4 +32,8 @@
         android:textColor="#888888"
         android:textStyle="italic" />
 
+    <FrameLayout
+        android:id="@+id/simplecustom_video_control_holder"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content" />
 </LinearLayout>

java/advanced/APIDemo/app/src/main/res/drawable/video_pause.png

@@ -1,38 +1,26 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:orientation="vertical" android:layout_width="match_parent"
+    android:orientation="vertical"
+    android:layout_width="wrap_content"
     android:layout_height="wrap_content">
     <LinearLayout
         android:id="@+id/video_controls"
-        android:layout_width="match_parent"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:gravity="center"
-        >
-        <Button
+        android:gravity="center">
+        <ImageButton
             android:id="@+id/btn_play"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="16dp"
-            android:layout_marginTop="16dp"
-            android:layout_marginRight="10dp"
-            android:text="@string/customcontrols_view_play"/>
-        <Button
+            android:background="#CC000000"
+            android:layout_width="20dp"
+            android:layout_height="20dp"
+            android:scaleType="centerInside"
+            android:src="@drawable/video_play" />
+        <ImageButton
             android:id="@+id/btn_mute"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="16dp"
-            android:layout_marginTop="16dp"
-            android:layout_marginLeft="10dp"
-            android:text="@string/customcontrols_view_mute"/>
-
+            android:background="#CC000000"
+            android:layout_width="20dp"
+            android:layout_height="20dp"
+            android:scaleType="centerInside"
+            android:src="@drawable/video_mute" />
     </LinearLayout>
-    <TextView
-        android:id="@+id/tv_video_status"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginLeft="@dimen/activity_horizontal_margin"
-        android:layout_marginRight="@dimen/activity_horizontal_margin"
-        android:text="@string/customcontrols_view_video_status"
-        android:gravity="center"
-        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
 </LinearLayout>

java/advanced/APIDemo/app/src/main/res/drawable/video_play.png

@@ -2,7 +2,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    tools:context="com.google.android.gms.example.apidemo.AdManagerCustomControlsFragment">
+    tools:context=".AdManagerCustomControlsFragment">
 
     <LinearLayout
         android:layout_width="match_parent"
@@ -15,13 +15,6 @@
             android:layout_height="wrap_content"
             android:layout_marginTop="16dp" />
 
-        <com.google.android.gms.example.apidemo.CustomControlsView
-            android:id="@+id/custom_controls"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content">
-
-        </com.google.android.gms.example.apidemo.CustomControlsView>
-
         <CheckBox
             android:id="@+id/cb_native"
             android:layout_width="wrap_content"