I have this error when i start Activity with Layout in Xamarin.Android project. How to fix this?
All android nuget packages v. 28.0.0.3
Android.Views.InflateException: 'Binary XML file line #1: Binary XML file line #1: Error inflating class android.suppot.design.widget.NavigationView'
XAML
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/drawerLayout"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include
layout="#layout/include_main"
/>
</LinearLayout>
<android.suppot.design.widget.NavigationView
android:id="#+id/navView"
android:layout_height="match_parent"
android:layout_width="300dp"
android:background="#android:color/white"
android:layout_gravity="start"
app:headerLayout="#layout/headerlayout"
app:menu="#menu/navmenu"
/>
</android.support.v4.widget.DrawerLayout>
NavMenu
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item
android:id="#+id/navProfile"
android:title="Профиль"
android:icon="#mipmap/ic_person"/>
<item android:id="#+id/navPayments"
android:icon="#mipmap/ic_wallet"
android:title="Транзакции"/>
<item android:id="#+id/navHistory"
android:title="История"
android:icon="#mipmap/ic_history"
/>
<item
android:id="#+id/navPromo"
android:title="Промо"
android:icon="#mipmap/ic_discount"
/>
<item
android:id="#+id/navSupport"
android:title="Поддержка"
android:icon="#mipmap/ic_support"
/>
<item
android:id="#+id/navAbout"
android:title="О нас"
android:icon="#mipmap/ic_about"
/>
</group>
</menu>
Include_main
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main Layout"
android:textSize="20sp"
android:gravity="center"
android:layout_gravity="center"
/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
header_layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#android:color/white"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<Refractored.Controls.CircleImageView
android:id="#+id/accoutImage"
android:layout_height="100dp"
android:layout_width="100dp"
android:layout_gravity="center"
android:src="#drawable/account"
android:scaleType="centerCrop"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/accountTitle"
android:layout_gravity="bottom"
android:gravity="center"
android:text="UserName"
android:layout_marginBottom="12dp"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="bottom"
android:background="#android:color/holo_blue_dark"/>
</FrameLayout>
styles.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="Theme.Splash"
parent="Theme.AppCompat.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">#drawable/splash</item>
</style>
<style name="Theme.Register" parent="Theme.AppCompat.NoActionBar">
<item name="windowNoTitle">true</item>
</style>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette ->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/colorAccent</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
You have misspelled the word support. Just try to replace
<android.suppot.design.widget.NavigationView>
with
<android.support.design.widget.NavigationView>
Besides, make sure the nuget:Refractored.Controls.CircleImageView have been installed, otherwise the code will report the error as well.
Note:
I have tested that It doesn't matter if the namespace is Refractored.Controls.CircleImageView or refractored.controls.CircleImageView.They all works.
try to change refractored.controls.CircleImageView instead of Refractored.Controls.CircleImageView in your header_layout :
<refractored.controls.CircleImageView
android:id="#+id/accoutImage"
android:layout_height="100dp"
android:layout_width="100dp"
android:layout_gravity="center"
android:src="#drawable/account"
android:scaleType="centerCrop"
/>
and :
<android.support.design.widget.NavigationView>
instead of:
<android.suppot.design.widget.NavigationView>
I have created a custom gradient drawable file that i want to use as my Toolbar's background but i can't seem to apply it. It just shows up as plain gray (see the image). Am i doing something wrong? I looked at multiple posts but nothing has worked for me so far.
activity_main.xml:
<?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"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<Toolbar
android:id="#+id/home_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/home_toolbar_gradient"
android:elevation="4dp"
android:minHeight="70dp"
android:theme="#style/customToolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/title_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/Montserrat-Bold"
android:gravity="center"
android:text="#string/home"
android:textAlignment="center"
android:textColor="#android:color/white" />
</Toolbar>
<!-- Using a view with a gradient to create a drop navbar_shadow effect for the navbar -->
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_above="#id/bottom_nav_bar"
android:background="#drawable/navbar_shadow" />
<com.google.android.material.bottomnavigation.BottomNavigationView
app:labelVisibilityMode="labeled"
android:id="#+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#android:color/white"
app:itemIconTint="#drawable/nav_selected_item_color"
app:itemTextColor="#drawable/nav_selected_item_color"
app:menu="#menu/bottom_nav_bar">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>
home_toolbar_gradient.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#color/toolbar_starting_color"
android:endColor="#color/toolbar_ending_color"
android:angle="75" />
</shape>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:fontFamily">#font/montserrat_medium</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Custom Rounded Dialog style -->
<style name="RoundedDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowBackground">#drawable/rounded_corners</item>
</style>
<style name="customToolbar" parent="Theme.AppCompat.Light.NoActionBar" />
</resources>
in MainActivity.java:
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar homeToolbar = findViewById(R.id.home_toolbar);
setSupportActionBar(homeToolbar);
and in the manifest:
android:theme="#style/Theme.AppCompat.Light.DarkActionBar"
Try doing it dynamically:
setSupportActionBar(homeToolbar);
ActionBar actionbar = getSupportActionBar();
actionbar.setBackgroundDrawable(getResources().getDrawable(R.drawable.home_toolbar_gradient));
Read this. It says- Angle of the gradient, used only with linear gradient. Must be a multiple of 45 in the range [0, 315].
So, Change home_toolbar_gradient.xml drawable to
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#FF33"
android:endColor="#AFF"
android:angle="45" />
</shape>
Try this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#555994"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
For anyone interested, i actually found the issue. The angle attribute in a gradient drawable needs to be a multiple of 45 otherwise you'll get a subtle rendering error in the layout preview. Just change it to a multiple of it that suits your needs and the gradient will take effect.
I've created application with menu and toolbar.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
android:id="#+id/app_bar_menu_coord_layout_included"
layout="#layout/app_bar_menu"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header_menu"
app:menu="#menu/activity_menu_drawer" />
</android.support.v4.widget.DrawerLayout>
The toolbar (the app_bar_menu_coord_layout_included above):
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/app_bar_menu_coord_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true"
android:tag="app_bar_menu_coord_layout"
tools:context="com.magnifi.pennantrace.MenuActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/mybutton"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--first-->
<TextView
android:id="#+id/toolbar_div_rank"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="4th Place"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/guidelineToolbarV1"
app:layout_constraintEnd_toStartOf="#+id/guidelineToolbarH1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
...
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/content_frame"/>
</LinearLayout>
Now I wanted to adjust text sizes of toolbar elements depending on screen size. What I do is take toolbar width as 100% and set the rest of textview's text sizes to fit the desired rectangle (for example 6% of width and 100% of height).
But it seems like its not working properly.
I've tested on screen size 320 height and 480 width:
As you see on the picture, first of all the width of it is 480, and as I noticed the text adjustment doesn't work, take a look on the last text 37M, it should have fitted into one line. What I think is that the menu button (the red rectangle in image) is taking some place. What would be the best way to identify actual width of toolbar without the menu button?
EDIT 1:
I've tried adding to the app_bar_menu_coord_layout_included this:
android:layout_marginLeft="-64dp"
And here is the result of correct text size adjustment. But I don't want to get rid of the menu button. Instead I want to get correct size of toolbar without menu button.
Android gave us components to make ease implementing components. Not for giving hours to customise it. Why don't you make an custom toolbar instead of wasting hours in managing default toolbar.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
style="#style/styleToolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_back"
style="#style/styleToolbarIcon"
android:src="#drawable/ic_back" />
<TextView
android:id="#+id/headerTitle"
style="#style/styleToolbarText"
android:text="#string/app_name" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
some styles to be put in res>values>styles.xml.
<style name="styleToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:layout_width">match_parent</item>
<item name="android:background">#color/colorWhite</item>
<item name="android:layout_height">?attr/actionBarSize</item>
<item name="colorControlNormal">#color/colorWhite</item>
<item name="android:textColorPrimary">#color/colorWhite</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
<item name="contentInsetEnd">0dp</item>
<item name="contentInsetLeft">0dp</item>
<item name="contentInsetRight">0dp</item>
<item name="contentInsetStart">0dp</item>
<item name="contentInsetStartWithNavigation">0dp</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
<style name="styleToolbarIcon">
<item name="android:layout_width">?attr/actionBarSize</item>
<item name="android:layout_height">match_parent</item>
<item name="android:contentDescription">#string/app_name</item>
<item name="android:padding">#dimen/toolbar_icon_padding</item>
<item name="android:gravity">center</item>
</style>
<style name="styleToolbarText">
<item name="android:layout_width">0dp</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent</item>
<item name="android:gravity">left|center_vertical</item>
<item name="android:singleLine">true</item>
<item name="android:textColor">#252525</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:scrollHorizontally">true</item>
</style>
You should customize the toolbar layout as per your need. So you will have all controls on its size.
I'm trying to use NavigationView to implement NavigationDrawer. I have added the separator by setting group id in menu. However I can't see the separator. I guess it is because the separator color is same as the background. So I want to change the separator color. But I find no way to change it. Can anyone help me?
In screenshot, it seems have a room for separator between History and Settings, but you can't see it.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context=".ui.MapActivity">
<LinearLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar_actionbar" />
<!--main content-->
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/navdrawer_background"
app:insetForeground="#4000"
app:itemTextColor="#color/navdrawer_item_text_color"
app:itemIconTint="#color/navdrawer_item_icon_tint"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="#+id/group_feature"
android:checkableBehavior="single">
<item android:id="#+id/navdrawer_item_map"
android:checked="true"
android:icon="#drawable/ic_drawer_map"
android:title="#string/navdrawer_item_map"/>
<item android:id="#+id/navdrawer_item_favourite"
android:icon="#drawable/ic_drawer_fav"
android:title="#string/navdrawer_item_fav"/>
<item android:id="#+id/navdrawer_item_history"
android:icon="#drawable/ic_drawer_history"
android:title="#string/navdrawer_item_history"/>
</group>
<group android:id="#+id/group_settings"
android:checkableBehavior="single">
<item android:id="#+id/navdrawer_item_settings"
android:icon="#drawable/ic_drawer_settings"
android:title="#string/navdrawer_item_settings"/>
<item android:id="#+id/navdrawer_item_help"
android:icon="#drawable/ic_drawer_help"
android:title="#string/navdrawer_item_help"/>
<item android:id="#+id/navdrawer_item_about"
android:icon="#drawable/ic_drawer_about"
android:title="#string/navdrawer_item_about"/>
</group>
</menu>
just apply following line on style.xml
<item name="android:listDivider">your_color</item>
The below is just information for your knowledge ...
If you have seen design support library .. they are using following layout for NavigationView seprator..
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider"/>
</FrameLayout>
here, you can see android:background="?android:attr/listDivider" ..
So enjoy ...
and here is my output that i change color to holo_blue
Here is best and easy way while using menu as view
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:theme="#style/ThemeToolbar.NavigationView"
app:itemTextColor="#color/white"
app:itemIconTint="#color/white"
app:headerLayout="#layout/activity_home_nav_header"
app:menu="#menu/activity_home_drawer" />
ThemeToolbar.NavigatinoView
<style name="ThemeToolbar.NavigationView" >
<item name="android:listDivider">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
Create a style in your styles.xml. Enter your preferred color in the android:listDivider
<style name="NavigationView" parent="Base.Theme.AppCompat">
<item name="android:listDivider">#color/text_lightgray</item>
</style>
Reference the style as the theme of your navigation view:
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
android:theme="#style/NavigationView"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view"
app:itemTextColor="#color/text_white"/>
Lastly, make sure that the groups inside your menu have unique ids. If your groups do not have the id attribute, this won't work!
<group android:checkableBehavior="single"
android:id="#+id/group1">
<item
android:id="#+id/item1"
android:title="#string/item1" />
</group>
<group android:checkableBehavior="single"
android:id="#+id/group2">
<item
android:id="#+id/item2"
android:title="#string/item2" />
</group>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#color/menu_text_color</item>
<item name="android:textColorSecondary">#color/menu_text_color</item>
</style>
textColorPrimary changes the color of the header.
Perfect answer:
<android.support.design.widget.NavigationView
android:id="#+id/activity_principal_nav_view"
android:layout_width="#dimen/size_230"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/black"
android:fitsSystemWindows="true"
app:insetForeground="#color/white"
app:menu="#menu/settings_menu"
app:itemTextColor="#color/white"
app:itemIconTint="#color/white"
app:headerLayout="#layout/settings_menu_header"
android:theme="#style/NavigationDrawerStyle"/>
Divider Color Is Changed
STEP 1:
Create list_divider.xml file in your drawable folder.
copy and paste the following lines into your list_divider.xml.
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/_16sdp"
android:insetRight="#dimen/_16sdp">
<shape>
<solid android:color="#FFFFFF" />
<size android:height="2dp" />
</shape>
</inset>
STEP 2:
Add this line to your Main Theme ( Theme Mentioned in your AndroidManifest.xml file)
<item name="android:listDivider">#drawable/list_divider</item>
For Example
<style
name="MyMaterialTheme.Base"
parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:listDivider">#drawable/list_divider</item>
<item name="android:listDivider">#drawable/list_divider</item>
STEP 3:
No Change required in NavigationView for divider Color
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigationView"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="?attr/colorPrimary"
app:headerLayout="#layout/header_navigation_drawer"
app:itemIconTint="?attr/nav_drawer_icon_color"
app:itemTextColor="?attr/nav_text_color"
app:menu="#menu/navigation_drawer_list_menu"
tools:ignore="MissingConstraints" />
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"/>