I have white toolbar with menu item showed as action that is a black vector asset from material icons. There is no ripple effect on menu item click because ripple effect is also white. If toolbar background is changed to other color e.g blue, ripple appears. How to change menu item ripple color so it will be visible on white background? I was trying to change colorControlHighlight in AppTheme but it hasn't changed menu item ripple color.
Style
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#ffffff</item>
</style>
Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
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/menu_action_read_all"
android:icon="#drawable/ic_done_all_black_24dp"
android:title="#string/menu_notifications_read_all"
app:showAsAction="ifRoom" />
</menu>
Activity
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_notifications, menu);
return true;
}
In your styles:
<style name="MyToolbarTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
Apply this theme to your toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/MyToolbarTheme"/>
Result:
EDIT
For the action item:
<style name="MyAppBarLayoutTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/MyAppBarLayoutTheme">
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.AppBarLayout>
Result:
Even I faced similar issue due to AppTheme. I was using Theme.MaterialComponents.NoActionBar as default theme for App and only for toolbar the ripple effect was not working. However I solved it using app:theme.
Please try adding a app:theme="#style/Theme.AppCompat.Light.NoActionBar" to your toolbar. This is test with androidx.appcompat.widget.Toolbar it is working for me.
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
app:layout_collapseMode="pin"
android:elevation="4dp"
app:theme="#style/Theme.AppCompat.Light.NoActionBar"
android:stateListAnimator="#animator/appbar_elevation"
tools:targetApi="lollipop">
If your view doesn't ripple by default then, all you have to do is add android:background="?attr/selectableItemBackground" to your view to get that ripple/touch effect.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="?attr/selectableItemBackground"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher" />
path : drawable/action_item_ripple
action_item_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/white"
android:radius="20dp">
</ripple>
use
<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:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextAppearance="#style/TextAppearance.Widget.Event.Toolbar.Title"
app:titleTextColor="#android:color/white">
<TextView
android:id="#+id/textViewTitleToolbar"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/app_name"
android:textColor="#android:color/white" />
<androidx.appcompat.widget.AppCompatImageButton
android:id="#+id/imageViewToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#drawable/action_item_ripple"
android:src="#android:drawable/ic_delete"
android:visibility="invisible" />
</androidx.appcompat.widget.Toolbar>
Related
My hamburger button is not changing its color,
I have changed color on primary to black color and colorprimary to white, then why hamburger is white?
Everything was fine in Appcompat theme , I changed to material components theme so automatically this menu button became white
my material theme is,
<style name="AppMaterialCOmponentsTheme" parent="Theme.MaterialComponents.NoActionBar">
<!--background color-->
<item name="colorPrimary">#color/white</item>
<item name="android:colorBackground">#color/white</item>
<item name="colorSurface">#color/primaryDarkColor</item>
<item name="colorOnSurface">#color/black</item>
<item name="colorOnPrimary">#color/secondaryDarkColor</item>
<item name="colorOnBackground">#color/colorTranslucent</item>
<item name="itemRippleColor">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
My layout is,
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.recipeapp.marathi.activities.HomeActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbarHome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:title="#string/app_name"
app:titleTextColor="#color/black" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="?attr/actionBarSize"
ads:adSize="BANNER"
ads:adUnitId="#string/admob_banner_adunit_id">
</com.google.android.gms.ads.AdView>
<com.google.android.material.bottomappbar.BottomAppBar
android:background="#color/white"
android:id="#+id/bottomappbar"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:fabCradleMargin="10dp"
app:fabCradleRoundedCornerRadius="10dp"
app:fabCradleVerticalOffset="10dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:itemIconTint="#color/bottom_nav_item"
app:itemTextColor="#color/bottom_nav_item"
app:menu="#menu/nav_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/todo"
android:src="#android:drawable/ic_input_add"
app:layout_anchor="#id/bottomappbar"
app:layout_anchorGravity="bottom|center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:background="#drawable/round_nav"
android:foreground="?attr/selectableItemBackground"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:visibility="visible"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/menu_drawer_navigation" />
</androidx.drawerlayout.widget.DrawerLayout>
I'm new to MDC, pls help
With a Material Components Theme and androidx Toolbar to change the navigation icon you can use:
<androidx.appcompat.widget.Toolbar
android:theme="#style/ThemeOverlay.App.Toolbar"
...>
with:
<style name="ThemeOverlay.App.Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- color used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/myColor</item>
</style>
So, I'm struggling for a few days meddling with lots of different attributes, but still couldn't figure out how to change the text color of a Collapsing toolbar's title. Any takes on this? Here's a very simple layout I've been experimenting with. The app:titleTextColor="#color/colorPrimary" produces no effect.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="#color/colorPrimary"
app:expandedTitleGravity="center|top"
app:title="#string/app_name"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/zebra"
android:scaleType="centerCrop"
android:contentDescription="#string/zebras"
/>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:titleTextColor="#color/colorPrimary"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Add styles in styles.xml
<style name="CollapsedAppBarText" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/blue</item>
<item name="android:textStyle">normal</item>
</style>
then Activity/ fragment use like this
collapsingToolbar = findViewById<View>(R.id.collapsing_toolbar) as CollapsingToolbarLayout
collapsingToolbar?.setCollapsedTitleTextAppearance(R.style.CollapsedAppBarText)
I'm trying to make my app bleed under the status bar and the navigation bar. I got the layouts to work using fitSystemWindows = true with just the status bar translucent but when I make the navigation bar as well, the toolbar appears to react as if it needs to fill under the status bar and the notification bar.
The toolbar appears to function normally when in landscape for some reason.
This double "translucent" bar effect also makes the NestedScrollView extends beyond the bottom of the page. I am also not sure how to make the FAB fit.
On another note, I originally wrote the layout with a CoordinatorLayout. This added the extra problem that the NestedScrollView then scrolls up to the bottom of where the toolbar should be, not where it is. I think, however, that the NestedScrollView respected the bottom screen boundary properly with CoordinatorLayout.
Here's the xml for the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="74dp"/>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/nav_color_1_bright"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:navigationContentDescription="#string/open_nav_menu"
app:navigationIcon="#drawable/ic_dehaze_white_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:onClick="createNew"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/darkAccent"
app:fabSize="normal" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:itemBackground="#drawable/nav_item">
<ListView
android:id="#+id/drawer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:fitsSystemWindows="true" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I apply the following 'Light Theme' to the Activity programmatically.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name ="android:windowTranslucentNavigation">true</item>
</style>
<style name="LightTheme" parent="AppTheme">
<item name="android:colorPrimary">#color/lightPrimary</item>
<item name="android:colorPrimaryDark">#color/lightPrimaryDark</item>
<item name="android:colorAccent">#color/lightAccent</item>
<item name="android:navigationBarColor">#color/lightPrimaryDark</item>
<item name="actionOverflowButtonStyle">#style/OverflowMenuButtonStyleDark</item>
</style>
Here's a preview of the layout: (bigger version here)
I'm creating an app and I got my layout defined like this:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floating_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:backgroundTint="#color/primary_green">
</android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>
And toolbar.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:id="#+id/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="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/AppTheme.ToolbarTheme">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="10dp"
android:src="#drawable/app_logo"/>
</android.support.v7.widget.Toolbar>
And AppTheme.ToolBar theme is defined as:
<style name="AppTheme.ToolbarTheme">
<item name="android:background">#color/primary_white</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:elevation">0dp</item>
<item name="elevation">0dp</item>
</style>
I've even tried setting the elevation in code, still the toolbar shadow is visible. How can I disable it?
You're getting shadow, because AppBarLayout is giving shadow for Toolbar too.
You should remove elevation also from it.
I want to change the color of navigation drawer icon(3 vertical bars) from white to grey. How do i do this in the simplest way?
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/grey"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:id="#+id/toolbar_title"
android:textColor="#010101" />
<!--android:layout_gravity="center"-->
</android.support.v7.widget.Toolbar>
You can change the icon itself programmatically, using something like this:
toolbar.setNavigationIcon(R.drawable.new_icon);
Get the drawable
Drawable icMenu = ContextCompat.getDrawable(this,
R.drawable.ic_hamburguer);
Tint the drawable
icMenu.setColorFilter(getResources().getColor(android.R.color.darker_gray),
PorterDuff.Mode.SRC_ATOP);
Use it with the actionBar
actionBar.setHomeAsUpIndicator(icMenu);
actionBar.setDisplayHomeAsUpEnabled(true);
Or the toolbar
toolbar.setNavigationIcon(icMenu);
Change you toolbar's theme
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/grey"
local:theme="#style/CustomTheme"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:id="#+id/toolbar_title"
android:textColor="#010101" />
<!--android:layout_gravity="center"-->
</android.support.v7.widget.Toolbar>
And in your styles.xml
Create new style like this.
<style name="CustomTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#COLOR_CODE_FOR_YOUR_TEXT</item>
<item name="android:textColorSecondary">#COLOR_CODE_FOR_YOUR_TOOLBAR_ICON</item>
</style>