Use dot indicators for view pager in ARGB selector instead of tabs

build.gradle

@@ -5,6 +5,7 @@ buildscript {
   apply from: './dependencies.gradle'
 
   repositories {
+    maven { url "https://dl.bintray.com/drummer-aidan/maven" }
     google()
     jcenter()
   }
@@ -20,6 +21,7 @@ buildscript {
 
 allprojects {
   repositories {
+    maven { url "https://dl.bintray.com/drummer-aidan/maven" }
     google()
     jcenter()
   }

color/build.gradle

@@ -28,11 +28,13 @@ android {
   }
 }
 
+
 dependencies {
   implementation 'androidx.recyclerview:recyclerview:' + versions.androidx
-  implementation 'com.google.android.material:material:' + versions.androidx
   implementation 'org.jetbrains.kotlin:kotlin-stdlib-jdk7:' + versions.kotlin
 
+  implementation 'com.afollestad:viewpagerdots:' + versions.dotsIndicator
+
   implementation project(':core')
 }
 

color/src/main/java/com/afollestad/materialdialogs/color/ArgbPreviewParent.kt

@@ -0,0 +1,42 @@
+/*
+ * Licensed under Apache-2.0
+ *
+ * Designed and developed by Aidan Follestad (@afollestad)
+ */
+package com.afollestad.materialdialogs.color
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Path
+import android.graphics.Path.Direction.CW
+import android.graphics.RectF
+import android.util.AttributeSet
+import android.widget.FrameLayout
+
+/** @author Aidan Follestad (afollestad) */
+internal class ArgbPreviewParent(
+  context: Context,
+  attrs: AttributeSet? = null
+) : FrameLayout(context, attrs) {
+
+  private var path: Path? = null
+  private val borderRadius = resources.getDimension(R.dimen.color_argb_preview_border_radius)
+
+  override fun onSizeChanged(
+    w: Int,
+    h: Int,
+    oldw: Int,
+    oldh: Int
+  ) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    this.path = Path()
+    this.path?.addRoundRect(RectF(0f, 0f, w.toFloat(), h.toFloat()), borderRadius, borderRadius, CW)
+  }
+
+  override fun dispatchDraw(canvas: Canvas) {
+    this.path?.let {
+      canvas.clipPath(it)
+    }
+    super.dispatchDraw(canvas)
+  }
+}

color/src/main/java/com/afollestad/materialdialogs/color/ArgbPreviewView.kt

@@ -0,0 +1,48 @@
+/*
+ * Licensed under Apache-2.0
+ *
+ * Designed and developed by Aidan Follestad (@afollestad)
+ */
+package com.afollestad.materialdialogs.color
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Path
+import android.graphics.Path.Direction.CW
+import android.graphics.RectF
+import android.graphics.drawable.ColorDrawable
+import android.util.AttributeSet
+import android.view.View
+import androidx.annotation.ColorInt
+
+/** @author Aidan Follestad (afollestad) */
+internal class ArgbPreviewView(
+  context: Context,
+  attrs: AttributeSet? = null
+) : View(context, attrs) {
+
+  private var path: Path? = null
+  private val borderRadius = resources.getDimension(R.dimen.color_argb_preview_border_radius)
+
+  fun setColor(@ColorInt color: Int) {
+    background = ColorDrawable(color)
+  }
+
+  override fun onSizeChanged(
+    w: Int,
+    h: Int,
+    oldw: Int,
+    oldh: Int
+  ) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    this.path = Path()
+    this.path?.addRoundRect(RectF(0f, 0f, w.toFloat(), h.toFloat()), borderRadius, borderRadius, CW)
+  }
+
+  override fun dispatchDraw(canvas: Canvas) {
+    this.path?.let {
+      canvas.clipPath(it)
+    }
+    super.dispatchDraw(canvas)
+  }
+}

color/src/main/java/com/afollestad/materialdialogs/color/ColorPagerAdapter.kt

@@ -20,15 +20,10 @@ internal class ColorPagerAdapter(
   tabCustomText: String? = null
 ) : PagerAdapter() {
 
-  private val actualTabGridTitle: CharSequence
-  private val actualTabCustomTitle: CharSequence
-
-  init {
-    actualTabGridTitle = tabGridText
-        ?: Util.getString(dialog, tabGridTextRes, R.string.md_dialog_color_presets)!!
-    actualTabCustomTitle = tabCustomText
-        ?: Util.getString(dialog, tabCustomTextRes, R.string.md_dialog_color_custom)!!
-  }
+  private val actualTabGridTitle: CharSequence = tabGridText
+      ?: Util.getString(dialog, tabGridTextRes, R.string.md_dialog_color_presets)!!
+  private val actualTabCustomTitle: CharSequence = tabCustomText
+      ?: Util.getString(dialog, tabCustomTextRes, R.string.md_dialog_color_custom)!!
 
   override fun instantiateItem(
     collection: ViewGroup,
@@ -42,20 +37,22 @@ internal class ColorPagerAdapter(
     return collection.findViewById(resId)
   }
 
-  override fun getCount(): Int {
-    return 2
-  }
+  override fun getCount() = 2
 
   override fun isViewFromObject(
     arg0: View,
     arg1: Any
-  ): Boolean {
-    return arg0 === arg1 as View
-  }
+  ) = arg0 === arg1 as View
 
-  override fun getPageTitle(position: Int): CharSequence? = when (position) {
+  override fun getPageTitle(position: Int) = when (position) {
     0 -> actualTabGridTitle
     1 -> actualTabCustomTitle
     else -> null
   }
+
+  override fun destroyItem(
+    container: ViewGroup,
+    position: Int,
+    arg1: Any
+  ) = Unit
 }

color/src/main/java/com/afollestad/materialdialogs/color/DialogColorChooserExt.kt

@@ -17,7 +17,6 @@ import android.graphics.Color.green
 import android.graphics.Color.parseColor
 import android.graphics.Color.red
 import android.graphics.PorterDuff.Mode.SRC_IN
-import android.graphics.drawable.GradientDrawable
 import android.view.View
 import android.widget.EditText
 import android.widget.SeekBar
@@ -33,12 +32,13 @@ import com.afollestad.materialdialogs.WhichButton.POSITIVE
 import com.afollestad.materialdialogs.actions.setActionButtonEnabled
 import com.afollestad.materialdialogs.color.utils.below
 import com.afollestad.materialdialogs.color.utils.changeHeight
+import com.afollestad.materialdialogs.color.utils.getColor
 import com.afollestad.materialdialogs.color.utils.onPageSelected
 import com.afollestad.materialdialogs.color.utils.progressChanged
 import com.afollestad.materialdialogs.color.utils.textChanged
 import com.afollestad.materialdialogs.customview.customView
 import com.afollestad.materialdialogs.customview.getCustomView
-import com.google.android.material.tabs.TabLayout
+import com.afollestad.viewpagerdots.DotsIndicator
 import java.lang.Integer.toHexString
 import java.lang.String.format
 
@@ -91,8 +91,10 @@ fun MaterialDialog.colorChooser(
       setActionButtonEnabled(POSITIVE, selectedColor(allowCustomArgb) != null)
     }
 
-    val tabLayout = getTabLayout()
-    tabLayout.setupWithViewPager(viewPager)
+    val pageIndicator = getPageIndicator()
+    pageIndicator.attachViewPager(viewPager)
+    pageIndicator.setDotTint(getColor(windowContext, attr = android.R.attr.textColorPrimary))
+
     updateGridLayout(colors, subColors, initialSelection, waitForPositiveButton, selection)
     updateCustomPage(showAlphaSelector, initialSelection, waitForPositiveButton, selection)
   }
@@ -143,7 +145,7 @@ private fun MaterialDialog.updateCustomPage(
   selection: ColorCallback
 ) {
   val customPage = getPageCustomView()
-  val argbPreviewView = customPage.findViewById<View>(R.id.argbPreviewView)
+  val argbPreviewView = customPage.findViewById<ArgbPreviewView>(R.id.argbPreviewView)
   val alphaLabel = customPage.findViewById<TextView>(R.id.alpha_label)
   val alphaSeeker = customPage.findViewById<SeekBar>(R.id.alpha_seeker)
   val alphaValue = customPage.findViewById<TextView>(R.id.alpha_value)
@@ -240,7 +242,7 @@ private fun MaterialDialog.onCustomValueChanged(
   waitForPositiveButton: Boolean,
   valueChanged: Boolean,
   customView: View,
-  argbPreviewView: View,
+  argbPreviewView: ArgbPreviewView,
   alphaSeeker: SeekBar,
   redSeeker: SeekBar,
   greenSeeker: SeekBar,
@@ -270,11 +272,7 @@ private fun MaterialDialog.onCustomValueChanged(
   hexValue.setText(color.hexValue(supportCustomAlpha))
   hexValue.post { hexValue.setSelection(hexValue.text.length) }
 
-  val previewDrawable = GradientDrawable()
-  previewDrawable.setColor(color)
-  previewDrawable.cornerRadius =
-      windowContext.resources.getDimension(R.dimen.color_argb_preview_border_radius)
-  argbPreviewView.background = previewDrawable
+  argbPreviewView.setColor(color)
 
   // We save the ARGB color as view the tag
   if (valueChanged) {
@@ -303,7 +301,8 @@ private fun MaterialDialog.getPageCustomView() = findViewById<View>(R.id.colorAr
 
 private fun MaterialDialog.getPager() = findViewById<ViewPager>(R.id.colorChooserPager)
 
-private fun MaterialDialog.getTabLayout() = findViewById<TabLayout>(R.id.colorChooserTabs)
+private fun MaterialDialog.getPageIndicator() =
+  findViewById<DotsIndicator>(R.id.colorChooserPagerDots)
 
 private fun SeekBar.tint(color: Int) {
   progressDrawable.setColorFilter(color, SRC_IN)

color/src/main/res/layout/md_color_chooser_base_argb.xml

@@ -13,7 +13,7 @@
 
   <!-- Preview -->
 
-  <FrameLayout
+  <com.afollestad.materialdialogs.color.ArgbPreviewParent
       android:id="@+id/preview_frame"
       android:layout_width="match_parent"
       android:layout_height="@dimen/color_argb_preview_height"
@@ -21,13 +21,13 @@
       android:background="@drawable/transparent_rect_repeat"
       >
 
-    <View
+    <com.afollestad.materialdialogs.color.ArgbPreviewView
         android:id="@+id/argbPreviewView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         />
 
-  </FrameLayout>
+  </com.afollestad.materialdialogs.color.ArgbPreviewParent>
 
   <!-- Hex -->
 
@@ -35,26 +35,26 @@
       android:id="@+id/hex_frame"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:orientation="horizontal"
-      android:gravity="center"
-      android:layout_centerHorizontal="true"
       android:layout_below="@+id/preview_frame"
+      android:layout_centerHorizontal="true"
+      android:gravity="center"
+      android:orientation="horizontal"
       >
 
-  <TextView
-      android:layout_width="wrap_content"
-      android:layout_height="wrap_content"
-      android:text="#"
-      />
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="#"
+        />
 
-  <EditText
-      android:id="@+id/hex_value"
-      android:layout_width="wrap_content"
-      android:inputType="text"
-      android:layout_height="wrap_content"
-      android:hint="000000"
-      tools:ignore="Autofill"
-      />
+    <EditText
+        android:id="@+id/hex_value"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:hint="000000"
+        android:inputType="text"
+        tools:ignore="Autofill"
+        />
 
   </LinearLayout>
 

color/src/main/res/layout/md_color_chooser_base_grid.xml

@@ -8,4 +8,5 @@
     android:paddingBottom="@dimen/color_grid_padding_bottom"
     android:paddingLeft="@dimen/color_grid_item_padding_double"
     android:paddingRight="@dimen/color_grid_item_padding_double"
+    android:scrollbars="vertical"
     />

color/src/main/res/layout/md_color_chooser_base_pager.xml

@@ -6,12 +6,11 @@
     android:orientation="vertical"
     >
 
-  <com.google.android.material.tabs.TabLayout
-      android:id="@+id/colorChooserTabs"
+  <com.afollestad.viewpagerdots.DotsIndicator
+      android:id="@+id/colorChooserPagerDots"
       android:layout_width="match_parent"
-      android:layout_height="wrap_content"
-      android:layout_marginBottom="@dimen/color_chooser_tabs_marginBottom"
-      android:minHeight="?attr/actionBarSize"
+      android:layout_height="@dimen/color_chooser_pageDots_height"
+      android:layout_marginBottom="@dimen/color_chooser_pageDots_marginBottom"
       />
 
   <com.afollestad.materialdialogs.color.WrapContentViewPager

color/src/main/res/values/dimens.xml

@@ -6,11 +6,12 @@
   <dimen name="color_grid_item_padding_double">16dp</dimen>
   <dimen name="color_grid_padding_bottom">12dp</dimen>
 
-  <dimen name="color_chooser_tabs_marginBottom">16dp</dimen>
+  <dimen name="color_chooser_pageDots_height">24dp</dimen>
+  <dimen name="color_chooser_pageDots_marginBottom">8dp</dimen>
 
-  <dimen name="color_argb_preview_height">84dp</dimen>
+  <dimen name="color_argb_preview_height">72dp</dimen>
   <dimen name="color_argb_preview_border_radius">4dp</dimen>
-  <dimen name="color_argb_preview_marginBottom">16dp</dimen>
+  <dimen name="color_argb_preview_marginBottom">8dp</dimen>
 
   <dimen name="color_argb_label_textSize">18sp</dimen>
   <dimen name="color_argb_label_marginTop">16dp</dimen>

dependencies.gradle

@@ -12,5 +12,7 @@ ext.versions = [
 
     kotlin            : '1.2.71',
     androidx          : '1.0.0',
-    assent            : '2.2.0'
+    assent            : '2.2.0',
+
+    dotsIndicator     : '1.0.0'
 ]

sample/src/main/java/com/afollestad/materialdialogssample/MainActivity.kt

@@ -645,6 +645,7 @@ class MainActivity : AppCompatActivity() {
 
     colorChooser_primary_customRgb.setOnClickListener {
       MaterialDialog(this).show {
+        title(R.string.custom_colors_rgb)
         colorChooser(
             colors = PRIMARY_COLORS,
             subColors = PRIMARY_COLORS_SUB,
@@ -660,6 +661,7 @@ class MainActivity : AppCompatActivity() {
 
     colorChooser_primary_customArgb.setOnClickListener {
       MaterialDialog(this).show {
+        title(R.string.custom_colors_argb)
         colorChooser(
             colors = PRIMARY_COLORS,
             subColors = PRIMARY_COLORS_SUB,

sample/src/main/res/values/strings.xml

@@ -45,6 +45,8 @@
   <string name="primary_colors">Primary Colors</string>
   <string name="accent_colors">Accent Colors</string>
   <string name="custom_colors">Custom Colors</string>
+  <string name="custom_colors_rgb">Custom RGB</string>
+  <string name="custom_colors_argb">Custom ARGB</string>
 
   <!-- File and Folder Chooser Examples -->
   <string name="select">Select</string>