Implementing Google’s Material Design for labels using Power Apps

Having shared a video describing how to implement Google's Material Design for labels in Power Apps, I wanted to document my approach to make it easier for anyone to recreate the design. I dedicate this to Joel Lindstrom who was curious to know if it was possible to create this design using Power Apps. The evolution of Material Design's text fields can be found here.

Step 1: Add a Text Input control and make the following changes to its properties:

• Default: blank
• Hint Text: Label
• Font Size: 20
• Height: 90
• Top Padding: 5
• Bottom Padding: 0
• Left Padding: 16
• Right Padding: 5
• Fill: RGBA(204, 204, 204, 0.5)
• BorderThickness: 0
• RadiusTopLeft: 10
• RadiusTopRight: 10
• RadiusBottomLeft: 0
• RadiusBottomRight: 0
• FocusedBorderThickness: 0
• HoverColor: RGBA(0, 0, 0, 1)
• HoverFill: RGBA(204, 204, 204, 0.5)
• OnSelect: Set(testvar, true)

The text input control should look like this:

Step 2: Add a Rectangle control from the Icon section and make the following changes to its properties:

• Y Position: right below the Text Input control
• Width: same as the width of the Text Input control
• Height: 5
• Fill: If(!testvar, ColorFade(Gray, 0.5), RGBA(56, 96, 178, 1))
• BorderThickness: 0
• FocusedBorderThickness: 0

Without clicking in the Text Input control, the Rectangle will have a gray color fill, as shown below.

The Rectangle's fill color changes when the user clicks inside the text input control.

Step 3: Add another Text Input control with the following properties:

• Default: TextInput1.HintText
• Y Position: same as that of the other Text Input control
• Height: 32
• Font Size: 15
• Font Weight: Semibold
• Top Padding: 10
• Bottom Padding: 10
• Left Padding: 16
• Right Padding: 5
• Fill: RGBA(230, 230, 230, 1)
• BorderThickness: 0
• FocusedBorderThickness: 0
• RadiusTopLeft: 10
• RadiusTopRight: 10
• RadiusBottomLeft: 0
• RadiusBottomLeft: 0
• Color: RGBA(0, 18, 107, 1)
• DisabledColor: RGBA(0, 18, 107, 1)
• DisabledFill: RGBA(230, 230, 230, 1)
• DisplayMode: DisplayMode.Disabled
• Visible: testvar

Step 4: Add a Label with the following properties:

• X Position: 0
• Y Position: 0
• Width: Screen width
• Height: Screen height
• Text: blank
• OnSelect: Set(testvar, false)
• Reorder the label and send to back

Now, the set of these controls will look like this without any clicks:

When clicked inside the Text Input control, the set of controls will look like this:

Here is a working demo:

Hopefully this presents a good base to expand upon and make more changes/variations e.g. making the hover color and the pressed color of Text Input 1 to a slightly darker shade to exactly match Google's design.

Have fun! Get addicted!