material-components / material-components-android-codelabs

Codelabs for Material Components for Android (MDC-Android)

Material Components: Shared Documentation and Policies

Material Components for Android, iOS, web and Flutter help developers execute Material Design with modular and customizable UI components. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional user experiences.

This repo contains all common documentation for Material Components projects across the different platforms.

Repos

• Material Components Android
• Material Components iOS
• Material Components Web
• Material Components Flutter

Useful Links

• Contributing
• Filing an Issue
• Components Request Policy
• Code of Conduct
• Stack Overflow (external site)
• Material.io (external site)
• Material Design Guidelines (external site)
• Discord Chat Rooms (external site)

material-components-android-codelabs's Issues

Help Regarding closing the toolbar when change activity

Respected sir/mam
I am using same toolbar layout like "shr_backdrop" in my application but when i am changing my activity via using one of buttons of "shr_backdrop" layout and later on come back it the toolbar remains open it not closing. I am doing it in java
Please help

Typo in MDC-103 Android: Material Theming with Color, Elevation and Type (Kotlin)

https://codelabs.developers.google.com/codelabs/mdc-103-kotlin/index.html?index=..%2F..%2Findex#6

You are told to paste and replace a section of your Manifest.

Currently I had:

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/shr_app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
        android:theme="@style/Theme.Shrine">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

I was asked to replace it with:

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
   android:name="com.google.codelabs.mdc.kt.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Dark">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

Causing red lines under:

android:name="com.google.codelabs.mdc.kt.shrine.application.ShrineApplication"

because it should actually be:

android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"

MDC-101 Kotlin: isPasswordValid is javaish

https://codelabs.developers.google.com/codelabs/mdc-101-kotlin/#4

private fun isPasswordValid(text: Editable): Boolean {
   return text != null && text.length >= 8;
}

Editable is not nullable and ";" is not required on Kotlin

should be like:

private fun isPasswordValid(text: Editable): Boolean {
   return text.length >= 8
}

or even nicer private fun isPasswordValid(text: Editable) = text.length >= 8

sorry to be pity, just trying to improve the docs

MDC-103 Android (Java) - title style textAllCaps

The mistake is at the 2nd last xml box containing code for styles.xml:

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   ...
</style>

The correct item name is "android:textAllCaps".

Codelab details:

• Level MDC-103
• Language Java
• Link to the codelab with the issue https://codelabs.developers.google.com/codelabs/mdc-103-java/index.html#3

MDC-101>Step 4> Issue id: ObsoleteLayoutParam

Noob Alert:
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"

When adding this code to the MaterialButton, i get the following.

Not sure what I'm doing wrong here. Ofcourse, I'm able to see the output properly. But I want to understand what is obsolete here. Is it a mistake from my side?

README links to a dead url

Material Components for Android are modular and customizable UI components that implement Material Design. This repo houses the source for the Building Beautiful Apps Faster codelab.

This repository is structured as branches. You can checkout an individual branch by running git checkout 101-starter or the equivalent for the codelab you are following.

There are some simple scripts for maintaining this repository in the tools/ directory.

Building Beautiful Apps Faster links you to a site that says "Unavailable
This codelab is unavailable. For other great Material Design resources, see material.io."

Material shape element lost shadow when shape color has alpha like (#F0FFFFFF)

Material shape element lost shadow when shape color has alpha like (#F0FFFFFF)

Android studio 3.3
Material 1.1.0-alpha02
Kotlin

Steps to reproduce the behavior:

1. create a material card view in layout
2. create a shape. like round. set the shape color with alpha not ff
3. set background of the card view in MainActivity.kt
4. run app and would see that shadow disappears. when set shape color without alpha, shadow displays as expected.

MDC 102 Wrong Importation!

It's suggested to import androidx.appcompat.widget.Toolbar and not android.widget.Toolbar
on https://codelabs.developers.google.com/codelabs/mdc-102-java/#2

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;


public class ProductGridFragment extends Fragment {

   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setHasOptionsMenu(true);
   }
  
   @Override
   public View onCreateView(
           @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       // Inflate the layout for this fragment with the ProductGrid theme
       View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);

       // Set up the toolbar
       setUpToolbar(view);

       return view;
   }
  
   private void setUpToolbar(View view) {
       Toolbar toolbar = view.findViewById(R.id.app_bar);
       AppCompatActivity activity = (AppCompatActivity) getActivity();
       if (activity != null) {
           activity.setSupportActionBar(toolbar);
       }
   }

   @Override
   public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
       super.onCreateOptionsMenu(menu, menuInflater);
   }

}```

**But Code snippets showed below the page imported** _"android.widget.Toolbar"_ instead.

MD103 - Step 6 Should Use StaggeredGridLayoutManger

Describe the bug
The GridLayoutManager is not the best for the job. We can use the StaggeredGridLayoutManager and in the adapter's onCreateViewHolderMethod we can change the StaggeredGridLayoutManager.LayoutParams.isFullSpan to true.

To Reproduce

1. the results are the same.

Codelab details (please complete the following information about the codelab):

• Level (MDC-103)
• Language ( Kotlin)
• Link to the codelab at the step with the issue https://codelabs.developers.google.com/codelabs/mdc-103-kotlin/index.html?index=..%2F..index#5

Additional context
https://stackoverflow.com/questions/33696096/setting-span-size-of-single-row-in-staggeredgridlayoutmanager/33707897#

Typo in MDC-111 Android: Incorporating Material Components into your codebase (Kotlin)

https://codelabs.developers.google.com/codelabs/mdc-111-kotlin/index.html?index=..%2F..%2Findex#3

MDC Buttons are a simple plug-and-play component. You just replace the XML component name Button with MaterialButton, and apply the default MaterialButton.

Apply the default MaterialButton... theme?

MDC-103(103-starter) Error: The prefix "tools" for attribute "tools:targetApi" associated with an element type "item" is not bound

Describe the bug
Could not build when implement code as instruction. shows error,

Error: The prefix "tools" for attribute "tools:targetApi" associated with an element type "item" is not bound

To Reproduce
Steps to reproduce the behavior:

1. Download repo
2. Checkout 103-starter branch
3. Edit colors.xml and styles.xml from example
4. See error

Expected behavior
build should be successful, but it didn't

Codelab details (please complete the following information about the codelab):

• Level MDC-103
• Language Java
• Link https://codelabs.developers.google.com/codelabs/mdc-103-java/index.html#2

MDC-102 Java - Android Studio warning for textAppearance xml resource marked as private

As shown in the image, I'm getting a warning that the resource 'android:textAppearance="?attr/textAppearanceHeadline6" is marked private in com.android.support:design-widget. To fix this copy the resource into your own project instead.

MDC-101 kotlin: Error In ImageRequester.kt

Describe the bug
MDC-101 Kotlin: build error (Unresolved reference: displayMetrics)

To Reproduce
Steps to reproduce the behavior:

1. Go to network package
2. Click on ImageRequester.kt
3. Scroll down to calculateMaxByteSize(context: Context) function
4. See error

Expected behavior
build finished successfully

Screenshots
https://drive.google.com/file/d/15EMFG3SR5SLtFThlXVX7ibrAEz0RKZ1y/view?usp=sharing
https://drive.google.com/file/d/0B_bfXO9nDogtVFpacHNsVXNydktQMDBMUDJjRk9ZN3dDdWlF/view?usp=sharing

**Codelab details **

• Level (MDC-101)
• Language (Kotlin)
• Link to the codelab at the step with the issue
  https://github.com/material-components/material-components-android-codelabs
  

Multi-line app bar title

Describe the bug
This bug should be a feature request.
As per Material anatomy of the top App bar:

Do.
If title text is long, use a prominent app bar and wrap the title to two lines.

To Reproduce
Currently the codelabs only explain how to set the title and color

Expected behavior
Codelabs should explain how to wrap the title to two lines.

Screenshots
If applicable, add screenshots to help explain your problem.

Codelab details (please complete the following information about the codelab):

• Level (MDC-101, MDC-102, MDC-103, MDC-104, or MDC-111)
• Language (Java or Kotlin)
• Link to the codelab at the step with the issue
  https://codelabs.developers.google.com/codelabs/mdc-102-java/#2

Additional context
Add any other context about the problem here.

MDC-102 Kotlin: "shr_product_card.xml" imports wrong "MaterialCardView"

Describe the bug
When running and building the app at step 5 (displaying cards without data), I'm getting the following error:
java.lang.ClassNotFoundException: Didn't find class "android.support.design.card.MaterialCardView"

I started working with the 101-starter branch, the bug is likely from using android.support.design.card.MaterialCardView within shr_product_card.xml. The 102-starter branch correctly uses com.google.android.material.card.MaterialCardView which resolved the issue for me.

To Reproduce
Steps to reproduce the behavior:

1. Work through MDC-102 Step 5 using 101 starter branch
2. Build and run the app
3. Log in to Shrine
4. See crash and error in logcat

Expected behavior
After logging into Shrine, I should see a grid of empty material cards with an app bar on top.

Codelab details (please complete the following information about the codelab):

• MDC-102
• Kotlin)
• https://codelabs.developers.google.com/codelabs/mdc-102-kotlin/#4

MDC-101 JAVA: MaterialButton bug

Describe the bug

I follow the mdn-101 course for Java.On the official website => this。

The button component is used as follows, but the error is reported all the time. I'm looking at Google for reasons, and it only works properly when the android:textAppearance attribute is added.

<android.support.design.button.MaterialButton
       android:id="@+id/next_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

Source code for MDC-104 Android: Material Advanced Components (Kotlin) doesn't build

https://codelabs.developers.google.com/codelabs/mdc-104-kotlin/index.html?index=..%2F..%2Findex#1

When you download the source there is an extra import that causes the build to fail.

In ProductGridFragment.kt the line import com.google.codelabs.mdc.java.shrine.ProductGridItemDecoration should be removed.

Then everything builds fine.

Shrine app starter is actually a ready app

Downloading or cloning Shrine starter app in MDC-101 Set up your development environment will give already done app

MDC-102 Code Adjustment

Describe the bug
Unused syntax: semicolon after return statement in Product Grid Fragment.kt

To Reproduce
Steps to reproduce the behavior:

1. Go to Product Grid Fragment.kt
2. Scroll down to override onCreateView
3. See error after return statement there is a semicolon, fully aware that it does nothing except confuse a new developer. Not referring to myself, although I was questioning if I was in the correct code lab.

Thank you

Failed to find target with hash string android-p install missing platforms

Any idea why I get this error in android studio when gradle build runs with your repository?https://stackoverflow.com/questions/50826588/failed-to-find-target-with-hash-string-android-p-install-missing-platforms-a

thanks

Typo in MDC-103 Android: Material Theming with Color, Elevation and Type (Kotlin)

https://codelabs.developers.google.com/codelabs/mdc-103-kotlin/index.html?index=..%2F..%2Findex#5

We'll also need to make a small change to our product_grid_fragment.xml to remove the paddings from our NestedScrollView, as follows:

product_grid_fragment.xml should be shr_product_grid_fragment.xml

MDC - 102 Java: Documentation regarding issues + Style Theme issues

Description

1. When importing the Toolbar class, the documentation was importing import android.widget.Toolbar instead of import androidx.appcompat.widget.Toolbar

2. Screenshot of the home screen is not correct.
Toolbar color is colorAccent.
But the screenshot is showing the toolbar color is colorPrimary

3. In Section: Create a grid of cards
ProductGridFragment.java
Line: 39

The tutorial is saying: recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));

But it should be like this here:

material-components-android-codelabs/java/shrine/app/src/main/java/com/google/codelabs/mdc/java/shrine/ProductGridFragment.java

Line 39 in 9e0db31

recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, RecyclerView.VERTICAL, false));

URL: https://codelabs.developers.google.com/codelabs/mdc-102-java/index.html?index=..%2F..io2019#4

Expected behavior + Solution Proposal

1. The Toolbar should be getting imported from androidx class.

Solution:
In ProductGridFragment.java
import androidx.appcompat.widget.Toolbar;

2. Toolbar should be of Shrine Theme.

Solution:
In values/styles.xml
Replace

    <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">?attr/colorAccent</item>

with

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">@color/colorPrimary</item>

3.
Here is the correct code: https://github.com/material-components/material-components-android-codelabs/blob/102-complete/java/shrine/app/src/main/java/com/google/codelabs/mdc/java/shrine/ProductGridFragment.java

**Codelab details **

• Level (MDC-102)
• Language (Java)
• Link to the codelab at the step with the issue (ex: https://codelabs.developers.google.com/codelabs/mdc-102-java/index.html?index=..%2F..io2019#2)

Returns textInputLayout list zero

In For loop List returns Zero

MDC-102 ProductGridFragment.java imports wrong Toolbar library

The instructions clearly state "When importing the Toolbar class, make sure you import androidx.appcompat.widget.Toolbar and not android.widget.Toolbar"

Yet the code shows:
import android.widget.Toolbar;

The finished-codelab code is correct.

MDC-101: mentions passwordToggleDrawableEnabled and it doesn't exist

Supporting a toggle for password visibility using app:passwordToggleDrawableEnabled

I think that's mixing passwordToggleDrawable and passwordToggleEnabled

Next button listener explanation is in Java

https://codelabs.developers.google.com/codelabs/mdc-101-kotlin/#4

After the code snippet for view.next_button.setOnClickListener, it says:

We've added the line ((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); to the else case of the click listener.

This sentence should be changed to quote the line from the Kotlin code instead:

We've added the line (activity as NavigationHost).navigateTo(ProductGridFragment(), false) to the else case of the click listener.

MDC-103 kotlin styles.xml: xml namespace name 'android' instead of 'tools'

Listings for styles.xml on the web page:

<resources xmlns:android="http://schemas.android.com/tools">

must read

<resources xmlns:tools="http://schemas.android.com/tools">

MDC-101

Java MDC 101
Step 2.
Shr-login_fragment.xml
in the tutorial it says.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="132dp"
android:text="@string/shr_app_name"
android:textAllCaps="true"
android:textSize="16sp" />

In the Application when you download the code.

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="132dp"
android:text="@string/shr_app_name"
android:textAllCaps="true"
android:textSize="16sp" />

In app-> res->values->stirngs.xml.
There is a "string name="shr_app_name">
Shrine

Issue reporting bug for a codelab

I'm working on the codelab "Build Your First Android App in Kotlin"

https://codelabs.developers.google.com/codelabs/build-your-first-android-app-kotlin/index.html?index=..%2F..%2Findex#3

If I click "Did you find a mistake? Please file a bug." it takes me to a google form https://docs.google.com/a/google.com/forms/d/e/1FAIpQLSdG8IaxfyJT31833Tub2Gtbq3EcZ4o4ubPWXg_B1KBzfh9NCA/viewform with "You need permission
This form can only be viewed by users in the owner's organization.

Try contacting the owner of the form if you think this is a mistake. Learn More."

I figure someone here would be able to help even though it's not a material-component issue.

MDC-101 Need to specify the branch to start

The codelab doesn't specify which branch to start, and master is the solution.

shape not shown in step 4

after folowing all steps from 1 to 4 the output is not what is shown in step 4.
I mean the shap "shr_product_grid_background_shape" is not shoen

**Codelab details

• Level ( MDC-10)
• Language (Java )
• Link to the codelab at the step with the issue (https://codelabs.developers.google.com/codelabs/mdc-104-java/index.html?index=..%2F..index#3)

Minor typo error

"Widget.MaterialComponents.TextInputLayout.OutlinedBox" instead of OutlineBox without the d

MDC-103: Step 6

Describe the bug
While trying to reproduce the override fun getItemOffsets i found an error due to the

?

addition in the RecyclerView state parameter. The error shown is that the fun doesn't override nothing.

To Reproduce
Steps to reproduce the behavior:

1. Go to MDC-103 codelab
2. Click on step 6
3. Scroll down to ProductGridItemDecoration.kt
4. See error

Codelab details (please complete the following information about the codelab):

• MDC-103
• Kotlin
• https://codelabs.developers.google.com/codelabs/mdc-103-kotlin/#5

MDC-101 Keyboard Issue

Describe the bug
The Keyboard in the login screen does overlay the Buttons and text box

To Reproduce
Steps to reproduce the behavior:

1. start app in emulator
2. enter user name
3. Now the Keyboard Overflows the text input (not very user friendly design)

Expected behavior
All Textboxes and Buttons appear on top of the keyboard

Screenshots
If applicable, add screenshots to help explain your problem.

Codelab details (please complete the following information about the codelab):

• Level MDC-101
• Language Kotlin

Additional context
I tried to fix it my self by using the constraint layout and redesign everything. But constraint layout does not work here! All my control are then somehow stuck to the left top corner of the screen. This happens although constraints have been aplied and I have added the constraints library dependency in build.gradle

MDC-103: Wrong app bar color in Android 10

Describe the bug
The color of the AppBar is grey but in the tutorial is shown as purple

To Reproduce
Steps to reproduce the behavior:

1. Clone the repo for MDC-103 branch
2. Run the code
3. Pass the login screen
4. See grey color in AppBar

Expected behavior
The color should be purple as the tutorial shows

Screenshots

Codelab details (please complete the following information about the codelab):

• Level MDC-103
• Language Kotlin
• https://codelabs.developers.google.com/codelabs/mdc-103-kotlin/#1

Additional context
The colorPrimary is the one having the purple but it should be the colorAccent, as later this is the one that is indicated that needs to be changed.

MDC-101 Kotlin - step 5 - error message in password field not working

I had to modifiy the code to make it work:

       // Set an error if the password is less than 8 characters.
        view.next_button.setOnClickListener({
            if (!isPasswordValid(view.password_edit_text.text!!)) {
                view.password_text_input.error = getString(R.string.shr_error_password)
            } else {
                // Clear the error.
                view.password_text_input.error = null
                // Navigate to the next Fragment.
                (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
            }
        })

        // Clear the error once more than 8 characters are typed.
        view.password_edit_text.setOnKeyListener({ et, _, _ ->
            if (isPasswordValid((et as EditText).text!!)) {
                // Clear the error.
                (et.parent as TextInputLayout).error = null
            }
            false
        })

Relative Layout is legacy and Constraint Layout should be uses.

Change Shrine App (Kotlin) to use Constraint Layout instead of Relative Layout.

MDC-102 code uses "GridLayoutManager.VERTICAL" instead of "RecyclerView.VERTICAL"

On the web page, the sample code in ProductGridFragment.java onCreateView() includes this:

recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));

But GridLayoutManager.VERTICAL should be RecyclerView.VERTICAL

The finished-codelab code is correct.

MDC-104-kotlin-starter project dependency conflict.

MDC-104 Starter project for both Java and Kotlin added an api dependency for the Material library.
api 'com.google.android.material:material:1.1.0-alpha05' but the tutorial ask for adding another dependency for the api 'com.android.support:design:28.0.0-alpha3' in build.gradle. Please check Add project dependencies section. This causes conflict while adding the dependencies. Also some button in login screen are from com.google.android.material package but in tutorial some xml layout has buttons from the android.support.design.button package. Please check the xml code for the layout file shr_backdrop.xml. This could result in crashes at runtime.
Thanks

Couldn't resolve resource @string/path_password_strike_through

this is what i am getting when opening the starter project in AS 3.2 RC3

did nothing just opened up the starter project.
below is the screen shot of complete view.

A

B

Dead Link

Describe the bug
In this codelab you'll use the default components provided by MDC Android. You'll learn to customize them in MDC 103: Material Design Theming with Color, Shape, Elevation and Type.
is a dead link

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codelabs.developers.google.com/codelabs/mdc-101-kotlin/#0
2. Scroll down to MDC Android components in this codelab
3. Click on MDC 103: Material Design Theming with Color, Shape, Elevation and Type.
4. See error http://go/mdc-103 is a dead page

Expected behavior
live page

Codelab details (please complete the following information about the codelab):

• Level (MDC-101
• Language Kotlin)
• Link to the codelab at the step with the issue (ex:
  https://codelabs.developers.google.com/codelabs/mdc-101-kotlin/#0
  MDC Android components in this codelab

Top app bar background color set to accent color

The accent color is applied to the top app bar, which, IMHO, is wrong. What's the point of having the primary color then if it is not used at all? If the branding color is the accent color, then just make this color the primary color. Also, AppBarLayout's background color defaults to ?colorPrimary.

MDC-102 Kotlin: setUpToolbar method doesn't exist

In Step 3 - Add a top app bar:

Now add a call to the setUpToolbar method we added to the content of the onCreateView() method with the following.

We never added a setUpToolbar method, so presumably this is referring to the call to setSupportActionBar.

shr_product_grid_fragment.xml changes in MDC-104 without explanation

Describe the bug
In page 3 of MDC-104, we are told to add this code:

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

Note paddingTop and paddingBottom of 100dp.

Further down the page, this has become:

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

Note paddingTop of 88dp and no paddingBottom. The change is not mentioned in the tutorial text.

Expected behavior
Mention that the paddings need to be changed.

Screenshots
If applicable, add screenshots to help explain your problem.

Codelab details (please complete the following information about the codelab):

• MDC-104
• Java
• https://codelabs.developers.google.com/codelabs/mdc-104-java/index.html#2

Additional context
Add any other context about the problem here.

MDC - 102 Kotlin: tutorial is not same as code for setSupportActionBar

The tutorial said:

First, let's set up the toolbar. In ProductGridFragment.kt's onCreate, set the activity's Toolbar to be used as an ActionBar using setSupportActionBar. You can add do this just before the return statement.

In https://codelabs.developers.google.com/codelabs/mdc-102-kotlin/#2

But in fact setSupportActionBar() should be called after the view is created, and it is true to be put in the onCreateView() method in the code.

We need to update the document, replace onCreate to onCreateView.

Thank you!

Typo in mdc-103-kotlin

This is the third of 4 codelabs that will guide you through building an app called Shrine, an e-commerce website that sells clothing and home goods.The related codelabs can be found at:MDC-101: Material Components (MDC) BasicsMDC-102: Material Design Structure and LayoutMDC-104: Material Design Advanced ComponentsBy the end of MDC 104, you'll build a website that looks like this:

We're building an app, not a website. Typo I assume?

Shrine app failed to launch: MDC 101 - next button error

Is there an issue with my code? when I include this snippet the app fails to launch:

` final TextInputLayout passwordTextInput = view.findViewById(R.id.password_text_input);
final TextInputLayout passwordEditText = view.findViewById(R.id.password_edit_text);
MaterialButton nextButton = view.findViewById(R.id.next_button);

    // Snippet from "Navigate to the next Fragment" section goes here.

    nextButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (!isPasswordValid((Editable) passwordEditText.getEditText()))
            {
                passwordTextInput.setError(getString(R.string.shr_error_password));
            }
            else
            {
                passwordTextInput.setError(null);//clear the error

                ((NavigationHost)getActivity()).navigateTo(new ProductGridFragment(),false);// false removes previous screen from back stack
            }
        }
    });

    // Clear the error once more than 8 characters are typed
    passwordEditText.setOnKeyListener(new View.OnKeyListener() {
        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {

            if (isPasswordValid((Editable) passwordEditText.getEditText()))
            {
                passwordTextInput.setError(null);// clear the error
            }
            return false;
        }
    });`

Help?????

setOnKeyListener not working as intended android java

the error message is not getting cleared after 8+ alphabet characters are typed , it works fine for numbers at the end

To Reproduce
Steps to reproduce the behavior:

1. Go to '1st screen'
2. Click on 'password edit test'
3. type 5 characters
   4.click on next button
4. See error
   6.now type more characters
   7.error message dose not clear even after typing 8 or more characters

Expected behavior
error message must vanish after typing 8 characters

Codelab details (please complete the following information about the codelab):

• Level (MDC-101)
• Language (Java )
• Link to the codelab at the step with the issue (ex: https://codelabs.developers.google.com/codelabs/mdc-101-java/index.html?index=..%2F..index#4

setOnKeyListener not working on password edittext

hi ,
let's say that i wrote 7 letters in the password field , clicking on next will show me an error,
if i added any other chars the error doesn't disappear (setOnKeyListener seems to be triggered only when i delete one char from password)

MDC-102 Missing Attributes in shr_product_grid_fragment.xml

android:background="@color/colorPrimary" attribute is missing from the shr_product_grid_fragment.xml as a result the Toolbar Color appears to be Grayed out instead of showed in the Tutorial
MDC-102

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ProductGridFragment">
  
   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           android:background="@color/colorPrimary"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:navigationIcon="@drawable/shr_menu"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>
  
</FrameLayout>
![image](https://user-images.githubusercontent.com/61408704/75141642-51ebd480-56e9-11ea-802b-c991d0eff2c1.png)