I've got a simple fragment toolbar:
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbarDriver"
app:menu="#menu/menu_toolbar_driver_list"
app:navigationIcon="#drawable/baseline_menu_24"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:collapseIcon="#drawable/baseline_menu_24"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
Menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_searchDrivers"
android:icon="#android:drawable/ic_menu_search"
android:title="Search Drivers..."
app:actionViewClass="androidx.appcompat.widget.SearchView"
app:showAsAction="always" />
</menu>
Code:
mtSearchDrivers.setIconified(false);
Which looks like this:
As you can see, on the right side there is the "x" button which should only be used to remove the searchviewtext but if no text is entered like in this case and the user clicks on "x", the searchview collapses even when app:showAsAction="always" is set.. What can the issue be?
I solved the issue:
I just put the searchview as a child of my toolbar, rather than an own menuitem.
Related
I want to change the overflow menu icons color in my material toolbar depending on the android:theme value.
In this example my search icon is affected by the toolbar's theme via some magic related to the app:actionViewClass attribute implementation, but my info icon is not.
My toolbar:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
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:fitsSystemWindows="true"
app:liftOnScroll="true">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
app:title="#string/app_name"
app:menu="#menu/menu_main"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</com.google.android.material.appbar.AppBarLayout>
My menu:
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_search"
android:icon="#drawable/ic_search_24dp"
app:showAsAction="always"
app:actionViewClass="androidx.appcompat.widget.SearchView"
android:title="TODO" />
<item android:id="#+id/action_info"
android:icon="#drawable/ic_info_24dp"
app:showAsAction="always"
android:title="TODO" />
</menu>
Does a simple solution exists?
You can use:
<com.google.android.material.appbar.MaterialToolbar
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:theme="#style/MyThemeOverlay_Toolbar"
...>
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- color used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/myColor</item>
</style>
You can head over to the Material Components documentation which has a lot of information about styling each part of views from the library.
In this case it seems like the action icon tint is set by the colorControlNormal attribute.
Documentation - Top app bars
Maybe this answer comes too late, but just in case other people need it, I will post my answer here.
The problem you are facing will be solved if you set the attribute theme to the AppBarLayout instead of the MaterialToolbar.
So, in your code, your toolbar should look like this:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
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:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
app:liftOnScroll="true">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
app:title="#string/app_name"
app:menu="#menu/menu_main"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</com.google.android.material.appbar.AppBarLayout>
Hope this helps to anyone!
I'm having a little bit of trouble trying to implement a Bottom Navigation Bar with icons and text in my Android application.
The bar currently functions as expected and takes you to the desired fragment but isn't showing icons or text for some reason.
I've done a few searches but haven't been able to find a solution or a reason as to why it is behaving this way.Any help would be appreciated. Thanks.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="#color/turquoise"
android:foreground="#color/colorPrimary"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/navigation" />
</android.support.design.widget.CoordinatorLayout>
navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/nav_0"
android:icon="#drawable/ic_launcher_foreground"
android:title="home"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_1"
android:icon="#drawable/ic_launcher_foreground"
android:title="email"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_2"
android:icon="#drawable/ic_home"
android:title="profile"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_3"
android:icon="#drawable/ic_home"
android:title="map"
app:showAsAction="ifRoom|withText"/>
</menu>
in MainActivity.java
toolbar = getSupportActionBar();
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
Remove android:foreground="#color/colorPrimary" attribute inside your BottomNavigationView
I have an options menu defined as
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="1"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
<item
android:id="#+id/action_favorite"
android:title="#string/action_favorite_add"
android:icon="#drawable/ic_favorite_border_white_24dp"
android:orderInCategory="2"
app:showAsAction="ifRoom"
/>
<item
android:id="#+id/action_info"
android:title="#string/action_info"
android:icon="#drawable/ic_info_outline_white_24dp"
android:orderInCategory="3"
app:showAsAction="ifRoom"
/>
</menu>
The options menu itself works correctly, however the ifRoom actions do not collapse to an overflow when I have a longer toolbar title. Instead the toolbar title gets truncated.
If I use android:showAsAction instead of app:showAsAction and I ignore the error regarding the support library, the items are always collapsed to an overflow. No matter the length of the title.
I should also mention, that the toolbar is within a collapsible toolbar
I would like to the have the search action item to appear always (no matter the length of the title) and the other two items to appear only if the toolbar title is not truncated.
UPDATE: layout and onCreate
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/white">
<android.support.design.widget.AppBarLayout
android:id="#+id/rm_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/rm_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="#color/colorPrimary"
app:statusBarScrim="?attr/colorPrimary"
>
<RelativeLayout
android:id="#+id/rm_expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/rm_img_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:imagePlaceholder="#{#drawable/img_placeholder}"
app:imageUrl="#{vm.imageUrl}"
android:scaleType="centerCrop"
/>
<!-- Some other layouts overlayed over the image view -->
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/rm_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#{vm.name}"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- rest of layout -->
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
onCreate
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
activityComponent().inject(this)
setAndBindContentView(R.layout.activity_some_activity, savedInstanceState)
setTranslucentStatusBar()
setSupportActionBar(binding.rmToolbar)
supportActionBar?.let {
it.setDisplayHomeAsUpEnabled(true)
it.setDisplayShowTitleEnabled(true)
}
binding.rmAppBarLayout.addOnOffsetChangedListener(object: AppBarStateChangeListener() {
override fun onStateChanged(appBarLayout: AppBarLayout?, state: State) {
if (state != State.IDLE) { // collapsed or expanded
invalidateOptionsMenu()
}
}
})
// some other view code
// viewModel load code
}
Please try this hope so it will be helpful for you. I don't know if this works in general but in my case it does:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="1"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
<item
android:id="#+id/action_favorite"
android:title="#string/action_favorite_add"
android:icon="#drawable/ic_favorite_border_white_24dp"
android:orderInCategory="2"
app:showAsAction="collapseActionView"
/>
<item
android:id="#+id/action_info"
android:title="#string/action_info"
android:icon="#drawable/ic_info_outline_white_24dp"
android:orderInCategory="3"
app:showAsAction="collapseActionView"
/>
</menu>
Problem:
Can anyone please explain the cause for this?
The toolbar text is not properly shown.
Tried:
Tried setting the actionbar text in activity, switching fragment, from menu option method, everywhere
Tried managing the action menu elements
Thanks!
TOOLBAR LAYOUT
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar android:id="#+id/toolbar_main"
android:layout_width="match_parent"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:titleTextColor="#color/colorPrimaryDark"
android:elevation="7dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" />
MENU LAYOUT
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_search"
android:icon="#drawable/ic_search_white_24px"
app:showAsAction="always"
android:title="Search"/>
</menu>
i use this code to create menu for action bar in xamarin. but text is being shown, not the icon. i want icons only to be appear. Here is what i try for creating the menu.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/android-auto">
<item android:id="#+id/action_reply"
android:icon="#drawable/ic_rotate"
android:title="Reply"
android:showAsAction="always" />
<item android:id="#+id/action_undo"
android:icon="#drawable/ic_dashboard"
android:title="Undo"
android:showAsAction="never" />
</menu>
Here is the action bar code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FEFEFE">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_alignParentTop="true" />
can anyone suggest some improvements?
You are using the Android Support V7 Toolbar, you need to correct your menu to use xmlns:local="http://schemas.android.com/apk/res/android-auto" instead of xmlns:app="http://schemas.android.com/apk/res/android-auto" then change android:showAsAction="always" to local:showAsAction="always"