Custom drawable not showing properly when applied to a layout

Question

I designed a custom shape

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

    <item
        android:bottom="0dp"
        android:left="30dp"
        android:right="30dp"
        android:top="-30dp">
        <shape android:shape="rectangle">
            <size
                android:width="80dp"
                android:height="40dp" />
            <solid android:color="@color/colorPrimary" />
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>

    </item>


    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="0dp" />
        </shape>
    </item>


</layer-list>

Now when I try to apply this to a layout background Which is BottomSheet it doesn't have any effect and simply covers up the entire screen with blue background (It becomes a solid flat blue rectangle)

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/background_features"
android:padding="32dp"
app:behavior_hideable="false"
app:behavior_peekHeight="@dimen/partial_features_peek_height_50dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

How can I apply this custom background in its shape

your current top shape height is 30dp and bottom shapre is 40dp. so if your bottom sheet height is longer, you want the top shape still keep 30dp or you want it scale up? also about bottom shape too — Linh, Jul 08 '19 at 06:52
@PhanVanLinh I don't want the shape to scale up. I am using bottomSheet and I want its peak height shape to look like the that. Once the user drags up the sheet below sheet will just be a simple colour rectangle shape. — Skyyy, Jul 08 '19 at 06:59
Sorry if I explain wrong. you shape in drawable height now is 80dp, your bottom sheet now is wrap_content. Example, your bottomsheet display in the phone may have the height > 80dp. => Now we need to display a small drawable to a big view, how you want the drawable to place inside this view? There are many options (scale it up, scale all or ?, don't scale, display it at top, don't scale display it at center). There are many ways to do then I need to ask you — Linh, Jul 08 '19 at 07:05
@PhanVanLinh I am not getting you. https://imgur.com/yuGEI50 Check this image this is how it will be (left image) when the layout is collapsed this is how it will look with that shape. (Right image) Once dragged up .. This is how it will look — Skyyy, Jul 08 '19 at 07:14
@AkashKumar check this https://stackoverflow.com/a/53879777/7666442 — AskNilesh, Jul 08 '19 at 07:57

score 1 · Accepted Answer · answered Jul 08 '19 at 07:17

You can try it

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

    <item
            android:bottom="0dp"
            android:left="30dp"
            android:right="30dp">
        <shape android:shape="rectangle">
            <size
                    android:width="80dp"
                    android:height="40dp"/>
            <solid android:color="@color/colorPrimary"/>
            <corners
                    android:bottomLeftRadius="0dp"
                    android:bottomRightRadius="0dp"
                    android:topLeftRadius="10dp"
                    android:topRightRadius="10dp"/>
        </shape>

    </item>

    <item
            android:top="30dp"
    >
        <shape android:shape="rectangle">
            <size
                    android:width="100dp"
                    android:height="40dp"/>
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="0dp"/>
        </shape>
    </item>

</layer-list>

Let me know the result if it is the layout which you want to achieve or not. Hope it help

It worked ... Can you also help me with this https://imgur.com/eVeYiUG How can I shape that inverted curve — Skyyy, Jul 08 '19 at 07:41
Thank NileshRathod for share a good solution link. Other possible solution is use the 9-patch image. You can consider it to @Akash Kumar — Linh, Jul 08 '19 at 08:33

Chanaka Weerasinghe · Answer 2 · 2019-07-06T07:40:00.770

use layer list

     <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Apply the margin value on the "item" element -->
    <!-- This example creates a 15dp visible margin around the dialog -->
    <item
        android:top="15dp"
        android:bottom="15dp"
        android:left="15dp"
        android:right="15dp">
        <shape
            android:shape="rectangle">

            <!-- Add attributes specific to your background (e.g. corner radius, colors, etc.) -->

            <!-- Set "padding" at minimum to match margin and add additional content padding as well, if desired -->
            <!-- This example creates 10dp of internal padding for content -->
            <padding
                android:top="25dp"
                android:bottom="25dp"
                android:left="25dp"
                android:right="25dp" />
        </shape>
    </item>
</layer-list>

I am sorry If I am not clear. But I want a shape like 1st image in the question Which indicates a layout is currently hidden (only top shape like the question is visible) By swiping it up you can reveal a whole layout. Current drawable you have mentioned is just same simple rectangle with white margin around them — Skyyy, Jul 06 '19 at 07:48
https://i.imgur.com/lLSdNus.gif like this.. but I need the shape to be like 1st image in the question — Skyyy, Jul 06 '19 at 07:51

Custom drawable not showing properly when applied to a layout

2 Answers2