Developer

Phone Number Control

Use the phone number control to present and edit phone numbers that are formatted according to the locale settings of your phone.

In edit mode the user can:
  • Tap the number to show the numerical keypad, where you can enter the phone number. The phone number is formatted as you enter each number.
  • Tap the cell title to select the phone type from a predefined list, which you can customize.
  • In multi-line mode, add more than one line by tapping the “Add new” label. Each line has a cancel icon to discard that line.

MAFPhoneNumberInputView

MAFPhoneNumberInputView is a complex control, which means that it builds on top of simple controls, such as MAFUITextView,  MAFEditText, and MAFSpinner. It extends the capabilities of these native Android simple UI controls and adds styling capabilities to the phone number input UI component.

This class represents a line on the phone number input UI. It includes an edit field for the number, a number type selector, and, when more than one input line appears, a cancel button that you can use to remove those lines.

To create and present these views in default SAP style, use:
private MAFPhoneNumberInputView phoneInputView;       

phoneInputView = new MAFPhoneNumberInputView(Context context, String title, 
String opc, boolean isEditable, boolean isSingleLine); 
To create MAFPhoneNumberInputView in the Android layout XML, use:
         <com.sap.maf.localeawarecontrols.MAFPhoneNumberInputView
               android:id="@+id/phone_input_sl"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
               android:layout_marginLeft="6dp"
               android:layout_marginRight="6dp"
               android:hint="@string/phone_input_hint"
               x:single_line="true"
               x:text="@string/phone_number"
               android:visibility="visible" /> 
Add the add the SAP XML namespace (http://sap.com/) to the layout file’s root tag:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:x="http://sap.com/"

The MAF skinning engine customizes the phone number input. To apply SAP style, set the custom style for background, foreground, shadow, font family, and font size in the XML file. Because this complex control consists of three simple controls, you must set all three TargetTypes:

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 > 
This is the XAML content for the default style of the Spinner TargetType:
<Style TargetType="ComboBox" Key="SpinnerDef" platform="android">
                 <VisualStates>                       
                       <VisualState Name="Unfocused_Enabled">                             
                             <Setter Property="Background" Value="#ff999999" />
                             <!-- base line color -->                             
                             <Setter Property="SolidColorBrush" Value="#ff666666" />                             
                             <!-- triangle color -->                             
                             <Setter Property="Foreground" Value="#ff333333" />                             
                             <!-- text color -->
                       </ VisualState > 
This is the XAML content for the default style of the Label TargetType:
<Style TargetType="Label" Key="DefLabel" platform="android">
                 <Setter Property="Foreground" Value="#ff333333" />
                 <!-- text color -->
                 <Setter Property="FontFamily" Value="sans_serif" />
                 <!-- font size -->
                 <Setter Property="FontSize" Value="18" />
                 <!-- font style -->
</ Style > 
You can also inherit the style definition from the standard phone number input and create a flavored phone number input. Here is an example for a red styled phone number input flavor:
<Style TargetType="Label" Key="RedPhoneNumberInputView" BasedOn="DefLabel" 
platform="android">
   …   
</Style>   

<Style TargetType="TextBox" Key="RedPhoneNumberInputView" BasedOn="DefTextBox" 
platform="android">
   …   
</Style>   

<Style TargetType="ComboBox" Key="RedPhoneNumberInputView" BasedOn="SpinnerDef" 
platform="android">
   …   
</ Style > 
After creating custom styles, you can create flavored phone number input using:
phoneInputView = new MAFPhoneNumberInputView(Context context, String title, 
String opc, boolean isEditable, boolean isSingleLine, ”RedPhoneNumberInputView”);
You can change these properties for the MAFEditText control in the skinning XML:
Background Base line color
Foreground Text color
FontFamily The control's font type
DetailsForeground Hint color
FontSize Font size
You can change these properties for the MAFSpinner control in the skinning XML:
Background Color of the MAFSpinner’s background; can also be a freestyle gradient. Colors are defined as RGBA (red, green, blue, alpha).
Foreground The control's text color.
SolidColorBrush The control's triangle color.
BorderBrush The border attribute of the MASFSpinner.
You can change these properties for the MAFUITextView control in the skinning XML:
Foreground Control's text color
FontFamily Control's font family
FontSize Control's font size