Develop Reference

Customizing the AppCompat Actionbar

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>

Toolbar logo and title are centered even though they're not supposed to be

I'm having trouble implementing a Toolbar in my Android application. I have several problems, really.
First off, here's my MainActivity.java:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar_Main);
toolbar.setLogo(R.drawable.logo);
toolbar.setTitle(R.string.app_name);
toolbar.inflateMenu(R.menu.main_actions);
setActionBar(toolbar);
}
}
activity_main.xml:
<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"
android:orientation="vertical"
tools:context=".MainActivity"
android:nestedScrollingEnabled="false">
<Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/toolbar_Main"
android:background="?android:attr/colorPrimary" />
<!-- There's an EditText here, but I think that's not the problem -->
</LinearLayout>
styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#color/primaryColor</item>
<item name="android:colorPrimaryDark">#color/primaryColorDark</item>
</style>
</resources>
The problems I'm having are:
the menu is gone;
the logo and title text are centered in the Toolbar, even though I'm pretty sure I haven't set any property to center or whatever.
Now the first problem I can fix by removing the setActionBar part (not sure if that's good practice though), but second one, not so much. The logo and text remain centered no matter what I try. I've tried setting the Toolbar's gravity to top|left, as well as some other things, all to no avail.
When searching on Google (or StackOverflow), all I get are results asking to center the text, which is what I don't want.
I should also mention that I'm developing the app only for API level 21, so no AppCompat and all that fancy stuff, just a Toolbar that I wish to use as the app's main ActionBar.
I'm probably just missing some tiny thing, so thanks in advance.

To me:
You should not remove the setActionBar() call;
Your menu might be disappearing because maybe you have a hardware menu button on your device. Try tapping and see what happens. To fix however, try deleting the inflateMenu() line and inflate the menu during onCreateOptionsMenu(), as usual;
Title and logo issues, as well as menu disappearing, might be due to:
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
Why these lines? Just remove them if you don't need.
If this doesn't fix, try calling setActionBar(toolbar) first, and then set title using getActionBar().setTitle() . However I'm pretty sure that removing the two window lines from your style will be enough, so do that first.

Android Toolbar too high in landscape mode

My min and target sdk is 21, and I am not using the support library.
I am using the new Toolbar widget, and generally it works, I just have a glitch in the way it looks. The action icons are centered in portrait mode, whereas the toolbar in landscape mode is higher, and the icons are not centered. Please take a look at the screenshots (read lines are just to make the problem more visible):
portrait:
landscape:
This might look like nothing, but when the actions are selected (like the 'up' arrow at the very left of the bar) the result is that a strip of few pixels below it is visible. I don't like the way it looks.
The activity does not manage any configuration changes itself.
This is my code:
styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="android:Theme.Material.NoActionBar">
<item name="android:toolbarStyle">#style/MyToolbarStyle</item>
</style>
<style name="MyToolbarStyle" parent="android:Widget.Toolbar">
<item name="android:background">?android:attr/colorPrimary</item>
<item name="android:elevation">2dp</item>
</style>
</resources>
XML usage:
<?xml version="1.0" encoding="utf-8"?>
<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="com.test.TestActivity">
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
I tried messing around with the android:minHeight attribute, but setting to so, say, 30dp just moved the icons even more upwards, also in portrait mode.
I found this: https://code.google.com/p/android/issues/detail?id=77874
But there is no ?attr/actionBarSize...
How, if at all, can this problem be fixed? The phone the screenshots were taken on is a Nexus 6 (xxxhdpi), and the icon is from the google icon pack, and the biggest resource is xxhdpi. Is this the problem?
Update: the workaround from the aforementioned link does work when I use ?android:attr/actionBarSize. But, is this the only way? Seems a bit wrong, to need such workarounds for a new shiny component like this, even more so that the workaround requires an attribute value for a component to be replaced by the new one.

try to use:
android:height="?android:attr/actionBarSize"
for your toolbar.

Add this in your toolbar style:
<item name="maxButtonHeight">?attr/actionBarSize</item>

I had the same problem with android.support.v7.widget.Toolbar.
My solution:
Put your toolbar into a RelativeLayout with the height you want for your toolbar. Set your toolbars layout_height to "wrap_content" and align it to the vertical center. I hope it helps.
<RelativeLayout
android:id="#+id/main_toolbar_relative_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

actionbar sherlock - how to set background image for activity area in the theme

I am using actionbar sherlock and it works very well. The only problem I have is to figure out how to set the background image for the area which is used by the activities. All I end up with is setting a background image for the actionbar itself.
Any suggestion highly appreciated
martin

The windowBackground attribute is perfect for this.
<style name="MyTheme" parent="Theme.Sherlock">
<item name="android:windowBackground">here!</item>
</style>

Just set the background for your main layout in your activity.
Eg. in your layout file:
<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"
android:orientation="vertical"
android:background="#drawable/myImage" >

just write following line of code in your onCreate().
getSupportActionBar().setIcon(R.drawable.your_image);

android custom titlebar is working with some issues

I am making a custom titlebar using the following xml file:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myTitle"
android:text="custom title bar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background" />
And inside my activity's onCreate() i have the following code:
public class CustomTitleBar extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.mytitle);
}
}
The title bar is coming no problem.The image i am setting as background(the name of image is background too as u can see in above xml) is also coming.But the problem is in both right and left side of the image there is remaining a little gap i.e the image is not covering the whole width of parent though the layout_width has been set to "fill_parent".
Anyone any idea.plz help.

The little gap to the left/right is added by the framework since the default windowTitleBackgroundStyle in the standard theme used a 9-patch drawable with that padding. Here's an example on how to override this:
In AndroidManifest.xml, add an android:theme for your Activity:
<activity
android:theme="#style/MyCustomTitlebar"
android:label="Custom Titlebar"
android:name=".CustomTitlebar" />
Then define the custom theme somewhere in your resources (for example in res/values/themes.xml):
<?xml version="1.0" encoding="UTF-8"?>
<resources
xmlns:android="http://schemas.android.com/apk/res/android">
<style
name="MyCustomTitlebar"
parent="#android:style/Theme">
<item
name="android:windowTitleBackgroundStyle">#style/MyBackground</item>
</style>
<style
name="MyBackground">
<item
name="android:background">#drawable/background</item>
</style>
</resources>
Since we move the background to the style, we can modify your mytitle.xml layout to the following:
<?xml version="1.0" encoding="UTF-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="custom title bar" />
You might need to adjust either your background (so it has some padding if it's a 9-patch) or just set the padding in the mytitle.xml layout (using paddingLeft/Right/Top/Bottom).

Check this post for Custom Header that is Designed for Different Device densities.
Also design you Header using Styles and themes . Custom Header for Multiple Devices