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.
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.
- Pro tip: Use Android sensors to detect orientation changes
- Pro tip: Extend Android's TextView to use custom fonts
- Pro tip: Use particle effects to surprise and delight your Android app users
- Pro tip: Give Android buttons a face-lift with this customization trick
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 Intelligence Corps. Throughout his career William has published numerous technical articles, as well as the occasional short story.