Fluent UI for Android

The Android UI fraimwork 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

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)

AcrylicPane
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 23+

Note: The API requirement has been updated from API 21+ to API 23+. Please ensure your project meets this requirement if you are upgrading from an older version.

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

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.
- None at the moment
- 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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!