Input

Input represents customizible text input field, underline and icon.

Inherited from AppCompatEditText/UITextField

Customization fields

Type	Field	Description	Default value
FontStyleItem	FontStyle	Responsible for font customization for enabled input state.
UIFont Typeface	Font Typeface	Responsible for text font.	System Roboto regular
float	LetterSpacing	It is responsible for input text letters spacing.	-0.24
float	TextSize	It is responsible for input text size.	17
UIColor Color	TextColor	It is responsible for input text color in normal state.	#343334
UIColor Color	TextColorDisabled	responsible for input text color in disabled state.	#C0BFC0
UIColor Color	PlaceholderColor HintTextColor	Responsible for input field hint text color in normal state.	#777677
UIColor Color	PlaceholderColorDisabled HintTextColorDisabled	Responsible for input field hint text color in disabled state.	#C0BFC0
UIColor Color	FocusedColor	Responsible for underline color in focused state and for icon's color for LeftImage property.	#3C6DF0
UIColor Color	DisabledColor	Responsible for underline color in disabled state and for icon's color for LeftImage property.	#C0BFC0
UIColor Color	NormalUnderlineColor	Responsible for underline color in normal state.	#C0BFC0
UIColor Color	PopulatedUnderlineColor	Responsible for underline color in populated state.	#C0BFC0
UIColor Color	NormalIconColor	Responsible icon's color for LeftImage property in normal state.	#777677
UIColor Color	PopulatedIconColor	Responsible icon's color for LeftImage property in populated state.	#3C6DF0
UIImage Drawable	LeftImage	Sets left side image for all states.
bool	IsValid	Responsible for invalid state in control, when entered text is not valid. In this case input will change color to red.	true

Input states

• Normal state - when control is unfocused and Text is empty.
• Populated state - when control is unfocused and Text is not empty.
• Invalid state - when validation property IsValid sets false. Changed color for underline and LeftImage property. This color sets by IEOSTheme and can be changed only with changing the theme.
• Disabled state - when control is disabled.
• Focused state - when control is focused.

Usage

Android

For Android platform there are two ways to add Input to the layout: to the axml markup file or to the code behind.

Sample for creating Input in code behind for Android:

var input = new Input(Context);
input.LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
input.TextSize = 18;
input.TextColor = Color.White;
input.Hint = "placholder";
input.HintTextColor = Color.LightGray;
input.LeftImageFocused = Context.GetDrawable(Resource.Drawable.FocusedIcon);
input.LeftImageUnfocused = Context.GetDrawable(Resource.Drawable.UnfocusedIcon);
input.LeftImageDisabled = Context.GetDrawable(Resource.Drawable.DisabledIcon);
input.UnderlineColorFocused = Color.Blue;
input.UnderlineColorUnfocused = Color.DimGray;
input.UnderlineColorDisabled = Color.LightGray;

Sample for creating Input in axml markup for Android:

<EOS.UI.Droid.Controls.Input
    android:id="@+id/inputTop"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="20dp"
    android:hint="Enter text" />

Simple way for usage validation is subscribe for TextChanged event of Input control and there implement custom validation logic. For example validation logic for empty text looks next:

input.TextChanged += (s, e) =>
{
    input.IsValid = !string.IsNullOrEmpty(input.Text);
};

Note: For customization Font/Typeface you should add file with custom font to resources. Note: Since Input inherited from AppCompatEditText, there can be issues with adding to Activity class. You should use AppCompatActivity instead. If for some reasons, you need to keep Activity as context, just add to layout:

<EOS.UI.Droid.Controls.Input
    ...
    android:theme="@style/Theme.AppCompat" //or whatever theme you want
    .../>

Same with creation from code:

var input = new Input(new ContextThemeWrapper(this, Resource.Style.Theme_AppCompat));

iOS

For iOS Input can be added from the .xib/storyboards files or from code behind.

Sample for creating Input in code behind for IOS:

var input = new Input();
input.Frame = new CGRect(0, 0, 150, 56);
input.TextSize = 18;
input.TextColor = UIColor.White;
input.Placeholder = "placholder";
input.PlaceholderColor = UIColor.LightGray;
input.LeftImageFocused = UIImage.FromBundle("FocusedIcon");
input.LeftImageUnfocused = UIImage.FromBundle("UnfocusedIcon");
input.LeftImageDisabled = UIImage.FromBundle("DisabledIcon");
input.UnderlineColorFocused = UIColor.Blue;
input.UnderlineColorUnfocused = UIColor.DarkGray;
input.UnderlineColorDisabled = UIColor.LightGray;

For IOS for usage validation simplest way is subscribe for EditChanged event of Input control and there implement custom validation logic. For example validation logic for empty text looks next:

input.EditChanged += (s, e) =>
{
    input.IsValid = !string.IsNullOrEmpty(input.Text);
};