CustomLayout for Bottom Tabbed Activity - android

I have a tabbedactivity layout, but i need to customize that layout for swipe between 2 activities, like this.
I cant change the background color, just the line indicator. Anyone knows how can i do that?
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/tabsBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
thx!

To change the background color of an item selected you'll have to use app:tabBackground
and set custom selector.
tab_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimaryDark" android:state_selected="true"/>
<item android:drawable="#color/colorPrimary"/>
</selector>
TabLayout:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#drawable/tab_selector">...

Related

How to make colorPrimary not show as toolbar background

I am trying to make the toolbar background color transparent however, the colorPrimary theme seems to be showing instead. When I set the background of the toolbar to a standard color, it overrides colorPrimary and work as intended, but is there a way for me to get rid of it completely as to make the toolbar background transparent? The reason that I still want colorPrimary is because of the recent apps tab color, I just want it to not show in the toolbar. Thank you.
Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent" />
Style
<style name="AppTheme1" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:windowLightStatusBar">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:elevation">0dp</item>
<item name="elevation">0dp</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
</style>
use the code instead of only toolbar
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:background="#android:color/transparent"
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="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
use this
<?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="#drawable/background_toolbar_translucent" />
background_toolbar_translucent.xml
<?xml version="1.0" encoding="utf-8"?>
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#color/black_alpha_40"/>
colors.xml
<color name="black_alpha_40">#66000000</color>
make toolbar.xml inside layout folder. Use below code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
And use this toolbar in your activity's xml. This way you will have a transparent toolbar.

Android Appcompat Toolbar Title not shown correctly

I am using support Toolbar from version suppport lib 25.0.1 and randomly it shows like this:
Now this is random and I dont know how to reproduce this. Some times it shows ok some times doesnt show correctly.
This is how I use the Toolbar in my fragment:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/Theme.App.Toolbar"
android:elevation="#dimen/toolbar_elevation"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/Theme.App.Toolbar.Popup"/>
<style name="Theme.App.Toolbar">
<item name="android:textColorPrimary">#color/white</item>
<item name="actionMenuTextColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:textColorHint">#color/white</item>
</style>
Fragment:
toolbar.setTitle("Story title");
appCompatActivity().setSupportActionBar(toolbar);
As it can be seen from the screeenshot somehow the toolbar tries to put the subtitle but I dont have one.
Is this happening to other people, is this a known bug for this problem, any solution for this.
Try to use it 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/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/Theme.MyTheme"
tools:ignore="NewApi">
<TextView
android:id="#+id/tv_title_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:textSize="18sp"
/>
</android.support.v7.widget.Toolbar>
Here you can set title gravity to left.
Then access it in the code like this way:
toolbar = (Toolbar) findViewById(R.id.tb_toolbar);
tvToolbarTitle = (TextView) toolbar.findViewById(R.id.tv_title_toolbar);
tvToolbarTitle.setText(title);
The only solution for me until now is to use support library version 25.0.0
Other solutions or updates are welcomed

Invisible Text in SearchView

I've the following layout for an Activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_charts_activity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- App bar -->
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/App.Theme.Overlay"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- Tab layout -->
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_80" />
</android.support.design.widget.AppBarLayout>
<!-- View pager -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
With App.Theme.Overlay:
<style name="App.Theme.Overlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlActivated">#android:color/white</item>
<item name="searchViewStyle">#style/App.Theme.SearchView</item>
</style>
And App.Theme.SearchView:
<style name="App.Theme.SearchView" parent="Widget.AppCompat.Light.SearchView">
<item name="searchHintIcon">#null</item>
<item name="queryBackground">?attr/colorPrimary</item>
<item name="submitBackground">?attr/colorPrimary</item>
</style>
The menu actions for the Activity consists in a SearchView:
<?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/action_search"
android:icon="#mipmap/search"
android:title="#string/search_a_product"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="collapseActionView|ifRoom" />
</menu>
When i click the search icon and type some text, I assume it has the same color of the background, because i cannot see it, but the I've search results. This is not happening if the SearchView is not inside the app bar (but I need it). Could you please provide some help with this? Many thanks.

Can't change icon color in action bar

I can't find how change color of icons on my action bar (search and sort icon on the right). I want that all icons will white like home icon on the right.
I can change android:fillColor color in drawable/ic_search.xml, but i want use something like android:tint.
Here is my xml:
layout.xml
<android.support.design.widget.AppBarLayout 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="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="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetStartWithNavigation="0dp">
<ImageView
android:id="#+id/toolbar_logo"
android:layout_width="32dp"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:layout_marginRight="16dp"
app:srcCompat="#drawable/ic_small_logo" />
<Spinner
android:id="#+id/toolbar_categories_spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
toolbar_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools">
<item
android:id="#+id/action_search"
android:icon="#drawable/ic_search"
android:title="#android:string/search_go"
yourapp:actionViewClass="android.support.v7.widget.SearchView"
yourapp:showAsAction="always|collapseActionView" />
<item
android:id="#+id/action_sort"
android:icon="#drawable/ic_sort"
android:title="#string/action_sort"
yourapp:showAsAction="always" />
</menu>
style.xml
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorPrimary">#FF3D3D3D</item>
<item name="android:textColorPrimary">#FFFFFFFF</item>
<item name="android:textColorSecondary">#FFA7A7A7</item>
</style>
Here is screenshot how it looks now:
You can't set their color. Just download and use white icons.
You have to set white icon or set color pragmatically
refer
Change color android.support.v7.widget.SearchView
this might help you,
private void setColor(ImageView imageView) {
int color = Color.parseColor("#EE3A8C");
imageView.setColorFilter(color);
}
image = (ImageView) findViewById(R.id.image);
setColor(image);

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"/>

Categories

Resources