Add page indicator to the features pager

app/src/main/java/net/pokeranalytics/android/ui/fragment/SubscriptionFragment.kt

@@ -1,5 +1,6 @@
 package net.pokeranalytics.android.ui.fragment
 
+import android.graphics.drawable.GradientDrawable
 import android.os.Build
 import android.os.Bundle
 import android.text.SpannableStringBuilder
@@ -8,17 +9,22 @@ import android.text.style.TypefaceSpan
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.widget.LinearLayout
 import android.widget.Toast
 import androidx.core.content.res.ResourcesCompat
+import androidx.core.view.children
+import androidx.core.view.setMargins
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
 import androidx.fragment.app.FragmentStatePagerAdapter
+import androidx.viewpager.widget.ViewPager
 import com.android.billingclient.api.BillingClient
 import com.android.billingclient.api.Purchase
 import com.android.billingclient.api.SkuDetails
 import com.android.billingclient.api.SkuDetailsResponseListener
 import kotlinx.android.synthetic.main.fragment_subscription.*
 import net.pokeranalytics.android.R
+import net.pokeranalytics.android.ui.extensions.px
 import net.pokeranalytics.android.ui.fragment.components.PokerAnalyticsFragment
 import net.pokeranalytics.android.ui.fragment.components.ScreenSlidePageFragment
 import net.pokeranalytics.android.util.Preferences
@@ -27,10 +33,7 @@ import net.pokeranalytics.android.util.billing.IAPProducts
 import net.pokeranalytics.android.util.billing.PurchaseDelegate
 import java.time.Period
 
-
+class SubscriptionFragment : PokerAnalyticsFragment(), SkuDetailsResponseListener, PurchaseDelegate, ViewPager.OnPageChangeListener {
-data class FeatureDescriptor(var iconResId: Int, var titleResId: Int, var descResId: Int)
-
-class SubscriptionFragment : PokerAnalyticsFragment(), SkuDetailsResponseListener, PurchaseDelegate {
 
 	private var selectedProduct: SkuDetails? = null
 
@@ -84,6 +87,7 @@ class SubscriptionFragment : PokerAnalyticsFragment(), SkuDetailsResponseListene
 		// The pager adapter, which provides the pages to the view pager widget.
 		val pagerAdapter = ScreenSlidePagerAdapter(requireFragmentManager())
 		this.pager.adapter = pagerAdapter
+		this.pager.addOnPageChangeListener(this)
 
 		this.purchase.isEnabled = false
 		this.purchase.setOnClickListener {
@@ -94,6 +98,18 @@ class SubscriptionFragment : PokerAnalyticsFragment(), SkuDetailsResponseListene
 				throw IllegalStateException("Attempt to initiate purchase while no product has been chosen")
 			}
 		}
+
+		val count = this.pager.adapter?.count ?: 0
+		for (i in 1..count) {
+			val view = View(requireContext())
+			view.background = requireContext().getDrawable(R.drawable.circle_green)
+			val layoutParam = LinearLayout.LayoutParams(20.px, 20.px)
+			layoutParam.setMargins(8.px)
+			this.pageIndicator.addView(view, layoutParam)
+		}
+
+		this.changeColorOfIndicator(0)
+
 	}
 
 	/**
@@ -102,6 +118,8 @@ class SubscriptionFragment : PokerAnalyticsFragment(), SkuDetailsResponseListene
 	 */
 	private inner class ScreenSlidePagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
 
+		private inner class FeatureDescriptor(var iconResId: Int, var titleResId: Int, var descResId: Int)
+
 		private val dataSource: List<FeatureDescriptor> = listOf(
 			FeatureDescriptor(R.drawable.ic_baseline_all_inclusive_24px, R.string.f_unlimited, R.string.f_unlimited_desc),
 			FeatureDescriptor(R.drawable.ic_baseline_wifi_off_24px, R.string.f_offline, R.string.f_offline_desc),
@@ -160,4 +178,27 @@ class SubscriptionFragment : PokerAnalyticsFragment(), SkuDetailsResponseListene
 		this.activity?.finish()
 	}
 
+	// OnPageChangeListener
+
+	override fun onPageScrollStateChanged(state: Int) {}
+
+	override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}
+
+	override fun onPageSelected(position: Int) {
+		this.changeColorOfIndicator(position)
+	}
+
+	private fun changeColorOfIndicator(position: Int) {
+		this.pageIndicator.children.forEachIndexed { index, view ->
+			val drawable = view.background
+			when (drawable) {
+				is GradientDrawable -> {
+					val color = if (position == index) R.color.white else R.color.quantum_grey
+					drawable.setColor(requireContext().getColor(color))
+				} else -> {}
+			}
+
+		}
+	}
+
 }

app/src/main/res/layout/fragment_screen_slide_page.xml

@@ -27,11 +27,12 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             android:src="@drawable/ic_baseline_all_inclusive_24px"
-            android:layout_marginTop="8dp"
             android:layout_width="48dp"
             android:layout_height="48dp" />
 
         <androidx.appcompat.widget.AppCompatTextView
+            android:paddingLeft="24dp"
+            android:paddingRight="24dp"
             android:id="@+id/description"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
@@ -40,7 +41,7 @@
             app:layout_constraintTop_toBottomOf="@id/icon"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            android:layout_marginTop="16dp"
+            android:layout_marginTop="20dp"
             android:maxLines="5"
             tools:text="Description qui va avec le text youpi. Il peut y avoir plusieurs ligne de texte oui tout a fait."/>
 

app/src/main/res/layout/fragment_subscription.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
@@ -19,19 +19,12 @@
         app:autoSizeMaxTextSize="36sp"
         app:autoSizeMinTextSize="24sp"
         app:autoSizeStepGranularity="2sp"
-        app:autoSizeTextType="uniform"
+        app:autoSizeTextType="uniform" />
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/container"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
+        android:layout_height="match_parent">
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/title">
 
         <androidx.appcompat.widget.AppCompatTextView
             android:id="@+id/freetrial"
@@ -46,18 +39,23 @@
 
         <androidx.viewpager.widget.ViewPager
             android:id="@+id/pager"
-            android:layout_width="200dp"
+            android:layout_width="250dp"
-            android:layout_height="wrap_content"
+            android:layout_height="200dp"
             android:layout_marginTop="100dp"
+            app:layout_constraintTop_toBottomOf="@id/freetrial"
+            app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.5" />
+
+        <LinearLayout
+            android:orientation="horizontal"
+            android:id="@+id/pageIndicator"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:layout_constraintTop_toBottomOf="@id/pager"
             app:layout_constraintHorizontal_bias="0.5"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/freetrial">
+            app:layout_constraintEnd_toEndOf="parent"/>
-
-        </androidx.viewpager.widget.ViewPager>
-
-
-        <!-- -->
 
         <androidx.appcompat.widget.AppCompatTextView
             android:id="@+id/price"
@@ -85,4 +83,4 @@
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+</LinearLayout>