Custom shaped Linearlayout with curved side in android

Question

I am trying to make a custom shaped linearlayout like below

I am trying to make only one side curved. Tried with corner radius but it doesn't give the same look as above.

Already tried this background shape as below :-

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#3F51B5" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" />
</shape>

it rounds only corners and on increasing the value shape is not preserved it gets too circular. I WANT CURVED line and not rounded corners

You can create image with this curved shade and can add as background of `Layout`. — Jay Rathod, Apr 27 '16 at 12:01
i am not sure if it will look the same on all resolutions so i avoided that. will it? — UzUmAkI_NaRuTo, Apr 27 '16 at 12:03
You can use dimen for all Resolutions and made it work easily. — Jay Rathod, Apr 27 '16 at 12:05
@SumeetDarade are you able to fix the issue ?? and how you are doing this? — SAVVY, Nov 22 '16 at 15:47

score 13 · Answer 1 · answered Jan 08 '18 at 09:11

Its very late already but this is for future seekers. I think vector drawables are the most perfect solution for this. Use below vector as background to get custom shaped bottom curved layout.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="100.0"
android:viewportWidth="200.0">
<path
    android:fillColor="#YOUR_FAVORITE_COLOR"
    android:pathData="M200,0H0v4.5h0v75.8h0c17.8,10.2 56,17.2 100.5,17.2c44.5,0 81.6,-7 99.5,-17.2h0V4.5h0V0z" />

Used this with ImageView scaleType=fitXY – Jemshit Apr 23 '21 at 07:35 — Jemshit, Apr 23 '21 at 07:35

score 10 · Answer 2 · answered Apr 27 '16 at 12:05

10

Create a shape file in drawable folder e.g: my_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
   <corners
      android:bottomLeftRadius="100dp"
      android:bottomRightRadius="100dp"
      android:topLeftRadius="0dp"
      android:topRightRadius="0dp" />
   <padding
      android:bottom="0dp"
      android:left="0dp"
      android:right="0dp"
      android:top="0dp" />
   <stroke
      android:width="0.5dp"
      android:color="@color/theme_red" />
  <solid android:color="@color/white" />
</shape>

then add this shape in your layout as a background. e.g:

<LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@drawable/my_shape"
     android:orientation="horizontal">             
</LinearLayout>

answered Apr 27 '16 at 12:05

Masum

4,879
2
23
28

as i said i tried adding radius.it does not look like the shape in image. i want line to be curved – UzUmAkI_NaRuTo Apr 27 '16 at 12:09
I think you should go with background image. First you design an image as your requirement. then use it as background in your layout – Masum Apr 27 '16 at 12:14
Yes, can you suggest any resolution to begin with which will look same on all devices? – UzUmAkI_NaRuTo Apr 27 '16 at 12:19
You should start your image design from mdpi screen then design rest of the screen like hdpi, xhdpi, xxhdpi etc and must follow the screen design ration. follow this [Link1](http://developer.android.com/guide/practices/screens_support.html) and [Link2](http://stackoverflow.com/questions/11167537/scaling-ratio-in-android-images) – Masum Apr 27 '16 at 12:22

score 7 · Answer 3 · edited Feb 15 '23 at 12:51

shape_curve.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" />
    </item>

    <item
        android:bottom="0dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

Use

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@drawable/shape_curve"
    android:orientation="horizontal" />

score 5 · Answer 4 · answered Feb 28 '17 at 11:36

what i did is create a drawable allowaccess_button_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>

</selector>

Try below layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#fefefe"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_height="110dp">
    </RelativeLayout>

    <ImageView
        android:layout_marginTop="85dp"
        android:src="@drawable/allowaccess_button_normal"
        android:layout_width="match_parent"
        android:layout_height="50dp" />


</RelativeLayout>

score 1 · Answer 5 · answered Jun 19 '17 at 09:09

 <layer-lisxmlns:android="http://schemas.android.com/apk/res/android">

   <item  android:top="175dp">

    <shape android:shape="oval">

     <gradient
        android:angle="135"
        android:startColor="#f56f2c"
        android:endColor="#fa9f46"/>

   </shape>
  </item>


  <item android:bottom="40dp">

   <shape android:shape="rectangle">

    <gradient
        android:angle="135"
        android:startColor="#f56f2c"
        android:endColor="#fa9f46"/>

   </shape>
 </item>
</layer-list>

Neelay Srivastava · Answer 6 · 2016-04-27T12:12:25.033

0

you can set the dimension in the value -dimension.xml fime and then set it in your xml of your linearlayout it will give the following like this

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
   android:color="#FFFF00" />
<padding android:left="7dp"
    android:top="7dp"
    android:right="7dp"
    android:bottom="7dp" />

just make a xml file in your drawable set the dimensio u need and then call it by your linear layout

edited Apr 27 '16 at 12:12

answered Apr 27 '16 at 12:04

Neelay Srivastava

100
1
2
17

sorry for not getting it but can you give a example ? am not sure what dimensions you talking about – UzUmAkI_NaRuTo Apr 27 '16 at 12:07

Custom shaped Linearlayout with curved side in android

6 Answers6