Skip to content

fix(android): disable ripple in M3 BottomNavigation#14445

Merged
hansemannn merged 3 commits into
mainfrom
androidFixBottomRipple
May 20, 2026
Merged

fix(android): disable ripple in M3 BottomNavigation#14445
hansemannn merged 3 commits into
mainfrom
androidFixBottomRipple

Conversation

@m1ga

@m1ga m1ga commented May 14, 2026

Copy link
Copy Markdown
Contributor

Currently touchFeedback: false has no effect in an experimental BottomNavigation with M3 theme:

Bildschirmaufnahme_20260514_112044.webm

This PR will respect the touchFeedback: false setting:

Bildschirmaufnahme_20260514_111903.webm

Test

let tab1 = Ti.UI.createTab({
	window: Ti.UI.createWindow(),
	touchFeedback: false,
	title: '1',
	activeTintColor: "green",
	icon: '/images/appicon.png'
});
let tab2 = Ti.UI.createTab({
	window: Ti.UI.createWindow(),
	title: '2',
	tintColor: "red",
	icon: '/images/appicon.png'
});
let tab3 = Ti.UI.createTab({
	window: Ti.UI.createWindow(),
	backgroundFocusedColor: 'green',
	// touchFeedback: false,  // ------------ uncomment to test `backgroundFocusedColor`
	title: '2',
	tintColor: "red",
	icon: '/images/appicon.png'
});


let bottomNav = Ti.UI.createTabGroup({
	tabs: [tab1, tab2, tab3],
	indicatorColor: "red",
	// tabsBackgroundSelectedColor: "blue", // ------------ uncomment to test `tabsBackgroundSelectedColor`
	theme: "Theme.Titanium.Material3.DayNight",
	experimental: true,
	style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
});

bottomNav.open();
  • tab1 has no ripple, tab2 still has ripple
  • enable tabsBackgroundSelectedColor to see the backgroundColor

@hansemannn hansemannn left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

touchFeedback: false should not disable the custom tab background state handling. The current change gates createBackgroundDrawableForState() behind hasTouchFeedback, then clears the item background when touch feedback is disabled. That fixes the ripple, but it also drops selected/background state colors such as tabsBackgroundSelectedColor or backgroundFocusedColor when a tab has touchFeedback: false.

Please keep applying the custom state background drawable independently of touch feedback, and only skip wrapping it in a RippleDrawable when touch feedback is disabled.

@m1ga

m1ga commented May 16, 2026

Copy link
Copy Markdown
Contributor Author

oh, you are right. Will change that 👍
Normally with M3 you use indicatorColor to set the active color or the M3 ItemActiveIndicatorColor (1) (the capsule around the icon) and not the full tab (2):
Screenshot_20260516-133742

but of course it should still work even if you disable the ripple and people want to set it.

@m1ga

m1ga commented May 16, 2026

Copy link
Copy Markdown
Contributor Author

@hansemannn Updated the PR and added an example with tabsBackgroundSelectedColor and backgroundFocusedColor. Colors still show up, even if touchFeedback is set to false

@hansemannn hansemannn merged commit 9e6cfa0 into main May 20, 2026
7 checks passed
@hansemannn hansemannn deleted the androidFixBottomRipple branch May 20, 2026 12:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants