So far, I have achieved the following:
Im using Appcompat Library for customizing my Toolbars.
Files that are in use:
a. app_bar.xml (top toolbar)
b. app_bar_bottom.xml (bottom toolbar)
my main_menu.xml looks like this:
<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/notices"
android:orderInCategory="100"
android:title="#string/notices"
android:icon="#drawable/ic_notices_white_24dp"
app:showAsAction="never" />
<item
android:id="#+id/exchange_rate"
android:orderInCategory="100"
android:title="#string/exchange_rate"
app:showAsAction="always"
android:icon="#drawable/ic_rupees_white_24dp"/>
and at the app_bar_bottom.xml I have done something like this inside my MainActivity.java :
toolbar = (Toolbar) findViewById(R.id.app_bar_bottom);
toolbar.setLogo(R.drawable.ic_rupees_white_24dp);
setSupportActionBar(toolbar);
The ic_rupees_white_24dp is an image file under drawable folder.
My question:
a. How can I add menu items to specific toolbars, i.e. different action items to top and bottom toolbar? Can it be achieved via xml declarations only without having to use toolbar.setLogo() and so forth?
b. Is there a way to assign each item declared inside menu_main.xml to be set to one particular toolbar only? For eg. the rupees image in the above screenshot is to be put as an action item at the bottom toolbar only?
Forgive me for my stupidity of the question is vague. It aroused only out of my curiosity.
Thank You.
Within each toolbar, you should declare its ActionMenuView
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/light_primary_color"
>
<android.support.v7.widget.ActionMenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v7.widget.ActionMenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</android.support.v7.widget.Toolbar>
Related
Top is the default padding for the upnavigation arrow when you set
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I would like the Toolbar to look more like the bottom image, as I want the title to indicate where the upnavigation arrow will send the user to rather than being a description of the current activity. So far I have tried adding a custom textview to the toolbar, and setting app:contentInsetStartWithNavigation="0dp" as per this similar question. But as the author notes, this doesn't remove the padding to the right of the arrow. How can I get the toolbar to look more like the second image? Current xml for my toolbar is as follows:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_doc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:contentInsetStartWithNavigation="0dp"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:gravity="left"
android:id="#+id/txtTitle"
android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>
I further provide the xml for the menu, which I add to the toolbar using the menu inflater. Another solution I was floating around was adding an arrow icon and textview to the menu itself? But then I'm not sure how I'd give the new arrow icon the same upnavigation behavior.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_baseline_home_24px"
app:showAsAction="always"/>
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
Try setting app:contentInsetStart to 0dp instead of app:contentInsetStartWithNavigation.
<android.support.v7.widget.Toolbar
...
app:contentInsetStart="0dp">
I have to show back icon, Logo and text (Next) in Toolbar. Next is right aligned. I tried placing text via menu. I have set logo and back button to toolbar.
toolbar.setLogo(R.mipmap.logo);
toolbar.setNavigationIcon(R.mipmap.back);
Also, I have inflated following menu in onCreateOptionsMenu
Menu inflated:
<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"
>
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always" />
Text Menu is not visible at all. if I put icon in menu item, it gets displayed.
I have used android.support.v7.widget.Toolbar.
Edited:
I solved it. In case someone else gets struck with such issue.
Please add
<item name="android:actionMenuTextColor">#color/blue</item>
in styles. Menu itemw as getting selected on click but was not visible, means it was showing white text color on white toolbar. Setting menuText color solved my problem.
Android Documentation explains that the withText option for showAsAction will
Also include the title text (defined by android:title) with the action item.
Since that is what you want, code the following.
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always|withText" />
You can do something like this:
First, remove default title in your Activity:
getSupportActionBar().setDisplayShowTitleEnabled(false);
Then, your toolbar layout can be like this:
<LinearLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/material_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:text="#string/app_name"
android:textColor="#android:color/white" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
And, in your activity handle the click event:
toolbarTop.findViewById(R.id.toolbar_title).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.d(TAG,"Clicked");
}
});
Try Changing to support widget. This worked for me
app:actionViewClass="android.support.v7.widget.SearchView"
This what it looked after the change
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<item android:id="#+id/search"
android:title="#string/search_title"
android:icon="#drawable/ic_search"
app:showAsAction="always|withText"
app:actionViewClass="android.support.v7.widget.SearchView"
tools:context=".AppHome.HomeActivity"/>
</menu>
If you are getting an empty action with no text but blank space in it,
it might happen if you have created your own tool bar in the layout and have also used the Action bar in your theme's parent.
If you are creating your own toolbar then use parent="Theme.MaterialComponents.DayNight.NoActionBar" in your themes, both normal and night themes.
It's happening because of the style used in your layout.
To solve this, define a new style and use it in your layout.
<style name="ToolBarStyle" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:itemBackground">#fff</item> // background color of the menus
<item name="android:textColor">#000</item>// text color of the menus
</style>
Use it like this in your layout
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
android:background="#color/primary_pink"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
/>
How can I align items of a toolbar to the left, middle and right? Everytime I inflate the menu from my toolbar_menu.xml it loads the icons to the far right. How can I put them in the order I want? I am using an standalone toolbar at the bottom of the screen.
I Have an AXML which holds the toolbar.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarMenuMain"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#CC2827"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_alignParentBottom="true"/>
My Main activity:
mToolbarMenu = FindViewById<SupportToolbar> (Resource.Id.toolbarMenuMain);
mToolbarMenu.InflateMenu(Resource.Menu.toolbarMenu);
mToolbarMenu.MenuItemClick += mToolbarMenu_MenuItemClick;
And the toolbar_menu.xml.
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_home"
android:icon="#drawable/ic_directions_car_white_24dp"
android:title="Home"
android:layout_gravity="left"
myapp:showAsAction="always"/>
<item android:id="#+id/action_Shop"
android:icon="#drawable/ic_store_mall_directory_white_24dp"
android:title="Shop"
android:layout_gravity="center"
myapp:showAsAction="always"/>
<item android:id="#+id/action_Map"
android:icon="#drawable/ic_map_white_24dp"
android:title="Maps"
android:layout_gravity="right"
myapp:showAsAction="always"/>
</menu>
The layoutDirection attribute should be added to the toolbar tag.
for examle:
android:layoutDirection="rtl"
If you want to align items of a toolbar to the left, middle and right, you need to create seperate layout for it. because in menus you don't have any option to change the position, they will always come on right of the screen. You can use custom layout and inflate it in the tool bar.
please refer - Add custom layout to toolbar
I am using the android.support.v7.widget.Toolbar in my activity.
I added it into my layout for the activity as following:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/add_contact_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary"
android:elevation="6dp"
android:title="#string/add_contact_toolbar_title"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</RelativeLayout>
I inflate the options menu in onCreateOptionsMenu of the activity and I
inflate my menu.xml :
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/add_contact_optionmenu_save"
android:title="#string/add_contact_optionmenu_save"
app:showAsAction="always"/>
</menu>
But unfortunately, the item appears way too far right and is too small:
How can I make it to appear like in all other apps? Bigger, and with more
right margin?
Cheers!
Well to move the MenuItem to a bit left from the right edge, you need to set paddingRight attribute to the android.support.v7.widget.Toolbar.
android:paddingRight="20dp"
To change the size, add the following style <item> to your App Theme.
<item name="actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
<item name="android:actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
<style name="ActionBar.MenuTextStyle"
parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textSize">48dp</item>
</style>
All this being said, a better design pattern is simply to go ahead and follow the Material Design guidelines. I would suggest you have an icon for save rather than the text.
My question is related to recently released Navigation View from Design Support Library.
I want to position Log In at the bottom of the Navigation View, how I can do this?
My menu XML right now, look like this :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/navigation_sub_item_1"
android:icon="#drawable/ic_action_event"
android:title="#string/home" />
<item
android:id="#+id/navigation_sub_item_2"
android:icon="#drawable/ic_action_person"
android:title="#string/profile" />
<item
android:id="#+id/navigation_sub_item_3"
android:icon="#drawable/ic_action_labels"
android:title="#string/tags" />
<item
android:id="#+id/navigation_sub_item_4"
android:icon="#drawable/ic_action_settings"
android:title="#string/log_in" />
</group>
</menu>
Here is my layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/white_1000">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/main_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer_menu" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
Do you want your "Log In" item to be fixed at the bottom of the Navigation View?
You can do that by nesting additional views/layouts within NavigationView. NavigationView extends FrameLayout, so you can wrap it around child views.
I posted more information on NavigationView footers here. Also see the other answers in that post for more layout options.
Edit
FYI: If you use the "fixed footer" approach, you are basically removing the footer item (e.g. "Log In" in your example) from the menu. That means you have to implement click and other handlers yourself.
I think navigation menu works like a listview. So Items will be placed in a list.
If you want one item to be placed at the bottom, you can customise within the NavigationView Tag in layout xml