I am trying to create a layout which includes toolbar and tablayout inside appbarlayout. It works fine but shows a line between toolbar and appbarlayout. I am setting toolbar background color dynamically like:
toolbar.setBackgroundColor(Color.parseColor("myColor"));
tabLayout.setBackgroundColor(Color.parseColor("myColor");
I have tried setting app:elevation="0dp" on Appbar and Toolbar but it doesn't work.
<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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
style="#style/MyTabStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
MyTabsStyle.xml:
<style name="MyTabStyle" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/colorWhite</item>
<item name="tabIndicatorHeight">2.5dp</item>
<item name="android:elevation">2dp</item>
<item name="tabIconTint">#color/colorWhite</item>
<item name="tabSelectedTextColor">#color/colorWhite</item>
<item name="tabTextColor">#color/white_trans</item>
</style>
Styles.xml:
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light" />
Try this
set elevation to 0dp in your MyTabsStyle.xml
MyTabsStyle.xml:
<style name="MyTabStyle" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/colorWhite</item>
<item name="tabIndicatorHeight">2.5dp</item>
<item name="android:elevation">0dp</item>
<item name="tabIconTint">#color/colorWhite</item>
<item name="tabSelectedTextColor">#color/colorWhite</item>
<item name="tabTextColor">#color/white_trans</item></style>
You can wrap Toolbar and TabLayout with AppBarLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
app:tabBackground="?attr/colorPrimary"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout/>
Hope it helps.
Here the modified code in below.
<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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
style="#style/MyTabStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Add app:elevation="0dp" in AppBarLayout to hide the shadow in toolbar.
In your mytheme.xml change update AppTheme.AppBarOverlay style as :
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" >
<item name="elevation">0dp</item>
</style>
Done.
Try this
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorAppBar"
android:elevation="0dp">
Related
So, I'm struggling for a few days meddling with lots of different attributes, but still couldn't figure out how to change the text color of a Collapsing toolbar's title. Any takes on this? Here's a very simple layout I've been experimenting with. The app:titleTextColor="#color/colorPrimary" produces no effect.
<?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:layout_height="wrap_content"
android:id="#+id/appBarLayout"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="#color/colorPrimary"
app:expandedTitleGravity="center|top"
app:title="#string/app_name"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/zebra"
android:scaleType="centerCrop"
android:contentDescription="#string/zebras"
/>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:titleTextColor="#color/colorPrimary"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Add styles in styles.xml
<style name="CollapsedAppBarText" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/blue</item>
<item name="android:textStyle">normal</item>
</style>
then Activity/ fragment use like this
collapsingToolbar = findViewById<View>(R.id.collapsing_toolbar) as CollapsingToolbarLayout
collapsingToolbar?.setCollapsedTitleTextAppearance(R.style.CollapsedAppBarText)
As you can see, every time I open this activity, the padding below the appbarlayout is randomly removed or added. I am aware that the problem is might be caused by the fitsystemwindow = true attribute, because when this attribute is set i don`t have any control over the padding. I would like to be able to control this padding myself, any idea what I could be doing wrong or how to fix that problem? Here is my code:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="200dp"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_behavior="com.bulgaria.mezdra.ivanmihaylovivanov.bulgarito.components.FlingBehavior">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:visibility="visible"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:scrimAnimationDuration="0">
<com.bulgaria.mezdra.ivanmihaylovivanov.bulgarito.components.FrameLayoutWithAspectRatio
android:id="#+id/photo_container"
android:layout_width="match_parent"
android:layout_height="#dimen/destination_image_view_with_aspect_ratio_height"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/swipeImagesViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<me.relex.circleindicator.CircleIndicator
android:id="#+id/circleIndicator"
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_xlarge"
android:layout_gravity="bottom" />
</com.bulgaria.mezdra.ivanmihaylovivanov.bulgarito.components.FrameLayoutWithAspectRatio>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:clipToPadding="false"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
and this is the style
<style name="AppTheme.DestinationDetail" parent="AppTheme">
<item name="android:windowEnterTransition">#transition/card_exit</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
</style>
Trying to uppercase the title of a toolbar:
Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/App.Theme.ToolbarTitleUppercase"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleTextAppearance="#style/App.Theme.ToolbarTitleUppercase" />
Toolbar style
<style name="App.Theme.ToolbarTitleUppercase" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textAllCaps">true</item>
</style>
This is not having any effect on the title text. Any ideas?
This is with support library 27.1.1 set app:theme
<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="?attr/actionBarSize"
app:theme="#style/ToolbarTextAppearance"
/>
Then in ToolbarTextAppearance in styles.xml
<style name="ToolbarTextAppearance">
<item name="textAllCaps">true</item>
<item name="android:textAllCaps">true</item>
</style>
Based on Tim's answer, here's another way to do it:
styles.xml
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<!--<item name="android:textSize">18sp</item>-->
<item name="textAllCaps">true</item>
<item name="android:textAllCaps">true</item>
</style>
toolbar.xml
<android.support.v7.widget.Toolbar
...
app:titleTextAppearance="#style/Toolbar.TitleText"/>
You can create a toolbar.xml on layout folder:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.PopupOverlay"
tools:showIn="#layout/activity_layout">
<TextView
android:id="#+id/my_title"
android:text="Title text"
android:textAllCaps="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Include it on the xml you want to use the toolbar:
<include layout="#layout/toolbar"/>
And then inside your view:
getActivity().findViewById(R.id.toolbar);
getActivity().getSupportActionBar().setDisplayShowTitleEnabled(false);
Hope it helps!
Use Material Toolbar like this:
put app:titleCentered="true" to make your text in the center
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:background="#color/main_color"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleCentered="true"
app:titleTextAppearance="#style/Toolbar.TitleText" />
I'm using TabLayout, and I'm getting these weird borderlines and I can't tell why.
I'm talking about those diagonal ones in grey coming from the sides - how can I remove them?
activity_main.xml
<android.support.design.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"
android:fitsSystemWindows="true"
tools:context="com.smt.smt.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_layout"
app:tabMode="fixed"
app:tabGravity="fill">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_pager"/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Style being used as this activity theme
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#android:color/transparent</item>
</style>
I want to remove the divider line like in the picture above. I've tried anything but still no luck. This is what I have tried until now.
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="MaterialDrawerTheme.Light.DarkToolbar">
<item name="android:windowContentOverlay">#null</item>
<item name="actionBarDivider">#null</item>
<item name="android:actionBarDivider">#null</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowContentOverlay">#null</item></style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:fillViewport="false" />
<com.jaredrummler.materialspinner.MaterialSpinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
/>
</android.support.design.widget.AppBarLayout>
<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>
</layout>
Is anyone has the solution for this issue ? Sorry for my bad English and thanks in advance !
In the end, I tried to raise my minSdkVersion from 15 to 21 and add the app:elevation="0dp" to the code. It worked perfectly. Thanks guys for the feedbacks !
You have to set elevation="0dp" like:
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay"> </android.support.design.widget.AppBarLayout>
But it seems that this elevation is from your parent activity not of your fragment. So make sure in your activity you are extending toolbar_layout and that activity's toolbar inside of AppBarLayout set app:elevation="0dp will solve your problem.
Or
Also check your res-> values-> style.xml and style-v21.xml files you set:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowContentOverlay">#null</item>
</style>
Or
If you are not using toolbar you have to call setElevation(0) on your action bar. Note that if you're using the support library you must call it to that like so:
getSupportActionBar().setElevation(0);
It's unaffected by the windowContentOverlay style item, so no changes to styles are required
See this layout from Chris Banes cheesesquare sample:
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
It is not a divider but Toolbar elevation. You should set it to the maximum elevation of AppBarLayout and the Toolbar
int elevationAppBar = ViewCompat.getElevation(mAppBarLayout);
int elevationToolbar = getSupportActionbar().getElevation();
elevationToolbar = Math.max(elevationToolbar, elevationAppBar);
getSupportActionBar().setElevation(elevationToolbar);
You should set app:layout_insetEdge="none" and app:elevation="0dp" in AppBarLayout.I hope that it is ok.
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
app:layout_insetEdge="none"
>
....
</android.support.design.widget.AppBarLayout>
(source: androidhive.info)
Take a look this google developer resource :
https://www.google.com/design/spec/components/tabs.html#tabs-types-of-tabs
http://developer.android.com/samples/SlidingTabsBasic/index.html
http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/