material-components / material-components-android

Modular and customizable Material Design UI components for Android

Material Components for Android

Material Components for Android (MDC-Android) help developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android apps.

Material Components for Android is a drop-in replacement for Android's Design Support Library.

Getting Started

For information on how to get started with Material Components for Android, take a look at our Getting Started guide.

Submitting Bugs or Feature Requests

For usage questions: ask on Stack Overflow.

Bugs or feature requests should be submitted at our GitHub Issues section.

Useful Links

• All Components
• Getting Started
• Contributing
• Using Snapshot Version
• Building From Source
• Catalog App
• Class documentation (external site)
• MDC-Android on Stack Overflow (external site)
• Android Developer’s Guide (external site)
• Material.io (external site)
• Material Design Guidelines (external site)

Documentation

• Directory structure
• Components

material-components-android's Issues

Feature request - CollapsingToolbarLayout: Allow multiple lines of text in expanded state

Overview

CollapsingToolbarLayout currently only allows for a single line title. However, in the expanded state, there would be enough space to display multiple lines.

Multiple app developers (such as WhatsApp) have already built their own custom views as a replacement for CollapsingToolbarLayout to solve this issue. However, these are mostly closed-source, use different, inconsistent animations when expanding and collapsing, and/or are not usable as a drop-in replacement for CollapsingToolbarLayout because they have a different API.

We (@raphaelm and I, with help from some contributors) have built an open-source library that tries to solve this problem. It is based directly on the original CollapsingToolbarLayout/CollapsingTextHelper classes from the Design Support Library with only a few code changes and an additional maxLines attribute. In addition to that, we feel that the animation we use is more smooth than the one from e.g. WhatsApp.

However, we had to copy quite a lot of files (basically all the classes that are referenced from CollapsingToolbarLayout) from the original support library when creating this library because they are package-private and therefore not accessible from our classes or because we needed access to private fields, which is not possible when extending a class. For this reason, it is quite tedious to keep our library up-to-date with changes from the support library.

Would you be interested in adopting our changes into the original library, e.g through a pull request? Or are you already working on the same feature?

There are some bugs in our library that occur when using text shadows or transparent text that we have not worked on ourselves because we don't use those features in our app, but they should be quite straightforward to resolve.

Related issues

• https://code.google.com/p/android/issues/detail?id=180736
• https://code.google.com/p/android/issues/detail?id=215056
• #2

NPE In BottomSheetBehaviour.onInterceptTouchEvent

Overview

NullPointerException when attempting to delegate onInterceptTouchEvents to a BottomSheet before onLayoutChild has been called.

https://github.com/material-components/material-components-android/blob/master/lib/src/android/support/design/widget/BottomSheetBehavior.java#L281

The view reference is not checked before being interacted with, which the MotionEvent.ACTION_DOWN case is doing.

java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.Object java.lang.ref.Reference.get()' on a null object reference
     at android.support.design.widget.BottomSheetBehavior.onInterceptTouchEvent(BottomSheetBehavior.java:299)
     at android.support.design.widget.CoordinatorLayout.performIntercept(CoordinatorLayout.java:460)
     at android.support.design.widget.CoordinatorLayout.onInterceptTouchEvent(CoordinatorLayout.java:499)
     at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2402)
     at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2865)
     at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2492)
     at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2865)
     at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2492)
     at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2865)
     at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2492)
     at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2865)
     at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2492)
     at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2865)
     at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2492)
     at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:505)
     at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1863)
     at android.app.Activity.dispatchTouchEvent(Activity.java:3226)
     at android.support.v7.view.WindowCallbackWrapper.dispatchTouchEvent(WindowCallbackWrapper.java:68)
     at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:467)
     at android.view.View.dispatchPointerEvent(View.java:10954)
     at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:5051)
     at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4908)
     at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4439)
     at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4492)
     at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4458)
     at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4591)
     at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4466)
     at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4648)
     at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4439)
     at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4492)
     at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4458)
     at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4466)
     at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4439)
     at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:6936)
     at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:6875)
     at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:6836)
     at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:7046)
     at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:185)
     at android.os.MessageQueue.nativePollOnce(Native Method)
     at android.os.MessageQueue.next(MessageQueue.java:323)
     at android.os.Looper.loop(Looper.java:136)
     at android.app.ActivityThread.main(ActivityThread.java:6692)
     at java.lang.reflect.Method.invoke(Native Method)
     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1468)
     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1358) 

Reproduction steps

This can occur on older/slower devices by spamming touch events to the bottom sheet whilst the layout is being constructed.

Version number

• 26.1.0

Operating system and device

Am able to consistently reproduce on a Samsung S7 7.0.
Was originally reported via crashyltics on Samsung Galaxy J1 4.4.4 and Oppo A37fw 5.1.1

Feature Request - Add account header for NavigationView

Overview

While the Android Design library has a NavigationView component for navigation drawers, one thing that's still missing is the account header detailed in the official Material Design specification on navigation drawers.
Given it's frequent usage, I'd love to see an implementation of this that's optimized for the existing NavigationView and doesn't mess with internals as I did in my extension library.

Operating system and device

All operating systems and devices.

Feature request - Add speed dial feature to floating action button

As stated on material design guidelines, the floating action button can fling out related actions upon press. There are many third-party libraries to achieve this. This feature would be nice to have without using any third-party libraries.

Related actions can be populated using a menu resource file as in bottom navigation view.

A floating action button flinging out related actions:

Add new `Checkboxes` component

https://material.io/go/design-checkboxes

Build fail

Hello

The current build is failing. Here is the error message when I load this into Android Studio. Please can you fix. Thanks

Error:Project with path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/bottomsheet' could not be found in project ':lib'.

Consult IDE log for more details (Help | Show Log)

Missing files not added to git

There are some missing files in the project which were not added to git.

Incorrect Test Task in Documentation

The documentation states that androidConnectedTest is the Gradle task for instrumentation tests. When I run it, Gradle says that there is no such task, and indeed I cannot find one with that name:

FAILURE: Build failed with an exception.

* What went wrong:
Task 'androidConnectedTest' not found in root project 'material-components-android'.

* Try:
Run gradle tasks to get a list of available tasks. Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

There is a connectedAndroidTest task, in addition to the standard Android connectedCheck task. Both seem to run the instrumentation tests. I assume that one of these is the proper task.

TextInputLayout.getTypeface incorrectly annotated with @NonNull

Overview

The setter for typeface is annotated with @Nullable, and the getter is @NonNull. One or the other is wrong.

Currently, the getter does return null.

You can see the problem pretty easily ...

  public void setTypeface(@Nullable Typeface typeface) {
    if (typeface != mTypeface) {
      mTypeface = typeface;

      mCollapsingTextHelper.setTypefaces(typeface);
      if (mCounterView != null) {
        mCounterView.setTypeface(typeface);
      }
      if (mErrorView != null) {
        mErrorView.setTypeface(typeface);
      }
    }
  }

  /**
   * Returns the typeface used for the hint and any label views (such as counter and error views).
   */
  @NonNull
  public Typeface getTypeface() {
    return mTypeface;
  }

Version number

• 25.1.0

Building Beautiful Apps Faster with Material Components on Android (Kotlin)

Overview

On step 3 Add Collapsing Bar... to edit app/res/values/styles.xml file there is an extra line in the sample code "-->" which would create a compile error

Feature request: Add metrics for alert dialogs with a text field

Overview

There are a few examples in MDG that show alert dialog with text field. These dialog's metrics seem off compare to the metrics provided in dialog specs. Please provide a spec'ed example of an alert dialog with a text field.

Reproduction steps

Some Material Design - Alert dialog with text field(s) examples:
– Example #1 It can be found here but no metrics/specs are provided.
– Example #2 It can be found here. This screenshot can be found in Error patterns - Permission requested

Feature request - Support Bottom navigation tablet mode

Overview

It would be nice to have the bottom navigation support tablet mode as the spec states. I am currently working on a PR to include this.

Error inflating class android.support.design.backlayer.BackLayerLayout [Question]

In which version was introduced?

Dependency Issue

compile 'com.android.volley:volley:1.0.0'

Feature Request - Bottom Navigation View doesn't keep selected tab state

Overview

Current version of the Bottom Navigation View doesn't keep it's view state when a configuration change takes place, instead, it defaults to the first tab. I think the expected behavior would be to keep the current selected tab state without triggering a new OnNavigationItemSelectedListener::onNavigationItemSelected()

Feature Request - BottomNavigation onItemReselected

In the Material Design specs for BottomNavigation Behavior, it described a behavior to scroll to top when the same active tab is selected again.

Refer:
https://material.google.com/components/bottom-navigation.html#bottom-navigation-behavior
the 1st video with caption "Tapping on the active action in the bottom navigation bar will navigate the user to the top of the view."

In the current BottomNavigationView#OnNavigationItemSelectedListener only notified when any item has been clicked. it does not distinct if its the same item or not. It would be better if there is a similar onItemReselected callback. Even better, if the BottomNavigationBehavior can take care of the "scroll to top" of any scrollable view

Copied from the same issue: https://code.google.com/p/android/issues/detail?id=228456

Is it possible to have the BottomAppBar & FloatingActionButton with menu evenly distributed?

Something like the mix concept of BottomNavigationView and BottomAppBar.

Translucent

About Translucent
All i am trying to do; having black navigation bar (so layout doesn't extend under of it) and custom-transparency on status bar

https://stackoverflow.com/questions/47648509/custom-translucent-color-changing-transparency

Adding this line of code
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(ContextCompat.getColor(this, R.color.statusTintColor)); window.setNavigationBarColor(ContextCompat.getColor(this, android.R.color.black)); }
does this.

and without having clearFlag For TranslucentNavigation does this.

Also my Theme has
<item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item>

i also tried changing navigation's tanclucency to the false

android:fitsSystemWindows="true" also i tried with or without this nothing changes

It is kinda navigation's translucency attached to status bar's tranclucency and changing navigation, effects status bar.

[Wrong value] Wrong device metric

It may not be related to this repository. But I do not know where to report it, so I leave it here.

This page has an invalid value.
This page says that the size of the galaxy s8 is 360x740dp. But actually it is 441x906dp

Please fix it! Thanks!

Feature Request - Bottom Navigation View to provide api to set the shifting mode

The mShiftingMode field controls the shifting behaviour of the Bottom Navigation View. The Design Support Library does not provide at this time an API to set this field as the behaviour is hard coded to be enabled when the count of menu items exceeds the number 3. I understand that this is according to the material design specs. Nevertheless I think the library should not force this on the developers. I found one possible solution to this but it feels more like a hack. http://stackoverflow.com/questions/40176244/how-to-disable-bottomnavigationview-shift-mode

BaseTransientBottomBar should expose the ability to dismiss as a user action

It is presently impossible to dispatch a dismissal as anything other than BaseCallback.DISMISS_EVENT_MANUAL from a subclass of BaseTransientBottomBar. It makes sense that the SnackbarManager should be the sole source of truth for the timeout and consecutive events, and it is reasonable that the Behavior should manage swipe events, but subclasses other than Snackbar should be able to indicate that a user took some action.

The status quo forces other subclasses to provide another mechanism for identifying the intent of a manual dismissal, and makes BaseCallback.DISMISS_EVENT_ACTION only meaningful for Snackbars, making its presence in the BaseCallback API questionable for anything other than backwards-compatibility.

Toggle Button

https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons

Unable to sync the project

Error:Unable to find module with Gradle path ':testing:testing/java:testing/java/android:testing/java/android/support:testing/java/android/support/design:testing/java/android/support/design/testapp' (needed by module 'tests'.)

Update the namespace for BottomNavigationView documentation

Reproduction steps

Using xmlns:design="http://schema.android.com/apk/res/android.support.design" and design:menu as mentioned in the documentation of BottomNavigationView over xmlns:app="http://schemas.android.com/apk/res-auto" and app:menu does not show the bottom nav view. The documentation can be misleading.

 <android.support.design.widget.BottomNavigationView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:design="http://schema.android.com/apk/res/android.support.design"
     android:id="@+id/navigation"
     android:layout_width="match_parent"
     android:layout_height="56dp"
     android:layout_gravity="start"
     design:menu="@menu/my_navigation_items" />

The documentation should show this instead

 <android.support.design.widget.BottomNavigationView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/navigation"
     android:layout_width="match_parent"
     android:layout_height="56dp"
     android:layout_gravity="start"
     app:menu="@menu/bottom_navigation_menu" />

Version number

• Found in latest documentation of BottomNavigationView

Improve docs - what version to use

It would be very helpful to expand the docs as to what version one is supposed to put in the brackets in:

dependencies {
compile 'com.android.support:design:[Library version code]'
}
(https://material.io/components/android/)

I had to do some trial/error figuring, only thanks to compiler/IDE hints.

Information I would have been happy to see there:

• what is meant by "Library"
• what is meant by code (is this word needed there at all - seems confusing)
• what is the list of available versions or where to find them
• what is the logic behind the appropriate process of determining the right version

Add tabs adapter for TabLayout

TabLayout creates the tabs in an opaque, non-extensible way and there is no way to provide a custom view at creation time, you have to hack around it with an observer set on the content source (e.g., a ViewPager adapter) and then use setCustomView() on each tab, after they're created.

Besides, the way tabs' views are created prevents libraries such as Calligraphy from correctly applying a typeface to the default tab views, because the TextAppearance is applied only after inflating the view, and there's no way to access the tabs pool nor any hook into the creation of new tabs.

Suggested changes

Have a mechanism to create and bind the tabs' views, similar to list adapters, that have a createTabView() and a bindTabView() methods. The default implementation would simply retain the current behaviour; users could extend the default implementation to tweak the tabs' appearance (e.g., CalligraphyUtils.applyFontToTextView(tabTextView, typeface);) or to inflate their custom tab views without the waste of always inflating the default layout anyways.

Settings: Labels secondary text screen typo

Typo here https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B1PhAWhtrRTraUx2VEtZTXlyaWs/settings-switch2.png

Reproduction steps

• Detailed steps to reproduce

Version number

• Found in CHANGELOG.md

Operating system and device

Related issues

• Type # and the issue number or # and select the from the inline drop down.

Feature request - Raised Button

We have the full specification of raised buttons on the Material guideline, but we still don't have any component on the library.

Sync the project and failed

Overview

Hello!

sync project and report the following error:

Error:Unable to find module with Gradle path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/animation' (needed by modules: 'lib', 'tests'.)
Error:Unable to find module with Gradle path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/bottomappbar' (needed by modules: 'lib', 'tests'.)
Error:Unable to find module with Gradle path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/bottomnavigation' (needed by modules: 'lib', 'tests'.)
Error:Unable to find module with Gradle path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/bottomsheet' (needed by modules: 'lib', 'tests'.)
Error:Unable to find module with Gradle path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/button' (needed by modules: 'lib', 'tests'.)
Error:Unable to find module with Gradle path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/canvas' (needed by modules: 'lib', 'tests'.)
Error:Unable to find module with Gradle path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/card' (needed by modules: 'lib', 'tests'.)
Error:Unable to find module with Gradle path ':lib:lib/java:lib/java/android:lib/java/android/support:lib/java/android/support/design:lib/java/android/support/design/chip' (needed by modules: 'lib', 'tests'.)
.......

• I used the solution Build Failed #58 but it not be ok!
• Android Studio 3.0.1

Add new `Dialog` component

https://material.io/go/design-dialogs

BaseTransientBottomBar shouldAnimate() returns false on Nexus 5 with Accessibility off

Overview

• Tried to create a custom Snackbar using the BaseTransientBottomBar. Although the ContentViewCallback had animations for the animateContentOut() and animateContentIn() methods, the shouldAnimate() method was always returning false on my Nexus 5. After some debugging I found out that AccessibilityManager.isEnabled() was returning true, even though Accessibility settings were off.

Reproduction steps

• Extend BaseTransientBottomBar and BaseTransientBottomBar.ContentViewCallback and add animations for the content inside animateContentOut() and animateContentIn(), on a Nexus 5.

Version number

• Support Library version 25.1.0

Operating system and device

• Nexus 5, Android Version: 6.0.1, Build Number: M4B30X

Feature Request - Add date and time picker dialogs

Overview

Currently the Android Design library does not include Material Design picker dialogs that are compatible with all Android versions supported by the support libraries (API level 9 at the time of writing). Only Android versions starting with Lollipop implement Material Design picker dialogs, and some minor details (such as the time picker transition) were only added with the release of Android Nougat.
As such, I'd love to see an official date and time picker implementation as part of the Material Components library. The official Material Design specification can be found here.

Operating system and device

At least all devices below Android Lollipop, for the time picker transition all devices below Android Nougat. Material Components for other platforms don't include picker dialogs as well.

Side Note

While not directly related to this issue, I'd like to propose and dicuss a minor change to the Material Design specification for time pickers that would make them more versatile and consistent with the date picker:

The advantages of this time picker design would be:

• more consistent styling and sizing across the picker dialogs
• more space for additional resolution, such as seconds and potentially milliseconds

The main disadvantage is that this makes for slightly smaller touch areas.

I'm already exited how this library will develop, now that it is finally open to contributions by the community. Definitely a step in the right direction! 👍
If you're interested in a pull request, let me know. I've already implemented a major part of this in my extension library, it would still need some updates from the Nougat source code though.

Enhancement - Add selected menu item to BottomNavigationView

Overview

In the BottomNavigationView, there is no method to explicitly select a menu item.

Sometimes we need to move to another menu item when some action is done, is like moving to a particular tab like using ViewPager and TabLayout.

It also helps to click on a tab when doing espresso tests.

I worked on a PR to add this.

MenuView performs rebinding/layout/inflation on every click event

Overview

Clicking on a menu entry causes the menu's notifyDataSetChanged() to be invoked internally. This causes text appearance to be rebound and a few views to be re-inflated as well. This adds 30-40ms of delay to opening a menu entry on a high end phone. See screenshot of trace. Or open the attached trace file in chrome:tracing.

Note: this trace is based on an internal fork of android that inserts a couple arm instructions in every method call. The tracing overhead is only a few percentage points. So this trace file is trustworthy. But in case you have reasonable doubts, the systrace screenshot shows similar issues & performance overhead.

Reproduction steps

1. Create app with a MenuView and 10ish menu entries. The Uber app, for example :)
2. Start your profiler of choice
3. Click on a menu entry

Version number

Tested on Android 6P with android 7.1.2, with design library version 27.0.2.

Attached

To view the full trace file, download the trace from https://issuetracker.google.com/issues/73723207 where I originally posted this issue. Then open it in chrome:tracing.

vmtrace screenshot

systrace screenshot

Feature request - Make it easier to add inset dividers to LinearLayout and RecyclerView

It would be lovely to support inset dividers on LinearLayout and RecyclerView.

For both, fine-grained control would be nice; for example, to inset only the middle dividers in a LinearLayout, or to provide dividers only for specific items in a RecyclerView.

I currently use a couple of modifications to LinearLayout and a custom item decoration to achieve this, which I will submit.

Supporting documentation: https://material.io/guidelines/components/dividers.html#dividers-types-of-dividers

Update Material Code Lab for Android to use the Android Studio Layout Editor

Overview

https://codelabs.developers.google.com/codelabs/mdc-android/index.html#0

The material design code lab does not utilize the graphic design tools in Android Studio and the sample tutorial code is not importable in the Samples Browser in Android Studio.

Request

• Update guide to use design tools built into Android Studio
• Add sample code to the Samples Browser in Android Studio
• Also note best practice is not to incline dimensions in a style.xml file ( https://codelabs.developers.google.com/codelabs/mdc-android/index.html#0), but instead but all the dimensions in a dimens.xml

a question about 'gradlew assembleRelease'

git clone https://github.com/material-components/material-components-android.git

gradlew assembleRelease

finally, i got the aar file(located in lib/build/outputs/aar/),but the aar is empty, i can not find any class in the aar/class.jar and can not use it. Can you tell me why, thank you?

https://github.com/material-components/material-components-android/blob/master/docs/howto.md

Release Design support lib from this repo.

Design support lib 27.0.2 doesn't appear to contain the changes in this repo.

Design support lib releases should come from the latest stable code in this repo.

Release on JCenter and/or Maven central.

This library can only be consumed through the Android SDK's 'android' m2repository. Doing so requires accepting a non-standard license despite the fact that all of the contained components are Apache 2-licensed and open source.

Now that this library is on GitHub and new processes are being put in place, getting this library to be available on JCenter or Maven central should be a high priority. There is no logical legal or business reason why the support libraries are not current there. Thankfully now you have the power to change this in the migration. If you need prior art, there are hundreds of Google repositories on GitHub whose source of truth is internal but sync'd with MOE or other means to GitHub which are under the same license as this project and are available on Maven central.

Please unburden we Android developers from the current arcane process of obtaining this library from a non-standard source, with a non-standard license, and using non-standard non-incremental massive binary downloads. JCenter and/or Maven central are the de-facto, widely-used, widely-understood, and standard mechanism for distributing artifacts and they should be used by this library.

(Please do not comment with "+1" or similar on this issue. Use GitHub's reactions.)

Feature Request - Add baseline alignment support to TextInputLayout

Overview

Context, problem or idea, solution or next step

Since 24.2.0, there is no way to align the baseline of the EditText surrounded by a TextInputLayout with the baseline of another component. I believe there are many situations where baseline alignment is required, such as showing an icon on the left of the input field, showing a unit label on the right of the field, and so on.

I am wondering if TextInputLayout could return the baseline position of its child with the getBaseline() method, the behaviour would be consistent and it would be helpful to many developers.

Thanks.

Screenshots/Video (if possible)

N/A

Stack trace (if possible)

N/A

Reproduction steps

In the below layout, @id/my_edit_text and @id/my_unit_label are not aligned on their baseline.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <android.support.design.widget.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/my_edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text" />

    </android.support.design.widget.TextInputLayout>

    <TextView
        android:id="@+id/my_unit_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/unit_label"/>
</LinearLayout>

Version number

25.1.0

Operating system and device

All Android OS and Android devices

Related issues

https://code.google.com/p/android/issues/detail?id=224553

MaterialComponents in 27.0.2 could not be resolved

As per the instructions on the main page, I've tried to apply material design to a TextInputLayout like so:
<android.support.design.widget.TextInputLayout
android:id="@+id/firstnameInput"
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
....

Android Studio cannot resolve the line 'Widget.MaterialComponents.TextInputLayout.FilledBox'
Gradle has
'com.android.support:design:27.0.2'
'com.android.support:appcompat-v7:27.0.2'

I've read on Stack Overflow that these material components have not shipped with the latest design libraries - is this correct? If so, when can we expect them?

Add new `DataTables` component

https://material.io/go/design-data-tables

Chip: support a minimum width property with correct treatment of text and icons

Overview

Chips with short text labels make for difficult tap targets. Developers should be able to specify a minimum width for their chips, similar to app:chipMinHeight, and the text + icon of the chip should center properly in the chip.

android:minWidth gets us halfway there, but when setting a width greater than the organic width of the chip, the text and icon left-align in the chip, which looks terrible.

Publish FlexboxLayout or add dependency for it

ChipGroup is currently using an internal version of FlexboxLayout which seems to be the same as this Google library. I'm already using the latter FlexboxLayout directly, so right now I've got it in my app two times. Could you depend on the library directly? If that isn't possible because you're only depending on support libraries, could you publish FlexboxLayout either as support library or as material component?

Version number

• 28.0.0-alpha1

[Documentation] Provide guidance on building external components

Provide guidance in our documentation to building an external component that can integrate well with the platform’s core component codebase. This is for instances where we decide we cannot incorporate a new component (or UX changes to an existing component) directly into our codebase.

Documentation Build Failed : Broken link

Trying to generate documentation of this repository using material-components-site-generator.

Nabeel@NABEEL-PC C:\Users\Nabeel
$ cd material-components-site-generator\

Nabeel@NABEEL-PC C:\Users\Nabeel\material-components-site-generator
$ gem install bundler
Fetching: bundler-1.16.1.gem (100%)
Successfully installed bundler-1.16.1
Parsing documentation for bundler-1.16.1
Installing ri documentation for bundler-1.16.1
Done installing documentation for bundler after 8 seconds
1 gem installed

Nabeel@NABEEL-PC C:\Users\Nabeel\material-components-site-generator
$ bundle install
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...
Fetching CFPropertyList 2.3.5
Installing CFPropertyList 2.3.5
Fetching i18n 0.8.1
Installing i18n 0.8.1
Using minitest 5.10.1
Fetching thread_safe 0.3.6
Installing thread_safe 0.3.6
Fetching tzinfo 1.2.2
Installing tzinfo 1.2.2
Fetching activesupport 4.2.8
Installing activesupport 4.2.8
Fetching public_suffix 2.0.5
Installing public_suffix 2.0.5
Fetching addressable 2.5.0
Installing addressable 2.5.0
Using bundler 1.16.1
Fetching claide 1.0.1
Installing claide 1.0.1
Fetching fuzzy_match 2.0.4
Installing fuzzy_match 2.0.4
Fetching nap 1.1.0
Installing nap 1.1.0
Fetching cocoapods-core 1.2.0
Installing cocoapods-core 1.2.0
Fetching cocoapods-deintegrate 1.0.1
Installing cocoapods-deintegrate 1.0.1
Fetching cocoapods-downloader 1.1.3
Installing cocoapods-downloader 1.1.3
Fetching cocoapods-plugins 1.0.0
Installing cocoapods-plugins 1.0.0
Fetching cocoapods-search 1.0.0
Installing cocoapods-search 1.0.0
Fetching cocoapods-stats 1.0.0
Installing cocoapods-stats 1.0.0
Fetching netrc 0.7.8
Installing netrc 0.7.8
Fetching cocoapods-trunk 1.1.2
Installing cocoapods-trunk 1.1.2
Fetching cocoapods-try 1.1.0
Installing cocoapods-try 1.1.0
Fetching colored 1.2
Installing colored 1.2
Fetching escape 0.0.4
Installing escape 0.0.4
Fetching fourflusher 2.0.1
Installing fourflusher 2.0.1
Fetching gh_inspector 1.0.3
Installing gh_inspector 1.0.3
Fetching molinillo 0.5.7
Installing molinillo 0.5.7
Fetching ruby-macho 0.2.6
Installing ruby-macho 0.2.6
Fetching nanaimo 0.2.3
Installing nanaimo 0.2.3
Fetching xcodeproj 1.4.2
Installing xcodeproj 1.4.2
Fetching cocoapods 1.2.0
Installing cocoapods 1.2.0
Fetching colorator 1.1.0
Installing colorator 1.1.0
Fetching ffi 1.9.18 (x64-mingw32)
Installing ffi 1.9.18 (x64-mingw32)
Fetching forwardable-extended 2.6.0
Installing forwardable-extended 2.6.0
Fetching htmlbeautifier 1.3.0
Installing htmlbeautifier 1.3.0
Fetching htmlcompressor 0.3.1
Installing htmlcompressor 0.3.1
Fetching mustache 0.99.8
Installing mustache 0.99.8
Fetching open4 1.3.4
Installing open4 1.3.4
Fetching redcarpet 3.4.0
Installing redcarpet 3.4.0 with native extensions
Fetching rouge 1.11.1
Installing rouge 1.11.1
Fetching sass 3.4.23
Installing sass 3.4.23
Fetching sqlite3 1.3.13 (x64-mingw32)
Installing sqlite3 1.3.13 (x64-mingw32)
Fetching liferaft 0.0.6
Installing liferaft 0.0.6
Fetching xcinvoke 0.3.0
Installing xcinvoke 0.3.0
Fetching jazzy 0.7.4
Installing jazzy 0.7.4 with native extensions
Fetching jekyll-sass-converter 1.5.0
Installing jekyll-sass-converter 1.5.0
Fetching rb-fsevent 0.9.8
Installing rb-fsevent 0.9.8
Fetching rb-inotify 0.9.8
Installing rb-inotify 0.9.8
Fetching listen 3.0.8
Installing listen 3.0.8
Fetching jekyll-watch 1.5.0
Installing jekyll-watch 1.5.0
Fetching kramdown 1.13.2
Installing kramdown 1.13.2
Fetching liquid 3.0.6
Installing liquid 3.0.6
Fetching mercenary 0.3.6
Installing mercenary 0.3.6
Fetching pathutil 0.14.0
Installing pathutil 0.14.0
Fetching safe_yaml 1.0.4
Installing safe_yaml 1.0.4
Fetching jekyll 3.4.2
Installing jekyll 3.4.2
Fetching jekyll-contentblocks 1.2.0
Installing jekyll-contentblocks 1.2.0
Fetching jekyll-tidy 0.2.2
Installing jekyll-tidy 0.2.2
Bundle complete! 4 Gemfile dependencies, 57 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

Nabeel@NABEEL-PC C:\Users\Nabeel\material-components-site-generator
$ yarn install
yarn install v1.3.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 79.27s.

Nabeel@NABEEL-PC C:\Users\Nabeel\material-components-site-generator
$ node scripts\build E:\AndroidStudioProjects\material-components-android
warning "node-sass#request#uuid@^3.0.0" could be deduped from "3.1.0" to "[email protected]"
Cleaning...✓
Processing files/directories...
  Warning: assets/app-bars.svg in C:\Users\Nabeel\material-components-site-generator\.stage\android\catalog\app-bar-layout\index.md
  Potentially broken image link detected.

Error:
Broken link CoordinatorLayout.md in C:\Users\Nabeel\material-components-site-generator\.stage\android\catalog\app-bar-layout\index.md
C:\Users\Nabeel\material-components-site-generator\scripts\lib\reporter.js:36
      throw e;
      ^

Error: Broken link detected. Stopping build.
    at processHref (C:\Users\Nabeel\material-components-site-generator\scripts\lib\rewrite-local-links.js:83:11)
    at determineLinkModifications (C:\Users\Nabeel\material-components-site-generator\scripts\lib\rewrite-local-links.js:41:21)
    at rewriteLocalLinks (C:\Users\Nabeel\material-components-site-generator\scripts\lib\rewrite-local-links.js:31:29)
    at files.forEach (C:\Users\Nabeel\material-components-site-generator\scripts\lib\platform-site.js:140:34)
    at Array.forEach (native)
    at PlatformSite.prepareFiles_ (C:\Users\Nabeel\material-components-site-generator\scripts\lib\platform-site.js:140:16)
    at PlatformSite.prepareForBuild (C:\Users\Nabeel\material-components-site-generator\scripts\lib\platform-site.js:102:10)
    at platformSites.forEach (C:\Users\Nabeel\material-components-site-generator\scripts\build:60:10)
    at Array.forEach (native)
    at reporter.step (C:\Users\Nabeel\material-components-site-generator\scripts\build:59:17)

Please clear it, i want offline documentation in my browser.

Unable to use Material Card view

Hi,

I have been trying to add material card view to my preoject. When I add as shown in documentation, it shows class not found exception. I have the below dependencies in my build.gradle. Can you help me

implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
compile "com.android.support:appcompat-v7:26.1.0"
compile 'com.android.support:design:26.1.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:0.5'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:2.2.2'
implementation 'com.android.support:cardview-v7:26.1.0'

Chip: dark theme support

It would be great if Chip's could adapt to dark themes. Currently they still have their light grey background, dark text, and dark ripple. While it kind of works it's far from perfect and looks a bit of.

Reproduction steps

• Use Theme.MaterialComponents or any other dark theme
• add some chips to a layout

Version number

• 28.0.0-alpha1

Operating system and device

• Emulator API 27 and P

Add new `Dividers` component guidance

https://material.io/go/design-dividers

Add new `Banner` component

https://material.io/go/design-banner