Custom shaped android imageview components

Overview

Shape Image View

Maven Central

Provides a set of custom shaped android imageview components, and a framework to define more shapes. Implements both shader and bitmap mask based image views.

  • Shader based one uses canvas draw methods and Path class,
  • Mask based one uses xfermode to draw image on bitmaps defined by android shape XML's or resource bitmaps.

There are many projects online implementing such components, however one goal of this project is to provide a performant/smooth scrolling image view component framework to define different shapes for imageviews.

For use with recycling view such as ListView or GridView please use shader based implementations.

Sample app in play store

Youtube video

How to use

Gradle dependency:

compile 'com.github.siyamed:android-shape-imageview:[email protected]'

###Shader Based ImageView's ####BubbleImageView Android Bubble ImageView

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

Attributes:

  • siTriangleHeight the height of the bubble pointer in dp
  • siArrowPosition where to point the arrow, currently left|right
  • siSquare set width and height to the minimum of the given values true|false

####RoundedImageView Android Rounded Rectangle ImageView

<com.github.siyamed.shapeimageview.RoundedImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siRadius="6dp"
    app:siBorderWidth="6dp"
    app:siBorderColor="@color/darkgray"
    app:siSquare="true"/>

Attributes:

  • siBorderColor border color
  • siBorderWidth border width in dp
  • siBorderAlpha alpha value of the border between 0.0-1.0
  • siRadius corner radius in dp
  • siSquare set width and height to the minimum of the given values true|false

####CircularImageView Android Circular ImageView

<com.github.siyamed.shapeimageview.CircularImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siBorderWidth="6dp"
    app:siBorderColor="@color/darkgray"/>

Attributes:

  • siBorderColor border color
  • siBorderWidth border width in dp
  • siBorderAlpha alpha value of the border between 0.0-1.0

####ShapeImageView This view has the capability to process a provided SVG file (for a limited set of SVG elements), build a Path object and draw it on the shader. The library includes SVG files defining a set of basic shapes and ShapeImageView subclasses using those files. You can use whatever SVG you want to have a wonderful and creatively shaped images in your application. The included SVG files are under library/src/main/res/raw

DiamondImageView PentagonImageView HexagonImageView
Android Diamond ImageView Android Pentagon ImageView Android Hexagon ImageView
OctogonImageView StarImageView HeartImageView
Android Octogon ImageView Android Start ImageView Android Heart ImageView
<com.github.siyamed.shapeimageview.{ClassName}
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    android:src="@drawable/neo"
    app:siBorderWidth="8dp"
    app:siBorderColor="@color/darkgray"/>

Attributes:

  • siBorderColor border color
  • siBorderWidth border width in dp
  • siBorderAlpha alpha value of the border between 0.0-1.0
  • siStrokeCap border stroke cap type butt|round|square
  • siStrokeJoin border stroke join type bevel|miter|round
  • siSquare set width and height to the minimum of the given values true|false
  • siShape a reference to an SVG. This is used by ShapeImageView, not the subclasses of it.

SVG elements that are supported are: rectangle, circle, ellipse, polygon, path, group. Transformations on those elements are also supported.

The system converts an SVG file into a Path. For each element including the parent element <svg> a new Path is created, and all the children Path's are added to their parent path.

###Bitmap Mask Based ImageViews

This view uses extra bitmaps for bitmap masks. Therefore it would be good to use them for very custom shapes, possibly not in a recycling view.

Android Star Shape ImageView

<com.github.siyamed.shapeimageview.mask.PorterShapeImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:siShape="@drawable/star"
    android:src="@drawable/neo"
    app:siSquare="true"/>

Android Star Shape ImageView

<com.github.siyamed.shapeimageview.mask.PorterShapeImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:siShape="@drawable/shape_rounded_rectangle"
    android:src="@drawable/neo"
    app:siSquare="true"/>

rounded rectangle shape definition in XML:

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topLeftRadius="18dp"
        android:topRightRadius="18dp"
        android:bottomLeftRadius="18dp"
        android:bottomRightRadius="18dp" />
    <solid android:color="@color/black" />
</shape>

Attributes:

  • siShape the bitmap mask shape, either a shape drawable or a bitmap
  • siSquare set width and height to the minimum of the given values true|false

This method reads a shape file (either bitmap or an android shape xml), creates a bitmap object using this shape, and finally combines the bitmap of the real image to be shown and the mast bitmap using xfermode.

Sample

See/execute the sample for a demonstration of the components.

If you are lazy check this youtube video demonstrating scrolling in the sample app

You can download the sample app from play store

Proguard

-dontwarn android.support.v7.**
-keep class android.support.v7.** { ; }
-keep interface android.support.v7.* { ; }
-keepattributes *Annotation,Signature
-dontwarn com.github.siyamed.**
-keep class com.github.siyamed.shapeimageview.**{ *; }

References

Android Shape Image View on Android Arsenal

Issues
  • License

    License

    Siyamed, thank you for great library. I would love to use in my project but I have a small problem with your license.

    Apache License 2.0 standard legal line typically begins with: Copyright {yyyy} {name of copyright owner} In the case of your Android-ShapeImageView, only the subsequent “Licensed under the Apache License, Version 2.0 ...” is listed without any copyright owner preceding it.

    Would you mind adding your copyright information to it? thank you, Janusz

    opened by izotx 3
  • Zoom in/out not working

    Zoom in/out not working

    Hello.

    Zoom In/out not working. what should be wrong? Same code working with normal ImageView.

    opened by rajscet 3
  • attrs shape and radius already defined

    attrs shape and radius already defined

    Hi, I am trying to add the aar using gradle as below compile 'com.github.siyamed:android-shape-imageview:[email protected]'

    upon using find tool I found that radius is already used my ViewPagerIndicator, because of which I am unable to add the library.

    Is there any workaround to change the attrs name so that I can add it into my project?

    opened by rinav 3
  • How to Rotate Hexagon shape?

    How to Rotate Hexagon shape?

    I would like to rotate hexagon shape for my design. You can just consider your svg that rotates 90 angle. How can I make this? Please help me....

    opened by oalpayli 3
  • The widget can't work well in the RelativeLayout

    The widget can't work well in the RelativeLayout

    When I used ithe CircularImageView in the RelativeLayout, I found I can't define the size of the view with fixed dp which work well in the LinearLayout. Can't it be fit?

    opened by zsigui 3
  • Update android sdk

    Update android sdk

    I've updated

    • gradle wrapper
    • target/compile version (in sample)
    • .gitignore

    Lib can now working on current android studio versions. See https://github.com/siyamed/android-shape-imageview/issues/25 too

    opened by StefMa 2
  • What is the Latest version of this Library?

    What is the Latest version of this Library?

    Your library is very useful. Thank You.

    The version as seen in the below statement is 0.9+ and android studio throws a warning for such statements. compile 'com.github.siyamed:android-shape-imageview:[email protected]'

    Can you tell me whats the new version is ??

    opened by iAviatorJose 2
  • Set app:siBorderColor programmatically

    Set app:siBorderColor programmatically

    Is there a way to set siBroderColor, siBorderWidth and siShape via setter methods in Java?

    opened by jonastaedcke 2
  • CircularImageView has no size until it draws itself

    CircularImageView has no size until it draws itself

    It's using a fixed width and height, but in the editor it has width/height of 0. At runtime, it has width/height of 0 until it draws something. This is a problem because it's in a RelativeLayout and other views are aligned to it, which makes them shift in front of you.

    I looked at the onMeasure code and I can't see why this happens.

    I am settings its content with Picasso, but that shouldn't matter - the size is fixed so it should never be getting resized.

    <com.github.siyamed.shapeimageview.CircularImageView android:id="@+id/user_photo_image_view" android:layout_width="66dp" android:layout_height="66dp" />

    My workaround is to put it inside of a LinearLayout that has a fixed size.

    opened by bsegall 2
  • Black line when roundedimageview used issue

    Black line when roundedimageview used issue

    hi, great library thanks for all of it. I have an issue when I try to use your roundedimageview view. This is my xml define : <com.github.siyamed.shapeimageview.RoundedImageView android:id="@+id/iv_message_image" android:layout_width="250dp" android:layout_height="match_parent" android:contentDescription="@string/app_name" android:scaleType="fitXY" app:siRadius="11dp" app:siBorderWidth="2dp" android:padding="1dp" app:siBorderColor="@color/chat_bubble_green" app:siSquare="true" android:src="@drawable/profile" />

    In the top layout I have a linearlayout which has a 9 png as background. Anyway this implementation is in a recyclerview. And some items in that view some of the roundedimageview's side have black line. This is what I want to mean : issue

    Any ideas? Thanks...

    opened by hellsayenci 2
  • Not working in android 11

    Not working in android 11

     Caused by: java.lang.ClassNotFoundException: Didn't find class "org.kxml2.io.KXmlParser" on path: DexPathList[[zip file "/data/app/~~M1SVM_YRJj949STHA9_Ppw==/com.example.harmika-68oS_spdM2YYjsUaFX5CTg==/base.apk"],nativeLibraryDirectories=[/data/app/~~M1SVM_YRJj949STHA9_Ppw==/com.example.harmika-68oS_spdM2YYjsUaFX5CTg==/lib/x86, /data/app/~~M1SVM_YRJj949STHA9_Ppw==/com.example.harmika-68oS_spdM2YYjsUaFX5CTg==/base.apk!/lib/x86, /system/lib, /system_ext/lib]]
    
    opened by talha01sayed 0
  • android shape imageview & NavigationView Error

    android shape imageview & NavigationView Error

    Hi, when I add this library to Bildgradle , without writing any code, it unfortunately gets a Error from my navigation menu :

    Caused by: android.view.InflateException: Binary XML file line #16: Binary XML file line #16: Error inflating class com.google.android.material.navigation.NavigationView Caused by: android.view.InflateException: Binary XML file line #16: Error inflating class com.google.android.material.navigation.NavigationView

    opened by sami-soft 0
  • Tint Not Support In This Library

    Tint Not Support In This Library

    Tint Color Not Support In This Library

    opened by sharibtanweer 0
  • border wont be able to show transparent color!!!

    border wont be able to show transparent color!!!

    when using the transparent color like : app:siBorderColor="@color/color_transparent" -->( @color/color_transparent = "#26ff00ff")<-- nothing happen at all, and the border draw as a white color and ignored the transparent.

    opened by AliAsadiPGI 0
  • Migrate to AndroidX

    Migrate to AndroidX

    Set build version SDK to 29 and migrate to AndroidX

    opened by arefhosseini 1
  • AndroidX problem

    AndroidX problem

    AndroidX not compatible.

    opened by arefhosseini 2
  • App crashes in android Q

    App crashes in android Q

    App crashes in android Q using the HexagonImageView. I have the following stacktrace:

    android.view.InflateException: Binary XML file line #9: Binary XML file line #9: Error inflating class com.github.siyamed.shapeimageview.HexagonImageView Caused by: android.view.InflateException: Binary XML file line #9: Error inflating class com.github.siyamed.shapeimageview.HexagonImageView Caused by: java.lang.reflect.InvocationTargetException at java.lang.reflect.Constructor.newInstance0(Native Method) at java.lang.reflect.Constructor.newInstance(Constructor.java:343) at android.view.LayoutInflater.createView(LayoutInflater.java:854) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1004) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:959) at android.view.LayoutInflater.rInflate(LayoutInflater.java:1119) at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1080) at android.view.LayoutInflater.inflate(LayoutInflater.java:693) at android.view.LayoutInflater.inflate(LayoutInflater.java:545) at com.example.app.kotlinext.ExtensionUtils.inflate(Extensions.kt:67) at com.example.app.kotlinext.ExtensionUtils.inflate$default(Extensions.kt:67) at com.example.app.adapters.delegates.card.HexagonAdapterDelegate$HexagonItemViewHolder.<init>(HexagonAdapterDelegate.kt:101) at com.example.app.adapters.delegates.card.HexagonAdapterDelegate.onCreateViewHolder(HexagonAdapterDelegate.kt:91) at com.hannesdorfmann.adapterdelegates3.AdapterDelegatesManager.onCreateViewHolder(AdapterDelegatesManager.java:249) at com.hannesdorfmann.adapterdelegates3.AbsDelegationAdapter.onCreateViewHolder(AbsDelegationAdapter.java:74) at android.support.v7.widget.RecyclerView$Adapter.createViewHolder(RecyclerView.java:6794) at android.support.v7.widget.RecyclerView$Recycler.tryGetViewHolderForPositionByDeadline(RecyclerView.java:5975) at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5858) at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5854) at android.support.v7.widget.LinearLayoutManager$LayoutState.next(LinearLayoutManager.java:2230) at android.support.v7.widget.GridLayoutManager.layoutChunk(GridLayoutManager.java:557) at android.support.v7.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1517) at android.support.v7.widget.LinearLayoutManager.onLayoutChildren(LinearLayoutManager.java:612) at android.support.v7.widget.GridLayoutManager.onLayoutChildren(GridLayoutManager.java:171) at android.support.v7.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3924) at android.support.v7.widget.RecyclerView.dispatchLayout(RecyclerView.java:3641) at android.support.v7.widget.RecyclerView.onLayout(RecyclerView.java:4194) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.support.v4.widget.SwipeRefreshLayout.onLayout(SwipeRefreshLayout.java:625) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.support.v4.view.ViewPager.onLayout(ViewPager.java:1775) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1829) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1673) at android.widget.LinearLayout.onLayout(LinearLayout.java:1582) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:332) at android.widget.FrameLayout.onLayout(FrameLayout.java:270) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1099) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:332) 2019-05-28 20:43:43.372 11231-11231/com.example.app.debug E/AndroidRuntime: at android.widget.FrameLayout.onLayout(FrameLayout.java:270) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1829) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1673) at android.widget.LinearLayout.onLayout(LinearLayout.java:1582) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:332) at android.widget.FrameLayout.onLayout(FrameLayout.java:270) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1829) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1673) at android.widget.LinearLayout.onLayout(LinearLayout.java:1582) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:332) at android.widget.FrameLayout.onLayout(FrameLayout.java:270) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1829) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1673) at android.widget.LinearLayout.onLayout(LinearLayout.java:1582) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:332) at android.widget.FrameLayout.onLayout(FrameLayout.java:270) at com.android.internal.policy.DecorView.onLayout(DecorView.java:761) at android.view.View.layout(View.java:22254) at android.view.ViewGroup.layout(ViewGroup.java:6310) at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:3161) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2621) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1744) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7714) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:966) at android.view.Choreographer.doCallbacks(Choreographer.java:790) at android.view.Choreographer.doFrame(Choreographer.java:725) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:951) at android.os.Handler.handleCallback(Handler.java:878) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:209) at android.app.ActivityThread.main(ActivityThread.java:7046) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:486) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:862) Caused by: java.lang.NoClassDefFoundError: Failed resolution of: Lorg/kxml2/io/KXmlParser; at com.github.siyamed.shapeimageview.path.parser.SvgToPath.parse(SvgToPath.java:49) at com.github.siyamed.shapeimageview.path.parser.SvgToPath.getSVGFromInputStream(SvgToPath.java:44) at com.github.siyamed.shapeimageview.path.SvgUtil.readSvg(SvgUtil.java:22) at com.github.siyamed.shapeimageview.shader.SvgShader.setShapeResId(SvgShader.java:76) at com.github.siyamed.shapeimageview.shader.SvgShader.init(SvgShader.java:67) at com.github.siyamed.shapeimageview.ShaderImageView.setup(ShaderImageView.java:34) at com.github.siyamed.shapeimageview.ShaderImageView.<init>(ShaderImageView.java:25) at com.github.siyamed.shapeimageview.HexagonImageView.<init>(HexagonImageView.java:16) ... 94 more

    opened by ahqmrf 2
  •  Invalid Region.Op - only INTERSECT and DIFFERENCE are allowed

    Invalid Region.Op - only INTERSECT and DIFFERENCE are allowed

    Hello How to fix this error for android 28 and above:

    java.lang.IllegalArgumentException: Invalid Region.Op - only INTERSECT and DIFFERENCE are allowed

    opened by reza-khalafi 0
  • diamond shape border more

    diamond shape border more

    hi , thanks for your good repository how can i make more three border like the picture below that i uploaded ? img_hdr_blue i75dpi

    opened by mjalijani 0
Releases(0.9.3)
Owner
Siyamed SINIR
Padawan @ Somewhere
Siyamed SINIR
Auto Scrolling Image Pager with Pager Indicator and Text

AutoImageFlipper Auto Scrolling Image Pager with Pager Indicator and Text Note: It works only on Apps which are using AndroidX dependencies, if you're

Shahbaz Hussain 105 Jul 22, 2021
Polygon shaped images

ShapeShifter Provides Polygon shaped imageView Screenshot Usage Step 1. Add the JitPack repository to your build file allprojects { repositori

Dushyant Mainwal 24 Oct 20, 2020
Crop and Rounded Corners added to an ImageView.

SuperImageView Extra features for your ImageView provided in a modularized way Documentation for v2 coming this week. CropImageView An ImageView that

César Díez Sánchez 650 Jun 30, 2021
A simple image cropping library for Android.

SimpleCropView The SimpleCropView is an image cropping library for Android. It simplifies your code for cropping image and provides an easily customiz

Issei Aoki 2.4k Jul 26, 2021
Customizable Android full screen image viewer for Fresco library supporting "pinch to zoom" and "swipe to dismiss" gestures. Made by Stfalcon

This project is no longer supported. If you're able to switch from Fresco to any other library that works with the Android's ImageView, please migrate

Stfalcon LLC 1.8k Jul 19, 2021
Simple android image popup Library

Android Image Popup Show image as a popup on a click event or any event. Simply set the image as drawable and thats it!!!. And also you can set width,

Chathura Lakmal 61 May 12, 2021
Dali is an image blur library for Android. It contains several modules for static blurring, live blurring and animations.

Dali Dali is an image blur library for Android. It is easy to use, fast and extensible. Dali contains several modules for either static blurring, live

Patrick Favre-Bulle 1k Aug 1, 2021
Add curve at bottom of image views and relative layouts.

Crescento Android library that adds a curve at the below of image views and relative layouts. CrescentoImageView and CrescentoContainer are the image

Shivam Satija 1.3k Jul 19, 2021
Add curve at bottom of image views and relative layouts.

Crescento Android library that adds a curve at the below of image views and relative layouts. CrescentoImageView and CrescentoContainer are the image

Shivam Satija 1.3k Mar 24, 2021
Note saver app which can save images as well with customization.

Note-With-Images-App Note saver app which can save images as well with customization. Demo final.demo.mp4 What i used? Kotlin Paging 3 library flow li

agam koradiya 6 Jul 6, 2021
An android image compression library.

Compressor Compressor is a lightweight and powerful android image compression library. Compressor will allow you to compress large photos into smaller

Zetra 6.1k Aug 3, 2021
Use a jar executable to create a Drawable class to display a SVG on Android.

SVG2Drawable Use a jar executable to create a Drawable class to display a SVG on Android. This is a standalone library, not a Runtime Android library.

Stan Kocken 200 Apr 7, 2021
RoundedImageView-Library 0.9 0.0 Java To set single or multiple corners on Image Views.

RoundedImageView-Library Rounded ImageView Android Library, to set single or multiple corners on imageview. Screenshot Usage Step 1. Add the JitPack r

Dushyant Mainwal 15 Sep 2, 2020
A small customizable library useful to handle an gallery image pick action built-in your app. :sunrise_over_mountains::stars:

Louvre A small customizable image picker. Useful to handle an gallery image pick action built-in your app. *Images from Google Image Search Installati

André Mion 633 Jul 29, 2021