Android tabitem icon color

Android tabitem icon color

Tabs organize content across different screens, data sets, and other interactions.

Contents

Before you can use Material tabs, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

A TabLayout can be added to a layout:

TabItem s can then be added as children of the TabLayout and adjusted as needed:

Observe changes to tab selections:

Making tabs accessible

The Android tab components support screen reader descriptions for tabs and badges. While optional, we strongly encourage their use.

Adding a content description to the entire TabLayout can be done in XML with the android:contentDescription attribute or programmatically:

Content descriptions can also be added to individual tabs:

BadgeDrawable also has a number of content description setters for different badge states:

Using tabs with ViewPager

A TabLayout can be set up with a ViewPager in order to:

• Dynamically create TabItem s based on the number of pages, their titles, etc.
• Synchronize the selected tab and tab indicator position with page swipes

First, your PagerAdapter (or subclass) needs to override the getPageTitle function in order to set the tab text label:

After the adapter has been set on the ViewPager , synchronize the TabLayout :

Further customization of the dynamically-created TabItem s (such as setting icons) needs to be done separately:

Using tabs with ViewPager2

Setting up a TabLayout with a ViewPager2 relies on the same concepts as doing so with a ViewPager , but the implementation is different. Everything is handled by the TabLayoutMediator class:

Adding badges to tabs

Tabs support badging with the BadgeDrawable class:

There are two types of tabs: 1. Fixed tabs, 2. Scrollable tabs

Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

Fixed tabs example

API and source code:

The following example shows a row of fixed tabs.

Scrollable tabs are displayed without fixed widths. They are scrollable, such that some tabs will remain off-screen until scrolled.

Scrollable tabs example

API and source code:

The following example shows a row of scrollable tabs.

Anatomy and key properties

Tabs have a container and each tab item has an optional icon and text label. Tab items can be in an active or inactive state. The tab indicator is shown below the active tab item.

1. Container
2. Active icon (optional if there’s a label)
3. Active text label (optional if there’s an icon)
4. Active tab indicator
5. Inactive icon (optional if there’s a label)
6. Inactive text label (optional if there’s an icon)
7. Tab item

Element	Attribute	Related method(s)	Default value
Color	android:background	setBackground getBackground	?attr/colorOnSurfaceVariant
Elevation	android:elevation	setElevation	0dp
Height	N/A	N/A	48dp (inline text) or 72dp (non-inline text and icon)
Tab mode	tabMode	setTabMode getTabMode	fixed

Tab item icon attributes

Element	Attribute	Related method(s)	Default value
Icon	android:icon	setIcon getIcon	null
Color	tabIconTint	setTabIconTint setTabIconTintResource getTabIconTint	colorOnSurfaceVariant and colorPrimary (activated) (see all states)

Tab item text label attributes

Element	Attribute	Related method(s)	Default value
Text	android:text	setText getText	null
Color	tabTextColor	setTabTextColors getTabTextColors	colorOnSurfaceVariant and colorPrimary (activated) (see all states)
Typography	tabTextAppearance	N/A	?attr/textAppearanceLabelLarge
Inline label	tabInlineLabel	setInlineLabel setInlineLabelResource isInlineLabel	false

Tab item container attributes

Element	Attribute	Related method(s)	Default value
Ripple color	tabRippleColor	setTabRippleColor setTabRippleColorResource getTabRippleColor	colorOnSurfaceVariant at 16% opacity and colorPrimary at 16% opacity (activated) (see all states)
Unbounded ripple	tabUnboundedRipple	setUnboundedRipple setUnboundedRippleResource hasUnboundedRipple	true
Gravity	tabGravity	setTabGravity getTabGravity	fill
Min width	tabMinWidth	N/A	72dp (scrollable) or wrap_content
Max width	tabMaxWidth	N/A	264dp
Padding	tabPaddingStart tabPaddingEnd tabPaddingTop tabPaddingBottom tabPadding	N/A	12dp 12dp 0dp 0dp 0dp

Tab indicator attributes

Element	Attribute	Related method(s)	Default value
Color	tabIndicatorColor	setSelectedTabIndicatorColor	colorPrimary
Drawable	tabIndicator	setSelectedTabIndicator getSelectedTabIndicator	m3_tabs_rounded_line_indicator
Height	tabIndicatorHeight	setSelectedTabIndicatorHeight	2dp
Full width	tabIndicatorFullWidth	setTabIndicatorFullWidth isTabIndicatorFullWidth	false
Animation mode	tabIndicatorAnimationMode	setTabIndicatorAnimationMode getTabIndicatorAnimationMode	elastic
Gravity	tabIndicatorGravity	setSelectedTabIndicatorGravity getTabIndicatorGravity	bottom
Animation duration	tabIndicatorAnimationDuration	N/A	250

Element	Style
Default style	Widget.Material3.TabLayout
Style for elevateable surfaces	Widget.Material3.TabLayout.OnSurface
Primary secondary color style	Widget.Material3.TabLayout.Secondary

Default style theme attribute: ?attr/tabStyle

Additional style theme attributes: ?attr/tabSecondaryStyle

See the full list of styles and attrs.

Tabs support Material Theming which can customize color and typography.

Tabs theming example

API and source code:

The following example shows a row of scrollable tabs with Material Theming.

Implementing tabs theming

Use theme attributes and styles in res/values/styles.xml which applies to all tabs and affects other components:

Use default style theme attributes, styles and theme overlays, which apply to all tabs but do not affect other components:

Use the style in the layout, which affects only these tabs:

Источник

All-in-One — Android TabLayout and TabItem

T abLayout is a common widget working with ViewPager and ViewPager2 . User can tap on each tap to go to a specific page in ViewPager directly. The most common example is the Google Play Store app.

In this article, I would share my experience on styling each TabItem . I found that the Google documentation does not synchronise with its opened source code. Reading the corresponding source code is the best way to understand the details of each attribute.

If you are interested in the implementation and tricks of ViewPager2 , you could read more in my another article.

Android ViewPager2 & TabLayout

ViewPager2 is introduced in this year 2019 Google I/O and is a replacement of the old ViewPager, which was created in…

TabItem

TabItem is a View which contains an icon and a text. It has two states — selected and unselected. It must be “attached” to a TabLayout . However, according to the Google official documentation (see below quote) , it is a dummy View which is not actually “added” to a TabLayout . As a result, findViewById() will always return null and developer cannot customise each tab by referring to it directly.

TabItem is a special ‘view’ which allows you to declare tab items for a TabLayout within a layout. This view is not actually added to TabLayout, it is just a dummy which allows setting of a tab items’s text, icon and custom layout. See TabLayout for more information on how to use it.

If TabLayout is linked with a ViewPager2 , we can manually use the callback TabLayoutMediator.OnConfigureTabCallback in class TabLayoutMediator to style each inflated TabItem . To know more about the implementation and explanation, please refer to my another article:

Android ViewPager2 & TabLayout

ViewPager2 is introduced in this year 2019 Google I/O and is a replacement of the old ViewPager, which was created in…

TabLayout

TabLayout is a HorizontalScrollView which contains a list of TabItem . It layouts each TabItem just like a horizontal LinearLayout .

However, it is restricted to only have TabItem as its children. Runtime error will occur if it is not followed, see below error message:

F irst of all, let’s have a look at the brief summary of attributes available for TabLayout .

According to Material Design opened source code, tabIndicatorHeight and tabSelectedTextColor are both currently deprecated but Google official documentation has not yet updated.

H ere is a list of attributes that you can jump to directly:

Tab indicator attributes

1. app:tabIndicator

For configuring the height of tab indicator. The default height is 2dp .

Do not use app:tabIndicatorHeight to change the height of indicator since it is now deprecated.

app:tabIndicatorHeight is now deprecated. Instead, set the intrinsic size of the custom drawable provided to the tabIndicator attribute in order to change the indicator height. For example, this can be done by setting the property in a resource.

Источник

[FloatingActionButton] FAB Icon is Always Black #1106

Comments

HeyItsMedz commented Mar 11, 2020

For some reason when I set an icon using android:src on a FAB, it will force the icon to be black rather than whatever colour the (vector) icon actually is. The issue popped up once I upgraded from 1.0.0 to 1.1.0, and can be seen directly from the XML layout preview. Using android:tint does not resolve the issue

Unfortunately I’m also relying on a bug fix in 1.1.0 for another component, so it’s not like I can revert back to 1.0 and call it a day

I tried to see if the issue still occurred if I opened a new application from Android Studio. Interestingly, the icon will stay black if app theme’s parent is set to Theme.MaterialComponents.Light but shows correctly if changed to Theme.AppCompat.Light

Source code
This can be reproduced by opening a new project in Android Studio, choosing the Empty Activity option.

Set the AppTheme parent to Theme.MaterialComponents.Light , and change the generated activity_main.xml to this:

ic_arrow_forward_white_24dp.xml (this is generated as a Vector Asset within Android Studio):

Switching com.google.android.material:material version between 1.0.0 and 1.1.0 will show the icon changes colour

Material Library version:
1.0.0: Works correctly
1.1.0-alpha01: Does not work as expected
1.1.0: Does not work as expected
1.2.0-alpha05: Does not work as expected

I hope that helps! Any solution or workaround would be much appreciated. I’m happy to answer any questions if needed.

All the best!
Medz

The text was updated successfully, but these errors were encountered:

Источник