MAFButton

The MAFButton control extends the capabilities of the android.widget.Button native button. MAF adds styling capabilities to the Button UI component, and provides predefined variations, such as small and normal buttons.

To create and present a default SAP style instance of MAFButton, use this code:

LinearLayout row1 = new LinearLayout(this);   
MAFButton btn = MAFUIFactory.getInstance().getButton(this, 
MAFButton.NORMAL_BUTTON);
                 btn.setText("Button");
                 btn.setOnClickListener(new OnClickListener() {
                           
                       @Override
                 public void onClick(View v) {
                             // progress dialog is shown                             
                             MAFDialogWithProgressBar dialog = new 
MAFDialogWithProgressBar(ColorApp.this);                             
                             dialog.setMessage("Message");                             
                             dialog.show();                       
                        }
                 });   row1.addView(btn);

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

     <com.sap.maf.uicontrols.view.MAFButton
           android:id="@+id/mafbutton"
           android:layout_width="wrap_content"
           android:layout_height="50dip"
           android:text="skinned button" />

The MAF skinning engine customizes the buttons. To apply SAP style, set the custom style in the XML file for background, foreground, shadow, font family, and font size.

This is the XAML content for the default style of the Button TargetType:

<Style TargetType="Button" Key="DefButton" platform="android">
                 <VisualStates>                       
                       <VisualState Name="Unfocused_Enabled">                             
                             <Setter Property="Background" Value="#FFDDDDDD" />                             
                             <!-- background color -->                             
                             <Setter Property="Foreground" Value="#FF333333" />                             
                             <!-- text color -->                             
                             <Setter Property="Bg_Bottom_Shadow" Value="#80DDDDDD" />                             
                             <!-- background bottom shadow color -->                             
                             <Setter Property="Bg_Dark_Bottom_Shadow" Value="#FF999999" />                             
                             <!-- background bottom dark shadow color -->                             
                             <Setter Property="Bg_Top_Shadow" Value="#FFEBEBEB" />                             
                             <!-- background top shadow color -->
                       </ VisualState >

MAF supports skinning of tapped/untapped, and enabled/disabled visual states:

To set visual states, use the <VisualStates></VisualStates> tag:

<VisualState Name="Unfocused_Enabled">                             
                <Setter Property="Background" Value="#FFDDDDDD" />                             
                <!-- background color -->                             
                <Setter Property="Foreground" Value="#FF333333" />                             
                <!-- text color -->                             
                <Setter Property="Bg_Bottom_Shadow" Value="#80DDDDDD" />                             
                <!-- background bottom shadow color -->                             
                <Setter Property="Bg_Dark_Bottom_Shadow" Value="#FF999999" />                             
                <!-- background bottom dark shadow color -->                             
                <Setter Property="Bg_Top_Shadow" Value="#FFEBEBEB" />                             
                <!-- background top shadow color -->                       
        </VisualState>                       
        <VisualState Name="Unfocused_Disabled">                       
        …                       
        </VisualState>                       
        <VisualState Name="Focused_Disabled">                       
        …                       
        </VisualState>                       
        <VisualState Name="Focused_Enabled">                       
        …                       
        </VisualState>                       
        <VisualState Name="Pressed">                       
        …
        </ VisualState >

You can set different sizes for the MAFButton programmatically. To create a normal-sized standard button, use:

MAFButton btn = MAFUIFactory.getInstance().getButton(this, MAFButton.NORMAL_BUTTON);

To create a small standard button, use:

MAFButton smallBtn = MAFUIFactory.getInstance().getButton(this, MAFButton.SMALL_BUTTON);

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

<Style TargetType="Button" Key="RedButton" BasedOn="DefButton" platform="android">
                 <VisualStates>
                        <VisualState Name="Unfocused_Enabled">                             
                              <Setter Property="Background" Value="#FFAEB9" />                             
                              <Setter Property="Foreground" Value="#B0171F" />                             
                              <Setter Property="Bg_Bottom_Shadow" Value="#ffE466B9" />
                        </VisualState>
                 </VisualStates>
                              <Setter Property="SolidColorBrush" Value="#ff999999" />
                              <!-- group button separator line color -->
           </ Style >

To create an MAFButton from code, use:

MAFButton btn11 = MAFUIFactory.getInstance().getButton(this, 
MAFButton.NORMAL_BUTTON, "RedButton");

You can change the following properties in the skinning XML:

Background	Color of the MAFButton’s background; can also be a freestyle gradient. Colors are defined as RGBA (red, green, blue, alpha).
Foreground	The control's text color.
FontFamily	The control's font family.
BorderBrush	The border attribute of the MAFButton.
Shadow	The shadow attributes of the MAFButton: Bg_Bottom_Shadow – background bottom shadow color. Bg_Dark_Bottom_Shadow – background bottom dark shadow color. Bg_Top_Shadow – background top shadow color.