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>
Related
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 use below code to show an actionbar on the activity. But the background of the action bar is not transparent. I have searched some articles about how to set the actionbar background transparent but it doesn't seem to work for me. I have attached all the layout and theme code as below. Please help to check what I am missing here.
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.scanner_activity);
Toolbar toolBar = (Toolbar)findViewById(R.id.scanner_toolbar);
toolBar.setTitle("Title");
setSupportActionBar(toolBar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
Below is the activity layout xml file:
<RelativeLayout 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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/scanner_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:theme="#style/AppScannerToolBarTheme"
/>
<com.journeyapps.barcodescanner.DecoratedBarcodeView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/scanner_toolbar"
android:layout_alignParentBottom="true"
android:id="#+id/zxing_barcode_scanner"
app:zxing_use_texture_view="true"/>
</RelativeLayout>
Below is the AppScannerToolBarTheme for the toolbar:
<style name="AppScannerToolBarTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:backgroundStacked">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
</style>
EDIT:
I have added below code but it still doesn't work:
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
toolBar.setAlpha(0.5f);
toolBar.setBackground(new ColorDrawable(Color.TRANSPARENT));
Below image is what I want to achieve:
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#0000")));
OR
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
Hope this will work for you thanks .
Toolbar is a view, so you could use alpha method from view class.
toolbar.setAlpha(0.5f);
After following the instructions here:
http://developer.android.com/training/appbar/setting-up.html
The appbar is still not showing, as we can see here:
However, I assume the Toolbar exists in the program, since I don't get any NullPointException on the places where the program used to crash. So I assume is more of a stylesheet problem.
Here's the activity 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. -->
<android.support.v4.widget.DrawerLayout
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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="pt.bluecover.wearable3d.DrawerActivity">
<!-- placed here as explained #
http://developer.android.com/training/appbar/setting-up.html -->
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/AppBar"
app:popupTheme="#style/Popup"/>
<!-- 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" />
<!-- 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="pt.bluecover.wearable3d.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/drawer_drawer" />
</android.support.v4.widget.DrawerLayout>
And here's the styles.xml
<resources>
<style name="AppBar" parent="ThemeOverlay.AppCompat.ActionBar"/>
<style name="Popup" parent="ThemeOverlay.AppCompat.Light" />
<style name="GdxTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation</item>
<item name="android:windowContentOverlay">#null</item>
</style>
</resources>
And here's on I'm initializing it, on a class which AppCompatActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawer);
//lets set the toolbar
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
mNavigationDrawerFragment = (NavigationDrawerFragment)
getFragmentManager().findFragmentById(R.id.navigation_drawer);
mTitle = getTitle();
// Set up the drawer.
mNavigationDrawerFragment.setUp(
R.id.navigation_drawer,
(DrawerLayout) findViewById(R.id.drawer_layout));
}
So, does anyone knows why the action bar doesn't even show up?
Extra info: the fragment in display is a libGDX fragment.
"Theme.AppCompat.Light.NoActionBar"
<style name="GdxTheme" parent="Theme.AppCompat.Light.NoActionBar">
Maybe you should change that "no action bar"
You are hiding the toolbar under the framelayout.change your layout to
<android.support.v4.widget.DrawerLayout..>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar..>
<FrameLayout ../>
</LinearLayout>
<!-- navigation Fragment -->
<fragment ../>
</android.support.v4.widget.DrawerLayout>
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