Add proper padding calculations and title, subtitle support with show once capability

atlikemal · atlikemal · commit b260c43eb293 · 2020-04-25T18:33:20.000+03:00
diff --git a/library/src/main/java/com/kemalatli/bubbleonboarding/BubbleOnboarding.kt b/library/src/main/java/com/kemalatli/bubbleonboarding/BubbleOnboarding.kt
@@ -1,15 +1,20 @@
 package com.kemalatli.bubbleonboarding
 
 import android.app.Activity
+import android.content.Context
 import android.graphics.Color
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.annotation.ColorInt
 import androidx.annotation.LayoutRes
+import androidx.annotation.StyleRes
+import androidx.core.view.doOnLayout
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleObserver
 import androidx.lifecycle.OnLifecycleEvent
+import com.google.android.material.button.MaterialButton
+import com.google.android.material.textview.MaterialTextView
 import com.kemalatli.bubbleonboarding.background.BubbleBackgroundView
 import com.kemalatli.bubbleonboarding.content.bubble.ArrowLocation
 import com.kemalatli.bubbleonboarding.content.bubble.BubbleDrawable
@@ -34,13 +39,39 @@ class BubbleOnboarding internal constructor():LifecycleObserver, View.OnClickLis
     private var arrowLocation: ArrowLocation = ArrowLocation.Bottom()
     private var bubbleType:BubbleType = BubbleType.SolidColor(Color.YELLOW)
     private var bubbleMargin:Int = 20
+    private var bubbleId:String = "key"
+
+    private var title:String = ""
+    @StyleRes
+    private var titleTextAppearance:Int = R.style.TextAppearance_AppCompat_SearchResult_Title
+    private var subtitle:String = ""
+    @StyleRes
+    private var subtitleTextAppearance:Int = R.style.TextAppearance_AppCompat_SearchResult_Subtitle
+    private var okLabel:String = ""
+    @StyleRes
+    private var okLabelTextAppearance:Int = R.style.TextAppearance_AppCompat_Caption
+    private var cancelLabel:String = ""
+    @StyleRes
+    private var cancelLabelTextAppearance:Int = R.style.TextAppearance_AppCompat_Caption
+
+    private var customViewUsed:Boolean = false
+    private var showOnce:Boolean = false
 
     companion object{
+
+        internal var isShowing:Boolean = false
+
         fun with(activity: Activity): BubbleOnboarding {
             val bubbleOnboarding = BubbleOnboarding()
             bubbleOnboarding.activity=activity
             return bubbleOnboarding
         }
+
+        fun wasShownBefore(context:Context, bubbleId: String): Boolean {
+            val sharedPreference = context.getSharedPreferences("bubbles", Context.MODE_PRIVATE)
+            return sharedPreference.getBoolean(bubbleId, false)
+        }
+
     }
 
     fun focusInCircle(target:View): BubbleOnboarding {
@@ -64,6 +95,7 @@ class BubbleOnboarding internal constructor():LifecycleObserver, View.OnClickLis
     }
 
     fun customViewRes(@LayoutRes customViewRes:Int): BubbleOnboarding {
+        customViewUsed = true
         this.customViewRes = customViewRes
         return this
     }
@@ -103,27 +135,111 @@ class BubbleOnboarding internal constructor():LifecycleObserver, View.OnClickLis
         return this
     }
 
+    fun title(title: String): BubbleOnboarding {
+        this.title = title
+        return this
+    }
+
+    fun subtitle(subtitle: String): BubbleOnboarding {
+        this.subtitle = subtitle
+        return this
+    }
+
+    fun okLabel(okLabel: String): BubbleOnboarding {
+        this.okLabel = okLabel
+        return this
+    }
+
+    fun cancelLabel(cancelLabel: String): BubbleOnboarding {
+        this.cancelLabel = cancelLabel
+        return this
+    }
+
+    fun titleTextAppearance(titleTextAppearance: Int): BubbleOnboarding {
+        this.titleTextAppearance= titleTextAppearance
+        return this
+    }
+
+    fun subtitleTextAppearance(subtitleTextAppearance: Int): BubbleOnboarding {
+        this.subtitleTextAppearance = subtitleTextAppearance
+        return this
+    }
+
+    fun okLabelTextAppearance(okLabelTextAppearance: Int): BubbleOnboarding {
+        this.okLabelTextAppearance = okLabelTextAppearance
+        return this
+    }
+
+    fun cancelLabelTextAppearance(cancelLabelTextAppearance: Int): BubbleOnboarding {
+        this.cancelLabelTextAppearance = cancelLabelTextAppearance
+        return this
+    }
+
+    fun showOnce(bubbleId:String): BubbleOnboarding {
+        this.showOnce = true
+        this.bubbleId = bubbleId
+        return this
+    }
+
     fun show():BubbleOnboarding{
         activity.let {
-            if(it==null) return@let
-            // Lifecycle
-            this.lifecycle?.addObserver(this)
-            // Background View
-            backgroundView = BubbleBackgroundView(it)
-            backgroundView?.focalShape = focalShape
-            backgroundView?.maskColor = backColor
-            backgroundView?.setOnClickListener(this)
-            (it.window.decorView as ViewGroup?)?.addView(backgroundView)
-            // Informative view
-            val bubble = LayoutInflater.from(it).inflate(customViewRes, null)
-            val builder = BubbleDrawable.Builder()
-                .angle(angle)
-                .arrowWidth(arrowWidth)
-                .arrowHeight(arrowHeight)
-                .arrowLocation(arrowLocation)
-                .bubbleMargin(bubbleMargin)
-                .bubbleType(bubbleType)
-            backgroundView?.addBubble(bubble, builder)
+
+            // Check
+            if(isShowing) return@let
+            requireNotNull(it)
+            requireNotNull(focalShape)
+
+            // Check if the balloon was shown before
+            val sharedPreference = it.getSharedPreferences("bubbles", Context.MODE_PRIVATE)
+            if(showOnce && sharedPreference.getBoolean(bubbleId, false)){
+                return@let
+            }
+
+            // Wait for view layout
+            focalShape?.prepare {
+                // Lifecycle
+                this.lifecycle?.addObserver(this)
+                // Background View
+                backgroundView = BubbleBackgroundView(it)
+                backgroundView?.focalShape = focalShape
+                backgroundView?.maskColor = backColor
+                backgroundView?.setOnClickListener(this)
+                (it.window.decorView as ViewGroup?)?.addView(backgroundView)
+                // Informative view
+                val bubble = LayoutInflater.from(it).inflate(customViewRes, null)
+                // Set texts and styles
+                if(!customViewUsed){
+                    bubble.findViewById<MaterialTextView>(R.id.title).apply {
+                        text = title
+                        setTextAppearance(context, titleTextAppearance)
+                    }
+                    bubble.findViewById<MaterialTextView>(R.id.subtitle).apply {
+                        text = subtitle
+                        setTextAppearance(context, subtitleTextAppearance)
+                    }
+                    bubble.findViewById<MaterialButton>(R.id.ok).apply {
+                        text = okLabel
+                        setTextAppearance(context, okLabelTextAppearance)
+                        setOnClickListener { clear() }
+                    }
+                    bubble.findViewById<MaterialButton>(R.id.cancel).apply {
+                        text = cancelLabel
+                        setTextAppearance(context, cancelLabelTextAppearance)
+                        setOnClickListener { clear() }
+                    }
+                }
+                // Build
+                val builder = BubbleDrawable.Builder()
+                    .angle(angle)
+                    .arrowWidth(arrowWidth)
+                    .arrowHeight(arrowHeight)
+                    .arrowLocation(arrowLocation)
+                    .bubbleMargin(bubbleMargin)
+                    .bubbleType(bubbleType)
+                backgroundView?.addBubble(bubble, builder)
+                isShowing = true
+                sharedPreference.edit().putBoolean(bubbleId, true).apply()
+            }
         }
         return this
     }
@@ -133,6 +249,7 @@ class BubbleOnboarding internal constructor():LifecycleObserver, View.OnClickLis
         (activity?.window?.decorView as ViewGroup?)?.removeView(backgroundView)
         activity = null
         focalShape = null
+        isShowing = false
     }
 
     override fun onClick(v: View?) {
diff --git a/library/src/main/java/com/kemalatli/bubbleonboarding/background/BubbleBackgroundView.kt b/library/src/main/java/com/kemalatli/bubbleonboarding/background/BubbleBackgroundView.kt
@@ -42,12 +42,12 @@ internal class BubbleBackgroundView @JvmOverloads constructor(context: Context,
         var arrowCenter = true
         var left = 0
         var top = 0
-        var bottom = 0
-        var right = 0
+        var bubbleWidth = bubble.measuredWidth.toFloat()
+        var bubbleHeight = bubble.measuredHeight.toFloat()
         when(builder.arrowLocation){
             is ArrowLocation.Bottom -> {
                 left = (shape.viewX - (bubble.measuredWidth-shape.width)/2).toInt()
-                top = (shape.viewY - bubble.measuredHeight - builder.bubbleMargin).toInt()
+                top = (shape.viewY - bubble.measuredHeight - builder.bubbleMargin-builder.arrowHeight).toInt()
                 // Check right
                 if(left + bubble.measuredWidth > screenWidth){
                     left = screenWidth - bubble.measuredWidth
@@ -60,10 +60,11 @@ internal class BubbleBackgroundView @JvmOverloads constructor(context: Context,
                     builder.arrowPosition(shape.viewX+shape.width/2-left)
                     arrowCenter = false
                 }
+                bubbleHeight += builder.arrowHeight
             }
             is ArrowLocation.Top -> {
                 left = (shape.viewX - (bubble.measuredWidth-shape.width)/2).toInt()
-                top = (shape.viewY + shape.heigth + builder.bubbleMargin).toInt()
+                top = (shape.viewY + shape.heigth + builder.bubbleMargin+builder.arrowHeight).toInt()
                 // Check right
                 if(left + bubble.measuredWidth > screenWidth){
                     left = screenWidth - bubble.measuredWidth
@@ -76,22 +77,25 @@ internal class BubbleBackgroundView @JvmOverloads constructor(context: Context,
                     builder.arrowPosition(shape.viewX+shape.width/2-left)
                     arrowCenter = false
                 }
+                bubbleHeight += builder.arrowHeight
             }
             is ArrowLocation.Left -> {
-                left = (shape.viewX + shape.width + builder.bubbleMargin).toInt()
+                left = (shape.viewX + shape.width + builder.bubbleMargin+builder.arrowHeight).toInt()
                 top = (shape.viewY - (bubble.measuredHeight-shape.heigth)/2).toInt()
+                bubbleWidth += builder.arrowHeight
             }
             is ArrowLocation.Right -> {
-                left = (shape.viewX - builder.bubbleMargin - bubble.measuredWidth).toInt()
+                left = (shape.viewX - builder.bubbleMargin - bubble.measuredWidth-builder.arrowHeight).toInt()
                 top = (shape.viewY - (bubble.measuredHeight-shape.heigth)/2).toInt()
+                bubbleWidth += builder.arrowHeight
             }
         }
         val layoutParams =  LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
-        layoutParams.setMargins(left, top, right, bottom)
+        layoutParams.setMargins(left, top, 0, 0)
         bubble.layoutParams = layoutParams
         addView(bubble)
         // Add bubble background
-        bubble.background = builder.rect(RectF(0f,0f, bubble.measuredWidth.toFloat(), bubble.measuredHeight.toFloat())).arrowCenter(arrowCenter).build()
+        bubble.background = builder.rect(RectF(0f,0f, bubbleWidth, bubbleHeight)).arrowCenter(arrowCenter).build()
 
     }
 
diff --git a/library/src/main/java/com/kemalatli/bubbleonboarding/content/bubble/BubbleDrawable.kt b/library/src/main/java/com/kemalatli/bubbleonboarding/content/bubble/BubbleDrawable.kt
@@ -42,7 +42,7 @@ class BubbleDrawable: Drawable {
                 // Create bitmap
                 val bitmap =  Bitmap.createBitmap(rectangle.width().toInt() , rectangle.height().toInt(), Bitmap.Config.ARGB_8888)
                 val bitmapCanvas = Canvas(bitmap)
-                val linearGradient = LinearGradient(0f, 0f, rectangle.width(), rectangle.width() * tan(Math.toRadians(type.ange.toDouble())).toFloat(), type.startColor, type.endColor, Shader.TileMode.CLAMP)
+                val linearGradient = LinearGradient(0f, 0f, rectangle.height() * tan(Math.toRadians(type.ange.toDouble())).toFloat(), rectangle.height(), type.startColor, type.endColor, Shader.TileMode.CLAMP)
                 paint.isDither = true
                 paint.shader = linearGradient
                 bitmapCanvas.drawRect(rectangle, paint)
diff --git a/library/src/main/java/com/kemalatli/bubbleonboarding/focus/base/FocalShape.kt b/library/src/main/java/com/kemalatli/bubbleonboarding/focus/base/FocalShape.kt
@@ -3,21 +3,25 @@ package com.kemalatli.bubbleonboarding.focus.base
 import android.graphics.Canvas
 import android.graphics.Paint
 import android.view.View
+import androidx.core.view.doOnLayout
 
-abstract class FocalShape(private val view:View){
+abstract class FocalShape(val view:View){
 
-    val viewX:Float
-    val viewY:Float
-    val width:Float
-    val heigth:Float
+    var viewX:Float = 0f
+    var viewY:Float = 0f
+    var width:Float = 0f
+    var heigth:Float = 0f
 
-    init {
-        val points = IntArray(2)
-        view.getLocationOnScreen(points)
-        viewX = points[0].toFloat()
-        viewY = points[1].toFloat()
-        width = view.width.toFloat()
-        heigth = view.height.toFloat()
+    fun prepare(ready:()->Unit){
+        view.doOnLayout {
+            val points = IntArray(2)
+            view.getLocationOnScreen(points)
+            viewX = points[0].toFloat()
+            viewY = points[1].toFloat()
+            width = view.width.toFloat()
+            heigth = view.height.toFloat()
+            ready.invoke()
+        }
     }
 
     abstract fun draw(canvas: Canvas?, paint: Paint?)
diff --git a/library/src/main/res/layout/view_bubble.xml b/library/src/main/res/layout/view_bubble.xml
@@ -12,52 +12,59 @@
 
         <TextView
             android:id="@+id/title"
-            android:layout_marginTop="22dp"
+            android:maxWidth="300dp"
+            android:layout_marginTop="10dp"
             android:layout_marginHorizontal="22dp"
             android:textColor="@android:color/black"
-            android:textSize="16sp"
             android:text="¿Lo has probado y te ha gustado? "
             app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">
         </TextView>
 
         <TextView
             android:id="@+id/subtitle"
+            android:maxWidth="300dp"
             android:layout_marginTop="8dp"
             android:layout_marginHorizontal="22dp"
             android:textColor="@android:color/black"
-            android:textSize="14sp"
             android:text="¡Cuenta a otrxs Pickers qué es lo que más te ha gustado de este producto!"
             app:layout_constraintTop_toBottomOf="@id/title"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            android:layout_width="0dp"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content">
         </TextView>
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/ok"
-            android:textSize="14sp"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/subtitle"
+            app:layout_constraintBottom_toBottomOf="parent"
             style="@style/Widget.MaterialComponents.Button.TextButton"
-            android:text="¡Top!"
+            android:text="Ok"
+            android:textAllCaps="false"
+            android:layout_marginTop="10dp"
+            android:layout_marginBottom="10dp"
+            android:padding="0dp"
             android:layout_width="wrap_content"
-            android:layout_height="wrap_content">
+            android:layout_height="30dp">
         </com.google.android.material.button.MaterialButton>
 
         <com.google.android.material.button.MaterialButton
-            android:id="@+id/skip"
-            android:textSize="14sp"
+            android:id="@+id/cancel"
             app:layout_constraintStart_toEndOf="@id/ok"
             app:layout_constraintTop_toBottomOf="@id/subtitle"
+            app:layout_constraintBottom_toBottomOf="parent"
             style="@style/Widget.MaterialComponents.Button.TextButton"
-            android:text="¡Top!"
+            android:text="Cancel"
+            android:textAllCaps="false"
+            android:layout_marginTop="10dp"
+            android:layout_marginBottom="10dp"
+            android:padding="0dp"
             android:layout_width="wrap_content"
-            android:layout_height="wrap_content">
+            android:layout_height="30dp">
         </com.google.android.material.button.MaterialButton>
 
     </androidx.constraintlayout.widget.ConstraintLayout>
