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!
This is AWESOME Hardit. Thank you for sharing. I’m now a subscriber.
Thanks a lot David! I am glad you found it useful!
I have a couple more posts where I have revamped tooltips and floating action buttons, do check those out as well and let me know in case of any questions.
Toolttips – https://thepoweraddict.com/implementing-googles-material-design-for-tooltips-using-power-apps/
Buttons – https://thepoweraddict.com/implementing-googles-material-design-for-buttons-using-power-apps/
Loving this! I’m new to PowerApps, and trying to implement PowerApps internally for my company, but I’m having a couple issues.
I’m getting double ‘Labels’ for both ‘Text Inputs’
Textinput2 is always visible
The Rectangle wont switch to Blue OnSelect
Any help would be much appreciated! Subscribed!
Thanks a lot Dustin! Can you please elaborate a bit on the 1st statement regarding getting double labels?
For the other two, make sure the following properties have been set:
1. For TextInput1, set the OnSelect property to Set(testvar, true)
2. For the Rectangle, set the Fill property to If(!testvar, ColorFade(Gray, 0.5), RGBA(56, 96, 178, 1))
3. For TextInput2, set the Visible property to testvar
4. For the label to be added as the background, set the OnSelect property to Set(testvar, false)
Let me know if these help. Feel free to reach out to me via email – hardit.bhatia@thepoweraddict.com
Hope you are having as much fun with Power Apps as I do!
I stumbled across this article just recently and love it along with the other two of this theme, thanks! One question is how do you manage this with multiple fields of this type in an app? Are you building it out once and then copying it for each field? Are you using a component?
Very curious as to your path of least resistance for re-use.