Search code examples
androidcanvasviewdrawcube

Draw Rectangle View with curve bottom In Android


Good day.I want to draw an rectangle as a view but which bottom shall be curved.I do not want to apply background image like that or use any views,because if i use an view and set background,the curve part will still have invisible empty space and i would not be able to attach another curve image to the bottom curve of the custom view.So how shall i draw an rectangle with bottom curved line and use it as a view to set any background color i want?

Notice: i have heard something and read about quadTo() and cubicTo() android methods but i have no clue even how to use them i mean i did not understand anything from documents....So i came here for help.

Ideally instead of such description you could see what i really want to achieve from the image...It is an toolbar or action bar or whatsover but i have to make such thing...I have no ideas at all.(By the way you can notice that there is an image curved on top as well...i have to do it too,and i reckon i can do it by drawing an bitmap.meanwhile i'm still failing to do any of the image parts in android view.)enter image description here


Solution

  • Just play with the oval item values to get the desired output.

    curve_toolbar_bg.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/colorPrimary" />
            </shape>
        </item>
    </layer-list>
    

    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@drawable/curve_toolbar_bg"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0">
    
        </android.support.v7.widget.Toolbar>
    </android.support.constraint.ConstraintLayout>
    

    Curve shape toolbar