I've just added an Android Toolbar to an app I'm working on. The toolbar placement works correctly with the toolbar layout appearing at the top of the display. However, the toolbar is showing up as a blank colored bar...the App Title and Overflow Icon do not show up in the Toolbar. Any ideas on how to fix?
ToolbarActivity.java:
public abstract class ToolbarActivity extends ActionBarActivity {
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setTitle("app name");
}
}
toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:background="#color/ColorPrimary" >
</android.support.v7.widget.Toolbar>
menu_main.xml:
<menu 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"
tools:context=".MainActivity">
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
android:orderInCategory="100"
app:showAsAction="always" />
</menu>
style.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
</style>
EDIT: Ok so this needs to be set in a completely different way to work. I assumed (because I hadn't worked with the ToolBar much yet, that when using setActionBar(toolbar) it added the custom ToolBar to the content view automatically - but that wasn't the case.
So the big issue is that the ToolBar is never added to the current content view and hence will never be visible until you actually add the ToolBar to the current content view.
There are different approaches, but I'm only gonna show one of the them.
Instead of having a toolbar.xml file, you should add the ToolBar directly into the layout file of the Activity.
Here's an example of the Activity class and the XML to go together with the Activity:
MainActivity.java
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if(toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("My custom toolbar!");
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<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="100dp"
android:background="#android:color/holo_red_light"
android:minHeight="100dp">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
Your styles.xml file is correct as it is.
It's important to note, that after setting your ActionBar to the custom ToolBar, you use the default methods for changing how the ActionBar looks like. For instance setting the title, should be set from getSupportActionBar().setTitle() and not from toolbar.setTitle().
Tutorial: http://www.viralandroid.com/2015/08/android-toolbar-example.html
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<!-- Customize your theme here. -->
</style>
layout file
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#2196F3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.Toolbar>
java
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
In manifest, add the following...
<activity android:name=".Activity.ToolbarActivity"
android:label="#string/yourStringTitle"
/>
Hope this helps
Related
I'm trying to make a Settings activity in my current app that extends from AppCompatPreferenceActivity. I was able to achieve the desired screen but couldn't create a simple toolbar with back key on it. I've already tried using:
inflating custom toolbar
using getSupportActionBar().setDisplayHomeAsUpEnabled(true) of the AppCompatPreferenceActivity
Most of what I'm using came from this!.
I removed the fragment part of it due to the errors it was causing.
Also, I have NoActionBar theme.
So far, I have used this in one of my 'about' and 'help' preferences which work flawlessly:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if (getSupportActionBar() != null) {
getSupportActionBar().setTitle(getString(R.string.about));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
UPDATE:
Got answer here
Yes when you use getSupportActionBar().setDisplayHomeAsUpEnabled(true); for toolbar it should work fine, your implementation seems to be right, but unless your debug or provide the entire code not all could find what the scenario is, also try checking this style.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!--<item name="android:windowContentOverlay">#null</item>-->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="drawerArrowStyle">#style/MaterialDrawer.DrawerArrowStyle</item>
</style>
<!--use item name="drawerArrowStyle" if you are using dark primaryColor in your app, else remove it-->
<style name="MaterialDrawer.DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">false</item>
<item name="color">#android:color/white</item>
</style>
</resources>
toolbar = (Toolbar) findViewById(R.id.toolbar2);
setSupportActionBar(toolbar);
setTitle(getIntent().getExtras().getString("channe_name"));
toolbar.setSubtitle(getIntent().getExtras().getString("channe_name"));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
and also make sure you have the same in xml as well declared
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:background="?colorPrimary"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize"
tools:ignore="Overdraw"
tools:targetApi="lollipop">
How add AndroidX Toolbar to PreferenceScreen
settings.xml
any
PrefsFragment.java
public class PrefsFragment extends PreferenceFragmentCompat {
#Override
public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {
setPreferencesFromResource(R.xml.settings, rootKey);
}
}
activity_settings.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/settings_toolbar"
app:title="#string/header_settings"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/settings_content"
/>
</LinearLayout>
SettingsActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_settings);
Toolbar toolbar = findViewById(R.id.settings_toolbar);
setSupportActionBar(toolbar);
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.settings_content, new PrefsFragment())
.commit();
}
I want to change my Toolbar title color to blue. It stays white. I was able to set the back button but not the title color - am I missing something?
I've tried to change it at 3 different places:
Activity
Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar);
toolbar.setTitleTextColor(0xff00ff99);
setSupportActionBar(toolbar);
activity.xml
<android.support.v7.widget.Toolbar
android:id="#+id/detail_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
android:background="#color/colorPrimaryDark"
android:titleTextColor="#android:color/holo_red_dark"
app:subtitleTextColor="#color/colorPrimaryDark"
app:layout_collapseMode="pin"
app:popupTheme="#style/ToolBarStyle" />
v21 styles.xml
<!-- ToolBar -->
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="titleTextColor">#color/colorPrimaryDark</item>
<item name="android:titleTextColor">#color/colorPrimaryDark</item>
<item name="android:textColorPrimary">#color/colorPrimaryDark</item>
<item name="android:textColorSecondary">#color/colorPrimaryDark</item>
<item name="actionMenuTextColor">#color/colorPrimaryDark</item>
<item name="android:textColor">#color/colorPrimaryDark</item>
</style>
styles.xml
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="titleTextColor">#color/colorPrimaryDark</item>
<item name="android:titleTextColor">#color/colorPrimaryDark</item>
<item name="android:textColorPrimary">#color/colorPrimaryDark</item>
<item name="android:textColorSecondary">#color/colorPrimaryDark</item>
<item name="actionMenuTextColor">#color/colorPrimaryDark</item>
<item name="android:textColor">#color/colorPrimaryDark</item>
</style>
What am I missing?
It stays white no matter what. I've even went through the 150 references to #ffffff in the whole project and nowhere is the toolbar referenced there.
targetSdk 26, running on Android 7.1.1
Create custom Toolbar like this:
toolbar_layout.xml
<?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:fitsSystemWindows="false"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/backgroundColor"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Base.Theme.AppCompat.Light.DarkActionBar">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blue"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Include it in you layout:
<include layout="#layout/toolbar_layout"/>
Use it in your activity's onCreate method:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_new_card);
Toolbar toolbar = findViewById(R.id.toolbar);
TextView toolbarTitle = findViewById(R.id.toolbar_title);
setSupportActionBar(toolbar);
if (getSupportActionBar() != null)
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbarTitle.setText("Your title");
...
}
Hope it will help.
Try to change this:
android:titleTextColor="#android:color/holo_red_dark"
to:
app:titleTextColor="#android:color/holo_red_dark"
in your activity.xml android.support.v7.widget.Toolbar section.
Ok so I have found the answer by literally stack tracing my code.
I have a PagerAdapter returning different fragments. I thought that each Activity was responsible to the Tabbar (it's a Master/Detail pattern for different tabs each) as I've had to set stuff like setSupportActionBar() which I've done in the subsequent Activities.
Stacktracing my code I've realized that there is a CollapsingToolbarLayout being find by view ID. This is where I set the bar's title. From there, I didn't find any title property but I've let auto complete lead me to setCollapsedTitleTextColor and setExpandedTitleColor.
So although the getColor() part is deprecated it's
bar.setCollapsedTitleTextColor(getResources().getColor(R.color.colorPrimaryDark));
bar.setExpandedTitleColor(getResources().getColor(R.color.colorPrimaryDark));
Still no idea why all the other places I've set it at didn't do the trick but very happy it's working now.
In Layout file use the Toolbar as Child layout of AppBarLayout
<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.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.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Style.xml
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Inside MainActivity
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
I am trying to change Actionbar to Toolbar, I have successfully added Toolbar and removed Actionbar, but now the problem I have is that on my layout there will be a blank space above my toolbar where the Actionbar was at before. How can I move my Toolbar up so that it aligns with the top of the screen?
I changed style to:
<style name="AppTheme" parent="Theme.AppCompat.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="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>>
xml file:
<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
android:orientation="vertical">
<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:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#android:color/white"
android:background="#drawable/header_bg_02">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Please try this.i am using this
<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"
>
<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>
</android.support.design.widget.CoordinatorLayout >
And my Apptheme is this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
Hope its help.:)
Did you call setSupportActionBar?
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResource());
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
}
See this for a complete guide: material-design-everywhere
First disable the ActionBar within res/styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
</resources>
Include ToolBar in Activity layout file:
<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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary"/>
</LinearLayout>
In your Activity:
public class MyActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
// Find the toolbar view inside the activity layout
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Sets the Toolbar to act as the ActionBar for this Activity window.
// Make sure the toolbar exists in the activity and is not null
setSupportActionBar(toolbar);
}
Note:
You'll want to add android:fitsSystemWindows="true" to the parent layout of the Toolbar to ensure that the height of the activity is calculated correctly.
When using the support library, make sure that you are importing android.support.v7.widget.Toolbar and not android.widget.Toolbar.
I include this information from here. Refer this for more.
Try to put theme for that activity in AndroidMenifiest.xml file like
<activity
android:name=".SplashActivity"
android:label="#string/app_name"
android:screenOrientation="portrait"
android:theme="#style/Theme.AppCompat.Light.NoActionBar" />
Other code looking fine
I am trying to use the toolbar using the Android Developers Guide for enabling material theming on pre-lollipop devices.
My app theme extends Theme.AppCompat.Light.NoActionBar as so:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
and windowActionBar is set to false as so:
<style name="AppTheme" parent="AppBaseTheme">
<item name="colorPrimary">#EEEEEE</item>
<item name="windowActionBar">false</item>
</style>
My MainActivity looks like this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
but the toolbar appears in the middle of the screen rather than on top. What am I doing wrong?
activity_main.xml:
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="40dp"
android:background="#EEEEEE" />
</android.support.v4.widget.SwipeRefreshLayout>
Your toolbar has nothing to do in the SwipeRefreshLayout
you have to use a LinearLayout (vertical) surrounding the Toolbar and SwipeRefreshLayout.
<LinearLayout orientation="vertical">
<Toolbar />
<SwipeRefreshLayout>
</SwipeRefreshLayout>
</LinearLayout>
I'm using the new Toolbar instead of the ActionBar.
On Android 5.0 everything is just fine:
On 4.4 it doesn't show the Overflow icon (though the function is there):
This is the toolbar.xml I'm using:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/HeaderBar"
app:theme="#style/ActionBarThemeOverlay"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
android:id="#+id/toolbar_actionbar"
app:titleTextAppearance="#style/ActionBar.TitleText"
app:contentInsetStart="?actionBarInsetStart"
android:layout_width="match_parent"
android:layout_height="?actionBarSize" />
you should probably use ActionBarAcitivity if you don't already,
and then set
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
or inherit from another theme from AppCompat
also in your onCreate you should set the tool bar as your actionbar:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
}
source: chris bane's blog
In the styles.xml it is needed to add the color for pre 5.0 versions:
<style name="Theme.APP.Base" parent="Theme">
<item name="actionBarIconColor">#fff</item>
...
</style>