I'm testing material design and i'm developing an app using extended toolbar. My app is very simple: The main activity extends ActionBarActivity and my layout looks like:
<LinearLayout 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=".WeatherActivity"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_toolbar"
android:layout_height="128dp"
popupTheme="#style/ActionBarPopupThemeOverlay"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:text="#string/location_placeholder"
android:textAlignment="viewStart"
android:layout_gravity="start"
/>
</LinearLayout>
Now i'd like to show as title the current location. The first thing i'm noticing is in my Android Emulator (API 18) the title doesn't seem to respect material guidelines about left margin bottom margin, it appears on the left side and entered vertically inside the Toolbar. So Should i use tool bar title (toolbar.setTitle) or something else?
Second if i want to create something more complex like Title and a short description (as shown in the material guidelines in the layout structure) what should be my layout?
Thx for your support!
Ok your activity extends ActionBarActivity so you also have to make sure that the theme for this activity is a child of either Theme.AppCompat.NoActionBar or Theme.AppCompat.Light.NoActionBar. If you are not using the Theme.AppCompat variants then you can alternatively add the following lines to your theme:
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
Then all you need to do is add the Toolbar to your layout (which it looks like you already have):
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_toolbar"
android:layout_height="128dp"
popupTheme="#style/ActionBarPopupThemeOverlay"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
Then in your activity set the Toolbar to be your ActionBar via setSupportActionBar:
Toolbar mToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(mToolbar);
That last part is where all the magic happens because you're saying "Android, take this Toolbar widget and use it exactly how you would use the SupportActionBar". This means that if you want to set the title/subtitle all you need to do is call:
getSupportActionBar().setTitle("Toolbar Title");
getSupportActionBar().setSubtitle("Toolbar Subtitle");
This also means that you can use the same callbacks to create a menu on the Toolbar.
To answer your questions directly:
So Should i use tool bar title (toolbar.setTitle) or something else?
You can actually use either, toolbar.setTitle() or getSupportActionBar().setTitle()
Second if i want to create something more complex like Title and a short description (as shown in the material guidelines in the layout structure) what should be my layout?
Toolbar supports Titles and Subtitles so you should be set. I would checkout the documentation just to see what all the Toolbar supports. As a general rule, if the Actionbar could do it, the Toolbar can. If you have crazy requirements beyond what is supported by the Toolbar then just remember that the Toolbar is just a fancy ViewGroup so you can add widgets/views just as easily as if it were a LinearLayout.
Related
This question has sort of been asked but not really, what I'm looking to do is have a highly customized toolbar for our app, I recently implemented a drawer menu with the AppCompat Actionbar and it works great, except this is what it gives me by default:
What I'd like to have is something like this (excuse the rushed drawing):
I'm prefectly capable of doing this in a normal layout, so I'm not looking for advice on how to make the toolbar look like this, what my question is, is how do I start customizing the layout of the toolbar at all? For example, I don't see a way to position the home button (I believe that's what the hambuger menu is called in this case), it seems like a lot of this stuff is built into the appcompat actionbar and I don't see a way of getting around it, basically to summarize, I just want to have multiple rows of controls in the toolbar, and customize the default built in controls of the toolbar, including positioning. Is there a way I can just insert my own layout file into the actionbar and just have a control set to be the button that activates the drawer layouts drawers? That would be the most ideal solution to this problem for my circumstances.
what my question is, is how do I start customizing the layout of the toolbar at all?
You can customize the view of your SupportActionbar like this:
Create a ToolbarView.axml view file for your Actionbar(It's just an example, you can define anything inside):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="300dp">
<TextView
android:id="#+id/tvShow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Please Click Me"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
In your activity's onCreate method, set the custom view of the SupportActionbar:
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
SupportActionBar.SetDisplayShowCustomEnabled(true);
SupportActionBar.SetCustomView(Resource.Layout.ToolbarView);
...
}
The height of the ActionBar won't change by the content inside, you have to set the height manually in Style.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#5A8622</item>
<!--Set the ActionBar Size-->
<item name="actionBarSize">200dp</item>
</style>
</resources>
How do I remove the boundary between action and toolbar?
Bad Case
Good Case, I want to like it.
Activity XML
Fragment XML
What you are looking for is a way to remove the shadow under toolbar.
For android 4.4 or below, you will have to set the window content overlay in your activity theme like this
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.NoActionBar">
...
<!--To hide shadow effect in toolbar for Android 4.4 or below-->
<item name="android:windowContentOverlay">#null</item>
</style>
For Android 5.0+, you will also need to set the toolbar elevation to 0 in the activity layout like this.
<LinearLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
...
>
<android.support.design.widget.AppBarLayout
...
app:elevation="0dp">
...
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Actually, many people ask about this. See answer here
Try to search for existing answer next time ;)
I have a toolbar defined like so:
<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_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
I have a navigation drawer toggle button on the toolbar enabled in code (the hamburger menu button). I want it to be white but no matter what I do, it never changes color. I saw in an open source app that they set this in the theme:
<item name="colorControlHighlight">#color/white</item>
I tried it, but still no change for me - it's always the dark almost black color.
I am using this open source app for reference since it looks like it has a white menu button: https://github.com/frogermcs/InstaMaterial
I copied it as closely as I could, but my toolbar menu button never changes color. What am I doing wrong?
Make sure that your style is a parent of Theme.AppCompat.Light.DarkActionBar
also, if you have problems with the popup menu, please add this attribute to the Toolbar view app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
Some background: I'm adding tablet support for a game that's previously been available on phones for a long time. Some of the activities make up a “wizard” where the user chooses game type, some options, and an opponent before the game can start. For the tablet version using a theme inheriting Theme.AppCompat.DialogWhenLarge for these activities looked like a good, easy solution. This worked fine when using appcompat-v7 version 22.0.0.
In appcompat-v7 version 22.1, in all these DialogWhenLarge activities, suddenly getSupportActionBar() started returning null on tablets. I was relying on the actionbar for back navigation and more importantly for Search and other buttons.
What's the appropriate way to get an action bar on these activities on tablets? Do I need to implement my own toolbar?
I have tried calling requestWindowFeature(Window.FEATURE_ACTION_BAR) in my onCreate (before calling super) but that has no effect. I tried subclassing from AppCompatActivity instead of ActionBarActivity but that didn't help either (both with and without requestWindowFeature).
I have read Chris Banes' blog post on this new library version as well as Ian Lake's post on the Android Developers Blog; I couldn't see anything mentioning that actionbars should no longer be available.
I had the same issue. The only way I could find to fix it was to replace the action bars with toolbars.
// Replace the action bar with a toolbar
Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="#style/DefaultActionBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
included in my activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/detail_root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include android:id="#+id/tool_bar" layout="#layout/tool_bar" />
<ListView
android:id="#+id/detail_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="always" />
</LinearLayout>
DefaultActionBarTheme (in styles.xml):
<!-- Action bar theme -->
<style name="DefaultActionBarTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#1d7caf</item>
</style>
I had to replace the actionbar to implement new UI patterns the design team wanted
The actionbar is now replaced with the ToolBar but the toolbar object is bigger than the actionbar, only marginably, but it is noticeable and not desired
Here is the XML declaration
<?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="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
How do I make it smaller? I used to be able to rely on actionBarSize which is already predefined for every screensize, I can put in a specific dp value but is that the solution for this object?
Thanks
?attr/actionBarSize is 56dp with new support lib. So even if you stick to actionbar you will get a bigger size. Set actionBarSize in your theme.