How to Apply Corner Radius to LinearLayout

Question

I want to make a layout with a rounded border. How can I apply a radius of a particular size in a LinearLayout?

Please take a look at the already answered question on http://stackoverflow.com/questions/1683185/android-listview-with-rounded-corners — Rajesh, Apr 09 '12 at 13:57

score 319 · Accepted Answer · edited Jan 29 '22 at 09:44

319

You can create an XML file in the drawable folder. Call it, for example, shape.xml

In shape.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"   >
    
    <solid
        android:color="#888888" >
    </solid>
    
    <stroke
        android:width="2dp"
        android:color="#C4CDE0" >
    </stroke>
     
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"    >
    </padding>
     
    <corners
        android:radius="11dp"   >
    </corners>
     
</shape>

The <corner> tag is for your specific question.

Make changes as required.

And in your whatever_layout_name.xml:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="5dp"
    android:background="@drawable/shape"    >
</LinearLayout>

This is what I usually do in my apps.

edited Jan 29 '22 at 09:44

Halo

1,730
1
8
31

answered Apr 09 '12 at 14:20

Siddharth Lele

27,623
15
98
151

How to set background image in this xml – vignesh May 01 '13 at 16:44
1

@vignesh: Which drawable and set it where? If you mean the `` example, it is already set in the layout XML here: `android:background="@drawable/shape"` – Siddharth Lele May 02 '13 at 04:03
4

what if this linear layout already has an background image and i want it to have a corner radius? in your code i wont be able to set a background image, since the linearLayout background property is set with the shape.xml – newton_guima Aug 08 '13 at 16:15
@MrAppleBR: _i wont be able to set a background image_: Correct. But in the context of the question, the OP had a use case where this was valid. In the use case you mention, this is not what you should be going for. – Siddharth Lele Aug 09 '13 at 02:53
@SiddharthLele what should I be going for? could you explain with a little source or maybe a link? thanks! – newton_guima Aug 09 '13 at 03:14
@MrAppleBR: You will need a combination of two (perhaps three) different things. One, you will need to use [this solution](http://stackoverflow.com/q/2459916/450534) to get a rounded `Bitmap`. Then, set that `Bitmap` to set the background to the `LinearLayout`. – Siddharth Lele Aug 09 '13 at 03:52

Sudhir Singh · Answer 2 · 2018-03-17T08:14:21.877

Layout

<LinearLayout 
    android:id="@+id/linearLayout"
    android:layout_width="300dp"
    android:gravity="center"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    android:background="@drawable/rounded_edge">
 </LinearLayout>

Drawable folder rounded_edge.xml

<shape 
xmlns:android="http://schemas.android.com/apk/res/android">
    <solid 
        android:color="@android:color/darker_gray">
    </solid>
    <stroke 
         android:width="0dp" 
         android:color="#424242">
    </stroke>
    <corners 
         android:topLeftRadius="100dip"
         android:topRightRadius="100dip"
         android:bottomLeftRadius="100dip"
         android:bottomRightRadius="100dip">
    </corners>
</shape>

score 11 · Answer 3 · edited Nov 27 '12 at 12:32

11

You would use a Shape Drawable as the layout's background and set its cornerRadius. Check this blog for a detailed tutorial

edited Nov 27 '12 at 12:32

David Webb

190,537
57
313
299

answered Apr 09 '12 at 13:57

Mirko Lindner

626
5
10

score 9 · Answer 4 · answered Oct 04 '18 at 13:41

try this, for Programmatically to set a background with radius to LinearLayout or any View.

 private Drawable getDrawableWithRadius() {

    GradientDrawable gradientDrawable   =   new GradientDrawable();
    gradientDrawable.setCornerRadii(new float[]{20, 20, 20, 20, 20, 20, 20, 20});
    gradientDrawable.setColor(Color.RED);
    return gradientDrawable;
}

LinearLayout layout = new LinearLayout(this);
layout.setBackground(getDrawableWithRadius());

german_goncharov · Answer 5 · 2021-07-16T09:41:12.200

Try using the Glide module for working with images. You need implement it like this:

implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'

Here is my use case in a Fragment. This is where I get the URL of image from the constant. Then I set the corner radius to 16. And then I set the resulting background in my LinearLayout:

        Glide.with(this).load(Constants.FLAT_IMAGE).apply(RequestOptions.bitmapTransform(
        RoundedCorners(16)
    )).into(object :
        CustomTarget<Drawable>() {
        override fun onLoadCleared(placeholder: Drawable?) {
            super.onLoadStarted(placeholder)
        }

        override fun onResourceReady(
            resource: Drawable,
            transition: Transition<in Drawable>?
        ) {
            binding.llPromoDreamFlatImage.background = resource
        }
    })

This way you can set the background image as a picture or a color with rounded edges for the LinearLayout. Here is my example:

        <LinearLayout
        android:id="@+id/llPromoDreamFlatImage"
        android:layout_width="match_parent"
        android:layout_height="420dp"
        android:layout_marginTop="35dp"
        android:layout_gravity="center"
        android:gravity="center"
        >

How to Apply Corner Radius to LinearLayout

5 Answers5

Linked