vinc3m1 / roundedimageview Goto Github PK
View Code? Open in Web Editor NEWA fast ImageView that supports rounded corners, ovals, and circles.
License: Other
A fast ImageView that supports rounded corners, ovals, and circles.
License: Other
Is it possible to round just the upper corners (upper left, upper right)?
when I use this tag name: com.makeramen.roundedimageview.RoundedImageView, the compiler will complain it can't find the class. After changing it to com.makeramen.RoundedImageView, it works.
If we want to re-use the RoundedDrawable, but in a different library (like Universal Image loader), it would be nice to be able to instantiate the Drawable from outside of your package. That way we don't end up just copying your class for custom use..
Thanks
Currently setImageUri is hacky and slow and probably results in double memory usage.
Attempting to copy ImageView code results in errors because of hidden methods in ContentResolver
(18a4c6b), we'll have to do some reflection to fix.
It should be displayed in the readme in some respect, or direct users to the notice.
While attempting to add a RoundedImageView
to an XML layout with the following code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content"
style="@style/AppTheme"
android:padding="20dp">
<com.makeramen.RoundedImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/thumbnail_image"
app:corner_radius="4dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:maxHeight="@dimen/list_item_thumbnail_height"
android:maxWidth="@dimen/list_item_thumbnail_width"
android:minHeight="@dimen/list_item_thumbnail_height"
android:minWidth="@dimen/list_item_thumbnail_width"
android:background="@android:color/holo_orange_light" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4:15 PM - 5:00 PM"
android:id="@+id/time_text_view"
android:layout_alignTop="@+id/thumbnail_image"
android:paddingLeft="10dp"
android:maxLines="1"
android:minLines="1"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_toRightOf="@+id/thumbnail_image"
android:textSize="@dimen/list_item_small_text_size"
android:textColor="@color/dark_text_color" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text that maybe should be long enough to span 2 lines"
android:id="@+id/name_text_view"
android:paddingLeft="10dp"
android:maxLines="2"
android:minLines="1"
android:layout_below="@+id/time_text_view"
android:layout_alignLeft="@+id/time_text_view"
android:layout_alignStart="@+id/time_text_view"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textStyle="bold"
android:textSize="@dimen/list_item_large_text_size"
android:textIsSelectable="false"
android:textColor="@color/dark_text_color" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In the Conservatory / Mr. Brown"
android:id="@+id/details_text_view"
android:paddingLeft="10dp"
android:maxLines="1"
android:minLines="1"
android:layout_below="@+id/name_text_view"
android:layout_alignLeft="@+id/name_text_view"
android:layout_alignStart="@+id/name_text_view"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textSize="@dimen/list_item_small_text_size"
android:textColor="@color/light_text_color"
android:textAllCaps="true"/>
</RelativeLayout>
When I try to build the project, I get an error:
Error:(8) Error parsing XML: unbound prefix
Android Studio highlights the app
of app:corner_radius
in red, so presumably this is the unbound prefix. Am I missing an import or xmlns
somewhere? I didn't see anything about that in the documentation.
Hi,
whenever i'm downloading image from URL and setting bitmap as the ImageBitmap of the RoundedImageView element, the image is very pixelated (which is bad quality).
The problem is not on the download process because i tried switching the element to ImageView and it was good, but without corner radius and border which is what need.
Have you guys encountered with such a problem? any solution maybe?
(btw, I'm using https://github.com/nostra13/Android-Universal-Image-Loader to download images)
Thanks
It would be nice to use prefixes for xml attributes, for example "ri_". This way we can avoid conflicts if this attribute is already taken in app.
I tried with Picasso and Ion, in both of them my ListView items do not load well.
I need to scroll down and up to update the views from the placeholder to the downloaded image show.
Any tips?
Thanks
Am I doing something wrong or is this intended?
http://crashes.to/s/5a001daa447
full crashlog and stats
This is a feature, not an issue: It would be nice to have the option to crop the background according to the corner radius in addition to cropping the image itself. It's very handy when displaying icons with alpha channel on a different background.
Hi there!
First of all: thank you so much for this library, it's really useful.
I am experiencing an issue while using RoundedImageViews in a listview. It seems like corners are applied twice somehow during view recycling, as you can see in the screenshot attached: the image in the middle has correct corner radius while the remaining 2 have a bigger radius.
Can you help me?
Thanks
Hi guys,
It failed to stretch my 9-patch image and here's the capture:
The left is my 9-patch image in normal ImageView and the right is one in RoundedImageView. Both imageview has set scaleType to "fitXY" in the layout xml. I've also tried set the scaleType to "fitXY" for RoundedImageView in code but it failed. Could anyone help me fix this?
i think it can be implemented like so:
@OverRide
public void setImageResource(final int resId) {
if (mResId == resId)
return;
setImageDrawable(getResources().getDrawable(resId));
this.mResId = resId;
}
also, you could make the setImageDrawable a little better, by using:
@OverRide
public void setImageDrawable(final Drawable drawable) {
if (mDrawable == drawable)
return;
mResId = 0;
...
of course, this looks more like a patch than a complete solution, since i'm not familiar with the entire code, but it seems to be working fine.
Hi vinc3m1,
I'm using your library and it's great and simple to use. But I'm having a semi-problem, that is:
I'm using the RoundedImageView inside an adapter and I put the image on this RoundedImageView using Picasso; when I run my app on my device, I see that some images have a kind of green filter applied to them, like the attached screenshot.
When I move the ListView where the adapter "live" and these image with "filter" get off the screen and go back on it, this "filter" seems disappeared.
Could you explain me why this problem occurs?
Thank you in advance.
PS: sorry for my English ;)
Picasso uses it's own PicassoDrawable which handles fade, etc. Not entirely sure how to approach this.
Right now, the tile mode for the shader is always set to clamp/clamp. I'd like it if this supported tile modes, such that a RoundedImageView
could use a tiled source.
My only hesitation with getting started on a PR is that the only way to modify tilemode at runtime would be if RoundedDrawable
held a reference to its Bitmap
, so that it could rebuild the BitmapShader
if necessary. Is that alright to do, or is there a reason why RoundedDrawable
does not hold a reference to the original Bitmap
?
Is it possible to add a shadow to these images, as a feature in the library?
or is it trivial enough to do in on to of it?
Hey mate, thanks for the good work, I'm using this code in my app. I'm new to Android, do you have any idea how to implement shadow support in RoundedImageView?
I have a project now, and add RoundedImageView project as module project.
There comes an error during compile:
java: The method setBackground(android.graphics.drawable.Drawable) of type com.makeramen.RoundedImageView must override or implement a supertype method
here you are: ( in your setCornerRadius() )
public void setPropertyCornerRadius(int radius) { if (cornerRadius != radius) { final float density = getResources().getDisplayMetrics().density; cornerRadius = (int) (radius * density + 0.5f); if (drawable instanceof RoundedDrawable) { ((RoundedDrawable) drawable).setCornerRadius(radius); } if (roundBackground && backgroundDrawable instanceof RoundedDrawable) { ((RoundedDrawable) backgroundDrawable).setCornerRadius(radius); } } }
Hi Vince,
I've been playing a little bit more with the library. I've come to a strange thing,
I suppose before setting image bitmap or drawable, we should set all vars, but in your adapter (RoundedImageView demo) we can find:
((RoundedImageView) view.findViewById(R.id.imageView1)).setImageBitmap(item.mBitmap); ((RoundedImageView) view.findViewById(R.id.imageView1)).setScaleType(item.mScaleType);
which is very different, as we can see in the list:
view.findViewById(R.id.imageView1)).setScaleType(item.mScaleType); ((RoundedImageView) view.findViewById(R.id.imageView1)).setImageBitmap(item.mBitmap); ((RoundedImageView)
I came to idea you want to use the first one, because, first you set the bitmap and after setting scale you do: invalidate();
but in the landing page you say:
iv.setScaleType(ScaleType.CENTER_CROP); iv.setCornerRadius(10); iv.setBorderWidth(2); iv.setBorderColor(Color.DKGRAY); iv.setRoundedBackground(true); iv.setImageDrawable(drawable); iv.setBackground(backgroundDrawable);
so you are setting vars first. Change the order of the sentences in your adapter, and see what happens in the listview, because imagens doesn't display well using the second code...
Thanks
The hasBorder attribute can't be set programatically. Seems like it's only pulled from XML. It would be useful to enable/disable that property in code.
Please make the library available in maven repository.
When setting the scaleType to center_crop with an image that is bigger that the view, the image is not rounded. This is because of the image corners are rounded and they are not inside of the views bounds.
How would I go about getting rounded corners on an image scaled with center_crop?
The xmlns in the example incorrect, it should point to res-auto. Additionally "border" is not an available attribute, it should be "border_width".
When adding the newest version of the library to my dependencies it downloads the aar.asc file and therefore is not correctly added to my project
First off, thank you very much for putting this into a maven-ized library.
With the official Android documentation mentioning volley (maybe even recommending it), and the open bug for fixing setImageUri, is there any possibility to add support for Volley? Or do you have any advice on using Volley to download and manage the bitmaps for the rounded image view? Perhaps a way to delegate bitmap retrieval and view re-use to Volley's NetworkImageView?
Thanks for any help.
If you compare a regular ImageView with a RoundedImageView in an mdpi device:
You can see that the RoundedImageView has a noticeable quality loss in the form of increased noise and pixelation. Notice for example the white thin letters of the t-shirt. I recommend you open the images with an image viewer with which you can quickly change between one image and the other to compare.
Why is this? Cold the image be processed in a way that only the outer pixels are processed and the pixels inside the circle are not modified?
This is the original image, just in case: http://files.parsetfss.com/88bb99d9-895b-431d-a687-d0099117db14/tfss-10369213-0d30-4da9-ac07-c26d548905ae-photo.jpg
I don't know why.. because my bitmap is not null... but I get this error in some cases.
Here is the trace:
03-04 11:36:13.593: E/AndroidRuntime(21760): FATAL EXCEPTION: main 03-04 11:36:13.593: E/AndroidRuntime(21760): java.lang.NullPointerException 03-04 11:36:13.593: E/AndroidRuntime(21760): at com.makeramen.rounded.RoundedImageView.setImageDrawable(RoundedImageView.java:124) 03-04 11:36:13.593: E/AndroidRuntime(21760): at com.androidquery.callback.BitmapAjaxCallback.setBitmap(BitmapAjaxCallback.java:769) 03-04 11:36:13.593: E/AndroidRuntime(21760): at com.androidquery.callback.BitmapAjaxCallback.presetBitmap(BitmapAjaxCallback.java:757) 03-04 11:36:13.593: E/AndroidRuntime(21760): at com.androidquery.callback.BitmapAjaxCallback.async(BitmapAjaxCallback.java:926) 03-04 11:36:13.593: E/AndroidRuntime(21760): at com.androidquery.AbstractAQuery.invoke(AbstractAQuery.java:1820) 03-04 11:36:13.593: E/AndroidRuntime(21760): at com.androidquery.AbstractAQuery.image(AbstractAQuery.java:787) 03-04 11:36:13.593: E/AndroidRuntime(21760): at com.androidquery.AbstractAQuery.image(AbstractAQuery.java:813) 03-04 11:36:13.593: E/AndroidRuntime(21760): at com.niula.loodic.android.adapter.HomeExplorePlaceListAdapter.getView(HomeExplorePlaceListAdapter.java:122) 03-04 11:36:13.593: E/AndroidRuntime(21760): at org.holoeverywhere.widget.HeaderViewListAdapter.getView(HeaderViewListAdapter.java:132)
And here the code is returning null:
@Override public void setImageDrawable(Drawable drawable) { if (mDrawable != null) { mDrawable = RoundedDrawable.fromDrawable(drawable, mCornerRadius, mBorderWidth, mBorderColor); ((RoundedDrawable) mDrawable).setScaleType(mScaleType); } else { mDrawable = null; } super.setImageDrawable(mDrawable); }
Code in the adapter:
aquery.id(holder.imageView).image(place.getImage(), false, true, 0, 0, new BitmapAjaxCallback() { @Override public void callback(String url, ImageView iv, Bitmap bm, AjaxStatus status) { iv.setScaleType(ScaleType.CENTER_CROP); iv.setImageBitmap(bm); } });
Thanks in advance
I'm trying to draw people photos in circle (like in G+)
If I define RoundedImageView in xml:
<com.makeramen.RoundedImageView
android:id="@+id/image3"
android:layout_width="@dimen/size"
android:layout_height="@dimen/size"
android:src="@drawable/marcus"
ci:border_color="@color/ring"
ci:border_width="@dimen/width"
ci:corner_radius="@dimen/radius"/>
With next parameters:
<color name="ring">#ff0000</color>
<dimen name="size">65dp</dimen>
<dimen name="radius">32.5dp</dimen><!-- size /2 -->
<dimen name="width">4dp</dimen>
Photo is drawn as expected (photo 3).
But if I'm trying to load image using Ion+Transformation or from RoundedDrawable
RoundedDrawable.fromDrawable(dr))
.setBorderWidth(res.getDimensionPixelSize(R.dimen.width))
.setCornerRadius(res.getDimensionPixelSize(R.dimen.radius))
.setBorderColor(res.getColor(R.color.ring))
.setOval(false)
Photo is drawn not in circle, but as rectangle with rounded corners. Also, you may notice, that width of border is also different for circle and rectangle.
Example:
First is using RoundedDrawable, second is using Ion transformation and third is RoundedImageView
I tried setting bounds for drawables but that didn't help me.
I can provide whole test project.
I can solve this issue by defining bigger radius when using transformation, but it seems weird for me.
Now that gradle supports provided
, we can probably create a custom RoundedTransformation
class that implements the boilerplate that you currently have to go through to create a Transformation.
Use builder pattern of course.
I get the following error when I attempt to load the custom view RoundedImageView
in Android Studio (0.5.8
) layout editor:
Rendering Problems
The following classes could not be instantiated:
- com.makeramen.RoundedImageView (Open Class, Show Exception)
Tip: Use View.isInEditMode() in your custom views to skip code or show sample data when shown in the IDE
Exception Details
java.lang.UnsupportedClassVersionError: com/makeramen/RoundedImageView : Unsupported major.minor version 51.0
at java.lang.ClassLoader.defineClass1(Native Method)
at java.lang.ClassLoader.defineClassCond(ClassLoader.java:637)
at java.lang.ClassLoader.defineClass(ClassLoader.java:621)
at java.lang.ClassLoader.defineClass(ClassLoader.java:471)
at com.intellij.util.lang.UrlClassLoader._defineClass(UrlClassLoader.java:189)
at com.intellij.util.lang.UrlClassLoader.defineClass(UrlClassLoader.java:185)
at com.intellij.util.lang.UrlClassLoader.findClass(UrlClassLoader.java:146)
at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
at java.lang.ClassLoader.loadClass(ClassLoader.java:247)
at com.android.tools.idea.rendering.RenderClassLoader.loadClassFromJar(RenderClassLoader.java:76)
at org.jetbrains.android.uipreview.ProjectClassLoader.loadClassFromModuleOrDependency(ProjectClassLoader.java:106)
at org.jetbrains.android.uipreview.ProjectClassLoader.load(ProjectClassLoader.java:87)
at com.android.tools.idea.rendering.RenderClassLoader.findClass(RenderClassLoader.java:54)
at org.jetbrains.android.uipreview.ProjectClassLoader.findClass(ProjectClassLoader.java:54)
at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
at java.lang.ClassLoader.loadClass(ClassLoader.java:247)
at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:174)
at org.jetbrains.android.uipreview.ViewLoader.loadView(ViewLoader.java:97)
at com.android.tools.idea.rendering.LayoutlibCallback.loadView(LayoutlibCallback.java:172)
at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:207)
at android.view.BridgeInflater.createViewFromTag(BridgeInflater.java:135)
at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:755)
at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:64)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:727)
at android.view.LayoutInflater.inflate(LayoutInflater.java:492)
at android.view.LayoutInflater.inflate(LayoutInflater.java:373)
at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:399)
at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:336)
at com.android.ide.common.rendering.LayoutLibrary.createSession(LayoutLibrary.java:332)
at com.android.tools.idea.rendering.RenderService$3.compute(RenderService.java:555)
at com.android.tools.idea.rendering.RenderService$3.compute(RenderService.java:544)
at com.intellij.openapi.application.impl.ApplicationImpl.runReadAction(ApplicationImpl.java:932)
at com.android.tools.idea.rendering.RenderService.createRenderSession(RenderService.java:544)
at com.android.tools.idea.rendering.RenderService.render(RenderService.java:671)
at com.intellij.android.designer.designSurface.AndroidDesignerEditorPanel$6.run(AndroidDesignerEditorPanel.java:483)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:320)
at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:310)
at com.intellij.util.ui.update.MergingUpdateQueue$2.run(MergingUpdateQueue.java:254)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:269)
at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:227)
at com.intellij.util.ui.update.MergingUpdateQueue.run(MergingUpdateQueue.java:217)
at com.intellij.util.concurrency.QueueProcessor.runSafely(QueueProcessor.java:238)
at com.intellij.util.Alarm$Request$1.run(Alarm.java:327)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:439)
at java.util.concurrent.FutureTask$Sync.innerRun(FutureTask.java:303)
at java.util.concurrent.FutureTask.run(FutureTask.java:138)
at java.util.concurrent.ThreadPoolExecutor$Worker.runTask(ThreadPoolExecutor.java:895)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:918)
at java.lang.Thread.run(Thread.java:695)
From what I've found on Stack Overflow, at a minimum to make this work, the setup code needs to be wrapped in a check if it's not in edit mode.
It should be translate along with border_width to be drawn correctly.
RoundedDrawable.java
private void setMatrix() {
...
...
CENTER_CROP:
...
...
mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBorderWidth, (int) (dy + 0.5f) + mBorderWidth); // Translate by border_width to both x, y.
Is it possible for you to support to have some square corners with the rest of the corners having the same radius?
That's my library dude... I just wondering if it could be managed with AQuery too, because I saw the Romains Guy post I was trying to do the same as you, but using aquery, so you could do something like:
aquery.id(holder.imageView).image(place.getImage(), false, true);
in RoundedImageView... any solution for that?
Thank you so much in advance.
Hi,
Really like the simplicity of this lib! However, I would like an option to only round the top two corners, I looked at the code and tried to figure it out myself, but I'm not able to.
Perhaps you could point me in the right direction?
I managed to find a solution, but I donΒ΄t know how to remove my own issue :)
Hi Vince,
I'm not sure is it library problem but would to know your idea.
This is my xml code:
<com.makeramen.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/rivDriverPhoto"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="@id/vDivider"
android:layout_alignBottom="@id/vDivider"
android:src="@drawable/ic_default_driver"
android:scaleType="fitCenter"
android:paddingRight="8dp"
android:paddingEnd="8dp"
app:riv_border_width="2dip"
app:riv_border_color="@color/tracking_border_circle"
app:riv_mutate_background="true"
app:riv_oval="true" />
In my code, I'm sending my request to server, get image in bitmap format and call listener when is done:
private void getUsersImage()
{
...
MyOkHttpBitmapRequest okHttpBitmapRequest = new MyOkHttpBitmapRequest(
MyUtils.getSessionId(activity), userPhotoURL, cacheFile);
this.getSpiceManager().execute(okHttpBitmapRequest, cacheFileName, DurationInMillis.ONE_DAY,
new GetUserPhotoListener(this));
}
@Override
public void GetUserPhotoListener(final Bitmap photo)
{
if (photo == null)
{
// Fallback to default picture
this.mUserProfilePicture.setImageDrawable(getActivity().getResources().getDrawable(
R.drawable.ic_default_user));
}
else
{
this.mUserProfilePicture.setImageBitmap(photo);
}
}
When there is no image (photo = null) the imageview is circle like image 02.
However, When there is an image then imageview stretches and becomes oval like image 01.
Any suggestion would be appreciated. Thanks.
02.png
01.png
add these functions:
setBorderColorResource
setBorderWidthDimension
setCornerRadiusDimension
each of which takes a resource id instead of a raw value.
These will only be on RoundedImageView
since they'll need Resources
to find.
I leave the scaleType to default on my ImageViews, and noticed that some code that was calling getScaleType()
was receiving null, where it used to get FIT_CENTER
.
I have a 64x64 image that I want to show in a circle. But I want there to be a white padding around the image so that the circle around the image starts at some distance.
With the below code I get the following result:
<com.makeramen.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageView1"
android:src="@drawable/user_2"
android:scaleType="centerCrop"
app:corner_radius="30dip"
app:border_width="2dip"
android:padding="10dp"
app:border_color="#333333"
app:mutate_background="true"
android:layout_gravity="center"
/>
However, I want it to look more like this
I have no idea why...
I wan't this :
app:topLeftCorner="15dip"
app:topRightCorner="15dip"
app:bottomLeftCorner="18dip"
app:bottomRightCorner="18dip"
can you do this?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.