Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Curved android toolbar with shadow

I need to have a curved bottom view for Toolbar or CardView.

What I've tried:

bg_toolbar.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>

Setting this as a background to toolbar voids the appbar elevation (shadow). Also if this background is applied to a CardView background is set but the shadow is not according to shape of the background.

See the below image, I want the shadow to wrap around the curve.

Problem is clear in the image

like image 710
Hamza Ahmed Khan Avatar asked Aug 30 '19 08:08

Hamza Ahmed Khan


People also ask

What is AppBarLayout?

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures. Children should provide their desired scrolling behavior through AppBarLayout. LayoutParams. setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags .

How to add elevation to view in android?

To set the default (resting) elevation of a view, use the android:elevation attribute in the XML layout. To set the elevation of a view in the code of an activity, use the View. setElevation() method. To set the translation of a view, use the View.


1 Answers

I have done this using arcView

Dependency implementation 'com.github.florent37:shapeofview:1.3.2'

<com.github.florent37.shapeofview.shapes.ArcView
        android:layout_width="match_parent"
        android:layout_height="155dp"
        android:elevation="5.0dp"
        app:shape_arc_cropDirection="outside"
        app:shape_arc_height="35dp"
        app:shape_arc_position="bottom">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="155dp"
            android:background="@color/colorPrimary"
            android:elevation="5dp" />

    </com.github.florent37.shapeofview.shapes.ArcView>

check attached image

enter image description here

like image 140
Kailash Chouhan Avatar answered Sep 28 '22 23:09

Kailash Chouhan