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

Comments
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Not work with Glide

    Not work with Glide

    Hi,

    I'm using Glide to load an image to your DiamondImageView and it show as square. But it work well with Picasso. So, without using Picasso do you have any hint for it?

    opened by langhoangal 1
  • Rounded Hexagon

    Rounded Hexagon

    It seems that i can't make my hexagon corners go round

    <com.github.siyamed.shapeimageview.HexagonImageView
                            android:layout_width="@dimen/profile_picture_size"
                            android:layout_height="@dimen/profile_picture_size"
                            android:src="@drawable/neo"
                            app:siBorderWidth="10dp"
                            app:siBorderColor="@color/blue"
                            app:siRadius="10dp"
                            android:layout_alignParentTop="true"
                            android:layout_centerHorizontal="true"
                            android:id="@+id/view_profile_pic"
                            android:scaleType="centerCrop"/>
    

    Am I doing it wrong?

    opened by ronzohan 1
  • i cant it libery in eclipce

    i cant it libery in eclipce

    hi dear, I want libery android-shape-imageview import into eclipse but i cant.i want just diamond shape image view

    Is it possible for me to put diamond class ????

    opened by iman100 1
  • CenterInside not working with pentagonImageView

    CenterInside not working with pentagonImageView

    I have an image with scaletype centerInside but isn't working, i have this: <com.github.siyamed.shapeimageview.PentagonImageView android:layout_width="match_parent" android:layout_height="75dp" android:src="@drawable/restaurant" android:scaleType="centerInside" />

    opened by chriscoderdr 1
  • com.github.siyamed.shapeimageview.mask.PorterShapeImageView cannot be cast to com.github.siyamed.shapeimageview.ShapeImageView

    com.github.siyamed.shapeimageview.mask.PorterShapeImageView cannot be cast to com.github.siyamed.shapeimageview.ShapeImageView

    2021-11-03 05:03:38.494 1069-1069/com.wisdom E/AndroidRuntime: FATAL EXCEPTION: main Process: com.wisdom, PID: 1069 java.lang.ClassCastException: com.github.siyamed.shapeimageview.mask.PorterShapeImageView cannot be cast to com.github.siyamed.shapeimageview.ShapeImageView at com.wisdom.Adapters.Adap_PostList$ViewHolder.(Adap_PostList.kt:58) at com.wisdom.Adapters.Adap_PostList.onCreateViewHolder(Adap_PostList.kt:22) at com.wisdom.Adapters.Adap_PostList.onCreateViewHolder(Adap_PostList.kt:17) at androidx.recyclerview.widget.RecyclerView$Adapter.createViewHolder(RecyclerView.java:7078) at androidx.recyclerview.widget.RecyclerView$Recycler.tryGetViewHolderForPositionByDeadline(RecyclerView.java:6235) at androidx.recyclerview.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:6118) at androidx.recyclerview.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:6114) at androidx.recyclerview.widget.LinearLayoutManager$LayoutState.next(LinearLayoutManager.java:2303) at androidx.recyclerview.widget.LinearLayoutManager.layoutChunk(LinearLayoutManager.java:1627) at androidx.recyclerview.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1587) at androidx.recyclerview.widget.LinearLayoutManager.onLayoutChildren(LinearLayoutManager.java:665) at androidx.recyclerview.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:4134) at androidx.recyclerview.widget.RecyclerView.dispatchLayout(RecyclerView.java:3851) at androidx.recyclerview.widget.RecyclerView.onLayout(RecyclerView.java:4404) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at androidx.swiperefreshlayout.widget.SwipeRefreshLayout.onLayout(SwipeRefreshLayout.java:625) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1791) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1635) at android.widget.LinearLayout.onLayout(LinearLayout.java:1544) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323) at android.widget.FrameLayout.onLayout(FrameLayout.java:261) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1083) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323) at android.widget.FrameLayout.onLayout(FrameLayout.java:261) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1791) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1635) at android.widget.LinearLayout.onLayout(LinearLayout.java:1544) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323) at android.widget.FrameLayout.onLayout(FrameLayout.java:261) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1791) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1635) at android.widget.LinearLayout.onLayout(LinearLayout.java:1544) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323) at android.widget.FrameLayout.onLayout(FrameLayout.java:261) at com.android.internal.policy.DecorView.onLayout(DecorView.java:761) at android.view.View.layout(View.java:19663) at android.view.ViewGroup.layout(ViewGroup.java:6075) at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2500) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2216) 2021-11-03 05:03:38.496 1069-1069/com.wisdom E/AndroidRuntime: at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1396) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6773) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:966) at android.view.Choreographer.doCallbacks(Choreographer.java:778) at android.view.Choreographer.doFrame(Choreographer.java:713) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:952) at android.os.Handler.handleCallback(Handler.java:790) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:164) at android.app.ActivityThread.main(ActivityThread.java:6518) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)

    opened by nishtechs 0
  • 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
  • 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
Releases(0.9.3)
Owner
Siyamed SINIR
Padawan @ Somewhere
Siyamed SINIR
A circular ImageView for Android

CircleImageView A fast circular ImageView perfect for profile images. This is based on RoundedImageView from Vince Mi which itself is based on techniq

Henning Dodenhof 14.3k Sep 28, 2022
Android ImageView that handles animated GIF images

GifImageView Android ImageView that handles Animated GIF images Usage In your build.gradle file: dependencies { compile 'com.felipecsl:gifimageview:

Felipe Lima 1.1k Sep 20, 2022
Android ImageView that supports different radii on each corner.

SelectableRoundedImageView Note that this project is no longer maintained. Android ImageView that supports different radii on each corner. It also sup

Joonho Kim 1.1k Sep 14, 2022
A fast ImageView that supports rounded corners, ovals, and circles.

RoundedImageView A fast ImageView (and Drawable) that supports rounded corners (and ovals or circles) based on the original example from Romain Guy. I

Vince Mi 6.3k Sep 26, 2022
An imageView can auto scroll with device rotating.

PanoramaImageView An imageView can auto scroll with device rotating. ScreenShots Include PanoramaImageView to Your Project With gradle: dependencies {

郭佳哲 2.2k Sep 1, 2022
Easy to use, lightweight custom image view with rounded corners.

RoundedImageView Easy to use, lightweight custom image view with rounded corners. Explore the docs » View Demo · Report Bug · Request Feature About Th

Melik Mehmet Özyildirim 6 Dec 23, 2021
An image loading and caching library for Android focused on smooth scrolling

Glide | View Glide's documentation | 简体中文文档 | Report an issue with Glide Glide is a fast and efficient open source media management and image loading

Bump Technologies 33k Oct 3, 2022
Android Asynchronous Networking and Image Loading

Android Asynchronous Networking and Image Loading Download Maven Git Features Kotlin coroutine/suspend support Asynchronously download: Images into Im

Koushik Dutta 6.3k Sep 29, 2022
A powerful image downloading and caching library for Android

Picasso A powerful image downloading and caching library for Android For more information please see the website Download Download the latest AAR from

Square 18.4k Sep 24, 2022
Powerful and flexible library for loading, caching and displaying images on Android.

Universal Image Loader The great ancestor of modern image-loading libraries :) UIL aims to provide a powerful, flexible and highly customizable instru

Sergey Tarasevich 16.8k Sep 22, 2022
An Android library for managing images and the memory they use.

Fresco Fresco is a powerful system for displaying images in Android applications. Fresco takes care of image loading and display, so you don't have to

Facebook 16.9k Sep 30, 2022
Image loading for Android backed by Kotlin Coroutines.

An image loading library for Android backed by Kotlin Coroutines. Coil is: Fast: Coil performs a number of optimizations including memory and disk cac

Coil 8.6k Oct 3, 2022
An Android view for displaying repeated continuous side scrolling images. This can be used to create a parallax animation effect.

Scrolling Image View An Android view for displaying repeated continuous side scrolling images. This can be used to create a parallax animation effect.

Q42 1.8k Sep 14, 2022
Photo picker library for android. Let's you pick photos directly from files, or navigate to camera or gallery.

ChiliPhotoPicker Made with ❤️ by Chili Labs. Library made without DataBinding, RxJava and image loading libraries, to give you opportunity to use it w

Chili Labs 388 Oct 1, 2022
:ribbon: The simple way to implement a beautiful ribbon with the shimmering on Android.

AndroidRibbon ?? The simple way to implement a beautiful ribbon with the shimmering on Android. 中文語 Download Gradle Add below codes to your root build

Jaewoong Eum 640 Sep 23, 2022
An Android transformation library providing a variety of image transformations for Glide.

Glide Transformations An Android transformation library providing a variety of image transformations for Glide. Please feel free to use this. Are you

Daichi Furiya 9.7k Sep 21, 2022
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.6k Oct 4, 2022
An Android transformation library providing a variety of image transformations for Picasso

Picasso Transformations An Android transformation library providing a variety of image transformations for Picasso. Please feel free to use this. Are

Daichi Furiya 1.7k Sep 20, 2022
Media Picker is an Android Libary that lets you to select multiple images or video

Media Picker Please let me know if your application go to production via this link Media Picker is an Android Libary that lets you to select multiple

Abdullah Alhazmy 265 Aug 23, 2022