A reader asked  if it might be possible to “gray out” a button so that pressing it has no action, until appropriate data has been entered?

The answer is “Yes, we can do this.” After some thought, I came up with the following simple solution.

Update 1: Check the comments to this post for a reader’s great solution for doing this for Location services dependent function.

Update 2: Also, you can set the button component’s Enabled property to false, so that the button will not function. Then set Enabled to true once the data entry meets your app’s requirements.

User Interface

What we want to do is have the button look like it is “grayed out” and unusable until after some data is entered into the field. In the text box, I have set the  “hint” value to “Button available when data entered”:

After the user has entered some data, the button becomes “active” as shown here:

Designer View

Set up this app by dragging a horizontal layout to the top, and then adding a label (with its text changed to “Data entry” and a text box data entry field to its right.

Add a button. On the button’s properties, set the text color to white (instead of the usual black). This makes the button appear to be “grayed out” (see screen shot).

Drag a Clock component from the Sensors category, to the designer window. On the Clock‘s properties, set the timer interval to a small value such as 250 milliseconds. The Clock‘s event handler will continuously check the data entry field for proper data.

The components list – I renamed the text box to txtDataEntry and the button control to btnEnterData.

Blocks View

The implementation is easy. First, set up a global variable, which I have named DataEntered and set it to false. Once sufficient or correct data has been entered, the code changes DataEntered to true.

The btnEnterData.Click event handler consists of an if-then block. It checks to see if DataEntered is true; if it is, then it executes the blocks of code for processing the button (in this example, I have left this blank – insert your own code blocks to do something!)

The guts of the program are handled in the Clock’s Timer event handler. Every 250 milliseconds, we do a simple test to see if data has been entered and if at least 4 characters of data have been type in the text box. If so, then we set DataEntered to true and we turn the text color on the button to black so that the button appears to now be active. You can add more complex tests here – has a date been entered in the proper format? Has a password been entered with at least one upper case letter and one number? You can implement whatever rules you want to have here.

The text box control has two events – gotfocus and lostfocus. Initially I tried to use those to implement this feature, but this approach does not work. We want the button to change to “active” as soon as the proper data has been entered. But the gotfocus event occurs only when you first tap the text box entry field and lostfocus occurs only when you have moved elsewhere in the user interface.

Tricks

What if you have more than one control you wish to have “grayed out”? Simple implement the same code as above, but add a 2nd (or 3rd) Clock component to your app. Your app can have multiple clocks. Then implement the appropriate code for the additional clock event handlers and button handlers.

You could also implement this feature for say, a series of check boxes. For example, suppose you have 4 check boxes on screen and the user may select 1 to 4 of them, but the app should not continue until at least one box has been selected. Your “Continue” button would be grayed out until at least one check box has been selected. Once a check box value has been selected you can use code similar to the above to activate the button.

Download Source Code

GrayBtnDataVerify.aia

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

• App Inventor 2 Introduction (Volume 1 e-book)
  Step-by-step guide to easy Android programming
• App Inventor 2 Advanced Concepts (Volume 2 e-book)
  Step-by-step guide to Advanced features including TinyDB
• App Inventor 2 Databases and Files (Volume 3 e-book)
  Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
• App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
  Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed