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

Related tags

Images Processing 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
Bring out the best in your phone's camera

DNG Processor How does this app work? It waits for new RAW images captured using a supported camera app, and then processes them in the background. It

Amir Zaidi 97 Dec 15, 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 Jan 7, 2023
Awesome Image Picker library will pick images/gifs with beautiful interface. Supports image or gif, Single and Multiple Image selection.

Awesome Image Picker Awesome Image Picker library will pick images/gifs with beautiful interface. Supports image or gif, Single and Multiple Image sel

Prabhakar Thota 162 Sep 13, 2022
This is an Image slider with swipes, Here we used Volley to Image load URL's from JSON! Here we make it very easy way to load images from Internet and We customized the description font style(OpenSans).

ImageSliderWithSwipes This is an Image slider with swipes, Here we used Volley to load URL's from JSON! Here we make it very easy way to load images f

Prabhakar Thota 44 May 31, 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
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 9 Oct 31, 2022
PixaPay - Images Search client

PixaPay - Images Search client Getting started Signup or Login into Pixabay for getting API_KEY Add APY_KEY="Your_Key_Here" and BASE_URL="https://pixa

Mohamed Ibrahim 6 Nov 6, 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 Jan 3, 2023
Android Fading (Circle/ Custom Corner) Image

Android Fading (Circle/ Custom Corner) Image Implementation add maven { url 'https://jitpack.io' } to build.gradle in your project: allprojects {

Aghiad Odeh 1 Jul 5, 2022
Phimp.me Android Phimp.me is an Android image editor app

Phimp.me Android Phimp.me is an Android image editor app that aims to replace proprietary photographing and image apps on smart phones. It offers feat

FOSSASIA 2.6k Jan 6, 2023
Opencv Android SDK application for Deep Neural Networks to run on Android.

This application allows you to deploy deep nets in Android environment using OpenCV Android SDK. With OpenCV, images are taken from the camera on your phone, and then these images are passed through the neural network and visualized on the front side. In this application, we will search for faces in the images taken and draw the found faces on the screen.

Ahmet Furkan DEMIR 10 Nov 1, 2022
Android filters based on OpenGL (idea from GPUImage for iOS)

GPUImage for Android Idea from: iOS GPUImage framework Goal is to have something as similar to GPUImage as possible. Vertex and fragment shaders are e

CATS Open Source Softwares 8.6k Dec 28, 2022
some android image filters

android-image-filter some android image filters in some filter, I use NDK to implement to make it more efficient Setup Install Android NDK and properl

RagnarokStack 643 Dec 27, 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.7k Dec 31, 2022
Android widget for cropping and rotating an image.

Cropper The Cropper is an image cropping tool. It provides a way to set an image in XML and programmatically, and displays a resizable crop window on

Edmodo 2.9k Nov 14, 2022
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.5k Dec 28, 2022
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 Dec 19, 2022
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 Dec 1, 2022
An image resizing library for Android

Resizer Inspired by zetbaitsu's Compressor, Resizer is a lightweight and easy-to-use Android library for image scaling. It allows you to resize an ima

Kakit Ho 426 Dec 22, 2022