Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
    • Take a guided tour
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • GCC, GCCH, DoD - Federal App Makers (FAM)
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Community Engagement
    • Community Calls Conversations
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Community App Samples
    • Re: Revamping Power Apps controls based on Google'...

    Re: Revamping Power Apps controls based on Google's Material Design

    01-14-2022 08:42 AM

    Super User PowerAddict
    Super User
    6836 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    PowerAddict
    Super User PowerAddict
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    Revamping Power Apps controls based on Google's Material Design

    ‎02-10-2020 12:04 AM

    Power Apps controls, although powerful, provide limited branding and customization capabilities. With Google investing a lot in research to come up with design standards (Material Design), I wanted to incorporate those standards into Power Apps controls using the standard out of the box controls. These revamped controls will help our apps look just like, if not better, than any app we see on our mobile phones!

     

    The 3 controls I have revamped so far are: text fields, tooltips, and buttons. The reasons for picking these controls are: 

     

    1. The standard out of the box (OOB) versions, while good, do not provide many customization capabilities
    2. The design for these controls was very different, so there was a greater scope of improvement
    3. These looked way better than their OOB counterparts, helping Power Apps look as pretty, if not prettier than any other app on our phones
    4. Tooltips interested me the most because
      • honestly, they were the easiest to implement!!!
      • on a serious note, the OOB tooltips don't show up on mobile as there is no way to "hover"
    5. One specific button type - floating action buttons (FAB) interested me the most among all the different types as they help save some real estate, especially for mobile apps.

     

    The design specifications from Google are very detailed. I went through those documents (so you don't have to go through those documents!) and summarized the design for tooltips and buttons: 

     

    1. Tooltips
      • They should become visible when a user taps onto a control, like a text input field
      • When visible, they should display a text label providing a description of the control
      • They should stay visible for 1.5 seconds or until the user changes focus to another control
    2. Buttons
      • A FAB represents the primary action of a screen
      • When pressed, a FAB can display/emit 3 to 6 related actions in the form of a speed dial
      • The speed dial actions close when a user taps the FAB again or anywhere else on the screen
    3. Text Fields
      • This article does a very good job of explaining the research and provides a summarized design as well: https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03

     

    I have blog posts for each one of these controls: 

     

    1. Text Fields: https://thepoweraddict.com/implementing-googles-material-design-for-labels-using-power-apps/
    2. Tooltips: https://thepoweraddict.com/implementing-googles-material-design-for-tooltips-using-power-apps/
    3. Buttons: https://thepoweraddict.com/implementing-googles-material-design-for-buttons-using-power-apps/

     

    Hopefully, my series of posts on Google's Material design along with the app I am sharing here will inspire you to achieve beautiful, more customizable controls using standard Power Apps controls!

     

    Would love to hear your feedback, comments, suggestions, and questions! 

     

    Thank you!

    Hardit Bhatia

    The Power Addict

    https://thepoweraddict.com

     

    Here is a demo of all 3 controls on one screen!

     

    GoogleMaterialDesign.gif

    The Power Addict - Google Material Design.msapp
    1122 KB
    Labels:
    • Labels:
    • Mobile App Design and User Experience
    Message 1 of 3
    18,463 Views
    36 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    javkhaa0523
    javkhaa0523 Advocate I
    Advocate I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎01-14-2022 04:14 AM

    great work! Clever way to accomplish floating icons 

    Message 2 of 3
    6,849 Views
    2 Kudos
    Reply
    PowerAddict
    Super User PowerAddict
    Super User
    In response to javkhaa0523
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎01-14-2022 08:42 AM

    Thank you @javkhaa0523! Glad you liked it!

    Message 3 of 3
    6,836 Views
    0 Kudos
    Reply

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Pages
    • Power Automate
    • Power Virtual Agents

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2023 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    California Consumer Privacy Act (CCPA) Opt-Out Icon Your California Privacy Choices