microsoft / fluentui-android

Fluent UI for Android

The Android UI framework for building experiences for Microsoft 365.

Fluent UI for Android is a native library that provides the Office UI experience for the Android platform. It contains information about colors and typography, as well as custom controls and customizations for platform controls, all from the official Fluent design language used in Microsoft 365 products.

Build status (master branch)

Build Service	Status
App Center
Build Pipeline
Release Pipeline

Contents

• Colors and typography
• Controls
• Modularization
• Install and use Fluent UI
• Demo app
• Contributing
• License
• Changelog

Colors and typography

Fluent UI for Android provides colors and typography based on the Fluent design language.

In version 0.0.12, as a part of modularization, the colors and typographies have been moved to respective modules Please refer to Modularization section for more details

Controls

Fluent UI for Android includes an expanding library of controls written in Kotlin. These controls implement the Fluent design language and bring consistency across Office app experiences.

XML based Controls (v1)

• Action Bar
• App Bar
• AvatarView
• AvatarGroupView
• BottomSheet
• Bottom Navigation
• Button styles
• CalendarView
• CircularProgress styles
• Contextual Command Bar
• DateTimePickerDialog
• Drawer
• ListItemView
• PeoplePickerView
• PersonaChipView
• PersonaListView
• PersonaView
• Popup Menu
• Snackbar
• Tablayout
• TemplateView
• Tooltip

Compose based Controls (v2)

• AnnouncementCard
• AppBar
• Avatar
• AvatarCarousel
• AvatarGroup
• Badge
• BasicCard
• BasicChip
• BottomSheet
• Button
• CardNudge
• Checkbox
• CircularProgressIndicator
• Citation
• ContextualCommandBar
• Dialog
• Divider
• Drawer
• FileCard
• FloatingActionButton
• Label
• LinearProgressIndicator
• ListContentBuilder
• ListItem
• Menu
• NotificationCommon
• PeoplePicker
• Persona
• PersonaChip
• PersonaList
• Pill
• PillSwitch
• PillTabs
• ProgressText
• RadioButton
• SearchBar
• SearchBarPersonaChip
• Shimmer
• SideRail
• Snackbar
• TabBar
• TabItem
• TextField
• ToggleSwitch
• ToolTip

Install and use Fluent UI

Requirements

API 21+

1. Using Gradle

• Our library is now published using MavenCentral, so make sure the mavenCentral() repository has been added to your project level build.gradle file if you want to consume versions >= 0.0.17.

• If you are still using older versions you can consume jcenter() too. Please note it will only work for versions <=0.0.16

• Inside the dependency block in your build.gradle, add this line for the FluentUI library:

dependencies {
    ...
    implementation 'com.microsoft.fluentui:FluentUIAndroid:$version'
    ...
}

• Make sure you replace $version with the latest version of FluentUI.
• From version 0.0.12, individual modules can also be used by applications as per need. E.g To use just BottomSheet control which is part of fluentui_drawer module, following block can be added to build.gradle

dependencies {
    ...
    implementation 'com.microsoft.fluentui:fluentui_drawer:$version'
    ...
}

Replace ${version} with the latest version of fluentui_drawer

More information about contents of each module can be found in Modularization section

a) Develop for Surface-Duo:

• Please also add the following lines to your repositories section in your gradle script:

maven {
    url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
}

• Also add the SDK dependency to the module-level build.gradle file(current version may be different from what's shown here):

implementation "com.microsoft.device:dualscreen-layout:1.0.0-alpha01"

2. Using Maven

• Add the FluentUI library as a dependency:

<dependency>
  <groupId>com.microsoft.fluentui</groupId>
  <artifactId>FluentUIAndroid</artifactId>
  <version>${version}</version>
</dependency>

• Make sure you replace ${version} with the latest version of FluentUI.
• As in case of Gradle, here too, to use specific modules add dependency as follows:

<dependency>
  <groupId>com.microsoft.fluentui</groupId>
  <artifactId>fluentui_drawer</artifactId>
  <version>${version}</version>
</dependency>

Replace ${version} with the latest version of fluentui_drawer

Check Modularization for details of every module.

3. Manual installation

Modularized FluentUI manual installation involves building individual AARs of required modules

• Download the latest changes from the Fluent UI Android repository.

• Follow these instructions to build and output an AAR files from the FluentUI modules, import the module(s) to your project, and add it as a dependency. If you're having trouble generating an AAR file for the module, make sure you select it and run e.g "Make Module 'fluentui_drawer'" from the Build menu.

• Some components have dependencies you will need to manually add to your app if you are using this library as an AAR artifact because these dependencies do not get included in the output.

  • If using PeoplePickerView, include this dependency in your gradle file:

    implementation 'com.splitwise:tokenautocomplete:2.0.8'

  • If using CalendarView or DateTimePickerDialog, include this dependency in your gradle file:

    implementation 'com.jakewharton.threetenabp:threetenabp:1.1.0'

  • Double check that these library versions correspond to the latest versions we implement in the FluentUI build.gradle.

Import and use the library

In code:

import com.microsoft.fluentui.persona.AvatarView

In XML:

<com.microsoft.fluentui.persona.AvatarView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:name="Mona Kane" />

Demo app

Included in this repository is a demo of currently implemented controls. A full list of implemented controls available in the demo can be found here: Demos.

To see samples of all of our implemented controls and design language, run the FluentUI.Demo module in Android Studio.

Modularization

Starting from version 0.0.12, Fluent UI has been split into multiple modules by grouping related controls together. The main objective of this is to reduce the size impact of library on the applications which want to use only specific controls from Fluent UI

The list of modules and their respective controls is as follows

Modules	v1 Controls	v2 Controls
fluentui_calendar	Calendar, DateTime Picker
fluentui_ccb		ContextualCommandBar
fluentui_controls		AnnouncementCard, BasicCard, BasicChip, Button, Checkbox, Citation, FileCard, FloatingActionButton, Label, RadioButton, TextField, ToggleSwitch
fluentui_core	TemplateView, Utilities
fluentui_drawer	Drawer, BottomSheet, Persistent BottomSheet	BottomSheet, Drawer
fluentui_listitem	ListItemView	ListContentBuilder, Divider, ListItem, TabItem
fluentui_menus	Pop up Menu	Dialog, Menu
fluentui_notification		Badge, CardNudge, NotificationCommon, Snackbar, ToolTip
fluentui_others	Action Bar Layout, Bottom Navigation, Buttons, View Pager
fluentui_persona	AvatarView, AvatarGroup View, PersonaChipView, PersonaListView	Avatar, AvatarCarousel, AvatarGroup, Persona, PersonaChip, PersonaList, SearchBarPersonaChip
fluentui_peoplepicker	PeoplePickerView	PeoplePicker
fluentui_progress	Linear Progress Bar, Circular Progress Bar	CircularProgressIndicator, LinearProgressIndicator, ProgressText, Shimmer
fluentui_tablayout	Tablayout	SideRail, TabBar, Pill, PillSwitch, PillTabs
fluentui_topappbars	Toolbar, AppBar Layout, SearchBar	AppBar, SearchBar
fluentui_transients	Snackbar, Tooltip

Contributing

Post bug reports, feature requests, and questions in Issues. Contributions to any specific controls should be done in respective modules. Refer Modularization section for more details

Changelog

We use GitHub Releases to manage our releases, including the changelog between every release. You'll find a complete list of additions, fixes, and changes on the Releases page.

License

All files on the Fluent UI for Android GitHub repository are subject to the MIT license. Please read the LICENSE file at the root of the project.

Usage of the logos and icons referenced in Fluent UI for Android is subject to the terms of the assets license agreement.

fluentui-android's Issues

Use version of TokenAutoComplete library that supports AndroidX

Environment Information

• Package version(s): com.microsoft.fluentui:fluentui_others:0.0.20

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes)

Requested priority: High

Jetpack Compose Intergration

Describe the feature that you would like added

Using Jetpack Compose to draw Fluent UI

What component or utility would this be added to

Prob everything

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

Google announced that Jetpack Compose will be the future of the Android UI toolkit, I think there should be a Jetpack Compose version of Fluent UI

Also, Jetpack Compose is cross-platform and supports desktop. Single integration will work on multiple platforms, it is cool.

BottomSheet V2 Expandability

Describe the feature that you would like added

For BottomSheet V2, I wish I could expand the bottom sheet from its initial height using the handle, if sheet content is taller than the initial height. I want the following behavior specifically:

1. Bottom sheet's initial height is A
2. Bottom sheet's sheet content's full height is B
3. B > A
4. initially when the user opens the bottom sheet, the height of the bottom sheet is A
5. When the user 'scrolls' inside the sheet content, scroll happens, bottom sheet height is still A
6. When the user pulls on the handle, BottomSheet's height increases (expands) A++

What component or utility would this be added to

This will help in Loop Android's effort to add a bottom sheet page switcher in the app

Have you discussed this feature with our team, and if so, who

Mayank Mishra

Additional context/screenshots

DrawerDialog BehaviorType.RIGHT，move event crash

Environment Information

• Package version(s): 0.1.12
• Android SDK version: 33

Please provide a reproduction of the bug:

Actual behavior:

  java.lang.NullPointerException
   at com.microsoft.fluentui.drawer.SideSheetBehavior$dragCallback$1.tryCaptureView(SideSheetBehavior.kt:534)
   at androidx.customview.widget.ViewDragHelper.tryCaptureViewForDrag(ViewDragHelper.java:941)
   at androidx.customview.widget.ViewDragHelper.shouldInterceptTouchEvent(ViewDragHelper.java:1095)
   at com.microsoft.fluentui.drawer.SideSheetBehavior.onInterceptTouchEvent(SideSheetBehavior.kt:189)
   at androidx.coordinatorlayout.widget.CoordinatorLayout.performEvent(CoordinatorLayout.java:548)
   at androidx.coordinatorlayout.widget.CoordinatorLayout.performIntercept(CoordinatorLayout.java:503)
   at androidx.coordinatorlayout.widget.CoordinatorLayout.onInterceptTouchEvent(CoordinatorLayout.java:570)
   at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2652)
   at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3120)
   at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2801)
   at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3120)
   at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2801)
   at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3120)
   at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2801)
   at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3120)
   at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2801)
   at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3120)
   at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2801)
   at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:537)
   at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1925)
   at android.app.Dialog.dispatchTouchEvent(Dialog.java:864)
   at androidx.appcompat.view.WindowCallbackWrapper.dispatchTouchEvent(WindowCallbackWrapper.java:69)

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Blocking

Unread dot in V2ListItem shifts all other elements to the right

When unread dot is shown in V2ListItem, the entire row shifts a little to the right, which, when compared to when unread dot is not shown, becomes fairly obvious.

Ideally, presence of an unread dot should not shift the position of the rest of the elements within the ListItem.

Avatar view bitmap allocated native memory not getting garbage collected

Environment Information ->

• Package version(s): 0.0.18
• Android SDK version: 31

Description ->
While navigating in and out of an activity containing numerous avatar views occupies a lot of native memory (as per memory profiler provided in android studio), and even when the activity is destroyed, that memory allocated to avatar view's bitmaps does not gets garbage collected any time soon.

Steps to reproduce ->

1. run the demo app and start profiling the app
2. navigate to AvatarViewActivity or AvatarGroupViewActivity
3. notice the significant jump in allocated native memory and graphics memory in the memory section of the profiler
4. navigate back to DemoListActivity
5. try force garbage collect
6. notice the allocated memory remains occupied

How it can become serious issue for developers -> Apps relying heavily on AvatarView can run into a lot of OutOfMemory Exception

Possible solutions -> https://developer.android.com/topic/performance/graphics/manage-memory

Are you willing to submit a PR to fix? -> No

Requested priority -> High

(Figma component) When replacing a list icon button with a toggle control, the toggle knob is incorrectly positioned

Please provide a reproduction of the bug:

Add a list component (I'm using 01. Single-Line / 01. Standard / ⚪️ C. With Icon - Light), select the trailing icon which should be a 24x24 square frame, replace it with a non-square component like a toggle control.

Actual behavior:

Knob is centered

Expected behavior:

Knob is on one of the edges of the track, not centered.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/applications affected: Figma design library

SideRail does not preserve background color when placed in a Material Theme

Environment Information

• Package version(s): 0.1.35
• Android SDK version: (fill this out if relevant)

Please provide a reproduction of the bug:

Actual behavior:

SideRail does not use the correct background color. Looks tinted when in light mode, white in Dark Mode

Expected behavior:

The background for the SideRail respects the FluentStyle

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)
Yes
Requested priority: (Blocking, High, Normal, Low)
Normal
Products/applications affected: (if applicable)
Microsoft Loop

Seems like the first box wrapping the control is applying Material Theme

    val headerPadding = token.headerPadding(sideRailInfo)

    Box(//This box seems to be the issue
        modifier = modifier
            .fillMaxHeight()
    ) {
        Box(
            Modifier
                .fillMaxHeight()
                .width(borderWidth)
                .background(borderColor)
                .align(Alignment.CenterEnd)
        )
        Column(
            modifier = Modifier.padding(end = borderWidth),
            horizontalAlignment = Alignment.CenterHorizontally

This code can be used to workaround, but is likely not a correct fix

    val headerPadding = token.headerPadding(sideRailInfo)

    val railBackgroundColor = if (isSystemInDarkTheme()) backgroundDark else background
    Box(
        modifier = modifier
            .fillMaxHeight()
            .background(railBackgroundColor)//Workaround
    ) {
        Box(
            Modifier
                .fillMaxHeight()
                .width(borderWidth)
                .background(borderColor)
                .align(Alignment.CenterEnd)
        )
        Column(

Tasks

Beta Give feedback

No tasks being tracked yet.

with AvatarGroupView set bitmap Image not reflecting on UI.

Hi Team,

We are using fluent-ui in our Android Defender app and found the issue with bitmap image that is set in IAvatar. Once the image is set in IAvatar and list of IAvatars is set in AvatarGroupView, the image doesn't reflect on UI infact a fallback image that is created using the user's initials shows up on the UI. For now we have moved to the api setAvatarImageDrawable rather than setAvatarImageBitmap, and it has unblocked us for now.

Thanks

Scroll position not saved when using lazy list inside a V2 Drawer (Bottom)

Environment Information

• Package version(s): (fill this out, include which package manager you're using)
• 0.1.10
• Android SDK version: (fill this out if relevant)

Please provide a reproduction of the bug:

Where I'm using DrawerV2

val pageNavigatorScope = rememberCoroutineScope()
val pageNavigatorState = rememberDrawerState()

Fluent2Theme(themeMode = ThemeMode.Light) {
            FluidDocEditor(
                documentIdState.value,
                documentTypeState.value,
                documentTitleState.value,
                onBackPressedCallback, onSidebarPressedCallback, viewModel = viewModel
            )

            Drawer(
                drawerContent = {
                    WorkspacePageList( //<-- just a wrapper around StatelessPageListScreen
                        workspaceId = workspaceId,
                        updatePageState = updatePageState,
                        uriHandler = uriHandler,
                        logger = logger,
                    )
                },
                drawerState = pageNavigatorState,
                behaviorType = BehaviorType.BOTTOM,
                expandable = false,
                scrimVisible = true,
            )
        }

Drawer Content

@Composable
private fun StatelessPageListScreen(
    isRefreshing: SwipeRefreshState = SwipeRefreshState(false),
    onRefresh: () -> Unit = {},
    pageNodes: List<WorkspacePageNode>,
    updatePageState: (documentIdParam: String, documentTypeParam: String, documentTitleParam: String) -> Unit,
    invisibleCardIds: Set<String>,
    collapsedCardIds: Set<String>,
    workspaceName: String?,
    uriHandler: UriHandler,
    viewModel: WorkspacePageListViewModel = hiltViewModel()
) {
    Column(Modifier.fillMaxHeight()) {
        Row {
            Text(
                modifier = Modifier
                    .padding(FluentTheme.spacing.medium)
                    .fillMaxWidth(),
                text = workspaceName ?: stringResource(R.string.screen_name_workspace),
                fontSize = FluentTheme.typography.heading.fontSize,
                fontWeight = FontWeight.Bold
            )
            // Icon() TODO need to have a plus button in the future
        }

        val mapFromNodeIdToIndex = mutableMapOf<String,Int>()

        val listState = rememberLazyListState(initialFirstVisibleItemIndex = mapFromNodeIdToIndex[viewModel.currentOpenPage.value] ?: 0)
        SwipeRefresh(state = isRefreshing, onRefresh = onRefresh) {
            LazyColumn(
                state = listState, 
                userScrollEnabled = true
            ) {
                itemsIndexed(pageNodes) { index: Int, pageNode ->
                    RenderPageCardRecursive(
                        workspacePageNode = pageNode,
                        updatePageState = updatePageState,
                        indent = FluentTheme.spacing.default.value,
                        invisibleCardIds = invisibleCardIds,
                        collapsedCardIds = collapsedCardIds,
                        uriHandler = uriHandler,
                    )
                    mapFromNodeIdToIndex[pageNode.page.id] = index
                }
            }
        }
    }
}

Actual behavior:

Expected behavior:

I want the drawer to save my scroll position within the lazy list

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/applications affected: (if applicable)

Dualscreen-layout dependency causes the project to fail to build properly

when I tried to add the FluentUI dependency to my project, I found that the dualscreen-layout dependency didn't download properly

And the project doesn't pass the compilation properly

then, i found this issue: #5

when i add this maven source, it can be solved, and the project can also work with bulid and run

allprojects { repositories { maven { url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1" } } }

I don't want to develop for Surface-Duo devices, I just want to use FluentUI into my app
And My dependencies are just implementation 'com.microsoft.fluentui:FluentUIAndroid:$version'
But it seems to depend on the dualscreen-layout

So do I need to submit a PR to the README to tell others about this issue?

Clicking action view dismisses snackbar incorrectly

When you click the action button on a Snackbar it incorrectly calls dismiss().

https://github.com/microsoft/fluentui-android/blob/master/fluentui_transients/src/main/java/com/microsoft/fluentui/snackbar/Snackbar.kt#L212

This calls dispatchDismiss(BaseCallback.DISMISS_EVENT_MANUAL) in BaseTransientBottomBar. Instead it should directly call dispatchDismiss(BaseCallback.DISMISS_EVENT_ACTION). This is how the Material Snackbar behaves.

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/snackbar/Snackbar.java#L353

PersistentBottoomSheet default content provider and make styles configurable

Current Bottomsheet requires layout to be written by consumer end. Adding a default and configurable layout source just by applying list if Items.

Drawer is misaligned

Environment Information

• Package version(s): Maven, 0.0.14
• Android SDK version: API level 30, Device: Samsung Galaxy S10

Please provide a reproduction of the bug:

On the other devices works as expected:

Actual behavior:

Items in the drawer got shifted to the right:

Expected behavior:

Works as expected on other device:

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/applications affected: (if applicable)

Kk

Environment Information

• Package version(s): (fill this out, include which package manager you're using)
• Android SDK version: (fill this out if relevant)

Please provide a reproduction of the bug:

Actual behavior:

Expected behavior:

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/applications affected: (if applicable)

Incorrect signature for DrawerDialog::dispatchKeyEvent

We have DrawerDialog implementation, that extends Fluent's DrawerDialog.

I am upgrading fluent version 0.0.11 to 0.0.20

I am encountering the following error, ( Note I have stripped our internal package names)

e: .../NotificationSubscriptionDrawerDialog.kt: (18, 7): Inherited platform declarations clash: The following declarations have the same JVM signature (dispatchKeyEvent(Landroid/view/KeyEvent;)Z):
    fun dispatchKeyEvent(p0: KeyEvent): Boolean defined in ........NotificationSubscriptionDrawerDialog
    fun dispatchKeyEvent(event: KeyEvent?): Boolean defined in ...NotificationSubscriptionDrawerDialog
e: ...../OverflowActionDrawerDialog.kt: (27, 7): Inherited platform declarations clash: The following declarations have the same JVM signature (dispatchKeyEvent(Landroid/view/KeyEvent;)Z):
    fun dispatchKeyEvent(p0: KeyEvent): Boolean defined in ......OverflowActionDrawerDialog
    fun dispatchKeyEvent(event: KeyEvent?): Boolean defined in .....OverflowActionDrawerDialog

I think this is because of DrawerDialog::dispatchKeyEvent signature?

It is declared as

    override fun dispatchKeyEvent(event: KeyEvent?): Boolean {

Instead should be declared as

    override fun dispatchKeyEvent(event: KeyEvent): Boolean {

BUG: Initials of Thursday and Sunday in Polish are wrong

The first letters displayed in the calendar for the days of the week are wrong for Thursday and Sunday in the Polish language.
For Thursday it is supposed to be C(Czwartek) instead of W and for Sunday it is supposed to be N(Niedziela) instead of S.

Fix: #8

Accessibility - Listview header requires two tab button taps to navigate to next item

Environment Information

We are using fluentListItemVersion - 0.1.4

• Android SDK version: 32

Please provide a reproduction of the bug:

When navigating items in List view - when header is created with "com.microsoft.fluentui.listitem.ListSubHeaderView"
it takes two tab key taps to move to next item

Expected behavior:

It should take only single click of the tab key to move to next item

Priorities and help requested:

Maybe

Requested priority: (Blocking, High, Normal, Low)

Medium

See the attached video

double-tap-on-section-header.mp4

BottomSheetItem custom title color

Describe the feature that you would like added

For BottomSheetItem, there is a way to customize the tint of the image icon but there is no way to change the color of the accompanied text.

The equivalent on iOS, which is PopupMenuItem, has a property called "titleColor" which allows for a simple way to change the title color.

Would it be possible to add this? Or is there already a way to do this?

Thanks for your time.

Provide a fully androidx version fluentui

This project depends on android.support package in it's pom.xml. But when i download the aar file and decompile it's classes.jar i found that it is using androidx's class and it's caused some problem in our project.
Could you provide a pure androidx version which's dependency in pom.xml also point to androidx

TextStyle function that gets used in Tokenized Button doesn't exists anymore

While using Fluent V2Button I got the following error:

java.lang.NoSuchMethodError: 'void androidx.compose.ui.text.TextStyle. (long, long, androidx.compose.ui.text.font.FontWeight, androidx.compose.ui.text.font.FontStyle, androidx.compose.ui.text.font.FontSynthesis, androidx.compose.ui.text.font.FontFamily, java.lang.String, long, androidx.compose.ui.text.style.BaselineShift, androidx.compose.ui.text.style.TextGeometricTransform, androidx.compose.ui.text.intl.LocaleList, long, androidx.compose.ui.text.style.TextDecoration, androidx.compose.ui.graphics.Shadow, androidx.compose.ui.text.style.TextAlign, androidx.compose.ui.text.style.TextDirection, long, androidx.compose.ui.text.style.TextIndent, androidx.compose.ui.text.PlatformTextStyle, int, _layoutlib_._internal_.kotlin.jvm.internal.DefaultConstructorMarker)'   at com.microsoft.fluentui.tokenized.controls.ButtonKt$Button$2.invoke(Button.kt:134)   at com.microsoft.fluentui.tokenized.controls.ButtonKt$Button$2.invoke(Button.kt:57)   at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)   at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)   at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228)   at com.microsoft.fluentui.tokenized.controls.ButtonKt.Button(Button.kt:54)

I looked at that file, but line 134 of Button.kt is calling TextStyle method which is experimental and likely is no longer supported.

Snackbar shows with no backround when launched from Fragment

The text and the custom view is visible, the dark grey background is not

Tried these ways, all the same result:

Snackbar.make(requireActivity().findViewById(android.R.id.content), message,Snackbar.LENGTH_LONG)
.setCustomView(avatarView, Snackbar.CustomViewSize.MEDIUM)
.setStyle(Snackbar.Style.REGULAR)
.show()

Snackbar.make(requireView(), message, Snackbar.LENGTH_LONG)
.setCustomView(avatarView, Snackbar.CustomViewSize.MEDIUM)
.setStyle(Snackbar.Style.REGULAR)
.show()

Snackbar.make(requireActivity().findViewById(R.id.activity_root), message,Snackbar.LENGTH_LONG)
.setCustomView(avatarView, Snackbar.CustomViewSize.MEDIUM)
.setStyle(Snackbar.Style.REGULAR)
.show()

Testing Fabric bot for labels

Environment Information

• Package version(s): (fill this out, include which package manager you're using)
• Android SDK version: (fill this out if relevant)

Please provide a reproduction of the bug:

Actual behavior:

Expected behavior:

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/applications affected: (if applicable)

BUG - Overriding Drawer class causes inherited platform declarations clash

fluentui-android/FluentUI/src/main/java/com/microsoft/fluentui/drawer/Drawer.kt

Line 61 in 2f9491e

override fun onDismiss(dialog: DialogInterface?) {

When I try to subclass FluentUI's Drawer class, Android Studio shows me the following warning

Inherited platform declarations clash: The following declarations have the same JVM signature (onDismiss(Landroid/content/DialogInterface;)V): fun onDismiss(dialog: DialogInterface): Unit defined in .../DrawerSubClass fun onDimiss(dialog: DialogInterface?): Unit defined in .../DrawerSubClass

I think the Kotlin nullable indicator ? causes the issue. If you inspect DialogFragment class the signature is as follows: public void onDismiss(@NonNull DialogInterface dialog)
Whereas override fun onDismiss(dialog: DialogInterface?) is the Drawer's signature.

Side note: I'm using AndroidX

In dependencies example for README, publish the current released version to use instead of using a $version tag

Environment Information

Android studio 4

Please provide a reproduction of the bug:

https://github.com/microsoft/fluentui-android#1-using-gradle

says to use implementation 'com.microsoft.fluentui:FluentUIAndroid:$version'

Well obviously that won't work. Below it says to use the correct version. Just put in the correct version instead of having the user hunt the tags or search mvnrepository.

Actual behavior:

error

Expected behavior:

no error

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) yes

Requested priority: (Blocking, High, Normal, Low)low

Products/applications affected: (if applicable)anyone trying out your getting started section

ListItem - trailingAccessoryContent with Button causes jank

We've been seeing jank in our list of items (with hundreds of items), and tracked it down to the trailingAccessoryContent. Removing trailingAccessoryContent makes the list scroll very fast. Our trailingAccessoryContent is also a single Fluent button, so it's really nothing super intense, and I was also able to repro with a vanilla Material button with not much in it. Interestingly, using a text view of a constant string ("hi") is also very fast.

From the Profile Trace via AS, it says the "measureAndLayout()" step is taking a long time, which is what also led me down this investigation path.

< Fluent Version 1.30.0 >

Behavior

• Case 1 - TrailingAccessoryContent with Fluent Button - Jank
  • trailingAccessoryContent = { Button(onClick = { }, text = "hi") { }}
• Case 2 - TrailingAccessoryContent with material Button - Jank
  • trailingAccessoryContent = { androidx.compose.material3.Button(onClick = { /*TODO*/ }) { }}
• Case 3 - TrailingAccessoryContent with Text("hi") - No Jank
  • trailingAccessoryContent = { Text("hi")}
• Case 4 - No TrailingAccessoryContent - No Jank

Relevant code / code in question - ListItem, line 411

            if (trailingAccessoryContent != null && textAlignment == ListItemTextAlignment.Regular) {
                Box(
                    Modifier
                        .padding(
                            top = if (trailingAccessoryContentAlignment == Alignment.Top) padding.calculateTopPadding() else 0.dp,
                            bottom = if (trailingAccessoryContentAlignment == Alignment.Bottom) padding.calculateBottomPadding() else 0.dp,
                            end = padding.calculateEndPadding(LocalLayoutDirection.current)
                        )
                        .fillMaxHeight(),
                    contentAlignment = trailingAccessoryAlignment
                ) {
                    trailingAccessoryContent()
                }
            }

Crash on rotation when something is picked from PeoplePicker (Fluent V2)

Environment Information

• fluentui_peoplepicker:0.1.1

Please provide a reproduction of the bug:

Actual behavior:

App is crashing when I select something from people picker and screen is rotated.

Pasting screenshot of some logs here:

Priorities and help requested:

Requested priority: Blocking

Tasks

Beta Give feedback

1. fixing crash on screen rotation #530
   +0

Adding Foreground Disabled 1 to the Label

Environment Information

• fluentui_controls

Please provide a reproduction of the bug:

Actual behavior:

Can't Change the text color in fluent 2 Label

Expected behavior:

Change the text color to Foreground Disabled 1

Requested priority: Blocking

Binding for Xamarin.Android

I'd like to see in the future a binding of these controls for Xamarin.Android or .NET for Android and publish it in NuGet.

Thanks.

[TalkBack] Talkback not announcing selected pill button index in PillBar V2

Environment Information

• Package version(s): (fill this out, include which package manager you're using)
• Android SDK version: 0.1.38

Please provide a reproduction of the bug:

1. Use Fluent V2 PillBar component (Compose) with at least two pill metadata (two pill buttons)
2. Turn on 'TalkBack' screen reader

Actual behavior:

When selecting a pill button within the PillBar, TalkBack is announcing only the name of the button and its selected / enabled state

Expected behavior:

When selecting a pill button within the PillBar, TalkBack must also announce the index of the button within the PillBar to indicate that there are multiple pills within the PillBar. Ex. "All" tab item 1 of 2, in list 2 items..etc

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low) High (Accessibility)

Products/applications affected: (if applicable)

Failed to resolve: com.microsoft.device:dualscreen-layout:1.0.0-alpha01

Build issue when updating gradle version of Fluent UI implementation to 0.0.4
implementation 'com.microsoft.fluentui:FluentUIAndroid:0.0.4'

Grade issue disappears at 0.0.3.
minSdkVersion 22
targetSdkVersion 29
compileSdkVersion 29
buildToolsVersion "29.0.2"

Allow tooltips to show custom views

Describe the feature that you would like added

Tooltips currently show only text. We should extend their capability to show any custom view.

What component or utility would this be added to

Tooltips

Have you discussed this feature with our team, and if so, who

aishwarya56

Additional context/screenshots

Will help in making coachmarks(Teaching UI) in the future.

Coherence across different platform for fluent UI controls

Describe the feature that you would like added
The fluent ui controls across different platform are not exactly the same. For ex : If you look at Basic Inputs supported in Android by fluent ui

which is a lot less when compared with Web :

Is there a plan to make all controls same across different platforms ? Also can you give me an idea on whats the rough timeline for the same ?

Icons

Hello Microsoft, where can I get FluentUI icons?

Can you bump version of splitwise you use

It seems FluentUI ships with an older version of com.splitwise:tokenautocomplete ( 2.0.8) it prevents app from dropping use of jetifier.
There are convoluted ways to get around it, but it would be nice if Fluentui-android fixed the issue and see if switching to 3.X version of splitwise fixes the issue.

Graphs to this dependency:
+---com.microsoft.fluentui:fluentui_others:0.0.8
+---com.splitwise:tokenautocomplete:2.0.8

For reference see

https://github.com/dipien/bye-bye-jetifier

Unable to remove the ring from STACK style inAvatarGroupView

Describe the feature that you would like added

I am using fluent ui - AvatarGroupView to display the stack of profile pictures in our app , and found that we cannot remove the ring around the Avatarimage from being displayed
this is because the when we apply avatarstyle as STACK the default implementation is having RING added

However on fluentui-iOS we are able to remove the border around the images from AvatarGroupView class

Hence we want your help in updating the style on fluentui android AvatarGroupView so that we can seamlessly integrate with our app

What component or utility would this be added to

AvatarGroupView

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

DrawerDialogs are not anchored to the bottom when Display Cutout Support is enabled

It looks like this bug was caused by commit 61eac66.

The issue is on this line

fluentui-android/fluentui_drawer/src/main/java/com/microsoft/fluentui/drawer/DrawerDialog.kt

Line 165 in a675857

layoutParams?.gravity = Gravity.TOP

Changing the Gravity to Gravity.BOTTOM fixes the issue, but causes top drawers to not behave correctly.

Environment Information

• Package version(s): Reproduced on Master
• Android SDK version: API 29

Please provide a reproduction of the bug:

Open a DrawerDialog in an Activity that supports Display Cutouts. Adding this line to the theme will cause the issue:

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

Actual behavior:

DrawerDialog has a gap below it, so it "floats" above the bottom of the screen.

Expected behavior:

DrawerDialog is anchored to the bottom of the screen

Priorities and help requested:

Requested priority: Normal

Products/applications affected: Causing a production bug in Yammer

Removing threetenabp by replacing it with java.time.* (Android Gradle plugin 4.0)

Since Android Studio 4.0 and Android Gradle plugin 4.0 have been released recently I'd suggest removing com.jakewharton.threetenabp:threetenabp for CalendarView or DateTimePickerDialog and replacing it with java.time.*.

The benefits: I'd only have to include the pure FluentUI dependency.

Jake Whartons statement

Attention: Development on this library is winding down. Please consider switching to Android Gradle plugin 4.0, java.time.*, and its core library desugaring feature in the coming months.

Similar to the problems with using Joda-Time on Android, the threetenbp uses a JAR resource for loading timezone information. This is an extremely inefficient mechanism on Android.

Android Studio release notes

Java 8 library desugaring in D8 and R8
Android Studio now includes support for using a number of Java 8 language APIs without requiring a minimum API level for your app.

In Android Studio 4.0, the desugaring engine has been extended to be able to desugar Java language APIs. This means that you can now include standard language APIs that were available only in recent Android releases (such as java.util.streams) in apps that support older versions of Android.

The following set of APIs is supported in this release:

Sequential streams (java.util.stream)
A subset of java.time

Build 2020 Feedback Thread - Fluent UI Android

Welcome Build 2020 participants! Did you get a chance to try out the Fluent UI Android library
or watch our Build 2020 talk? If so, we want to hear your feedback! Let us know how we can make this even more useful to you moving forward.

Feel free to leave feedback on any of the following (and please keep feedback constructive and respectful):

• Likes
• Dislikes
• Bugs
• Areas for improvement

Thank you,
The Fluent UI Android team

Missing Changelog

according to the readme:

We use GitHub Releases to manage our releases, including the changelog between every release. You'll find a complete list of additions, fixes, and changes on the Releases page.

but all of the releases at https://github.com/microsoft/fluentui-android/releases

just say "New Release" or "Version releases x.x.x". no detail on what has been changed.

TabLayout requires explicitly calling updateTemplate()

When inflating Fluent's TabLayout component via a Fragment's XML , it requires explicitly calling TabLayout.updateTemplate() to render correctly.

In an Activity or Adapter, the TabLayout component does not require explicitly calling this function, so I believe it is a bug.

See example before/after picture below:

Before calling updateTemplate()	After calling updateTemplate()

Can not use fluentui modules in FluentUI demo -- unable to find modules

I want to experiment with using fluentUI modules so I updated the FluentUI.demo build.gradle as shown below

fluentVersion is defined as 0.0.18

    implementation "com.microsoft.fluentui:fluentui_drawer:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_listitem:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_tablayout:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_actionbar:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_bottomnavigation:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_buttons:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_calendar:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_menus:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_peoplepicker:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_persona:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_progress:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_topappbars:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_transients:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_viewpager:$fluentVersion"
    implementation "com.microsoft.fluentui:fluentui_others:$fluentVersion"

But that gives the following error

Could not find com.microsoft.fluentui:fluentui_drawer:0.0.18.
Searched in the following locations:
- https://dl.google.com/dl/android/maven2/com/microsoft/fluentui/fluentui_drawer/0.0.18/fluentui_drawer-0.0.18.pom
- https://jcenter.bintray.com/com/microsoft/fluentui/fluentui_drawer/0.0.18/fluentui_drawer-0.0.18.pom
- https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1/com/microsoft/fluentui/fluentui_drawer/0.0.18/fluentui_drawer-0.0.18.pom
Required by:
project :FluentUI.Demo

Is there specific maven URL I need to specify for fluentUI modules?

CCB Crashes when long pressing item without providing optional LongPressItemClicked handler

https://github.com/microsoft/fluentui-android/blame/6ca47840f4800aea7505eaf7c9e99726ce5314f0/fluentui_ccb/src/main/java/com/microsoft/fluentui/contextualcommandbar/CommandItemAdapter.kt

Line 163 - itemLongClickListener?.onItemLongClick(commandItem, viewHolder.itemView)!!

The !! should be removed (!! is poor Kotlin practice to begin with).

06:48:25.109  E  FATAL EXCEPTION: main
                 Process: com.microsoft.loop, PID: 1039
                 java.lang.NullPointerException
                 	at com.microsoft.fluentui.contextualcommandbar.CommandItemAdapter.onBindViewHolder$lambda-10$lambda-8(CommandItemAdapter.kt:163)
                 	at com.microsoft.fluentui.contextualcommandbar.CommandItemAdapter.$r8$lambda$cdZ99B0JC_fofd91lIU4hr8dKck(Unknown Source:0)
                 	at com.microsoft.fluentui.contextualcommandbar.CommandItemAdapter$$ExternalSyntheticLambda0.onLongClick(Unknown Source:6)
                 	at android.view.View.performLongClickInternal(View.java:7961)
                 	at android.view.View.performLongClick(View.java:7919)
                 	at android.view.View.performLongClick(View.java:7937)
                 	at android.view.View$CheckForLongPress.run(View.java:30821)
                 	at android.os.Handler.handleCallback(Handler.java:942)
                 	at android.os.Handler.dispatchMessage(Handler.java:99)
                 	at android.os.Looper.loopOnce(Looper.java:226)
                 	at android.os.Looper.loop(Looper.java:313)
                 	at android.app.ActivityThread.main(ActivityThread.java:8741)
                 	at java.lang.reflect.Method.invoke(Native Method)
                 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
                 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1067)
06:48:25.135  E  Uncaught exception in app
                 java.lang.NullPointerException
                 	at com.microsoft.fluentui.contextualcommandbar.CommandItemAdapter.onBindViewHolder$lambda-10$lambda-8(CommandItemAdapter.kt:163)
                 	at com.microsoft.fluentui.contextualcommandbar.CommandItemAdapter.$r8$lambda$cdZ99B0JC_fofd91lIU4hr8dKck(Unknown Source:0)
                 	at com.microsoft.fluentui.contextualcommandbar.CommandItemAdapter$$ExternalSyntheticLambda0.onLongClick(Unknown Source:6)
                 	at android.view.View.performLongClickInternal(View.java:7961)
                 	at android.view.View.performLongClick(View.java:7919)
                 	at android.view.View.performLongClick(View.java:7937)
                 	at android.view.View$CheckForLongPress.run(View.java:30821)
                 	at android.os.Handler.handleCallback(Handler.java:942)
                 	at android.os.Handler.dispatchMessage(Handler.java:99)
                 	at android.os.Looper.loopOnce(Looper.java:226)
                 	at android.os.Looper.loop(Looper.java:313)
                 	at android.app.ActivityThread.main(ActivityThread.java:8741)
                 	at java.lang.reflect.Method.invoke(Native Method)
                 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
                 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1067)

Talkback should announce roles for CCB buttons

Talkback is not announcing roles for CCB buttons.

Repro steps:

1. Open the demo app and turn on Talkback.
2. Go to "ContextualCommandBar"
3. Swipe the focus to any CCB buttons. Talkback is not announcing the role of the button. It should announce "XXX, button".
4. Swipe the focus to other buttons, e.g, "Insert Item". Note that it announces "Insert item, button".

DrawerDialog.dismissDialog WindowManagerGlobal.findViewLocked IllegalArgumentException View not attached to window manager

Seeing several reports of this crash. From this SO post, likely due to the activity being in a "finishing" state and the dialog no longer attached to the activity. https://stackoverflow.com/questions/22924825/view-not-attached-to-window-manager-crash

Below is a sample stacktrace:

android.view.WindowManagerGlobal.findViewLocked
WindowManagerGlobal.java, line 454
java.lang.IllegalArgumentException: View=com.android.internal.policy.PhoneWindow$DecorView not attached to window manager

android.view.WindowManagerGlobal.findViewLocked WindowManagerGlobal.java:454
android.view.WindowManagerGlobal.removeView WindowManagerGlobal.java:380
android.view.WindowManagerImpl.removeViewImmediate WindowManagerImpl.java:140
android.app.Dialog.dismissDialog Dialog.java:701
android.app.Dialog.dismiss Dialog.java:684
androidx.appcompat.app.AppCompatDialog.dismiss SourceFile:140
com.microsoft.fluentui.drawer.DrawerDialog.dismissDialog SourceFile:213
com.microsoft.fluentui.drawer.DrawerDialog$sheetCallback$1.onStateChanged SourceFile:49
com.google.android.material.bottomsheet.BottomSheetBehavior.setStateInternal SourceFile:1114
com.google.android.material.bottomsheet.BottomSheetBehavior$SettleRunnable.run SourceFile:1545
android.view.Choreographer$CallbackRecord.run Choreographer.java:911
android.view.Choreographer.doCallbacks Choreographer.java:686
android.view.Choreographer.doFrame Choreographer.java:619
android.view.Choreographer$FrameDisplayEventReceiver.run Choreographer.java:897
android.os.Handler.handleCallback Handler.java:739
android.os.Handler.dispatchMessage Handler.java:95
android.os.Looper.loop Looper.java:148
android.app.ActivityThread.main ActivityThread.java:7303
java.lang.reflect.Method.invoke Method.java
com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run ZygoteInit.java:1230
com.android.internal.os.ZygoteInit.main ZygoteInit.java:1120

V2 Drawer (Bottom) - Scroll, then expand instead of the other way around

Describe the feature that you would like added

Right now the default behavior for Bottom Drawer when the drawer content's full height is taller than the height of the drawer is:

1. User does an 'up' gesture anywhere in the drawer (handle, drawer content)
2. Drawer expands to the entire screen (if content taller than or equal to the screen height)
3. If the content is taller than the screen height and content is a lazy list that is scrollable, user can scroll to see the entire list

I would like it to be (and this is the behavior of Google Bottom Drawer/Sheet):

1. User does an 'up' gesture within the drawer content
2. Drawer maintains same height and allows user to scroll
3. If the drawer handle experiences the 'up' gesture, drawer expands

What component or utility would this be added to

This will greatly help in Loop Android's effort to implement Bottom Sheet inside the Workspace page editor.

Have you discussed this feature with our team, and if so, who

Mayank Mishra

Additional context/screenshots

DateTimePickerDialog:Talkback stays silent on invoking 'Next/Previous month' button in 'Pick a date & time'

Expected Result:
Talkback should announce about the month which appears on invoking the 'Next/Previous month' button
Ex: By double tap on Next month button, talkback should announce displayed month(Ex: December 2021)

Actual Result:
Talkback remains silent after hitting on 'Next/Previous month' button

User Impact: ​
Talkback users will get confused to navigate further and access other elements.

Month-.Talkback.announcement.mp4

app-debug.apk for showcasing UI

Hi Microsoft Team,

Thanks for bringing fluent UI for android platform,
Can you please add the app-debug.apk file
as when I check didn't find it yet, if its there please let me know by providing us some link to it.

Hope it would be love by the android devs.!!!

Naming issue - OnDismissListener in Drawer.kt

fluentui-android/FluentUI/src/main/java/com/microsoft/fluentui/drawer/Drawer.kt

Line 41 in 2f9491e

fun onDrawerDismissListener()

fun onDrawerDismissListener() should be renamed to something like fun onDrawerDismissed()

Prefix all attrs with a unique label

Describe the feature that you would like added

In order to prevent naming conflicts with other libraries and apps, it is best to prefix attrs with something unique. I think fluentui makes the most sense given that the attrs in attrs.xml are already prefixed with it.

What component or utility would this be added to

Files such as attrs_avatar.xml, attrs_people_picker.xml, attrs_avatar_group.xml, etc. all need to have unique attrs to avoid conflicts.

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

Compiling the library into our app results in compilation errors such as:
AAPT: error: duplicate value for resource 'attr/type' with config ''.
AAPT: error: duplicate value for resource 'attr/avatarSize' with config ''.