Custom view for circular images in Android while maintaining the best draw performance

Related tags

ImageView CircularImageView
Overview

CircularImageView

Custom view for circular images in Android while maintaining the best draw performance

Imgur

Usage

To make a circular ImageView, add this CircularImageView library to your project and add CircularImageView in your layout XML. You can also grab it via Gradle:

compile 'com.pkmmte.view:circularimageview:1.1'

or Maven:

<dependency>
		<groupId>com.pkmmte.view</groupId>
		<artifactId>circularimageview</artifactId>
		<version>1.1</version>
</dependency>

###XML

    <com.pkmmte.view.CircularImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/image"
        app:border="true"
        app:border_color="#EEEEEE"
        app:border_width="4dp"
        app:shadow="true" />

You may use the following properties in your XML to customize your CircularImageView.

#####Properties:

  • app:border (boolean) -> default false
  • app:border_color (color) -> default WHITE
  • app:border_width (dimension) -> default 2dp
  • app:selector (boolean) -> default false
  • app:selector_color (color) -> default TRANSPARENT
  • app:selector_stroke_color (color) -> default BLUE
  • app:selector_stroke_width (dimension) -> default 2dp
  • app:shadow (boolean) -> default false

###JAVA

    CircularImageView circularImageView = (CircularImageView)findViewById(R.id.yourCircularImageView);
    circularImageView.setBorderColor(getResources().getColor(R.color.GrayLight));
    circularImageView.setBorderWidth(10);
    circularImageView.setSelectorColor(getResources().getColor(R.color.BlueLightTransparent));
    circularImageView.setSelectorStrokeColor(getResources().getColor(R.color.BlueDark));
    circularImageView.setSelectorStrokeWidth(10);
    circularImageView.addShadow();

Developed By

Pkmmte Xeleon - www.pkmmte.com

Follow me on Google+ Follow me on LinkedIn

License

The MIT License (MIT)

Copyright (c) 2014 Pkmmte Xeleon

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Based on a work at https://github.com/lopspower/CircularImageView.

Comments
  • Crash on finish Activity.

    Crash on finish Activity.

    Huawei rongyao 6X

    Android 7.0

    I have a CircularImageView in MainAcitivy.when I finish MainAcitivyt.it crashed:

    Source:

    code:

    Glide.with(root.img_avatar)
                            .load(url)
                            .placeholder(R.mipmap.ic_mine_head_default)
                            .into(root.img_avatar)

    xml:

        <com.pkmmte.view.CircularImageView
        android:id="@+id/img_avatar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:contentDescription="@null"
        android:src="@mipmap/ic_mine_head_default"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="#234"/>

    Crash log:

     java.lang.RuntimeException: Unable to destroy activity {com.lxt.app/com.lxt.app.ui.maink6.MainK6Activity}: java.lang.NullPointerException: Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference
                                                               at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:4398)
                                                               at android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:4417)
                                                               at android.app.ActivityThread.-wrap6(ActivityThread.java)
                                                               at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1629)
                                                               at android.os.Handler.dispatchMessage(Handler.java:105)
                                                               at android.os.Looper.loop(Looper.java:156)
                                                               at android.app.ActivityThread.main(ActivityThread.java:6523)
                                                               at java.lang.reflect.Method.invoke(Native Method)
                                                               at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:942)
                                                               at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:832)
                                                            Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference
                                                               at android.graphics.Bitmap.createScaledBitmap(Bitmap.java:815)
                                                               at com.pkmmte.view.CircularImageView.refreshBitmapShader(CircularImageView.java:341)
                                                               at com.pkmmte.view.CircularImageView.invalidate(CircularImageView.java:262)
                                                               at android.widget.ImageView.setImageDrawable(ImageView.java:521)
                                                               at com.bumptech.glide.request.target.DrawableImageViewTarget.setResource(DrawableImageViewTarget.java:22)
                                                               at com.bumptech.glide.request.target.DrawableImageViewTarget.setResource(DrawableImageViewTarget.java:10)
                                                               at com.bumptech.glide.request.target.ImageViewTarget.setResourceInternal(ImageViewTarget.java:116)
                                                               at com.bumptech.glide.request.target.ImageViewTarget.onLoadCleared(ImageViewTarget.java:86)
                                                               at com.bumptech.glide.request.SingleRequest.clear(SingleRequest.java:319)
                                                               at com.bumptech.glide.manager.RequestTracker.clearRemoveAndRecycle(RequestTracker.java:62)
                                                               at com.bumptech.glide.RequestManager.untrack(RequestManager.java:462)
                                                               at com.bumptech.glide.RequestManager.untrackOrDelegate(RequestManager.java:449)
                                                               at com.bumptech.glide.RequestManager.clear(RequestManager.java:437)
                                                               at com.bumptech.glide.RequestManager.onDestroy(RequestManager.java:290)
                                                               at com.bumptech.glide.manager.ActivityFragmentLifecycle.onDestroy(ActivityFragmentLifecycle.java:64)
                                                               at com.bumptech.glide.manager.RequestManagerFragment.onDestroy(RequestManagerFragment.java:197)
                                                               at android.app.Fragment.performDestroy(Fragment.java:2610)
                                                               at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1128)
                                                               at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1178)
                                                               at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1160)
                                                               at android.app.FragmentManagerImpl.dispatchDestroy(FragmentManager.java:2074)
                                                               at android.app.FragmentController.dispatchDestroy(FragmentController.java:242)
                                                               at android.app.Activity.performDestroy(Activity.java:7134)
                                                               at android.app.Instrumentation.callActivityOnDestroy(Instrumentation.java:1158)
                                                               at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:4385)
                                                               at android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:4417) 
                                                               at android.app.ActivityThread.-wrap6(ActivityThread.java) 
                                                               at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1629) 
                                                               at android.os.Handler.dispatchMessage(Handler.java:105) 
                                                               at android.os.Looper.loop(Looper.java:156) 
                                                               at android.app.ActivityThread.main(ActivityThread.java:6523) 
                                                               at java.lang.reflect.Method.invoke(Native Method) 
                                                               at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:942) 
                                                               at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:832) 

    see Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference and at com.pkmmte.view.CircularImageView.refreshBitmapShader.

    opened by dyguests 8
  • Rendering errors in Android Studio 0.8.9 (beta)

    Rendering errors in Android Studio 0.8.9 (beta)

    I get the following errors in the Preview tab when I add a CircularImageView to an XML layout:

    Rendering Problems
Missing styles. Is the correct theme chosen for this layout?
Failed to find style 'circularImageViewStyle' in current theme (3 similar errors not shown)

    I'm guessing it's got something to do with these lines in res/values/attrs.xml.

    bug 
    opened by vickychijwani 8
  • Stackoverflow if image is loaded from network

    Stackoverflow if image is loaded from network

    android.widget.ImageView.invalidateDrawable (ImageView.java:190) android.graphics.drawable.Drawable.invalidateSelf (Drawable.java:338) com.koushikdutta.ion.IonDrawable.draw (IonDrawable.java:688) com.pkmmte.view.CircularImageView.drawableToBitmap (CircularImageView.java:331) com.pkmmte.view.CircularImageView.invalidate (CircularImageView.java:260) android.widget.ImageView.invalidateDrawable (ImageView.java:190)

    bug 
    opened by anti43 5
  • NullPointerException

    NullPointerException

    I'm getting a NullPointerException at createScaledBitmap when I'm scrolling down in my ListView to a certain item. I'm using Picasso, this is my code to set the image into the CircularImageDrawable:

    Picasso.with(activity).load(artist.getImage()).into(image);

    opened by FlorentAnders 4
  • Rendering Problems: Android Studio 0.8.1 (Beta)

    Rendering Problems: Android Studio 0.8.1 (Beta)

    Im getting the following error when i try to edit view the layout. However on the emulator and test device its displaying properly. I also cannot set the app:border, etc properties on the xml. screen shot 2014-12-05 at 12 17 36 pm

    I have: compile 'com.pkmmte.view:circularimageview:1.1' in my gradle file

    enhancement 
    opened by cotzanium 1
  • add android:minSdkVersion information

    add android:minSdkVersion information

    You should add android:minSdkVersion information in project usage. If i use app:shadow="true" attribute , project must be API 11 and above. Because function setLayerType in addShadow function is only available on API 11

    enhancement 
    opened by trungnn307 1
  • Update README.md

    Update README.md

    Please, update the quick XML example as i have lost around 1 hour testing different things. If you configure a border in the sample XML it will not work as the border is disabled by default.

    opened by alvarolb 0
  • Fatal Exception: java.lang.NullPointerException Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference

    Fatal Exception: java.lang.NullPointerException Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference

    My app gets crash in the particular this device "Redmi Note 9 Pro Android 11"

    android.graphics.Bitmap.createScaledBitmap (Bitmap.java:800) com.pkmmte.view.CircularImageView.refreshBitmapShader (CircularImageView.java:341) com.pkmmte.view.CircularImageView.invalidate (CircularImageView.java:262) android.view.ViewRootImpl.invalidateWorld (ViewRootImpl.java:1709)

    opened by dharmesh395 0
  • How to use tint?

    How to use tint?

    Hi,

    I want to change the color of the image, so I used tint to change the color but it's not working. I tried with simple ImageView and its working fine.

    Thanks in Advance

    opened by JagadeshSeeram 0
  • CircularImageView can not center in mapView.

    CircularImageView can not center in mapView.

    I created a view with CircularImageView as a marker in mapView.like this:

    final View view = LayoutInflater.from(context).inflate(R.layout.view_group_service_head_view, null);
Marker userMarker = aMap.addMarker(userMarkerOptions
                            .icon(BitmapDescriptorFactory.fromView(view));

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="35dp"
             android:layout_height="35dp"
             android:clipChildren="false"
             tools:background="#d8ece3">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:background="@drawable/border_head_circle_stroke_white"/>

    <com.pkmmte.view.CircularImageView
        android:id="@+id/civ_head"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        tools:background="#123412"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_mine_head_default"/>

    <ImageView
        android:id="@+id/iv_vip"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_gravity="right|top"
        android:src="@mipmap/ic_mine_growth_vip"
        android:visibility="invisible"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:visibility="visible"/>
</FrameLayout>

    There is view in preview: image

    and there is view in phone: image

    And you can see,the CircularImageView not in the center. :(

    hope fixed.

    opened by dyguests 0
  • Set scaletype to work properly?

    Set scaletype to work properly?

    I customized a view inherit ImageView，the view can set round corner ,but when I set centCrop scalType ,it cant not show right！do you encounter this situation？

    opened by wendydhwang 1
  • 2 pixels height

    2 pixels height

    Is there any good reason for this line? https://github.com/Pkmmte/CircularImageView/blob/master/circularimageview/src/main/java/com/pkmmte/view/CircularImageView.java#L377

    It's breaking my alignment.

    I must say that https://github.com/lopspower/CircularImageView/issues/63 have the same issue... too similar codes.

    opened by BraisGabin 0
Owner
Pkmmte Xeleon
Cats are cool!
Pkmmte Xeleon
GitHub
This light-weight library provides images with letter/text like the Gmail app. It extends the Drawable class thus can be used with existing/custom/network ImageView classes. Also included is a fluent interface for creating drawables and a customizable ColorGenerator.

###TextDrawable This light-weight library provides images with letter/text like the Gmail app. It extends the Drawable class thus can be used with exi

Amulya Khare 3.2k Dec 15, 2022
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 13.8k Mar 29, 2021
Create circular ImageView in Android in the simplest way possible

CircularImageView This is an Android project allowing to realize a circular ImageView in the simplest way possible. USAGE To make a circular ImageView

Lopez Mikhael 1.9k Dec 29, 2022
Android library (AAR). Highly configurable, easily extendable deep zoom view for displaying huge images without loss of detail. Perfect for photo galleries, maps, building plans etc.

Subsampling Scale Image View A custom image view for Android, designed for photo galleries and displaying huge images (e.g. maps and building plans) w

null 7.4k Jan 8, 2023
Android library to generate image avatar from the first letter of a username. Letter avatar like Gmail Android best practice

AvatarImageGenerator Generate first letter avatar Image like gmail's contact avatar. It generates an drawable that can be be set to an ImageView. Inst

Korir Amos 61 Sep 25, 2022
Apply custom effects on view backgrounds

View Filters At the beginning the only purpose was to blur all layers below. Now you can do more : Blur background views easily Create custom filters

Mad Mirrajabi 180 Nov 25, 2022
Android library project for cropping images

I guess people are just cropping out all the sadness An Android library project that provides a simple image cropping Activity, based on code from AOS

Jamie McDonald 4.5k Dec 29, 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 Mar 9, 2021
An open source Android library that allows the visualization of large images with gesture capabilities

ByakuGallery ByakuGallery is an open source Android library that allows the visualization of large images with gesture capabilities. This lib is based

Diego Lima 311 Dec 4, 2022
A gallery used to host an array of images

ImageGallery Overview A gallery used to host an array of images You can add one or more images to the gallery Support for using Palette to set the bac

Etienne Lawlor 645 Dec 18, 2022
DMIV aims to provide a flexible and customizable instrument for automated images moving on display. It provides scroll, gyroscope or time based moving. But you can create your own evaluator.

DexMovingImageView DMIV aims to provide a flexible and customizable instrument for automated images moving on display. It provides scroll, gyroscope o

Diego Grancini 310 Feb 7, 2022
Custom ImageView for android with polygon shape (Android)

PolygonImageView Create a custom ImageView with polygonal forms. Usage To use PolygonImageView, add the module into your project and start to build xm

Albert Grobas 531 Dec 25, 2022
Custom shaped android imageview components

Shape Image View Provides a set of custom shaped android imageview components, and a framework to define more shapes. Implements both shader and bitma

Siyamed SINIR 2.6k Mar 29, 2021
Custom ImageView for moving image around the screen (Android)

MovingImageView Create a custom ImageView for moving image around the screen. Usage To use MovingImageView, add the module into your project and start

Albert Grobas 819 Nov 18, 2022
Custom ImageView to generate captcha image.

CaptchaImageView Custom ImageView to generate captcha image. Add CaptchaImageView to your layout <test.jinesh.captchaimageviewlib.CaptchaImageView

Jinesh Francis 610 Oct 18, 2022
Android View widget for displaying GIF animations.

gif-movie-view Android View widget for displaying GIF animations. To show animated GIF in your application just add GifMovieView into your layout.

Sergey Bakhtiarov 459 Nov 10, 2022
Flickable ImageView for Android. It's like a view of twitter's detail image.

FlickableView Flickable ImageView for Android. It's like a view of twitter's detail image. It's possible that other views animate with FlickableView.

goka 153 Nov 14, 2022
Big image viewer supporting pan and zoom, with very little memory usage and full featured image loading choices. Powered by Subsampling Scale Image View, Fresco, Glide, and Picasso. Even with gif and webp support! 🍻

BigImageViewer Big image viewer supporting pan and zoom, with very little memory usage and full featured image loading choices. Powered by Subsampling

Piasy 3.9k Dec 30, 2022
Implementation of ImageView for Android that supports zooming, by various touch gestures.

PhotoView PhotoView aims to help produce an easily usable implementation of a zooming Android ImageView. [ Dependency Add this in your root build.grad

Baseflow 18.4k Dec 30, 2022