I'm trying to use a collapsingToolbarLayout to show an image and a bunch of options inside a recyclerview, what I have done is the followin
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="bottom"
app:expandedTitleMarginEnd="#dimen/activity_horizontal_margin"
app:expandedTitleMarginStart="#dimen/activity_horizontal_margin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="#string/app_name">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/ofertas_gradient" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This code, outputs this layout
Now, this is fine, and its working as espected in my fragment, the thing is that I also have the appbar configured my my NavigationController and is also poping above my toolbar
So, after swiping up, my toolbar collapses but I also have my appbar
So, what I did is this at my fragment to setup my toolbar
toolbar.apply {
setNavigationOnClickListener { findNavController().navigateUp() }
}
Now, I tried with actionBar.hide() to hide my actionbar and only let my toolbar to show up, but I cant get the actionBar, also I tried to setHomeDisplay as true with the toolbar but since I cant get the actionBar, I also cant add my navigationUp arrow to my toolbar
How can I also get the appBar from every fragment ?
Styles
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.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:windowLightStatusBar">true</item>
<item name="actionBarTheme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/negro</item>
<item name="fontFamily">#font/cera_pro_light</item>
</style>
</resources>
Thanks
You're using Toolbar and ActionBar at the same time.
Change your styles.xml by changing DarkActionBar -> NoActionBar.
If you need ActionBar callbacks on your Activity or Fragment, you need to set your Toolbar as ActionBar.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.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:windowLightStatusBar">true</item>
<item name="actionBarTheme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.NoActionBar">
<item name="android:textColorPrimary">#color/negro</item>
<item name="fontFamily">#font/cera_pro_light</item>
</style>
</resources>
Optional (In your Activity's onCreate())
setSupportActionBar(toolbar)
Related
I have a toolbar.xml that is included to all activities
<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="wrap_content"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ToolBarStyle"
app:popupTheme="#style/ToolBarStyle">
<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/ToolBarStyle"
app:popupTheme="#style/ToolBarStyle"
app:subtitleTextColor="#color/secondaryTextColor"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:titleTextColor="#color/primaryTextColor" />
</android.support.design.widget.AppBarLayout>
<View
android:id="#+id/toolbar_shadow"
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/toolbar_drops_shadow" />
</LinearLayout>
On one of my activities I have back arrow and by default it's dark grey. I'd like to make it white. For this I create a theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryDarkColor</item>
<item name="colorAccent">#color/secondaryColor</item>
<item name="android:textColorHint">#color/hintTextColor</item>
</style>
<!-- ToolBar -->
<style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:gravity">center</item>
<item name="colorControlNormal">#FFF</item>
</style>
The problem is that this theme is not applied in KitKat to my toolbar. If I put <item name="colorControlNormal">#FFF</item> to AppTheme back arrow, menu icon become white. The problem is that it makes white some tints of EditText, everywhere.
Do you have an idea why this one does not work and how I can correctly apply a theme to the toolbar?
So I've looked around and can't find an answer to this. I have a toolbar which shows up fine for anything lollipop and up but looks like the following for pre-lollipop devices:
Here is my code for the styles and everything:
style xml file
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:dropDownListViewStyle">#style/appStyleSpinner</item>
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowNoTitle">true</item>
<item name="actionModeStyle">#style/myActionMode</item>
</style>
<style name="myActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="background">#color/primaryColor</item>
</style>
toolbar xml file
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Light">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
...
I figured out the problem! In my xml file for the main screen, I had
<include layout="#layout/app_bar"
android:id="#+id/app_bar"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/parmesan_bg"
android:scaleType="centerCrop"
android:contentDescription="photo of delicious dinner"/>
which was causing the toolbar to load behind the image instead of in front of it. So move the "include layout" to after the imageview and voila, problem solved!
There are a lot of questions about making transparent toolbar. but none of the given answers have solved my problem.
my issue here is that,i want to make transparent toolbar and it should has primary color background only when user scrolled up or down. But initially it has to be transparent until scroll up/down event occurred.
for that i have following theme:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
activity_main.xml :
<android.support.v4.widget.DrawerLayout
...
/>
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
.....
</android.support.v4.widget.DrawerLayout>
app_bar_main:
<android.support.design.widget.CoordinatorLayout
....
.... />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
....
....
</android.support.design.widget.CoordinatorLayout>
But instead of getting transparent toolbar, i got a toolbar with white background.
can you please check what is wrong in my theme.xml?
I am using design support library 23.1.1
Thanks
I am trying to bring the Navigation drawer on top of the ActionBar/Toolbar in the following code. The problem is, I didn't add toolbar in the xml file and the actionbar setting has been set to false in the style.xml file. However still an actionbar thingy is being added automatically in the window. I don't know what is causing this actionbar/toolbar to be added.
Following is the code:
NavigationDrawer_Activity.xml
<?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="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.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" />
</android.support.design.widget.AppBarLayout>**
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Layout Here"
android:gravity="center"/>
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_view_header_layout"
app:menu="#menu/navigation_view_list_items"/>
</android.support.v4.widget.DrawerLayout>
styles.xml
<resources>
<!-- 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>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Questions:
If I am not adding this toolbar, what is causing it to appear?
How to bring the NavigationDrawer on top of this automagically added toolbar?
Best
Remove the windowActionBar property and change your style parent to this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
You are adding a toolbar here:
<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" />
Remove this in order to not display a Toolbar?
In manifest
change
android:theme="#style/AppTheme"
to
android:theme="#style/Theme.AppCompat.NoActionBar"
I'm trying to switch over an app to use Theme.Material, I have a toolbar setup with fitsSystemWindows set to true yet my activity extends below the navigation bars!!
Here's my theme
<style name="FlowTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowFullscreen">false</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="cpvColor">#color/accent</item>
<item name="cpvStrokeWidth">3dp</item>
<item name="cpvCircleAnimDuration">1400</item>
<item name="cpvSweepAnimDuration">950</item>
</style>
Nothing is triggerend in my activity to flag fullscreen
What's going on? how do I fix this so that it's not fullscreen?
Edit: Here's my main activity XML
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color"
android:orientation="vertical">
<include
android:id="#+id/toolbar_actionbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ActMain"
tools:ignore="MergeRootFrame"
android:layout_below="#+id/toolbar_actionbar" />
</LinearLayout>
<fragment
android:id="#+id/fragment_drawer"
android:name="com.metalab.flow.ui.fragments.FrNavigationDrawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fr_navigation_drawer" />
this is the reason
Theme.AppCompat.Light.NoActionBar // i show no actionbar..
put this in your activity xml layout, if its linearLayout let it be the first child, if its RelativeLayout let it be on top and all children should align to it..
<android.support.v7.widget.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="wrap_content"
android:minHeight="?attr/actionBarSize"
app:theme="#style/FlowTheme" />
style
<style name="FlowTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowFullscreen">false</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="cpvColor">#color/accent</item>
<item name="cpvStrokeWidth">3dp</item>
<item name="cpvCircleAnimDuration">1400</item>
<item name="cpvSweepAnimDuration">950</item>
</style>
As it turns out I was using this class, for a core WebView bug fix https://github.com/madebycm/AndroidBug5497Workaround
Removing it's use fixed my issue, however the WebView resize bug lives on...
You are using wrap_content in your toolbar, and if you havent given support to it, then it hasn't content to show. I recomend you that change the height of the toolbar to:
android:layout_height="?attr/actionBarSize"
And you should give support in your java file to show the title and buttons:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
setSupportActionBar(toolbar);
EDIT: I read some of other replies, and I add more info because I suppose that you had the toolbar defined in other xml. This is an example of toolbar that you should include:
<android.support.v7.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:background="?attr/colorPrimary"
android:translationZ="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />