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 :)
Related
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>
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 am trying to change the font of the toolbar's title.
Here is my toolbar layout:
<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_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#666666"
app:titleTextAppearance="#style/MyText"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
And in my styles.xml
<style name="MyText">
<item name="fontPath">fonts/myFont.ttf</item>
</style>
If I do not set app:titleTextAppearance, the toolbar uses the system font. When I set it, the font gets smaller, but it is still in the system font. Am I doing something wrong?
Any suggestion, comments or answers much appreciated.
Edit:
I tried moving the style to styles-text.xml but no luck
Edit2:
For now, I am using a SpannableString and TypefaceSpan to make this work. Hope it helps someone.
This works:
<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_height="wrap_content"
android:layout_width="match_parent"
app:titleTextAppearance="#style/ActionBarTitleStyle"/>
Then have this in your styles.xml
<style name="ActionBarTitle" parent="android:Widget.TextView">
<!-- The action bar title font -->
<item name="android:fontFamily">sans-serif-light</item>
<!-- Customizes the color of the action bar title-->
<item name="android:textColor">#FF0000</item>
<!-- Customizes the size of the action bar title-->
<item name="android:textSize">24sp</item>
</style>
In my case, the font:family is only applied if I use "android:titleTextAppearance" instead of "app:titleTextAppearance" but this only works for api 21 or higher
I am trying to use toolbar (android.support.v7.widget.Toolbar) with navigation drawer. But it shows exception "Error inflating class android.support.v7.widget.Toolbar". Code is working fine if I don't use android.support.v7.widget.Toolbar in xml. My activity is extending android.support.v7.app.ActionBarActivity. Here is my main_activity.xml
<!--
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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- We use a Toolbar so that our drawer can be displayed
in front of the action bar -->
<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" />
</LinearLayout>
</FrameLayout>
<!--
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"
class="com.jooleh.android.merchant.NavigationDrawerFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
Styles.xml
<style name="AppBaseTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/red_primary_500</item>
<item name="colorPrimaryDark">#color/red_primary_700</item>
<item name="colorAccent">#color/green_secondary</item>
<item name="windowActionBar">false</item>
</style>
Styles-v11
<style name="AppBaseTheme" parent="Theme.AppCompat">
<!-- API 11 theme customizations can go here. -->
<item name="windowActionBar">false</item>
</style>
Styles-v14
<style name="AppBaseTheme" parent="Theme.AppCompat">
<!-- API 14 theme customizations can go here. -->
<item name="windowActionBar">false</item>
</style>
I am testing on jellybean, minSdkVersion="16" and targetSdkVersion="21".
I was able to solve this problem by replacing the following:
In your Toolbar layout, replace:
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
with
android:minHeight="#dimen/abc_action_bar_default_height_material"
android:background="#color/myColor"
It might be late, but helpful for someone.
I struggled a lot for same problem and then I changed from
android.support.v7.widget.Toolbar
to
android.widget.Toolbar
and it worked, I dont know the reason. If anyone has any insight pls share