Add a grid list view (#33)

* Add opacity to photo list Add an option to play and stop the video automatically using Lifecycle (this is a part of Android Jetpack) * Rename method names of the Video feature Add more sample codes to the demo app * add currency symbol * Add customizable price text * Change product imageview's scaletype from CenterCrop to FitCenter * Update document * Remove unused codes * Update document for getting a PXLPhoto * Rename photo to content * Add Grid list * Add grid header * Add guide * Add guide * Add guide * Fix a crashing bug * Add an extra option of loading gif to the header of PXLPhotoRecyclerViewInGrid Change PXLPhotoView.ImageScaleType to ImageScaleType because it is now also used in other areas * Fix a bug in scala type * Update README * Add mute/unmute sound to PXLPhotoView * Add Mute/Unmute to PXLPhotoProductView * update the doc * update the doc * Add mute/unmute to PXLPhotiView, PXLPhotoRecyclerView * Move the list updating task onto background * Add region_id to album apis * Add mute/unmute and back button to View * Update comments * Update API doc about region id * Update API doc about region id * Hide mute button if PXLPhoto is not video * Add UI customization options of each cell in list * Add GET getPhoto API for multi-region * Add region_id from edit text * Update doc * Remove blinking when onpause on PXLPhotoPRoductView * Fix a bug of restarting the video after pausing it. * Avoid loading blur image when the scale type is center_crop which let the main image cover 100% of the blur image area. Force video's original size to big size when it comes to loading the main image * Force product list's height to be always the same * Load gif images * Fix a bug of playing a video background by releasing it. it was due to a fix of adding a feature of resuming the video * Update document * Replace existing video player with ExoPlayer * Remove exoplayer library from the demo app * Improve the demo and document * Remove a library from its dependencies * Downgrade ExoPlayer to 2.8.2
pixlee · Nov 16, 2020 · 3c5791a · 3c5791a
1 parent 8cc0d31
commit 3c5791a
Show file tree

Hide file tree

Showing 150 changed files with 4,570 additions and 937 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,11 @@
 # pixlee-android-sdk
 This SDK makes it easy for Pixlee customers to find and download Pixlee images and albums.  There's a native wrapper to the Pixlee album API for Android, and there's also a demo app showing how easy it is to drop in and customize a UI. This repo includes both the Pixlee Android SDK and an example project to show you how it's used.  
 
+
+### Notice: please be aware of these terms in the document. 
+- the word 'content' is used in the documentation. this means a photo or video.
+- The PXLPhoto class represents a piece of content, which can be a photo or video
+
 # Table of Content
 - [Get Started](#Get-Started)
 - [Run the Demo App](#Run-the-Demo-App)

diff --git a/app/src/main/java/com/pixlee/pixleeandroidsdk/MainActivity.java b/app/src/main/java/com/pixlee/pixleeandroidsdk/MainActivity.java
@@ -64,13 +64,15 @@ public void setConfig(Config config){
         public void onBackStackChanged() {
             FragmentManager fm = getSupportFragmentManager();
             int fragmentCount = fm.getFragments().size();
-            String title;
+            String title = "";
             if (fragmentCount > 0) {
-                BaseFragment fragment = (BaseFragment) fm.getFragments().get(fragmentCount - 1);
-                if (fragment.getCustomTitle() != null) {
-                    title = fragment.getCustomTitle();
-                } else {
-                    title = getString(fragment.getTitleResource());
+                if(fm.getFragments().get(fragmentCount - 1) instanceof BaseFragment){
+                    BaseFragment fragment = (BaseFragment) fm.getFragments().get(fragmentCount - 1);
+                    if (fragment.getCustomTitle() != null) {
+                        title = fragment.getCustomTitle();
+                    } else {
+                        title = getString(fragment.getTitleResource());
+                    }
                 }
             } else {
                 title = getString(R.string.app_name);

diff --git a/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/BaseViewModel.kt b/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/BaseViewModel.kt
@@ -1,6 +1,8 @@
 package com.pixlee.pixleeandroidsdk.ui
 
+import android.graphics.Color
 import android.util.Log
+import android.util.TypedValue
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.ViewModel
@@ -11,7 +13,10 @@ import com.pixlee.pixleesdk.client.PXLKtxBaseAlbum
 import com.pixlee.pixleesdk.data.PXLPhoto
 import com.pixlee.pixleesdk.enums.PXLPhotoSize
 import com.pixlee.pixleesdk.ui.viewholder.PhotoWithImageScaleType
+import com.pixlee.pixleesdk.ui.widgets.ImageScaleType
 import com.pixlee.pixleesdk.ui.widgets.PXLPhotoView
+import com.pixlee.pixleesdk.ui.widgets.TextPadding
+import com.pixlee.pixleesdk.ui.widgets.TextViewStyle
 import com.pixlee.pixleesdk.util.px
 import kotlinx.coroutines.launch
 
@@ -57,6 +62,8 @@ open class BaseViewModel(val pxlKtxAlbum: PXLKtxAlbum) : ViewModel() {
         // viewModelScope.launch(..) { pxlKtxAlbum.getFirstPage() }
     }
 
+    var customizedConfiguration:PXLPhotoView.Configuration = PXLPhotoView.Configuration()
+
     /**
      * retrieve the next page from Pixlee server
      */
@@ -67,20 +74,28 @@ open class BaseViewModel(val pxlKtxAlbum: PXLKtxAlbum) : ViewModel() {
                 // show a loading UI on the mobile screen
                 _loading.value = true
                 pxlKtxAlbum.getNextPage().let {
+                    val newList = ArrayList<PhotoWithImageScaleType>()
                     if (it.photos.isNotEmpty()) {
-                        val newList = ArrayList<PhotoWithImageScaleType>()
                         it.photos.forEach {
                             Log.e("pxlvideo", "pxlvideo.url: ${it.videoUrl.toString()}")
                             Log.e("pxlvideo", "pxlvideo.big: ${it.getUrlForSize(PXLPhotoSize.BIG)}")
                             newList.add(PhotoWithImageScaleType(pxlPhoto = it,
-                                    imageScaleType = PXLPhotoView.ImageScaleType.FIT_CENTER,
+                                    configuration = customizedConfiguration.copy().apply {
+                                        mainTextViewStyle = TextViewStyle().apply {
+                                            text = "${newList.size}\n${customizedConfiguration.mainTextViewStyle?.text ?: ""}"
+                                            size = 30.px
+                                            sizeUnit = TypedValue.COMPLEX_UNIT_PX
+                                            typeface = null
+                                            textPadding = TextPadding(bottom = 30.px.toInt())
+                                        }
+                                    },
                                     heightInPixel = cellHeightInPixel,
                                     isLoopingVideo = true,
                                     soundMuted = false))
                         }
                         allPXLPhotos.addAll(it.photos)
-                        _resultEvent.value = Event(Command.Data(newList, it.page == 1))
                     }
+                    _resultEvent.value = Event(Command.Data(newList, it.page == 1))
 
                     canLoadMore = it.next
                     _loading.value = false

diff --git a/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/IndexFragment.kt b/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/IndexFragment.kt
@@ -11,7 +11,8 @@ import com.pixlee.pixleeandroidsdk.data.LocalRepository.Companion.getInstance
 import com.pixlee.pixleeandroidsdk.ui.analytics.AnalyticsFragment
 import com.pixlee.pixleeandroidsdk.ui.analytics.KtxAnalyticsFragment
 import com.pixlee.pixleeandroidsdk.ui.gallery.GalleryFragment
-import com.pixlee.pixleeandroidsdk.ui.gallery.KtxGalleryFragment
+import com.pixlee.pixleeandroidsdk.ui.gallery.KtxGalleryGridFragment
+import com.pixlee.pixleeandroidsdk.ui.gallery.KtxGalleryListFragment
 import com.pixlee.pixleeandroidsdk.ui.uploader.ImageUploaderFragment
 import kotlinx.android.synthetic.main.fragment_index.*
 
@@ -41,8 +42,12 @@ class IndexFragment : BaseFragment() {
     }
 
     fun initKtxButtons() {
-        btKtxAlbum.setOnClickListener {
-            addFragmentToActivity(KtxGalleryFragment())
+        btKtxAlbumList.setOnClickListener {
+            addFragmentToActivity(KtxGalleryListFragment())
+        }
+
+        btKtxAlbumGrid.setOnClickListener {
+            addFragmentToActivity(KtxGalleryGridFragment())
         }
 
         btKtxAnalytics.setOnClickListener {

diff --git a/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/analytics/AnalyticsFragment.java b/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/analytics/AnalyticsFragment.java
@@ -22,6 +22,7 @@
 import com.pixlee.pixleesdk.client.PXLPdpAlbum;
 import com.pixlee.pixleesdk.data.PXLPhoto;
 import com.pixlee.pixleesdk.enums.PXLWidgetType;
+import com.pixlee.pixleesdk.ui.widgets.ImageScaleType;
 import com.pixlee.pixleesdk.ui.widgets.PXLPhotoView;
 
 import java.util.ArrayList;
@@ -93,7 +94,7 @@ private void loadPixleeAlbum() {
             public void onComplete(ArrayList<PXLPhoto> result) {
                 photos.addAll(result);
                 if(result.size()>0){
-                    binding.pxlPhotoView.setPhoto(result.get(0), PXLPhotoView.ImageScaleType.FIT_CENTER);
+                    binding.pxlPhotoView.setContent(result.get(0), ImageScaleType.FIT_CENTER);
                 }
 
                 binding.tvStatus.setText(R.string.album_loading_complete);

diff --git a/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/analytics/KtxAnalyticsFragment.kt b/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/analytics/KtxAnalyticsFragment.kt
@@ -16,6 +16,7 @@ import com.pixlee.pixleeandroidsdk.ui.BaseViewModel
 import com.pixlee.pixleesdk.client.PXLKtxAlbum
 import com.pixlee.pixleesdk.client.PXLKtxBaseAlbum
 import com.pixlee.pixleesdk.enums.PXLWidgetType
+import com.pixlee.pixleesdk.ui.widgets.ImageScaleType
 import com.pixlee.pixleesdk.ui.widgets.PXLPhotoView
 import kotlinx.android.synthetic.main.fragment_analytics.*
 import java.util.*
@@ -71,7 +72,7 @@ class KtxAnalyticsFragment : BaseFragment() {
             when (it) {
                 is BaseViewModel.Command.Data -> {
                     it.list.firstOrNull()?.also {
-                        pxlPhotoView.setPhoto(it.pxlPhoto, PXLPhotoView.ImageScaleType.FIT_CENTER)
+                        pxlPhotoView.setContent(it.pxlPhoto, ImageScaleType.FIT_CENTER)
                     }
                     tvStatus.setText(R.string.album_loading_complete)
                     tvStatus.text = if(it.isFirstPage) "First Load" else "Loaded More..."

diff --git a/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/gallery/GalleryFragment.kt b/app/src/main/java/com/pixlee/pixleeandroidsdk/ui/gallery/GalleryFragment.kt
@@ -1,7 +1,9 @@
 package com.pixlee.pixleeandroidsdk.ui.gallery
 
+import android.graphics.Color
 import android.os.Bundle
 import android.util.Log
+import android.util.TypedValue
 import android.view.*
 import androidx.annotation.StringRes
 import androidx.core.view.GravityCompat
@@ -25,6 +27,12 @@ import com.pixlee.pixleesdk.data.PXLPhoto
 import com.pixlee.pixleesdk.enums.PXLAlbumSortType
 import com.pixlee.pixleesdk.enums.PXLContentSource
 import com.pixlee.pixleesdk.enums.PXLContentType
+import com.pixlee.pixleesdk.enums.PXLPhotoSize
+import com.pixlee.pixleesdk.ui.viewholder.PhotoWithVideoInfo
+import com.pixlee.pixleesdk.ui.widgets.ImageScaleType
+import com.pixlee.pixleesdk.ui.widgets.PXLPhotoView
+import com.pixlee.pixleesdk.ui.widgets.TextViewStyle
+import com.pixlee.pixleesdk.util.px
 import kotlinx.android.synthetic.main.fragment_gallery.*
 import kotlinx.android.synthetic.main.module_search.*
 
@@ -329,7 +337,48 @@ class GalleryFragment : BaseFragment(), RequestHandlers<ArrayList<PXLPhoto>?> {
 //                }
 
             } else {
-                ViewerActivity.launch(context!!, photo)
+                val info = PhotoWithVideoInfo(pxlPhoto = photo,
+                        configuration = PXLPhotoView.Configuration().apply {
+                            // Customize image size, not a video
+                            pxlPhotoSize = PXLPhotoSize.ORIGINAL
+                            // Cystomize scale type
+                            imageScaleType = ImageScaleType.CENTER_CROP
+                            // Customize Main TextView
+                            mainTextViewStyle = TextViewStyle().apply {
+                                text = "Main Text"
+                                size = 30.px
+                                sizeUnit = TypedValue.COMPLEX_UNIT_PX
+                                typeface = null
+                            }
+                            // Customize Sub TextView
+                            subTextViewStyle = TextViewStyle().apply {
+                                text = "Sub Text"
+                                size = 18.px
+                                sizeUnit = TypedValue.COMPLEX_UNIT_PX
+                                typeface = null
+                            }
+                            // Customize Button
+                            buttonStyle = PXLPhotoView.ButtonStyle().apply {
+                                text = "Action Button"
+                                size = 20.px
+                                sizeUnit = TypedValue.COMPLEX_UNIT_PX
+                                typeface = null
+                                buttonIcon = com.pixlee.pixleesdk.R.drawable.baseline_play_arrow_white_24
+                                stroke = PXLPhotoView.Stroke().apply {
+                                    width = 2.px.toInt()
+                                    color = Color.WHITE
+                                    radiusInPixel = 25.px
+                                    padding = PXLPhotoView.Padding().apply {
+                                        left = 20.px.toInt()
+                                        centerRight = 40.px.toInt()
+                                        topBottom = 10.px.toInt()
+                                    }
+                                }
+                            }
+                        },
+                        isLoopingVideo = true,
+                        soundMuted = true)
+                ViewerActivity.launch(context!!, info)
             }
         }
     }