Im having problems with the new way to use toolbar. In landscape mode, toolbar title is centered vertically but the navigation drawer not. How can I solve this?
I am using the toolbar like in this post of Chris Banes:
AppCompat v21 — Material Design for Pre-Lollipop Devices!
This is the code for the drawer icon in style.xml:
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
And this is an image of the problem:
Landscape image
EDIT: Overflow button is not centered vertically too...
This is my toolbar theme and everything is centered correctly:
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
style="#style/Widget.MyApp.Toolbar">
</android.support.v7.widget.Toolbar>
The example says to use android:minHeight="?actionBarSize" and android:_layout_height="wrap_content" but it only produced the error you described.
Add this in your toolbar style:
<item name="maxButtonHeight">?attr/actionBarSize</item>
This allows you to use wrap_content height and still have a centered icon!
Related
My menu item are taking spaces. I know default padding is 56 dp but I don't know how to remove this. I followed this link but won't work for me.
I am using toolbar not action bar.
my toolbar is
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
I am getting the output like below image ..how to remove spaces between menu item
. ..
Just add this line to your Activity's theme
<item name="android:actionButtonStyle">#style/OptionMenuStyle</item>
and create new style in style resources
<style name="OptionMenuStyle" parent="AppBaseTheme">
<item name="android:minWidth">20dip</item>
<item name="android:padding">0dip</item>
</style>
The problem with setting only 0dp padding is - option menu item has default minimum width, so setting 0dp padding doesn't change anything.
result before applying this style is as below.
result after applying above style
Cheers!!!
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 want to set the navigation icon for my toolbar ,and get into the problem that the icon isn't center inside by default it looks like:
and the code is:
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_48dp);
and the theme.xml is:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:navigationBarColor">#color/colorPrimaryDark</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
and the layout xml is:
<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="#dimen/toolbar_height"
/>
I think I have tried everything I know but I just can't figure it out.I used to set the navigation icon for toolbar then it will be center inside and now.Any help will save my day!
Eidted: of course I tried different size of icons
and I konw I could add a custom layout in toolbar or customize a layout like (which is a Linearlayout I write about)
But I just don't why I can't set the navigation icon like before,it will automatically be center inside....I think maybe I should change the theme or define something like navigationButttonStyle in the attributes....
I fix this by inherit the right theme Widget.AppCompat.Toolbar rather than ThemeOverlay.AppCompat.Dark.ActionBar to define my own toolbar style.
And use
<item name="toolbarStyle">#style/MyToolBar</item>
to set the toolbarStyle
I think you are using a bit big image. Try figure it out using this link
OK now I finally find out where the problem is: which has nothing to do with the icon size
You should place the image resource in the to the corresponding folder like (drawable-xxhdpi , drawable-xhdpi).If you don't do so,which means if you just put it in the drawable folder , it won't be auto resized to be center inside in your toolbar;
I am using appcompat actionbar. I want to add top margin to the overflow menu that opens on the top-right. Hence, increasing the spacing above it as you can see in the picture below. Right now the dropdown menu open on top of the 3 dots. How can I push it down?
Thank you.
If you are referring to Activity's default OptionItem menu, I guess you can't do it programmatically as the APIs just let you inflate it, thus adding/removing elements. Spacing should be fine tho, as the menu is standardized across every kind of layout.
What is the spacing problem you're having? Could you add a screenshot of your desired result?
A possible solution, not too dirty, would be using a custom style:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionButtonStyle">#style/MyStyle</item>
</style>
<style name="MyStyle" parent="AppBaseTheme">
<item name="android:minWidth">XXdip</item>
<item name="android:padding">XXdip</item>
</style>
You can Toolbar instead of ActionBar
<android.support.v7.widget.Toolbar
android:id="#id/toolbar"
android:background="#color/color_notification_toolbar"
android:layout_width="fill_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material">
<TextView
android:textSize="#dimen/abc_text_size_title_material_toolbar"
android:textStyle="bold"
android:textColor="#color/color_notification_title"
android:layout_gravity="center"
android:id="#id/tvTimeLineTitle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/title" />
/* add your menu items here as simple text views and
and give as much margins and paddings as you want */
</android.support.v7.widget.Toolbar>
Here is my custom theme file:
<style name="MyMaterial" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#4CAF50</item>
<item name="colorPrimaryDark">#4CAF50</item>
<item name="colorAccent">#FFFFFF</item>
</style>
The problem is, I want #FFFFFF only for the active tab underline (like yellow in this), but not the other controls such as checkbox activated. What is the best/proper way of doing this?
Side questions:
- The default tabs have vertical dividers. How to remove them like the picture above?
- How to add shadow beneath tabs like the picture above?
Thanks.
By default, TabLayout, part of the Android Design Support Library takes the tab indicator color from colorAccent, but you can also use app:tabIndicatorColor to set a different color specifically on the TabLayout (and not include yellow as your accent color in your theme):
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#FFFFFF" />
TabLayout does not have any separator lines, as per the [material design spec][3]. The shadow is added via elevation - if you include yourTabLayout` in your AppBarLayout you'll get elevation on Android 5.0 and higher devices.