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>
Related
My navigation view ignores partly the android:theme parameter of it's view in a certain screen of my app. The certain screen is a search window which includes an edit text view inside the toolbar. This issue only exists for the 4.x devices. It seems like the navigation view only ignores the parameter android:textSize.
Link to the two images. The image including the smaller font is the described navigation view which ignores the android:theme parameter partly.
That's the navigation view which I'm using globally:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/nav_background"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.Drawer"
app:itemBackground="#drawable/nav_item_selector_background"
app:itemTextColor="#color/nav_default_text_color"
app:menu="#menu/navigation_drawer" />
That's the style which is connected to the android:theme:
<style name="AppTheme.Drawer">
<item name="android:textSize">25sp</item> <!-- menu item text size-->
<item name="android:listPreferredItemHeightSmall">70dp</item><!-- menu item height-->
</style>
Does anyone has any ideas why this behavior could happen? Additionally my navigation view is sometimes quite laggy without reasons. I don't do any calculation while opening or closing this drawer.
I found my problem. I was using super.onCreate(savedInstanceState); after I used the methods to set the content view and toolbar. It seems like that Android 5.0+ has no problems with that but older devices do.
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'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.
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.
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