allow for horizontal callouts using gravity sideAuto and sideCenter

app/build.gradle

@@ -8,7 +8,7 @@ android {
         targetSdkVersion 30
         versionCode 1
         versionName "1.0"
-        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }
     buildTypes {
         release {
@@ -20,7 +20,7 @@ android {
 
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'com.android.support:appcompat-v7:26.1.0'
+    implementation 'androidx.appcompat:appcompat:1.0.0'
     implementation project(':showcaseviewlib')
 
 }

app/src/main/java/ir/smartdevelop/eram/showcaseview/MainActivity.java

@@ -1,7 +1,7 @@
 package ir.smartdevelop.eram.showcaseview;
 
 import android.os.Bundle;
-import android.support.v7.app.AppCompatActivity;
+import androidx.appcompat.app.AppCompatActivity;
 import android.view.View;
 
 import smartdevelop.ir.eram.showcaseviewlib.GuideView;
@@ -45,19 +45,19 @@ protected void onCreate(Bundle savedInstanceState) {
                     public void onDismiss(View view) {
                         switch (view.getId()) {
                             case R.id.view1:
-                                builder.setTargetView(view2).build();
+                                builder.setGravity(Gravity.sideauto).setTargetView(view2).build();
                                 break;
                             case R.id.view2:
-                                builder.setTargetView(view3).build();
+                                builder.setGravity(Gravity.auto).setTargetView(view3).build();
                                 break;
                             case R.id.view3:
-                                builder.setTargetView(view4).build();
+                                builder.setGravity(Gravity.auto).setTargetView(view4).build();
                                 break;
                             case R.id.view4:
-                                builder.setTargetView(view5).build();
+                                builder.setGravity(Gravity.auto).setTargetView(view5).build();
                                 break;
                             case R.id.view5:
-                                builder.setTargetView(view6).build();
+                                builder.setGravity(Gravity.sidecenter).setTargetView(view6).build();
                                 break;
                             case R.id.view6:
                                 return;

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

@@ -20,11 +20,10 @@
 
         <ImageView
             android:id="@+id/view2"
-            android:layout_width="wrap_content"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_gravity="left"
-            android:layout_marginLeft="20dp"
-            android:layout_marginRight="10dp"
+            android:maxWidth="0dp"
             android:layout_marginTop="30dp"
             android:src="@mipmap/ic_launcher"
 

build.gradle

@@ -8,7 +8,7 @@ buildscript {
 
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.2.2'
+        classpath 'com.android.tools.build:gradle:7.1.0'
         classpath 'com.github.dcendents:android-maven-gradle-plugin:2.0'
     }
 }

gradle.properties

@@ -13,3 +13,5 @@
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 #Sun Jan 21 11:44:08 IRST 2018
+android.enableJetifier=true
+android.useAndroidX=true

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

showcaseviewlib/build.gradle

@@ -1,5 +1,4 @@
 apply plugin: 'com.android.library'
-apply plugin: 'com.github.dcendents.android-maven'
 group='com.github.mreram'
 android {
     compileSdkVersion 30
@@ -9,10 +8,8 @@ android {
     defaultConfig {
         minSdkVersion 11
         targetSdkVersion 30
-        versionCode 3
-        versionName "1.4.0"
 
-        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
 
     }
 

showcaseviewlib/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Thu Jan 27 20:47:37 CST 2022
+sdk.dir=/Users/asproat/Library/Android/sdk

showcaseviewlib/src/main/java/smartdevelop/ir/eram/showcaseviewlib/GuideView.java

@@ -67,19 +67,25 @@ public class GuideView extends FrameLayout {
 
     private final float density;
     private float stopY;
+    private float stopX;
     private boolean isTop;
+    private boolean isLeft;
     private boolean mIsShowing;
     private int yMessageView = 0;
+    private int xMessageView = 0;
 
+    private float startXLineAndCircle;
     private float startYLineAndCircle;
     private float circleIndicatorSize = 0;
     private float circleIndicatorSizeFinal;
     private float circleInnerIndicatorSize = 0;
     private float lineIndicatorWidthSize;
+    private float lineIndicatorHeightSize;
     private int messageViewPadding;
     private float marginGuide;
     private float strokeCircleWidth;
     private float indicatorHeight;
+    private float indicatorWidth;
 
     private boolean isPerformedAnimationSize = false;
 
@@ -160,9 +166,15 @@ public void onGlobalLayout() {
                     getHeight() - getPaddingBottom()
                 );
 
-                marginGuide = (int) (isTop ? marginGuide : -marginGuide);
-                startYLineAndCircle = (isTop ? targetRect.bottom : targetRect.top) + marginGuide;
-                stopY = yMessageView + indicatorHeight;
+                if(mGravity == Gravity.sideauto || mGravity == Gravity.sidecenter) {
+                    marginGuide = (int) (isLeft ? -marginGuide : marginGuide);
+                    startYLineAndCircle = (isLeft ? targetRect.left : targetRect.right) + marginGuide;
+                    stopY = xMessageView + indicatorWidth;
+                } else  {
+                    marginGuide = (int) (isTop ? marginGuide : -marginGuide);
+                    startYLineAndCircle = (isTop ? targetRect.bottom : targetRect.top) + marginGuide;
+                    stopY = yMessageView + indicatorHeight;
+                }
                 startAnimationSize();
                 getViewTreeObserver().addOnGlobalLayoutListener(this);
             }
@@ -227,8 +239,10 @@ public void onAnimationRepeat(Animator animator) {
 
     private void init() {
         lineIndicatorWidthSize = LINE_INDICATOR_WIDTH_SIZE * density;
+        lineIndicatorHeightSize = LINE_INDICATOR_WIDTH_SIZE * density;
         marginGuide = MARGIN_INDICATOR * density;
         indicatorHeight = INDICATOR_HEIGHT * density;
+        indicatorWidth = INDICATOR_HEIGHT * density;
         messageViewPadding = (int) (MESSAGE_VIEW_PADDING * density);
         strokeCircleWidth = STROKE_CIRCLE_INDICATOR_SIZE * density;
         circleIndicatorSizeFinal = CIRCLE_INDICATOR_SIZE * density;
@@ -273,24 +287,48 @@ protected void onDraw(final Canvas canvas) {
             paintCircleInner.setColor(CIRCLE_INNER_INDICATOR_COLOR);
             paintCircleInner.setAntiAlias(true);
 
-            final float x = (targetRect.left / 2 + targetRect.right / 2);
+            float x = 0.0f;
+            if (mGravity == Gravity.sideauto || mGravity == Gravity.sidecenter) {
+                x = (targetRect.top / 2 + targetRect.bottom / 2);
+            } else {
+                x = (targetRect.left / 2 + targetRect.right / 2);
+            }
+
 
             switch (pointerType) {
                 case circle:
-                    canvas.drawLine(x,startYLineAndCircle,x,stopY,paintLine);
-                    canvas.drawCircle(x, startYLineAndCircle, circleIndicatorSize, paintCircle);
-                    canvas.drawCircle(x, startYLineAndCircle, circleInnerIndicatorSize, paintCircleInner);
+                    if (mGravity == Gravity.sideauto || mGravity == Gravity.sidecenter) {
+                        canvas.drawLine(startYLineAndCircle, x, stopY, x, paintLine);
+                        canvas.drawCircle(startYLineAndCircle, x, circleIndicatorSize, paintCircle);
+                        canvas.drawCircle(startYLineAndCircle, x, circleInnerIndicatorSize, paintCircleInner);
+                    }
+                    else {
+                        canvas.drawLine(x, startYLineAndCircle, x, stopY, paintLine);
+                        canvas.drawCircle(x, startYLineAndCircle, circleIndicatorSize, paintCircle);
+                        canvas.drawCircle(x, startYLineAndCircle, circleInnerIndicatorSize, paintCircleInner);
+                    }
+
                     break;
                 case arrow:
-                    canvas.drawLine(x,startYLineAndCircle,x,stopY,paintLine);
                     Path path = new Path();
-                    if (isTop) {
-                        path.moveTo(x, startYLineAndCircle - (circleIndicatorSize * 2));
-                        path.lineTo(x + circleIndicatorSize, startYLineAndCircle);
-                        path.lineTo(x - circleIndicatorSize, startYLineAndCircle);
+                    if (mGravity == Gravity.sideauto || mGravity == Gravity.sidecenter) {
+                        canvas.drawLine(startYLineAndCircle, x, stopY, x, paintLine);
+                        if (isLeft) {
+                            path.moveTo(startYLineAndCircle + (circleIndicatorSize * 2), x);
+                        } else {
+                            path.moveTo(startYLineAndCircle - (circleIndicatorSize * 2), x);
+                        }
+                        path.lineTo(startYLineAndCircle, x + circleIndicatorSize);
+                        path.lineTo(startYLineAndCircle, x - circleIndicatorSize);
                         path.close();
+
                     } else {
-                        path.moveTo(x, startYLineAndCircle + (circleIndicatorSize * 2));
+                        canvas.drawLine(x, startYLineAndCircle, x, stopY, paintLine);
+                        if (isTop) {
+                            path.moveTo(x, startYLineAndCircle - (circleIndicatorSize * 2));
+                        } else {
+                            path.moveTo(x, startYLineAndCircle + (circleIndicatorSize * 2));
+                        }
                         path.lineTo(x + circleIndicatorSize, startYLineAndCircle);
                         path.lineTo(x - circleIndicatorSize, startYLineAndCircle);
                         path.close();
@@ -394,39 +432,70 @@ public void updateGuideViewLocation() {
 
     private Point resolveMessageViewLocation() {
 
-        int xMessageView;
-        if (mGravity == Gravity.center) {
-            xMessageView = (int) (targetRect.left - mMessageView.getWidth() / 2 + target.getWidth() / 2);
-        } else {
-            xMessageView = (int) (targetRect.right) - mMessageView.getWidth();
-        }
+        if(mGravity == Gravity.sideauto || mGravity == Gravity.sidecenter)
+        {
+            if (mGravity == Gravity.sidecenter) {
+                yMessageView = (int) (targetRect.top + target.getHeight() / 2 - mMessageView.getHeight() / 2);
+            } else {
+                yMessageView = (int) (targetRect.top);
+            }
 
-        if (isLandscape()) {
-            xMessageView -= getNavigationBarSize();
-        }
+            if (yMessageView + mMessageView.getHeight() > getHeight()) {
+                yMessageView = getHeight() - mMessageView.getHeight();
+            }
+            if (yMessageView < 0) {
+                yMessageView = 0;
+            }
 
-        if (xMessageView + mMessageView.getWidth() > getWidth()) {
-            xMessageView = getWidth() - mMessageView.getWidth();
-        }
-        if (xMessageView < 0) {
-            xMessageView = 0;
-        }
+            //set message view bottom
+            if ((targetRect.left - (indicatorWidth)) < getWidth() / 2f) {
+                isLeft = false;
+                xMessageView = (int) (targetRect.right + indicatorWidth);
+            }
+            //set message view top
+            else {
+                isLeft = true;
+                xMessageView = (int) (targetRect.left - mMessageView.getWidth() - indicatorWidth);
+            }
+
+            if (xMessageView < 0) {
+                xMessageView = 0;
+            }
 
-        //set message view bottom
-        if ((targetRect.top + (indicatorHeight)) > getHeight() / 2f) {
-            isTop = false;
-            yMessageView = (int) (targetRect.top - mMessageView.getHeight() - indicatorHeight);
         }
-        //set message view top
         else {
-            isTop = true;
-            yMessageView = (int) (targetRect.top + target.getHeight() + indicatorHeight);
-        }
+            if (mGravity == Gravity.center) {
+                xMessageView = (int) (targetRect.left - mMessageView.getWidth() / 2 + target.getWidth() / 2);
+            } else {
+                xMessageView = (int) (targetRect.right) - mMessageView.getWidth();
+            }
 
-        if (yMessageView < 0) {
-            yMessageView = 0;
-        }
+            if (isLandscape()) {
+                xMessageView -= getNavigationBarSize();
+            }
 
+            if (xMessageView + mMessageView.getWidth() > getWidth()) {
+                xMessageView = getWidth() - mMessageView.getWidth();
+            }
+            if (xMessageView < 0) {
+                xMessageView = 0;
+            }
+
+            //set message view bottom
+            if ((targetRect.top + (indicatorHeight)) > getHeight() / 2f) {
+                isTop = false;
+                yMessageView = (int) (targetRect.top - mMessageView.getHeight() - indicatorHeight);
+            }
+            //set message view top
+            else {
+                isTop = true;
+                yMessageView = (int) (targetRect.top + target.getHeight() + indicatorHeight);
+            }
+
+            if (yMessageView < 0) {
+                yMessageView = 0;
+            }
+        }
         return new Point(xMessageView, yMessageView);
     }
 

showcaseviewlib/src/main/java/smartdevelop/ir/eram/showcaseviewlib/config/Gravity.java

@@ -4,6 +4,6 @@
  * Created by Mohammad Reza Eram (https://github.com/mreram) on 27,November,2018
  */
 public enum Gravity {
-    auto, center
+    auto, center, sideauto, sidecenter
 }