User Interface Design - Creating Layered Buttons

In the previous post, I produced a template application with a rich settings screen to allow easy and centralised control over certain characteristics of the application.
In this post I am going to start adding more reusable components such as buttons so I can speed up development of applications that are created from this template.  The buttons are going to be created as 3 layers to give an interesting look, but retain the expected functionality.  The layers are going to be (starting from the bottom)

  1. The background circle, coloured and with a border to make it stand out
  2. An icon appropriate to the functionality
  3. A invisible layer over the top to both add the button functionality with the OnSelect function, as well as highlight when the user hovers the mouse over the button.
I like to use these layered buttons as they give a more interesting design for my applications, and I prefer to use round buttons instead of the square ones which are produced by simply using a icon on its own.  The other requirement I want to have is that my button will resize automatically to the header banner on which it is placed.  I will use the background circle to be my anchor shape, and position and size the top 2 layers relative to that.  These buttons can then be saved onto a hidden screen and copy/pasted into my app as required.  Lets start with a Home button, to be used to navigate from any screen back to the landing screen.
In my app, I insert an circle from the Insert/Icons menu and name it btnSettingsNavHomeBG, to show that it's a button on the settings screen that navigates to home and that its the background.  Firstly, I want to position this circle on the header bar on the right hand side with a space around it determined by the settingIconPadding value in the settings screen.  I need to set the properties of this circle as follows:

X:
rctBannerSettingsScreen.X+rctBannerSettingsScreen.Width-btnSettingsNavHomeBG.Width-settingIconPadding
rctBannerSettingsScreen is the banner at the top of my screen so I start from the left, ie X, position of this (which is generally 0 but I want to be prepared in case the banner moves), add the width of the banner so my button now starts where the banner ends.  I then subtract, ie move the button left, by the width of the button and then again by the padding setting.
Y:
rctBannerSettingsScreen.Y+settingIconPadding
Simpler than the X coordinate as we are simply spacing it from the top edge of the banner

My button now looks like this


I now need to size it correctly, since the size needs to be relative to the height of the banner, I set the properties

Height:
rctBannerSettingsScreen.Height-settingIconPadding*2
Width:
btnSettingsNavHomeBG.Height

The height is set to be the height of the banner, but I subtract the padding setting twice to allow for the space above and below the button.  The width is simply set to be the same as the height to maintain the circle shape.

This is looking better now, and if I change the Heading Size setting the banner and button will resize correctly.


Now I'll colour it to be the same colour as the banner, but with a white border so it stands out.

Fill:
settingAppBannerColour.Fill
BorderThickness:
2
BorderColor:
White

With the Fill property, I need to use the .fill property of the setting.  There is a lack of consistency within PowerApps when using the colour of one object to fill another.  Sometimes it requires the .fill, sometimes it doesn't.  If it gives an error without, then try it with.

At this point I'm asking, myself if I should be putting these properties into additional settings.  I am likely to have a number of buttons in my application and it might be useful to be able to recolour them from the settings screen.  I believe that at some point in the future I will be glad that I did it, so I'll add an additional settings area to my settings screen for buttons settings

So 5 minutes later, my app looks like so


Now we need to add the image icon, btnSettingsNavHomeImage, over the top of this circle, so I'll add the house shaped icon, and set its X,Y, Height and Width properties to be taken from the circle. e.g. btnSettingsNavHomeBG.XThe icon is too big for the circle, so I'll create another setting settingButtonImagePadding to use to reduce the size of the image within its height and width using the 4 padding properties - PaddingBottom, PaddingLeft, PaddingRight and PaddingTop
I also need to set the properties
Colour
settingButtonColour.Fill
Fill
RGBA(0,0,0,0) This is normally set to transparent like this by default.

Looking good, now I have this


I just need to add the final top layer, which will be another circle, btnSettingsNavHomeForeground.  I will size and position it the same as I did for the image by referring to the background circle, but I will set its fill to be transparent also with the property set to RGBA (0,0,0,0).

I will also set the properties
HoverFill:
RGBA(255,255,255,20%)

OnSelect:
Navigate(scrLandingScreen,ScreenTransition.Fade)

So that's it.  My button now navigates to the landing screen, it hightlights when I hover over it and it is sized correctly relative to the banner.  I will now add a similar gear icon button on the home screen that navigates to the settings screen but make it visible only if the user is me.  I won't go through that in this post, but a subsequent msapp file will contain that.

For today, here is the msapp file for where we are now.  Please comment below if you find this helpful or have any suggestions to improve on this template.



Comments