MAFSearchBox

The MAFSearchBox control extends the capabilities of the android.widget.EditText native control. MAF adds styling capabilities to the EditText UI component. You can also use MAFSearchBox as a password input field, or a mandatory input field.

To create and present a default SAP style instance of MAFSearchBox, use:

MAFSearchBox searchBox = new MAFSearchBox(this);
searchBox.setOnSearchListener(mafOnSearchListener)

Use mafOnSearchListener to obtain the entered search term.

To create an MAFSearchBox in the Android layout XML, use:

<com.sap.maf.uicontrols.view.MAFSearchBox
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:hint="@string/hint_search_box" />

The MAF skinning engine customizes the edit text. This is the XAML content for the default style of the TextBox TargetType:

<Style TargetType="TextBox" Key="DefTextBox" platform="android">
		<VisualStates>
			<VisualState Name="Unfocused_Enabled">
				<Setter Property="Background" Value="#ff999999" />
				<!-- base line color -->
				<Setter Property="Foreground" Value="#ff333333" />
				<!-- text color -->
				<Setter Property="DetailsForeground" Value="#ff333333" />
				<!-- hint color -->
				<Setter Property="FontFamily" Value="sans_serif" />
				<!-- font type -->
				<Setter Property="FontSize" Value="14" />
				<!-- font size -->
			</VisualState>

MAFSearchBox supports skinning of different visual states of the EditText. To set visual states, use the <VisualStates></VisualStates> tag:

<Style TargetType="TextBox" Key="DefTextBox" platform="android">
		<VisualStates>
			<VisualState Name="Unfocused_Enabled">
				<Setter Property="Background" Value="#ff999999" />
				<!-- base line color -->
				<Setter Property="Foreground" Value="#ff333333" />
				<!-- text color -->
				<Setter Property="DetailsForeground" Value="#ff333333" />
				<!-- hint color -->
			</VisualState>
			<VisualState Name="Unfocused_Disabled">
				…
			</VisualState>
			<VisualState Name="Focused_Disabled">
				…
			</VisualState>
			<VisualState Name="Focused_Enabled">
				…
			</VisualState>
			<VisualState Name="Pressed">
				…
			</VisualState>
		</VisualStates>
	</Style>

You can also inherit the style definition from the standard EditText and create a flavored EditText. This is an example for a red styled EditText flavor:

<Style TargetType="TextBox" Key="RedTextBox" BasedOn="DefTextBox" platform="android">
		<VisualStates>
			<VisualState Name="Unfocused_Enabled">
				<Setter Property="Background" Value="#0091E0" />
				<!-- base line color -->
				<Setter Property="Foreground" Value="#ff0000" />
				<!-- text color -->
				<Setter Property="DetailsForeground" Value="#F50742" />
				<!-- hint color -->
			</VisualState>
		</VisualStates>
		<Setter Property="FontFamily" Value="sans_serif" />
		<!-- font type -->
		<Setter Property="FontSize" Value="14" />
		<!-- font size -->
	</Style>

To create this flavor of MAFSearchBox in the layout XML, use:

<com.sap.maf.uicontrols.view.MAFSearchBox
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            x:flavor="RedTextBox"
            android:hint="@string/hint" />

You can change these properties in the skinning XML:

Background	Base line color
Foreground	Text color
FontFamily	Control's font type
DetailsForeground	Hint color
FontSize	Font size