Beginner
Beginner

Reputation: 4153

Shape image like bubble with arrow (Android)

What I wanted is to turn my imageview to shape like this

I was using this library

https://github.com/siyamed/android-shape-imageview

enter image description here

I was able to add a border radius on it but my problem is I don't know how to add an arrow while adding border radius on it

Upvotes: -2

Views: 676

Answers (3)

Eldo Martadjaya
Eldo Martadjaya

Reputation: 96

florent37:shapeofview:1.4.7 is deprecated so this is the method of how to upload the dependency. At least it works in my part.

write both dependencies in the app level build.gradle:

   implementation 'io.github.florent37:shapeofview:1.4.7'
    implementation 'com.github.florent37:shapeofview:1.4.7'

in settings.gradle:

  pluginManagement {
        repositories {
            google()
            mavenCentral()
            gradlePluginPortal()
            maven { url 'https://jcenter.bintray.com' }
            maven { url 'https://jitpack.io' }
            maven { url "https://repo.grails.org/grails/core" } 
        }
    }
    dependencyResolutionManagement {
        repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
        repositories {
            google()
            mavenCentral()
            maven { url "https://repo.grails.org/grails/core" } 
            maven { url 'https://jitpack.io' }
            maven { url 'https://jcenter.bintray.com' }
        }
    }
    rootProject.name = "xxx"
    include ':app'

and in gradle.properties:

android.useAndroidX=true
android.enableJetifier=true
org.gradle.jvmargs=-Xmx1920M \
--add-exports=jdk.compiler/com.sun.tools.javac.tree=ALL-UNNAMED \
--add-exports=jdk.compiler/com.sun.tools.javac.code=ALL-UNNAMED \
--add-exports=jdk.compiler/com.sun.tools.javac.util=ALL-UNNAMED
android.defaults.buildfeatures.buildconfig=false
android.nonTransitiveRClass=false
android.nonFinalResIds=false

Upvotes: 0

Md Imran Hossain
Md Imran Hossain

Reputation: 44

check it to get this kind of bubble view https://github.com/florent37/ShapeOfView

<com.github.florent37.shapeofview.shapes.BubbleView
    android:layout_width="150dp"
    android:layout_height="150dp"
    app:shape_bubble_arrowHeight="10dp"
    app:shape_bubble_arrowWidth="10dp"
    app:shape_bubble_arrowPosition="bottom"
    app:shape_bubble_borderRadius="20dp"
    app:arrow_posititon_percent="0.5"
    >

     <!-- YOUR CONTENT -->

</com.github.florent37.shapeofview.shapes.BubbleView>

enter image description here

Upvotes: 0

AskNilesh
AskNilesh

Reputation: 69724

use this app:siArrowPosition="right":-> siArrowPosition where to point the arrow, currently left|right

use this app:siRadius="6dp" :-> corner radius in dp and app:siBorderWidth="6dp" border width in dpfor border

<com.github.siyamed.shapeimageview.BubbleImageView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@drawable/neo"
  app:siRadius="6dp"
  app:siBorderWidth="6dp"
  app:siArrowPosition="right"
  app:siSquare="true"/>

Upvotes: 1

Related Questions