A picker view lets the user choose between certain options by spinning a wheel on the screen. It allow users to quickly choose between a set of distinct available options.
Picker views are well suited for choosing things like date and time (as the date picker does) that have a moderate number of discrete options. The user interface provided by a picker view consists of components and rows. The list of options should be ordered in some logical way to make scanning easier. If you need to display a list of items to the user, the Picker View control can offer a single selection of these items.
Configure.IT offers you Picker View in a customised way i.e, Picker View is a button control. You tap on it and native Picker View is presented along with the toolbar on top with "Done" and "Cancel" buttons. "Done" button is for confirming the selection and "Cancel" button is for cancelling the selection. Configure.IT provides you the perfect UI/UX for Picker View. Picker offers the ability to present a list of mutually exclusive items.
A Boolean property that indicates whether the gesture recognizer is enabled.
A Boolean value that changes picker button’s state to "highlighted".
Set the state of Button to either of the following; normal, highlighted, selected or disabled.
A Boolean value that changes picker button’s state to "selected".
Sets the title to be used as the default state.
Sets the color for the title to be used for the Normal state.
Sets the shadow color for the title to use for the Highlighted state.
Sets the Image to use for the Normal state.
Sets the Background Image to use for the Normal state.
Sets the horizontal alignment for content (text or image or both) of picker button.
Sets the vertical alignment for content (text or image or both) of picker button.
Adjusts the position of Image in sync with the Text.
Padding is defined as space between the edges of the view and the view's content. Drawable Padding is the padding between the drawables and the text. Sets the padding, in pixels, of all four edges.
Enables the Interaction with user, i.e. control responds when user taps on it.
Used to set the transparency to the object which ranges from 0 to 1.
Used to set the background color to the Picker View button.
Sets tint color for Picker View button.
Sets border width for a Picker View.
Sets radius with which control's rounded corners should be drawn. Setting this property will enable control appear with rounded corners.
Sets the border color for a control. Works only if "Border Width" property is set to a value more than 0. Default would be black color.
Sets width of each dash in dashed border pattern for a Picker View.
Helps set the spacing between Dashes for Dashed Border.
Sets angle in degrees to which the Picker View which is in its normal state, has to be rotated. Possible values for this property are 360 to 360.
This property is used to prevent sorting of elements by clicking on any of the selector elements. If this property is enabled, values in picker will be shown in the order as received from web service. Else, value will be sorted.
Enable search lets you add a search bar on picker tool where user can type a search query based on which picker options will be filtered.
To show numeric value in picker for selection (ex: 0100)
Sets the difference between consecutive values displayed in picker if, "Picker Numerical Bounds String" property is set. For Example, if "Picker Numerical Bounds String" is set as 10100, and "Step Value For Picker Numerical Values" is set to 10 , then the values will be displayed as 10,20,30...100.
Sets the title of the row which should be added on top of all rows in picker view, in addition to the data displayed in it. Picker selected value will be cleared, if this option is selected by the user.
Select and set the Font type as desired, from the list of available options.
Sets the desired size of the Font.
The technique to use for wrapping and truncating the picker button’s title.
Sets custom font name (special font, not available in default fonts) for title to be displayed in picker button.
Set the tint color, for popover containing Picker View and toolbar.
Select and set the background image for the popover from the images that you had uploaded in the Asset Manager.
Enable the popover shadow, if desired. This lets you have the shadow effect.
Used to set tint color of toolbar of picker.
Used to set text color of title shown on center of toolbar when picker appears.
Title shown on center of toolbar when picker appears.
Sets color for bar button ("Done" and "Cancel") shown on Toolbar, which is added above picker view.
The horizontal offset of the shadow used to display the button’s title.
Positive value always extend to the right from the user's perspective.
The vertical offset of the shadow used to display the button’s title. Positive value always extend up from the user's perspective.
If checked the checkbox, the picker button title shadow changes from engrave to emboss appearance when highlighted.
A Boolean value that determines whether tapping the Picker View button causes it to glow.
A Boolean value that determines whether the image changes when the Picker View button is highlighted.
A Boolean value that determines whether the image changes when the Picker View button is disabled.
Sets the edge inset properties for the content within the button separately. i.e, there are three possible contents of button Title, Image or Content(both image and title included). Whereas there are 4 edge properties of button which can be set separately for each content type.
Sets the inset or outset top margin for the button title. A positive value shrinks, or insets, top edgemoving it closer to the center of the button. A negative value expands, or outsets, top edgemoving it away from center of the button.
Sets the inset or outset bottom margin for the button title. A positive value shrinks, or insets, bottom edgemoving it closer to the center of the button. A negative value expands, or outsets, bottom edgemoving it away from center of the button.
Sets the inset or outset left margin for the button title. A positive value shrinks, or insets, left edgemoving it closer to the center of the button. A negative value expands, or outsets, left edgemoving it away from center of the button.
Sets the inset or outset right margin for the button title. A positive value shrinks, or insets, right edgemoving it closer to the center of the button. A negative value expands, or outsets, right edgemoving it away from center of the button.
Sets the X position of the Picker View.
Sets the Y position of the Picker View.
Sets the width of the Picker View.
Sets the height of the Picker View.
Sets unique identifier for the control. Control can be referenced with name set in this property for configuration.
Set "Object ID" of Picker View which contains this control or can serve as parent.
Sets the web service key from data received from web server, which corresponds to the value to be displayed on the control.
Sets “key name to datasource” for a particular part of datasource as Picker View datasource.
Select the Web service key data which will be retrieved as output based on selection.
Sets key corresponding to the value in picker datasource(response from web service) that has to be displayed in each row of Picker View, if picker should have multiple components then this should be comma(,) separated string of keys pointing to values to be displayed in each component.
Select the json file from which picker data has to be loaded.
Sets the Object ID(s) of the control(s) on which picked value from Picker View has to be displayed. If the picker has multiple components then comma(,) separated Object IDs of the controls have to be set. If no value is set then the picked value(s) are displayed tap and picker view gets displayed.
This property specifies if picker data should be loaded only after clicking on it. For example if web service call is made in picker's "Click" event. (Note:This will only work if "API call" action is configured in "Click" event of picker)
Group of vertical android default properties.
These are the android default properties to set selected view with respect of other view.
Reference object that is used for positioning selected object
marginTop : Specifies extra space on the top side of this view. This space is outside this view's bounds.
marginBottom : Specifies extra space on the bottom side of this view. This space is outside this view's bounds.
Value define the extra space value in pixel.
This property centers the child vertically with respect to the bounds of its parent view.
If any of the vertical layout setting parameter(s) are selected then this value is selected to indicate user applied vertical custom layout setting parameter(s)
Group of horizontal android default properties.
Reference type is the the default property to set selected view with respect to other view.
Reference object that is used for positioning selected object.
marginLeft : Specifies extra space on the left side of this view. This space is outside this view's bounds.
marginRight : Specifies extra space on the right side of this view. This space is outside this view's bounds.
Offset Value defines the extra space value in the pixel.
This property centers the child horizontally with respect to the bounds of its parent view.
If any of the horizontal layout setting parameter(s) are selected then this value is selected to indicate user applied horizontal custom layout setting parameter(s).
The width of the view cannot be less than the given value.
If user select “Default Min Width” then android default value is taken otherwise it takes 0dp.
The height of the view cannot be less than the given value.
If user select “Default Min Height” then android default value is taken otherwise it takes 0dp.
Sets the width of the view
match_parent/fill_parent : Takes the width as its parent view
wrap_content : Takes the width as its content’s width
Sets the height of the view
match_parent/fill_parent : Takes the height as its parent view
wrap_content : Takes the height as its content’s height
The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific amount of pixels.
For instance, a Left value of 2 will push the view's content by 2 pixels to the right of the left edge.
This property centers the child vertically with respect to the bounds of its parent view.
For instance, a Top value of 2 will push the view's content by 2 pixels to the bottom of the top edge.
For instance, a Bottom value of 2 will push the view's content by 2 pixels to the top of the bottom edge.
Group of vertical android default properties.
For instance, a Right value of 2 will push the view's content by 2 pixels to the left of the right edge.
Group of horizontal android default properties.
If any of the layout setting parameter(s) are selected then this value is selected to indicate user applied custom layout setting parameter(s).
Hiding an element can be done by checking ‘Hide’. This property lets you hide the control.
Advance - Sets auto resizing with respect to superview, for Picker View.
This event is triggered on load of a control. Further, the desired Action can be defined as per the requirement.
This event is triggered when user taps on the control and Action is configured on a ‘Click’.
This event is triggered when user confirms selection of an option from picker control by tapping on “Done” button on toolbar, added on top of the pickerview control.
If Picker View’s data comes as an API call response then setting “Key Name To Data” property is mandatory. You need to set “Key Name To Data” property to a key from API response, which points to the value to be shown in each row of Picker View. “Key To Data Index” property gives you the desired output value. In case the values shown in picker are repeating, this property will serve the purpose of differentiating/bifurcating. Set a key from API response which gives a value to identify each row uniquely, in “Key To Data Index” property.
You can add search functionality to Picker View, for making it easier for user to traverse through Picker options. You need to enable “Search Enable” property for adding search feature.
When you have to show only numbers (given that numbers are in an order) in Picker View; you do not have to create an API for that because we provide you with two properties that can serve this purpose. You need to set “Picker Numerical Bounds String” in format “{start_value} {end_value}” e.g 0100 (picker values will be displayed from 0 to 100).
You can also set step value for numbers, default being 1, you need to set “”Step Value For Picker Numerical Values” which will be the difference between consecutive values displayed in picker. For Example, if "Picker Numerical Bounds String" is set as 10100, and "Step Value For Picker Numerical Values" is set to 10 , then the values will be displayed as 10,20,30...100, if "Picker Numerical Bounds String" is set as 10010, then the values will be displayed as 100,90,80...10.
Picker View control provides you a provision to display an additional option (in addition to options from API or numerical bounds) as first option, whose selection does not have any effect i.e, it implies that there is no selection made by user. You shall set “Picker First Option Title” for this.
To configure data in multiple components, set “Key Name To Data” with comma separated keys. Number of components would be the number of keys set. eg: key_name1, key_name2, key_name3 and if you wish to show numerical values for the components, then set “Picker Numerical Bounds String” property like 0100,1020,4010 [first component 0100, second 10 40, third 4010]. “Key To Data Index” property if any, should also be set with comma separated values. eg: index_key_name1, index_key_name2, index_key_name3