-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #660 from Orange-OpenSource/develop
Release 0.16.0
- Loading branch information
Showing
213 changed files
with
4,420 additions
and
164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
--- | ||
permalink: /404.html | ||
layout: default | ||
--- | ||
|
||
<style type="text/css" media="screen"> | ||
.container { | ||
margin: 10px auto; | ||
max-width: 600px; | ||
text-align: center; | ||
} | ||
h1 { | ||
margin: 30px 0; | ||
font-size: 4em; | ||
line-height: 1; | ||
letter-spacing: -1px; | ||
} | ||
|
||
</style> | ||
|
||
<div class="container"> | ||
<h1>404</h1> | ||
|
||
<p><strong>Page not found :(</strong></p> | ||
<p>The requested page could not be found.</p> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,167 @@ | ||
--- | ||
layout: detail | ||
title: "App bars: bottom" | ||
description: A bottom app bar displays navigation and key actions at the bottom of mobile screens. | ||
--- | ||
|
||
--- | ||
|
||
**Page Summary** | ||
|
||
* [Specifications references](#specifications-references) | ||
* [Accessibility](#accessibility) | ||
* [Implementation](#implementation) | ||
* [Component specific tokens](#component-specific-tokens) | ||
|
||
--- | ||
|
||
## Specifications references | ||
|
||
- [Design System Manager - App bars](https://system.design.orange.com/0c1af118d/p/23e0e6-app-bars/b/620966) | ||
- [Material Design - App bars: bottom](https://material.io/components/app-bars-bottom) | ||
- *Technical documentation soon available* | ||
|
||
## Accessibility | ||
|
||
Please follow [accessibility criteria for development](https://a11y-guidelines.orange.com/en/mobile/android/development/) | ||
|
||
Android's bottom app bar component APIs provide support for the navigation icon, | ||
action items, overflow menu and more for informing the user as to what each | ||
action performs. While optional, their use is strongly encouraged. | ||
|
||
**Content descriptions** | ||
|
||
When using icons for navigation icons, action items and other elements of bottom | ||
app bars, you should set a content description on them so that screen readers | ||
like TalkBack are able to announce their purpose or action, if any. | ||
|
||
For an overall content description of the bottom app bar, set an | ||
`android:contentDescription` or use the `setContentDescription` method on the | ||
`BottomAppBar`. | ||
|
||
For the navigation icon, this can be achieved via the | ||
`app:navigationContentDescription` attribute or | ||
`setNavigationContentDescription` method. | ||
|
||
For action items and items within the overflow menu, the content description | ||
needs to be set in the menu: | ||
|
||
```xml | ||
<menu> | ||
<item | ||
android:contentDescription="@string/content_description_one" /> | ||
<item | ||
android:contentDescription="@string/content_description_two" /> | ||
</menu> | ||
``` | ||
|
||
## Implementation | ||
|
||
Bottom app bars provide access to a bottom navigation drawer and up to four | ||
actions, including the floating action button. | ||
|
||
> **Jetpack Compose implementation** | ||
*Not available yet* | ||
|
||
> **XML implementation** | ||
API and source code: | ||
|
||
* `CoordinatorLayout`: [Class definition](https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout) | ||
* `BottomAppBar`: [Class definition](https://developer.android.com/reference/com/google/android/material/bottomappbar/BottomAppBar), [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomappbar/BottomAppBar.java) | ||
* `FloatingActionButton`: [Class definition](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton), [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java) | ||
|
||
In the layout: | ||
|
||
```xml | ||
<androidx.coordinatorlayout.widget.CoordinatorLayout | ||
android:layout_width="match_parent" | ||
android:layout_height="match_parent"> | ||
|
||
<!-- Note: A RecyclerView can also be used --> | ||
<androidx.core.widget.NestedScrollView | ||
android:layout_width="match_parent" | ||
android:layout_height="match_parent" | ||
android:paddingBottom="100dp" | ||
android:clipToPadding="false"> | ||
|
||
<!-- Scrollable content --> | ||
|
||
</androidx.core.widget.NestedScrollView> | ||
|
||
<com.google.android.material.bottomappbar.BottomAppBar | ||
android:id="@+id/bottomAppBar" | ||
android:layout_width="match_parent" | ||
android:layout_height="wrap_content" | ||
android:layout_gravity="bottom" | ||
app:navigationIcon="@drawable/ic_menu_24dp" | ||
app:menu="@menu/bottom_app_bar" | ||
/> | ||
|
||
<com.google.android.material.floatingactionbutton.FloatingActionButton | ||
android:layout_width="wrap_content" | ||
android:layout_height="wrap_content" | ||
app:srcCompat="@drawable/ic_add_24dp" | ||
app:layout_anchor="@id/bottomAppBar" | ||
/> | ||
|
||
</androidx.coordinatorlayout.widget.CoordinatorLayout> | ||
``` | ||
|
||
In `menu/bottom_app_bar.xml`: | ||
|
||
```xml | ||
<menu> | ||
|
||
<item | ||
android:id="@+id/search" | ||
android:icon="@drawable/ic_search_24dp" | ||
android:title="@string/search" | ||
android:contentDescription="@string/content_description_search" | ||
app:showAsAction="ifRoom" | ||
/> | ||
|
||
<item | ||
android:id="@+id/more" | ||
android:title="@string/more" | ||
android:contentDescription="@string/content_description_more" | ||
app:showAsAction="never" | ||
/> | ||
|
||
</menu> | ||
``` | ||
|
||
In menu/navigation icon drawables: | ||
|
||
```xml | ||
<vector | ||
android:tint="?attr/colorControlNormal"> | ||
</vector> | ||
``` | ||
|
||
In code: | ||
|
||
```kotlin | ||
bottomAppBar.setNavigationOnClickListener { | ||
// Handle navigation icon press | ||
} | ||
|
||
bottomAppBar.setOnMenuItemClickListener { menuItem -> | ||
when (menuItem.itemId) { | ||
R.id.search -> { | ||
// Handle search icon press | ||
true | ||
} | ||
R.id.more -> { | ||
// Handle more item (inside overflow menu) press | ||
true | ||
} | ||
else -> false | ||
} | ||
} | ||
``` | ||
|
||
## Component specific tokens | ||
|
||
_Soon available_ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
--- | ||
layout: main | ||
content_page: AppBarsBottom.md | ||
--- |
Oops, something went wrong.