MAFSectionHeader

The MAFSectionHeader control is a section header bar that contains a string label in the center, similar to the default action bar. It can also contain an action, which is aligned to the right of the header. MAF adds styling capabilities to the Header UI component, and provides predefined size variations, such as small and normal. MAF supports skinning of tapped/untapped, and enabled/disabled visual states.

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

LinearLayout ll = new LinearLayout(this);
MAFSectionHeader headerTop = new MAFSectionHeader(this, "Address Input View");
		ll.addView(headerTop);

MAFSectionHeader also supports creating components in the Android layout XML:

<com.sap.maf.uicontrols.view.MAFSectionHeader
                    android:id="@+id/address_section_header"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    x:text="@string/address_button_header"
                    x:text_alignment="CENTER" />

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

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

<Style TargetType="ActionBar" Key="DefActionBar" platform="android">
		<VisualStates>
			<VisualState Name="Pressed">
				<Setter Property="Background" Value="#fffdb919" />
				<!-- background color -->
			</VisualState>
		</VisualStates>
		<Setter Property="Background" Value="#ff000000" />
		<!-- background color -->
		<Setter Property="Bg_Bottom_Shadow" Value="#ff999999" />
		<!-- background shadow color -->
		<Setter Property="Separator" Value="#44ffffff" />
		<!-- background separator color -->
		<Setter Property="Foreground" Value="#88ffffff" />
		<!-- text color -->
		<Setter Property="FontFamily" Value="sans_serif" />
		<!-- font type -->
		<Setter Property="FontSize" Value="22" />
		<!-- font size -->
	</Style>

MAFSectionHeader supports skinning of tapped/untapped, and enabled/disabled visual states.

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

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

<Style TargetType="ActionBar" Key="RedSectionHeader" BasedOn="DefActionBar" platform="android">
		<VisualStates>
			<VisualState Name="Pressed">
				<Setter Property="Background" Value="#ffff0000" />
				<!-- background color -->
			</VisualState>
		</VisualStates>
	</Style>

To create a header from code, use:

header = new MAFSectionHeader(context, title, MAFSectionHeader.TEXT_ALIGNMENT.LEFT, 
“RedSectionHeader”);

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

<com.sap.maf.uicontrols.view.MAFSectionHeader
                    android:id="@+id/address_section_header"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    x:text="@string/address_button_header"
                    x:text_alignment="CENTER"
                    x:flavor=”RedSectionHeader” />

You can change these properties in the skinning XML:

Background	Color of the MAFSectionHeader’s background; can also be a freestyle gradient. Colors are defined as RGBA (red, green, blue, alpha).
Foreground	Control's text color.
FontFamily	Control's font family.
BorderBrush	Border attribute of the MAFSectionHeader.
Shadow	The shadow attributes of the MAFSectionHeader (Bg_Top_Shadow): background top shadow color.