I am using the toolbar from AppCompat V7 to replace the previous action bar and want to have the shadow of toolbar like the previous actionbar. but the toolbar doesn't have shadow by default, and I have tried the fixes mentioned from reddit. but without luck.
the code to set the shadow:
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
The toolbar layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:minHeight="?attr/actionBarSize"
android:background="#F1F1F1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
foreground="?android:windowContentOverlay">
the activity layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:id="#+id/drawer_layout"
android:layout_height="match_parent">
<!-- activity view -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<FrameLayout android:id="#+id/fragment_container"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<!-- navigation drawer -->
<RelativeLayout
android:id="#+id/left_drawer"
android:layout_gravity="start"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:divider="#eee"
android:background="#EEE"
android:id="#+id/drawer_header">
<ImageView
android:id="#+id/user_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/user_icon"
android:src="#drawable/ic_action_person"
android:paddingTop="0dp"
android:paddingLeft="0dp"/>
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/user_icon"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_centerVertical="true"
android:textSize="14sp"
android:text="#string/not_logged_in"
android:paddingTop="0dp"
android:paddingBottom="0dp"/>
</RelativeLayout>
<ListView
android:id="#+id/drawer_list"
android:layout_below="#+id/drawer_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#eee"
android:background="#fff"
android:dividerHeight="0dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Setting in the style.xml:
<style name="myAppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowContentOverlay">#drawable/drawer_shadow</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/black</item>
</style>
Can anyone help?
thanks!
update 1: with the suggestion from Willis, I get the shadow displayed, but it is not below the toolbar, instead it is to the left of the toolbar.
Update 2: I have noticed that if I don't set the windowContentOverlay in toolbar.xml and styles.xml, the shadow is actually on the top of the toolbar.
Those two are completely different shadows. The vertical one is that of DrawerLayout. It's supposed to be showing beside expanded drawer. The horizontal one is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's #null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be #null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.
Note: Use the same gradient but horizontal as the drawer shadow for best results.
You can set the amount of shadow by using the setElevation method. For example:
getSupportActionBar().setElevation(25);
Increasing/decreasing the value passed to setElevation will consequently increase/decrease the presence of the shadow effect.
To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
To use Google Android Design Support Library enter following into your build.gradle file:
compile 'com.android.support:design:22.2.0'
Related
I have a UI design to create where the toolbar is immersed within the recyclerview.
I have created the design but the lines of the layout are still visible on device whereas it appears to be right in the emulator. How do I merge the layout line in recyclerview.
Below is a screenshot from emulator
and below is a screenshot from my device
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="0dp"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="100"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:weightSum="100"
android:background="#android:color/transparent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="80"
android:layout_height="match_parent"
android:text="#string/app_name"
android:textColor="#android:color/black"
android:textSize="25sp"
android:textStyle="bold" />
<ImageView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="20"
android:layout_gravity="right"
android:src="#drawable/ic_add_black_24dp" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:background="#android:color/transparent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
That line is a shadow, caused by the Toolbar's elevation. Elevation only happens automatically on devices running Lollipop or newer, and the layout preview often doesn't show shadows.
Try adding this attribute to your Toolbar's XML to remove the elevation (and therefore the shadow):
android:elevation="0dp"
The most concise answer and easiest way to remove hide ToolBar Layout line/divider adding this line in your style.xml file inside the AppTheme style or whatever theme style you declared for your activity:
<item name="android:showDividers">none</item>
then your should look something like this
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
...
<item name="android:showDividers">none</item>
<!-- This line is not compulsory -->
<item name="actionBarDivider">#android:color/transparent</item>
<!-- This line is not compulsory -->
...
</style>
I hope this helps. it worked for me tho
Result: here's a screenshot of a typical example:
I'm trying to make my app bleed under the status bar and the navigation bar. I got the layouts to work using fitSystemWindows = true with just the status bar translucent but when I make the navigation bar as well, the toolbar appears to react as if it needs to fill under the status bar and the notification bar.
The toolbar appears to function normally when in landscape for some reason.
This double "translucent" bar effect also makes the NestedScrollView extends beyond the bottom of the page. I am also not sure how to make the FAB fit.
On another note, I originally wrote the layout with a CoordinatorLayout. This added the extra problem that the NestedScrollView then scrolls up to the bottom of where the toolbar should be, not where it is. I think, however, that the NestedScrollView respected the bottom screen boundary properly with CoordinatorLayout.
Here's the xml for the layout:
<?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.support.constraint.ConstraintLayout
android:id="#+id/constraint"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="74dp"/>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/nav_color_1_bright"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:navigationContentDescription="#string/open_nav_menu"
app:navigationIcon="#drawable/ic_dehaze_white_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:onClick="createNew"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/darkAccent"
app:fabSize="normal" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:itemBackground="#drawable/nav_item">
<ListView
android:id="#+id/drawer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:fitsSystemWindows="true" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I apply the following 'Light Theme' to the Activity programmatically.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- 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:windowTranslucentStatus">true</item>
<item name ="android:windowTranslucentNavigation">true</item>
</style>
<style name="LightTheme" parent="AppTheme">
<item name="android:colorPrimary">#color/lightPrimary</item>
<item name="android:colorPrimaryDark">#color/lightPrimaryDark</item>
<item name="android:colorAccent">#color/lightAccent</item>
<item name="android:navigationBarColor">#color/lightPrimaryDark</item>
<item name="actionOverflowButtonStyle">#style/OverflowMenuButtonStyleDark</item>
</style>
Here's a preview of the layout: (bigger version here)
I have used AppCompatActivity to show my toolbar on my android app but it hide whole upper part of my mobile devices.I have tried all kind of theme but can't able to figure it out how to decrease the height of toolbar from
upper side.
My xml file is
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:padding="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageButton
android:id="#+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#f04d3c"
android:layout_gravity="right"
android:layout_alignParentRight="true"
android:src="#drawable/search_icon" />
<ImageButton
android:id="#+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="2dp"
android:background="#f04d3c"
android:layout_gravity="right"
android:layout_alignParentRight="true"
android:src="#drawable/cart_icon" />
<ImageButton
android:id="#+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#f04d3c"
android:layout_gravity="right"
android:layout_marginRight="2dp"
android:layout_alignParentRight="true"
android:src="#drawable/notification_icon" />
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<ExpandableListView
android:id="#+id/navList"
android:layout_width="270dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:dividerHeight="1dp"
android:divider="#drawable/list_divider"
android:childDivider="#drawable/child_list_divider"
/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
and my style is this which use Theme.AppCompat.Light.NoActionBar
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#f04d3c</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#f04d3c</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">#FF4081</item>
</style>
</resources>
My app image is this
Within your styles.xml, set a different color for "colorPrimaryDark".
The status bar above your Toolbar takes the color that you specify in colorPrimaryDark. Since your colorPrimary and colorPrimaryDark are same, it looks like its just a large Toolbar.
<item name="colorPrimaryDark">CHANGE_COLOR_HERE</item>
If you wish to restore the color to default, you can set it to transparent
<item name="colorPrimaryDark">#android:color/transparent</item>
In Lollipop and above, the default is that the ActionBar color reflects on the status bar.
Some solutions are : -
If you extend Activity instead of AppCompatActivity, this will actually not happen
If you want to set the status bar black or transparent, or any color you want, you can always do getActivity().getWindow().setStatusBarColor(R.id.your_color)
As mentioned by #Rachit, you can set a colorPrimaryDark
i need to do this :
http://developer.android.com/design/material/images/card_travel.png
so i create and add the dependency to the project and here is my activity main code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="6dp">
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:src="#drawable/ic"/>
<TextView
style="#style/TextAppearance.AppCompat.Caption"
android:textColor="#555"
android:layout_margin="3dp"
android:gravity="end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Detail"/>
</android.support.v7.widget.CardView>
</LinearLayout>
so, how we can do this like below picture:?
http://i.stack.imgur.com/Z0lNa.png
Cheers!
What you're looking for is a translucent status bar. When you have this configured you're able achieve this effect. Make also sure to remove the actionbar as I do in my example down below, otherwise you'll have to make it transparent.
Change your v21/themes.xml file to this:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Then add android:fitsSystemWindows="true" to your LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
I am developing with the latest SDK version (API 21) and Support Library 21.0.2 and I've been having trouble when trying to implement the new Material Design guidelines.
Material Design says that I need to have my primary color and my accent color and apply them over my app. But sometimes when I open the app the primary color becomes transparent in some widgets, it goes back to normal until I close the app (with the Back Button) and launch it again.
Here is an example of the primary color being transparent in my toolbar.
I am using Teal 500 as my primary color and, as you can see, it is transparent only in the android.support.v7.widget.Toolbar. This also happens on my Navigation Drawer and (sometimes , sometimes not) in another random widgets.
This is my Toolbar
<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"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" >
I've tried with #color/primary and ?attr/colorPrimary with no success.
Here is my Theme (I don't know if it is related, but just in case):
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="colorAccent">#color/accent</item>
<item name="android:textColorPrimary">#fff</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:textViewStyle">#style/Widget.TextView.White</item>
</style>
This just happens with the primary color, accent color works fine. My device is running 4.2.2 and I haven't checked on more devices.
Activity with Toolbar
<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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MergeRootFrame" />
</LinearLayout>
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/navdrawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:orientation="vertical" >
<!-- IN THIS IT ALSO HAPPENS -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp"
android:orientation="vertical"
android:background="#color/primary" >
<!-- Some stuff -->
</LinearLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/black_light"
android:divider="#color/grey"
android:choiceMode="singleChoice" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
The problem is related with the way the toolbar's background is handled. It is shared between all instances of toolbar, so if you tend to change the toolbar's background alpha, you change the alpha of the drawable that is reused on other screens too.
Make sure you are not manipulating with the Toolbar's background properties, instead set the new background color/drawable each time you want to customize it.
Maybe these Support Library bugs are related to your issue.
https://code.google.com/p/android/issues/detail?id=78289
https://code.google.com/p/android/issues/detail?id=78346
Sadly, still not fixed in 21.0.2