0918-201411 Svg images, material design, and images states

Material design is a hundred page document explaining that each active UI object - ie: a UI object with which the user can interact - should react in a way the user knows that he is interacting with it.

This is the generalisation of button states: when you press a button its color changes. XamSvg has a built in feature which dynamically remaps the svg color depending on the image state.

On Android use local:colorMappingSelected
         
  <XamSvg.SvgImageView
            local:svg="@raw/mailgreen"
            local:colorMappingSelected="ff2ad14e=ffdd5c2b"
            local:colorMapping="ff2AD14E=ffF46732"
            android:layout_width="50dp"
            android:layout_height="wrap_content" />


By code:

colorMapping = new Dictionary<stringstring> {{"434343","232323"}}; colorMappingSelected = new Dictionary<stringstring> {{"434343","737373"}};
image = SvgFactory.FromBundle("pictos/hand.svg", fillHeightPixels: 1.2f, colorMapper: SvgColorMapperFactory.FromDic(colorMapping)); imageSelected = SvgFactory.FromBundle("pictos/hand.svg", fillHeightPixels: 1.2f, colorMapper: SvgColorMapperFactory.FromDic(colorMappingSelected)); var button = new UiButton {     Font = isSmall || isVerySmall ? AppStyles.TextFont4Medium : AppStyles.ButtonFont1,      BackgroundColorDisabled = AppStyles.ButtonBackgroundColorDisabled,     BackgroundColor = AppStyles.BackColor,     Opaque = true };
button.SetImage(image, UIControlState.Normal); button.SetImage(imageSelected, UIControlState.Highlighted); button.SetImage(imageSelectedUIControlState.Selected);


Feedback and Knowledge Base