Phone Number Control

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.

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/"

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:

You can change these properties for the MAFSpinner control in the skinning XML:

You can change these properties for the MAFUITextView control in the skinning XML: