My issue is, that AppBarLayout, together with toolbar is appearing not on top of the screen, thus blocking the view of the included content. It can be seen in the image. I am sure I am just missing something here.
Also, here is the xml code
<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>
<include layout="#layout/content_search" />
EDIT: with my theme set to NoActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
it looks like this:
In res/values/styles set your style to NoActionBar theme, like:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Now, you should lose your regular ActionBar and you can work with your toolbar.
EDIT: What OP tried to acomplish was position included layout below AppBar layout in CoordinatorLayout. That's accomplished by adding app:layout_behavior="#string/appbar_scrolling_view_behavior" to include layout.
Set the layout_width and layout_height to match parent for the include layout(The layout that is inside the include layout).
you should set your theme to any NoActionBar theme such as
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorSecondary</item>
<item name="colorAccent">#color/google_blue</item>
</style>
Related
I use a very simple style to format my Toolbar, I use android:elevation to display a shadow under the Toolbar like this:
<style
name="AppToolbarTheme"
parent="AppTheme">
<item name="android:background">#color/colorPrimary</item>
<item name="android:titleTextColor">#android:color/white</item>
<item name="android:elevation">4dip</item>
</style>
And I'm applying it simply like that:
<Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppToolbarTheme"/>
The shadow displays under the toolbar like I want, howerver it is also somehow applied to the title of the toolbar which looks very weird:
Remove <item name="android:elevation">4dip</item> from style and put it in toolbar xml
<Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppToolbarTheme"
android:elevation="4dp"/>
I was looking at this and helped me to identify my mistake, which I think it is the same as yours:
You are using style properties (Widget) in a theme. Theme are used to define global properties such as colorOnSurface, colorSurface, primaryColor, etc. Here you are using:
<item name="android:background">#color/colorPrimary</item>
<item name="android:titleTextColor">#android:color/white</item>
<item name="android:elevation">4dip</item>
which are specific to a toolbar.
I recommend to define a style like below (you can set whatever parent you want as long as it is Widget.whatever.Toolbar)
<style name="Widget.Toolbar" parent="Widget.MaterialComponents.Toolbar.Surface">
<item name="elevation">4dp</item>
</style>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.Toolbar"/>
What I am doing at the moment is using appbar, so you can apply elevation there instead:
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:theme="#style/Theme.AppBarTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.AppBarLayout>
<style name="Theme.AppBarTheme">
<item name="elevation">6dp</item>
<item name="toolbarStyle">#style/Widget.Toolbar</item>
</style>
<style name="Widget.Toolbar" parent="Widget.MaterialComponents.Toolbar.Surface">
<item name="android:titleTextColor">#android:color/white</item>
</style>
You use
android:theme="#style/AppToolbarTheme"
in your toolbar and in that case it add elevation to nested components as well 'cause you define a theme.
Use
style="#style/AppToolbarTheme"
instead.
When I first start looking over this question I found this question, but the answer didn't work for me. I am working on a KitKat phone, but from what I read, this can be done on a pre-lollipop versions using the AppCompat library. I am using this GitHub repo, and more specificaly this code sample to create nested preference screen.
Here is my AppTheme.SettingsTheme for the SettingActivity in the code sample:
<style name="AppTheme.SettingsTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="titleTextStyle">#android:color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#fff</item>
</style>
This line: <item name="colorControlNormal">#fff</item> changes the Toolbar from having a white text and black back arrow, to having both the text and back arrow appear white (which is good).
The issue is that I have a CheckBoxPreference which is tinted with this line also, so when it in not check, I can barely see it (box color is white).
I tried creating a special theme just for the toolbar (again from this answer) and doing the <item name="colorControlNormal">COLOR</item>, but its just doesn't affect to toolbar.
I also tried to tint the CheckBoxPreference alone, but it seems that in involves creating a custom layout for it, and this brings a lot more work.
Here is my toolbar layout, currently with no specific theme:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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="wrap_content"
tools:context=".ui.activities.settingsActivity.SettingsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="?colorPrimary"
android:minHeight="?actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:navigationIcon="?homeAsUpIndicator"
app:title="#string/activity_settings_title"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
Can anybody explain how to tint the CheckBoxPreference and Toolbar seperatly? I don't care which one of them I tint using the ActivityTheme and which one I tint on its custom theme. The answers I found didn't work.
Use the theme for your Toolbar specifically, instead of for your entire Activity. This is what the ThemeOverlay styles are meant for (they use the colorControlNormal attribute when necessary). You can also define a separate "popup" theme if you would like light-themed pop-ups from your dark Toolbar:
<style name="SettingsTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="SettingsTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="SettingsTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
Then you can apply these styles in your layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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="wrap_content"
android:theme="#style/SettingsTheme.AppBarOverlay"
tools:context=".ui.activities.settingsActivity.SettingsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?colorPrimary"
android:minHeight="?actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:navigationIcon="?homeAsUpIndicator"
app:title="#string/activity_settings_title"
app:popupTheme="#style/SettingsTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
I am trying as best I can to style the ActionBar (i.e. an android.support.v7.widget.Toolbar) in my app, but it just won't work. I am following the official documentation when trying to achieve this. What I am really trying to do is to make the title color white. It is currently displayed in black. My target API is 11.
What am I doing wrong?
res/values/themes.xml
<resources>
<!-- Base theme applied no matter what API -->
<style name="MMTheme.Base" parent="Theme.AppCompat.Light">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColor">#color/mm_dark_gray</item>
<item name="colorPrimary">#color/mm_brown</item>
<item name="colorPrimaryDark">#color/mm_dark_gray</item>
<item name="colorAccent">#color/mm_green</item>
<item name="android:actionBarStyle">#style/MMActionBar</item>
<item name="android:actionBarTabTextStyle">#style/MMActionBarTabText</item>
<item name="android:actionMenuTextColor">#color/mm_green</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MMActionBar</item>
<item name="actionBarTabTextStyle">#style/MMActionBarTabText</item>
<item name="actionMenuTextColor">#color/mm_green</item>
</style>
<style name="MMTheme" parent="MMTheme.Base"></style>
<!-- ActionBar style -->
<style name="MMActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#color/mm_green</item>
<item name="android:titleTextStyle">#style/MMActionBarTitleText</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">#style/MMActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MMActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/mm_white</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
<!-- ActionBar tabs text -->
<style name="MMActionBarTabText" parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#color/mm_green</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
</resources>
The inflated android.support.v7.widget.Toolbar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mm_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"/>
In the Activity
// Setup main Toolbar
Toolbar toolbar = (Toolbar) mInflatedActivity.findViewById(R.id.mm_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setIcon(R.drawable.ic_launcher);
I have tried everything I can think of and searched a lot online, but I cannot make it work. What am I missing?
Current result is (nevermind the search icon):
Adding style="#style/MMActionBar" to the xml properties of the android.support.v7.widget.Toolbar results in this:
Changing main parent theme to Theme.AppCompat.Light.DarkActionBar does nothing.
Just use this in yout layout xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red600"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Set theme in xml itself to ThemeOverlay.AppCompat.Dark.ActionBar which will make title text white.
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
And I guess this is the right way to theme Toolbar, since according to official Android Developer blog
Styling of Toolbar is done differently to the standard action bar, and
is set directly onto the view.
Here's a basic style you should be using when you're using a Toolbar
as your action bar:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
The app:theme declaration will make sure that your text and items are
using solid colors (i.e 100% opacity white).
I have faced same problem. The following solution solved my problem.
For this you need to make changes at two places.
1.Modify your toolbar xml like this,
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:id="#+id/TV_tool_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My App Name"
android:textSize="18sp"
android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>
Modify like this in your activity file.
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(null);
Thats it. This will make your title color white. Cheers..!
Use this to change colors of the letters on the toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
I'm testing the new Toolbar and AppCompat theme on Android and ran into a problem. My toolbar title text looks normal-sized on portrait mode but it became rather small on landscape mode although I didn't do anything in the code to change the title's text size. Here are the screen shots:
activity_main.xml:
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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"
tools:context="com.techfunmyanmar.jujaka.ui.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead. -->
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment
android:id="#+id/navigation_drawer"
android:name="com.techfunmyanmar.jujaka.ui.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<!-- Main application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
</style>
</resources>
I tried to set android:titleTextAppearance of the toolbar but the style wasn't being applied. Then I realized I'm using the AppCompat theme so I used app:titleTextAppearance and the style is now being applied. It looks like the small letters in landscape are a problem in the built-in AppCompat.Toolbar.Title style itself so I overrode it to set the font size manually. The final code:
Toolbar XML:
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:titleTextAppearance="#style/ToolbarTitle"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Toolbar Style:
<style name="ToolbarTitle" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20sp</item>
</style>
AOSP Issue #170707 was written regarding the change in text size for title and subtitle. Project Member response was "Works as intended. Identical to framework behavior." Although I don't find changing the text size to be the desirable default behavior, it sounds like the AppCompat engineers had to maintain consistency with the (flawed) framework behavior. Developers are then left to override the default styles as described in Chilly Chan's answer.
Additions to Chilly Chan's answer:
1) The subtitle text size can be controlled in a similar way by defining another style derived from TextAppearance.Widget.AppCompat.Toolbar.Subtitle.
2) Default values for title/subtitle size in portrait orientation are 20dp/16dp (on my Galaxy S3, 4.4.2.). Chilly Chan's example specifies "17sp". Use "sp" only if you want to let user preference setting affect title/subtitle size.
I was looking for a solution without custom Toolbar, but with custom style and this code did the trick for me:
styles.xml
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="titleTextStyle">#style/MyTitleTextStyle</item>
</style>
<style name="MyTitleTextStyle" parent="#style/TextAppearance.AppCompat.Title">
<item name="android:textSize">20sp</item> <!-- Default for portrait is 20sp and for landscape 14sp-->
</style>
AndroidManifest.xml
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:theme="#style/MyTheme"/>
Where the MainActivity extends AppCompatActivity; tested on API 19, 22 and 23.
Try to add this to your toolbar section under the activity_main.xml.
android:minHeight="?android:attr/actionBarSize"
I also noticed that you are using standard dark action bar , suggest to use Theme with no action bar , defined a new toolbar where
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
<android.support.v7.widget.Toolbar
android:id=”#+id/my_awesome_toolbar”
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”?attr/actionBarSize”
android:background=”?attr/colorPrimary” />
I think it has to do with some layout changes performed when you rotate the device, ast it looks like you can prevent the resize by adding something like
android:configChanges="orientation|screenSize"
in the AndroidManifest.xml for the activity you're in. As always, android:configChanges has more implications so should be used only if you really need it :)
I use the new Toolbar in my Android App. I want the same behauviour theme like "Light.DarkActionBar". So that my content background are white. The textes etc. are black. And my ActionBar/Toolbar have a custom background and also white Textes and Overflow-Menus.
So I implement these in my styles.xml:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/accentColor</item>
<item name="colorAccent">#color/accentColor</item>
</style>
The Toolbar implementation loks like that:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
But it looks not like a want. The Toolbar-Text and the Toolbar back-Button (getSupportActionBar().setDisplayHomeAsUpEnabled(true)) looks still black!!!
Want I doing wrong?
Ok, I found the bug. The
xmls:app
namenspace had the wrong URI. It was
xmlns:app="http://schemas.android.com/tools"
for whatever reason...
I changed it to the right one:
xmls:app="http://schemas.android.com/apk/res-auto"
Now it works like I want.