Software Development

Pro tip: Round corners on an Android ImageView with this hack

Android ImageViews by default don't have an option to set a corner radius. William J. Francis shares a quick hack that does the trick in a layout file without writing any actual code.

1024px-logoandroid051614.png
 Image: Thomas Pat Kowalski-Zuckerberg/Wikimedia Commons

One of the common questions I see on Android forums is: How does one round the corners on the standard Android ImageView widget? The short answer is you don't. I don't know why, but the standard out-of-the-box ImageView component doesn't have a corner radius property. That doesn't mean it can't be done.

There are lots of posts on how to extend the ImageView.class, add your own attributes, modify the original bitmap, and override the on draw and paint the image to the canvas. But let's face it, that is quite a bit of work for something that should have happened "automagically."

I ran across a clever hack that allows for rounding the corners on an ImageView directly from the XML; it makes use of a FrameLayout and an XML drawable. The short tutorial below explains. Follow along, or download and import the project directly into Eclipse.

1. Create a new Android project in Eclipse targeting SDK 14 (ICS) or better.

2. In the /res/drawable folder, create a frame.xml file. In it, we define a simple rectangle with rounded corners and a transparent center.

frame.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="#00ffffff" />
     <padding android:left="6dp"
        android:top="6dp"
        android:right="6dp"
        android:bottom="6dp" />
     <corners android:radius="12dp" />
     <stroke android:width="6dp" android:color="#ffffffff" />
</shape> 

3. In the /res/drawable-xhdpi folder include the image you wish to use as the source for your ImageView. In my case, I cut and pasted the TechRepublic logo.

trandroidimgview051514.png

4. In the /res/layout folder modify activity_main.xml. In it, you will see a LinearLayout that contains a standard ImageView, as well as a nested FrameLayout. The FrameLayout uses padding and the custom drawable to give the illusion of rounded corners.

activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center" 
    android:background="#ffffffff">

    <ImageView
        android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:padding="6dp"
        android:src="@drawable/tr"/>
    
    <FrameLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        
        <ImageView
            android:layout_width="match_parent"
	        android:layout_height="match_parent"
	        android:padding="6dp"
	        android:src="@drawable/tr"/>
        
        <ImageView 
	         android:src="@drawable/frame"
	         android:layout_width="match_parent"
	         android:layout_height="match_parent" />
        
    </FrameLayout>

</LinearLayout>

That's it. No modification is needed to the generated Java code. Have a look for yourself.

roundedandroidimgview051514.png

Also see

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

0 comments

Editor's Picks