Draw Rectangle View with curve bottom In Android

Draw Rectangle View with curve bottom In Android - 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.)

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>

This is what I did to achieve curved status bar on my android application. This created a toolbar that can be over other views so when you scroll views goes under the toolbar.
First I hid the original Toolbar from activity by creating a no title theme and selecting that theme from manifest. Then I created a Titlebar of my own and then by playing with margins and paddings I achieved desired result.
statusbar
sytles.xml:
<style name="Notitle.Theme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowNoTitle">true</item>
</style>
AndroidManifest.xml
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.NoActionBar"/>
arch.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">
<gradient
android:startColor="#2629fb"
android:endColor= "#2699FB"
android:angle="90" />
</shape>
</item>
</layer-list>
mainActivity.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#27292c">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
android:layout_marginBottom="-50dp"
android:elevation="5dp"
android:background="#drawable/arch">
<TextView
android:id="#+id/headerWidgetTitle"
android:text="Title"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:paddingTop="10dp"
android:textColor="#FFFFFF"
android:paddingBottom="20dp"/>
</androidx.appcompat.widget.Toolbar>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/scrollLinearLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:elevation="0dp"
android:paddingTop="50dp"
android:clipToPadding="false">
<!-- Your Views -->
</LinearLayout>
</ScrollView>

Related

Circular background for toolbar icons

is there a way to add a background to the toolbar icons,
I want to achieve this design
or there is another way to do it. since it has the overflow icon

complete reference code
this is the result
add the following in your app theme or activity style to make it NoActionBar activity
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
add the toolbar in your activity.xml and customize the view as you like
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/AppTheme"
app:layout_collapseMode="parallax"
app:popupTheme="#style/AppTheme">
<RelativeLayout
android:layout_width ="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/back_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/cir_shape"
android:onClick="clickBack"
android:padding="6dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_arrow_back_black_24dp"
tools:ignore="VectorDrawableCompat" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/rect_shape"
android:gravity="center"
android:orientation="horizontal"
android:padding="3dp">
<ImageView
android:id="#+id/app_bar_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:visibility="visible"
android:layout_marginRight="3dp"
app:srcCompat="#drawable/ic_visibility_black_24dp"
android:layout_marginEnd="3dp" />
<TextView
android:id="#+id/app_bar_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="1.3K"
android:textAllCaps="false"
android:textColor="#color/whiteColor"
android:textSize="18sp"
android:textStyle="bold"
android:visibility="visible" />
</LinearLayout>
</RelativeLayout>
3.add the support action bar as the toolbar in the MainActivity.java in OnCreate()
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
4.the circle_shape.xml in the drawable for arrow_back drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#95686566" />
</shape>
5.the rectangle_shape.xml in the drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#95686566" />
</shape>
6.for customizing the 3 dots(overflow icon) add
<item name="actionOverflowButtonStyle">#style/ThreeDotsStyle</item>
the in your style.xml main theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="actionOverflowButtonStyle">#style/ThreeDotsStyle</item>
</style>
and create it's theme
<style name="ThreeDotsStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/my_threedots_menu</item>
</style>
7.the my_threedots_menu.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#95686566" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
<item
android:drawable="#drawable/ic_menu_dots"
android:gravity="center" />
</layer-list>
8.inflate your menu
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
return true;
}

Create a custom toolbar and put your custom icons inside of it.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/myCustomAppBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- your custom icons goes here -->
</RelativeLayout>
</android.support.v7.widget.Toolbar>

1) btn_ripple_background
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/ripple_circular_shape"/>
</selector>
2) ripple_circuler_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/btn_state_pressed_text_color"
android:shape="oval">
<solid android:color="#color/btn_state_pressed_text_color" />
</shape>
Finally android:foreground="#drawable/ripple_btn_background"

You could create container with custom background inside Toolbar, put ImageView inside and add some padding to it for example:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/middle_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="#drawable/baseline_arrow_forward_white_24" />
</LinearLayout>
Background middle_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/resandroid"
android:shape="oval">
<solid android:color="#android:color/holo_orange_dark" />
</shape>
Adjust padding, ImageView to get desired look but basically you will have something like this:

How can I remove the smell line under the EditText?

When the user is click on the line in EditText in Huawei device he get another smell line (under the long line) - see image.
I try to do a lot of thing to fix it and I don't find what should I do.enter image description here
The is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/static_relative_layout"
android:background="#color/app_default_background"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="15dp"
android:layout_marginRight="50dp"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/email_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorTextAppearance="#style/TextInputLayoutHintAppearanceError"
app:hintTextAppearance="#style/TextInputLayoutHintAppearanceValid">
<EditText
android:id="#+id/email_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:singleLine="true"
android:theme="#style/EditTextStyleRedLine"
android:textColor="#color/new_dark_grey"/>
</android.support.design.widget.TextInputLayout>
The style "EditTextStyleRedLine" is as follows:
<style name="EditTextStyleRedLine" parent="#style/Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/grey</item>
<item name="colorControlActivated">#color/red</item>
</style>

Add a background to your edittext, this will solve your issue.
android: background="#null"

You can personalize the background by creating a new drawable resource file, res > right click drawable > new > drawable resource file. Add the following code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<!-- Inner Shape -->
<solid
android:color="#color/colorWhite"/>
<!-- OUTLINE -->
<stroke android:width="0dp"
android:color="#FFFFFF"/>
<!-- CORNERS -->
<corners
android:radius="5dp"/>
</shape>
</item>
</selector>
Then you can set
android:background="#drawable/YOUR_DRAWABLE"

menu is not visible in Bottom Navigation bar using BottomNavigationView widget android

I am trying to add 5 icons on the bottom of the navigation bar. and this is what it came out like pic1. When I click on the bottom, other icons would show up only one at a time, shown in pic2. I need to make it look like the this picture, pic3.
Does anyone have any idea on what's wrong with the code?
These are the libraries that I am using:
implementation 'com.android.support:support-core-utils:27.1.1'
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'
Here is my bottom navigation layout view:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomNavViewBar"
android:background="#drawable/white_grey_border_top"
app:menu="#menu/bottom_navigation_menu">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
Here is white_grey_border_top drawable file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:bottom="-1dp"
android:top="1dp"
android:right="-1dp"
android:left="-1dp">
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/grey" />
<solid
android:color="#color/white" />
</shape>
</item>
Here is my bottom_navigation_menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/ic_house"
android:icon="#drawable/ic_house"
android:title="">
</item>
<item
android:id="#+id/ic_search"
android:icon="#drawable/ic_search"
android:title="">
</item>
<item
android:id="#+id/ic_circle"
android:icon="#drawable/ic_circle"
android:title="">
</item>
<item
android:id="#+id/ic_alert"
android:icon="#drawable/ic_alert"
android:title="">
</item>
<item
android:id="#+id/ic_android"
android:icon="#drawable/ic_android"
android:title="">
</item>
update:
when I add android:backgroundTint="#1091BF" to my bottom navigation layout view, then it works but the background is blue (pic4). Also, I notice that if I just change the android:color="#color/white" in my white_grey_border_top drawable file to any other color then all the icon would show up.

Try using the following inside your bottom navigation layout view.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:backgroundTint="#1091BF"
app:itemIconTint="#fff"
app:itemTextColor="#fff"
app:menu="#menu/navigation"/>
</android.support.constraint.ConstraintLayout>
Make sure to add dependency
implementation 'com.android.support.constraint:constraint-layout:1.1.2'

Using a custom template for actionbar menu item

I am trying to display a menu with text and icon always visible. I have defined my item layout as following
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:drawableLeft="#drawable/ic_cart"
android:gravity="center"
android:orientation="vertical"
android:text="(0)"
android:drawablePadding="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="#android:color/white" />
And the menu is defined as following
<menu 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"
tools:context="com.taptoscan.taptoscan.MainActivity">
<item
android:id="#+id/action_sign"
android:title="(0)"
app:showAsAction="always|withText"
app:actionLayout="#layout/menu_sign" />
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
I'm having an issue with enabling the ripple effect on the background. It works but the ripple effect is not rounded, lik on a regular menu icon. It's square shaped and looks kinda ugly. What would be the best way to achieve the native ripple effect look on a custom menu item?
EDIT: This is what it looks like

NOTE: Better solution found, check the edit
I figured it out. First I created a background drawable with rounded corners, like this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<corners android:radius="5dp" />
</shape>
</ripple>
After that, I set the TextView's background as the drawable from above. Ripple effect works as intended and it's all rounded like on default menu items.
EDIT
After further messing around with the custom menu item, I have found out that just by using a TextView without a root element will cause TextView's baseline to be changed after clicking on another menu item and then clicking back on the custom one. The solution is using the following layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#drawable/btn_actionbar_icon">
<TextView
android:id="#+id/icon_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_cart"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:padding="10dp"
android:text="(0)"
android:textColor="#android:color/white"
android:textSize="14sp" />
</RelativeLayout>

No shadow by default on Toolbar?

I'm updating my app with the new Toolbar from the support library v21. My problem is that the toolbar does not cast any shadow if I don't set the "elevation" attribute. Is that the normal behavior or I'm doing something wrong?
My code is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="#+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
.
And in my Activity - OnCreate method:
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);

I ended up setting my own drop shadow for the toolbar, thought it might helpful for anyone looking for it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_alizarin"
android:titleTextAppearance="#color/White"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- **** Place Your Content Here **** -->
<View android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_dropshadow"/>
</FrameLayout>
</LinearLayout>
#drawable/toolbar_dropshadow:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#android:color/transparent"
android:endColor="#88333333"
android:angle="90"/>
</shape>
#color/color_alizarin
<color name="color_alizarin">#e74c3c</color>

Google released the Design Support library a few weeks ago and there is a nifty solution for this problem in this library.
Add the Design Support library as a dependency in build.gradle :
compile 'com.android.support:design:22.2.0'
Add AppBarLayout supplied by the library as a wrapper around your Toolbar layout to generate a drop shadow.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
.../>
</android.support.design.widget.AppBarLayout>
Here is the result :
There are lots of other tricks with the design support library.
http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
http://android-developers.blogspot.in/2015/05/android-design-support-library.html
AndroidX
As above but with dependency:
implementation 'com.google.android.material:material:1.0.0'
and com.google.android.material.appbar.AppBarLayout

You can't use the elevation attribute before API 21 (Android Lollipop). You can however add the shadow programmatically, for example using a custom view placed below the Toolbar.
#layout/toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<View
android:id="#+id/toolbar_shadow"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#drawable/toolbar_dropshadow" />
#drawable/toolbar_dropshadow
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#android:color/transparent"
android:endColor="#88333333"
android:angle="90"/> </shape>
in your activity layout
<include layout="#layout/toolbar" />

Use /values folders to apply the correct shadow style based on OS version.
For under 5.0 devices, use /values/styles.xml to add windowContentOverlay to the body of your activity:
<style name="MyViewArea">
<item name="android:foreground">?android:windowContentOverlay</item>
</style>
<style name="MyToolbar">
<item name="android:background">?attr/colorPrimary</item>
</style>
Then add your own custom shadow by changing your Theme to include:
<item name="android:windowContentOverlay">#drawable/bottom_shadow</item>
You can grab Google's IO app shadow resource here: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png
For 5.0 devices & later, use /values-v21/styles.xml to add elevation to your toolbar using a custom header style:
<style name="MyViewArea">
</style>
<style name="MyToolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="android:elevation">4dp</item>
</style>
Note that in the second case, I had to create an empty MyViewArea style so the windowContentOverlay wouldn't show up too.
[Update: changed resource names and added Google shadow.]

If you are seting the ToolBar as ActionBar then just call:
getSupportActionBar().setElevation(YOUR_ELEVATION);
Note: This must be called after setSupportActionBar(toolbar);

This worked for me very well:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize" />
</android.support.v7.widget.CardView>

i added
<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>
in toolbar description and it works for me.
Using 5.0+

My problem is that the toolbar does not cast any shadow if I don't set the "elevation" attribute. Is that the normal behavior or I'm doing something wrong?
That's the normal behavior. Also see the FAQ at the end of this post.

Was toying with this for hours, here's what worked for me.
Remove all the elevation attributes from the appBarLayout and Toolbar widgets (including styles.xml if you are applying any styling).
Now inside activity,apply the elvation on your actionBar:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);
This should work.

All you need is a android:margin_bottom equal to the android:elevation value. No AppBarLayout, clipToPadding, etc. required.
Example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="4dp"
android:background="#android:color/white"
android:elevation="4dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Inner layout goes here-->
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>

You can also make it work with RelativeLayout. This reduces layout nesting a little bit ;)
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="#id/toolbar"
android:background="#drawable/toolbar_shadow" />
</RelativeLayout>

In my situation elevation doesn't work well because I haven't given any background to the toolbar. Try giving background color to the toolbar then set elevation and it will work well.

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:elevation="4dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:buttonGravity="center_vertical" />
</androidx.cardview.widget.CardView>

Most solutions work fine here. Would like to show another, similar alternative :
gradle:
implementation 'androidx.appcompat:appcompat:1.0.0-rc02'
implementation 'com.google.android.material:material:1.0.0-rc02'
implementation 'androidx.core:core-ktx:1.0.0-rc02'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
You layout can have a Toolbar View, and a shadow for it, below, similar to this (need modification of course) :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="#style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"/>
<include
layout="#layout/toolbar_action_bar_shadow"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
res/drawable-v21/toolbar_action_bar_shadow.xml
<androidx.appcompat.widget.AppCompatImageView
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="wrap_content" android:src="#drawable/msl__action_bar_shadow"/>
res/drawable/toolbar_action_bar_shadow.xml
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:foreground="?android:windowContentOverlay" tools:ignore="UnusedAttribute"/>
res/drawable/msl__action_bar_shadow.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:dither="true"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#33000000" />
<size android:height="10dp" />
</shape>
</item>
</layer-list>
styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar as Toolbar)
}
}
Full sample here, as I've noticed the IDE has a bug of saying foreground attribute is too new to be used here.

The correct answer will be to add
android:backgroundTint="#ff00ff"
to the tool bar
with
android:background="#android:color/white"
If you use other color then white for the background it will remove the shadow.
Nice one Google!

For 5.0 + : You can use AppBarLayout with Toolbar. AppBarLayout has "elevation" attribure.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:elevation="4dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>

actionbar_background.xml
<item>
<shape>
<solid android:color="#color/black" />
<corners android:radius="2dp" />
<gradient
android:startColor="#color/black"
android:centerColor="#color/black"
android:endColor="#color/white"
android:angle="270" />
</shape>
</item>
<item android:bottom="3dp" >
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
add to actionbar_style background
<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">#drawable/actionbar_background</item>
<item name="android:elevation">0dp</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:layout_marginBottom">5dp</item>
name="displayOptions">useLogo|showHome|showTitle|showCustom
add to Basetheme
<style name="BaseTheme" parent="Theme.AppCompat.Light">
<item name="android:homeAsUpIndicator">#drawable/home_back</item>
<item name="actionBarStyle">#style/Theme.ActionBar</item>
</style>

I had similar problem with the shadow. The shadow is drawn by direct parent of AppBarLayout in my case. If height of the parent is the same as AppBarLayout's the shadow cannot be drawn. So checking size of the parent layout and maybe layout remake can solve the problem. https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

I am posting this because this took me hours to find so i hope it may help someone.
I had a problem that the shadow/elevation was not showing though i created a simple activity and placed the toolbar as follows:
<androidx.appcompat.widget.Toolbar
android:id="#+id/mt_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="#color/colorPrimaryDark"
android:elevation="12dp"/>
It turns out that in the manifest
setting android:hardwareAccelerated="false" was causing it! once i removed it, the shadow appeared

Just put background
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:elevation="8dp"
android:background="#fff"
android:layout_height="?android:attr/actionBarSize"></androidx.appcompat.widget.Toolbar>

You need to use background color and elevation togather.
<com.google.android.material.appbar.MaterialToolbar
app:elevation="8dp"
android:elevation="8dp"
android:background="#color/white"/>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Draw Rectangle View with curve bottom In Android - android

Related

Circular background for toolbar icons

How can I remove the smell line under the EditText?

menu is not visible in Bottom Navigation bar using BottomNavigationView widget android

Using a custom template for actionbar menu item

No shadow by default on Toolbar?

Categories

Resources