Fixed Kotlin APIDemo custom playback controls issue.

PiperOrigin-RevId: 660096496

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

@@ -19,12 +19,14 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.widget.*
+import android.widget.FrameLayout
+import android.widget.ImageView
+import android.widget.TextView
+import android.widget.Toast
 import androidx.fragment.app.Fragment
 import com.google.android.gms.ads.AdListener
 import com.google.android.gms.ads.AdLoader
 import com.google.android.gms.ads.LoadAdError
-import com.google.android.gms.ads.MediaContent
 import com.google.android.gms.ads.VideoOptions
 import com.google.android.gms.ads.admanager.AdManagerAdRequest
 import com.google.android.gms.ads.nativead.MediaView
@@ -95,8 +97,6 @@ class AdManagerCustomControlsFragment : Fragment() {
     nativeAdBinding.adCallToAction.text = nativeAd.callToAction
     nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
 
-    nativeAd.mediaContent?.let { nativeAdBinding.adMedia.setMediaContent(it) }
-
     // These assets aren't guaranteed to be in every NativeAd, so it's important to
     // check before trying to display them.
     if (nativeAd.price == null) {
@@ -120,12 +120,12 @@ class AdManagerCustomControlsFragment : Fragment() {
       nativeAdBinding.adStars.visibility = View.VISIBLE
     }
 
+    nativeAdBinding.adMedia.mediaContent = nativeAd.mediaContent
+    nativeAdBinding.customVideoControls.setMediaContent(nativeAd.mediaContent)
+
     // Assign native ad object to the native view.
     nativeAdView.setNativeAd(nativeAd)
 
-    val mediaContent: MediaContent? = nativeAd.mediaContent
-    mediaContent?.let { fragmentBinding.customControls.setMediaContent(it) }
-
     fragmentBinding.btnRefresh.isEnabled = true
   }
 
@@ -140,33 +140,34 @@ class AdManagerCustomControlsFragment : Fragment() {
     nativeCustomFormatAd: NativeCustomFormatAd,
     adView: View,
   ) {
-    val headline = adView.findViewById<TextView>(R.id.simplecustom_headline)
-    val caption = adView.findViewById<TextView>(R.id.simplecustom_caption)
+    val headline = adView.findViewById<TextView>(R.id.headline)
+    val caption = adView.findViewById<TextView>(R.id.caption)
+    val customControls = adView.findViewById<CustomControlsView>(R.id.custom_video_controls)
+    val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
+    val imageView = adView.findViewById<ImageView>(R.id.ad_image)
 
     headline.text = nativeCustomFormatAd.getText("Headline")
     caption.text = nativeCustomFormatAd.getText("Caption")
-
     headline.setOnClickListener { nativeCustomFormatAd.performClick("Headline") }
 
-    val mediaPlaceholder = adView.findViewById<FrameLayout>(R.id.simplecustom_media_placeholder)
-
     // Get the media content for the ad.
     val mediaContent = nativeCustomFormatAd.mediaContent
 
     // Apps can check the MediaContent's hasVideoContent property to
     // determine if the NativeCustomFormatAd has a video asset.
     if (mediaContent != null && mediaContent.hasVideoContent()) {
-      val mediaView = MediaView(mediaPlaceholder.getContext())
+      customControls.visibility = View.VISIBLE
+      mediaView.visibility = View.VISIBLE
+      imageView.visibility = View.GONE
       mediaView.mediaContent = mediaContent
+      customControls.setMediaContent(mediaContent)
     } else {
-      val mainImage = ImageView(activity)
-      mainImage.adjustViewBounds = true
-      mainImage.setImageDrawable(nativeCustomFormatAd.getImage("MainImage")?.drawable)
-
-      mainImage.setOnClickListener { nativeCustomFormatAd.performClick("MainImage") }
-      mediaPlaceholder.addView(mainImage)
+      customControls.visibility = View.GONE
+      mediaView.visibility = View.GONE
+      imageView.visibility = View.VISIBLE
+      imageView.setImageDrawable(nativeCustomFormatAd.getImage("MainImage")?.drawable)
+      imageView.setOnClickListener { nativeCustomFormatAd.performClick("MainImage") }
     }
-    mediaContent?.let { fragmentBinding.customControls.setMediaContent(it) }
 
     fragmentBinding.btnRefresh.isEnabled = true
   }
@@ -257,7 +258,5 @@ class AdManagerCustomControlsFragment : Fragment() {
         .build()
 
     adLoader.loadAd(AdManagerAdRequest.Builder().build())
-
-    fragmentBinding.customControls.reset()
   }
 }

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

@@ -4,9 +4,8 @@ import android.content.Context
 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 com.google.android.gms.ads.MediaContent
 import com.google.android.gms.ads.VideoController
 
@@ -18,10 +17,9 @@ class CustomControlsView
 @JvmOverloads
 constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0) :
   LinearLayout(context, attrs, defStyle) {
-  private val playButton: Button
-  private val muteButton: Button
+  private val playButton: ImageButton
+  private val muteButton: ImageButton
   private val controlsView: View
-  private val videoStatusText: TextView
   private var isVideoPlaying: Boolean = false
 
   init {
@@ -31,37 +29,30 @@ constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0) :
     playButton = findViewById(R.id.btn_play)
     muteButton = findViewById(R.id.btn_mute)
     controlsView = findViewById(R.id.video_controls)
-    videoStatusText = findViewById(R.id.tv_video_status)
     controlsView.visibility = View.GONE
   }
 
-  /*
-   * Reset the custom controls view.
-   */
-  fun reset() {
-    controlsView.visibility = View.GONE
-    videoStatusText.text = ""
-  }
-
   /*
    * Sets up the custom controls view with the provided VideoController.
    */
-  fun setMediaContent(mediaContent: MediaContent) {
+  fun setMediaContent(mediaContent: MediaContent?) {
     controlsView.visibility = View.GONE
-    if (mediaContent.hasVideoContent()) {
+    if (mediaContent != null && mediaContent.hasVideoContent()) {
       configureVideoContent(mediaContent.videoController)
-    } else {
-      videoStatusText.text = "Video status: Ad does not contain a video asset."
     }
   }
 
   private fun configureVideoContent(videoController: VideoController) {
     if (videoController.isCustomControlsEnabled) {
-      muteButton.text = if (videoController.isMuted) "Unmute" else "Mute"
+      val muteResource =
+        if (videoController.isMuted) {
+          R.drawable.video_mute
+        } else {
+          R.drawable.video_unmute
+        }
+      muteButton.setImageResource(muteResource)
       controlsView.visibility = View.VISIBLE
-
       muteButton.setOnClickListener { videoController.mute(!videoController.isMuted) }
-
       playButton.setOnClickListener {
         if (isVideoPlaying) {
           videoController.pause()
@@ -78,36 +69,36 @@ constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0) :
       object : VideoController.VideoLifecycleCallbacks() {
 
         override fun onVideoMute(muted: Boolean) {
-          videoStatusText.text =
-            "Video status: " + if (muted) "Video did mute" else "Video did un-mute"
-          muteButton.text = if (muted) "Unmute" else "Mute"
+          val muteResource =
+            if (muted) {
+              R.drawable.video_unmute
+            } else {
+              R.drawable.video_mute
+            }
+          muteButton.setImageResource(muteResource)
           super.onVideoMute(muted)
         }
 
         override fun onVideoPause() {
-          videoStatusText.text = "Video status: Video did pause."
-          playButton.text = "Play"
+          playButton.setImageResource(R.drawable.video_play)
           isVideoPlaying = false
           super.onVideoPause()
         }
 
         override fun onVideoPlay() {
-          videoStatusText.text = "Video status: Video did play."
-          playButton.text = "Pause"
+          playButton.setImageResource(R.drawable.video_pause)
           isVideoPlaying = true
           super.onVideoPlay()
         }
 
         override fun onVideoStart() {
-          videoStatusText.text = "Video status: Video did start."
-          playButton.text = "Pause"
+          playButton.setImageResource(R.drawable.video_pause)
           isVideoPlaying = true
           super.onVideoStart()
         }
 
         override fun onVideoEnd() {
-          videoStatusText.text = "Video status: Video playback has ended."
-          playButton.text = "Play"
+          playButton.setImageResource(R.drawable.video_play)
           isVideoPlaying = false
           super.onVideoEnd()
         }

kotlin/advanced/APIDemo/app/src/main/res/layout/ad_simple_custom_template.xml

@@ -1,35 +1,58 @@
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_margin="8dp"
     android:background="#CCFFFF"
     android:minHeight="50dp"
-    android:orientation="vertical"
-    android:layout_margin="8dp">
+    android:orientation="vertical">
+  <TextView
+      android:id="@+id/headline"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_marginTop="16dp"
+      android:gravity="center"
+      android:textAppearance="?android:attr/textAppearanceLarge" />
+  <FrameLayout
+      android:id="@+id/media_placeholder"
+      android:layout_width="wrap_content"
+      android:layout_height="175dp"
+      android:layout_marginTop="16dp"
+      android:layout_gravity="center">
 
-    <TextView
-        android:id="@+id/simplecustom_headline"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
-        android:gravity="center"
-        android:textAppearance="?android:attr/textAppearanceLarge" />
+    <com.google.android.gms.ads.nativead.MediaView
+        android:id="@+id/ad_media"
+        android:layout_gravity="center"
+        android:layout_width="250dp"
+        android:layout_height="175dp"
+        android:adjustViewBounds="true"
+        android:layout_marginTop="5dp">
+    </com.google.android.gms.ads.nativead.MediaView>
 
-    <FrameLayout
-        android:id="@+id/simplecustom_media_placeholder"
-        android:layout_width="match_parent"
+    <ImageView
+        android:id="@+id/ad_image"
+        android:layout_gravity="center_horizontal"
+        android:layout_width="250dp"
         android:layout_height="175dp"
-        android:layout_gravity="center"
-        android:layout_marginTop="16dp" />
+        android:adjustViewBounds="true"
+        android:layout_marginTop="5dp"/>
 
-    <TextView
-        android:id="@+id/simplecustom_caption"
-        android:layout_width="match_parent"
+    <com.google.android.gms.example.apidemo.CustomControlsView
+        android:id="@+id/custom_video_controls"
+        android:padding="4dp"
+        android:layout_gravity="bottom"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginBottom="16dp"
-        android:layout_marginTop="8dp"
-        android:gravity="center"
-        android:textAppearance="?android:attr/textAppearanceSmall"
-        android:textColor="#888888"
-        android:textStyle="italic" />
-
+        android:layout_marginBottom="5dp" />
+  </FrameLayout>
+  <TextView
+      android:id="@+id/caption"
+      android:textStyle="italic"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_marginTop="8dp"
+      android:layout_marginBottom="16dp"
+      android:gravity="center"
+      android:textAppearance="?android:attr/textAppearanceSmall"
+      android:textColor="#888888" />
 </LinearLayout>

kotlin/advanced/APIDemo/app/src/main/res/layout/custom_video_controls.xml

@@ -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>

kotlin/advanced/APIDemo/app/src/main/res/layout/fragment_gam_customcontrols.xml

@@ -2,6 +2,8 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:minHeight="32dp"
+    android:minWidth="100dp"
     tools:context=".AdManagerCustomControlsFragment">
 
     <LinearLayout
@@ -15,13 +17,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"