How to create rounded view with multiple images

Question

How would I go about creating a view that could contain multiple images and contain a circular border? Here are a few samples of what the end product would look like.

The images will be downloaded from a url, and as shown in the samples, there could be from one to four images contained in the view.

use custom `Drawable` which draws 4 or 2 `Bitmap`s in its `draw` method — pskink, Aug 24 '15 at 18:11
@pskink how would I go about doing that? Are there any guides you can point me to? Thanks! — Ankit Goyal, Aug 24 '15 at 18:12
yes, see the sources of `android.support.v4.graphics.drawable.RoundedBitmapDrawable` — pskink, Aug 24 '15 at 18:14
@pskink the only issue is that I'm getting these images from online, so I'm not sure how easy it will be to preload them before the Drawable's onDraw method — Ankit Goyal, Aug 24 '15 at 18:21
this is what `Drawable#invalidateSelf` is for, call it when the images are downloaded and ready to `Canvas#drawBitmap` — pskink, Aug 24 '15 at 18:24

Andrea Thacker · Answer 1 · 2015-08-24T18:19:38.527

1

There are a couple of good 3rd partly libraries that you can use for this creating circular images. But beforehand you will want to combine the multiple images into one rectangular one that can then be made circular.

I would look at either CircleImageView or RoundedImageView. The difference being what their name describes where CircleImageView will give you a perfectly circular image. RoundedImageView can actually provide rounded corners in the form of a rectangle, oval, or circle.

If you are trying to keep your app lightweight and avoid using outside libs you can also just create a circular image with a transparent circle in the middle that can be overlayed as the background image on top of a source image using a regular ImageView.

edited Aug 24 '15 at 18:19

answered Aug 24 '15 at 18:16

Andrea Thacker

3,440
1
25
37

Can I put multiple images in the CircleImageView library? It doesn't seem like there is support for that yet – Ankit Goyal Aug 24 '15 at 18:18
1

@AnkitGoyal dont use any external libs: just see how it is done in `android.support.v4.graphics.drawable.RoundedBitmapDrawable` – pskink Aug 24 '15 at 18:19
Just edited my answer, you'll want to combine the images into a rectangle first. Then use one of those libs. – Andrea Thacker Aug 24 '15 at 18:20
@DavidArgyleThacker Awesome- thanks. Should I combine the bitmaps like this post: http://stackoverflow.com/a/6696001/1467730 – Ankit Goyal Aug 24 '15 at 18:23
I am not the best at drawing bitmaps @AnkitGoyal, but that looks like a good place to start. – Andrea Thacker Aug 24 '15 at 18:48

score 1 · Accepted Answer · edited May 23 '17 at 11:44

Another option would be to create a custom LinearLayout that contains your four ImageViews in xml and could dynamically reorganize how many ImageViews are shown using weights.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="100dp">

    <LinearLayout
        android:id="@+id/left_container"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/top_left_image"
            android:layout_width="50dp"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#111" />


        <ImageView
            android:id="@+id/bottom_left_image"
            android:layout_width="50dp"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#333" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_container"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_toRightOf="@+id/left_container"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/top_right_image"
            android:layout_width="50dp"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#555" />


        <ImageView
            android:id="@+id/bottom_right_image"
            android:layout_width="50dp"
            android:layout_height="0dp"
            android:layout_weight="0"
            android:background="#777" />

    </LinearLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:background="@color/transparent_circle_image"/>

</RelativeLayout>

You mentioned that you were loading the images from urls so if you used this approach you would be able to use a library like Picasso to load the images and you wouldn't have to worry about waiting for all images to download before drawing the rounded image. If you did this each image could be loaded independently of the others.

The only downside would be that you would have to use a image with a transparent circle background to create the appearance of a circular image. You could just create a regular drawable to use. Or you could try drawing it onto a canvas. This questions has a good solution that will create a custom view that draws a transparent circle.

If you want to use the custom view just replace

<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:background="@color/transparent_circle_image"/>

with

<com.app.view.TransparentCircle
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Love it! Last question - how should I most efficiently create the image with a transparent circle background? — Ankit Goyal, Aug 24 '15 at 19:14
I've just updated my answer with a link to another question that implements a custom view for a transparent circle. Either use that or just create a regular image to use. — Andrea Thacker, Aug 24 '15 at 19:24

How to create rounded view with multiple images

2 Answers2