text properties data validation styles/themes material design...text properties data validation...

Text PropertiesData ValidationStyles/ThemesMaterial Design

1www.sisoft.in

Sisoft Technologies Pvt LtdSRC E7, Shipra Riviera Bazar, Gyan Khand-3, Indirapuram, Ghaziabad

Website: www.sisoft.in Email:info@sisoft.inPhone: +91-9999-283-283

Text Properties

• Type face

• Text Size

• Text Color

• TextStyle

• Text Shadow

2www.sisoft.in

• Every Android device comes with a collection of standard fonts:– Droid Sans– Droid Monospace – Droid Serif

• They were designed to be optimal for mobile displays, so these are the three fonts you will be working with most of the time

• You can specify any one of them as the value for the android:typeface attribute in the XML declaration of a component that supports text styling,such as TextView.

3www.sisoft.in

Font Style: typeface

4www.sisoft.in

Font Style: typeface

Font Style: typeface

5www.sisoft.in

Text Style

• The android:textStyle attribute can be used to put emphasis on text.

• The possible values are: normal, bold, italic. You can also specify bold|italic.

6www.sisoft.in

Text Style

7www.sisoft.in

Text Size

• android:textSize specifies the font size. • Its value must consist of two parts: a floating-point number followed by a unit. • Available units are: sp (scaled pixels), px (pixels), dp (density-independent pixels),in (inches), mm (millimeters)

• It is generally a good practice to use the sp unit so the size can scale depending on user settings.

8www.sisoft.in

Text Size

9www.sisoft.in

Text Color

The android:textColor attribute’s value is a hexadecimal RGB value with an optional alpha channel, similar to what’s found in CSS and can be in one of the following formats:

• #RGB• #ARGB• #RRGGBB• #AARRGGBB• We can also reference a color declaration

using @color/color_name.

10www.sisoft.in

Put Text Color Directly

11www.sisoft.in

Put Text Color by using color.xml file

12www.sisoft.in

13www.sisoft.in

14www.sisoft.in

Look Here !!Write here your color

string name

Text Shadow

• Android use three different attributes to customize the appearance of text shadow:

• android:shadowColor Shadow color in the same format as textColor.

• android:shadowRadius Radius of the shadow specified as a floating point number.

• android:shadowDx The shadow’s horizontal offset specified as a floating point number.

• android:shadowDy The shadow’s vertical offset specified as a floating point number.

15www.sisoft.in

Text ShadowThe floating point numbers don’t have a specific unit – they are merely

arbitrary factors.

16www.sisoft.in

Using Custom Fonts

• We’ll use this font for demonstration purposes. Download it and place the TTF file in the ./assets directory (create it if it doesn’t exist yet).

• We’re going to use a basic layout file with a TextView, marked with an id of “custom_font” so we can access it in our code.

17www.sisoft.in

Using Custom Fonts

18www.sisoft.in

Using Custom Fonts in Java Code

• Open main activity file and insert this into the onCreate() method:

19www.sisoft.in

Custom Fonts• The Typeface class contains a static builder

method createFromAsset, which takes an AssetManager as its first parameter and a path to the file in the second argument.

• We’re handing it the default asset manager and the name of the font file because it’s located in the root of the “assets” folder.

• Once we’ve got an instance of our custom typeface, all that’s left is a call to TextView’s setTypeface() method.

• It might also be wise to organize our fonts into a subdirectory if your assets directory is packed with other files.

20www.sisoft.in

Custom Fonts

Put the Chantelli_Antiqua.ttf

File in assets.

21www.sisoft.in

Custom Fonts

22www.sisoft.in

www.sisoft.in 23

Handling Keyboard Input

Sisoft Technologies Pvt LtdSRC E7, Shipra Riviera Bazar, Gyan Khand-3, Indirapuram, Ghaziabad

Website: www.sisoft.in Email:info@sisoft.inPhone: +91-9999-283-283

TextView scan indicate by XML attribute or Java method the expected type of a text field:

* This way Android knows the type of data to be placed in a text field

* Knowing the type is useful in deciding what appropriated input method could be applied to help the user enter text.

Handling Input Types

24www.sisoft.in

Input type values

25www.sisoft.in

Input type values

26www.sisoft.in

Input type values

27www.sisoft.in

Input type in .xmlUsing android:text="inputType: text|textCapWords"

28www.sisoft.in

Text input type in emulator

After tapping the EditBoxa soft

keyboard appears showing CAPITAL

letters

29www.sisoft.in

Text input type in emulator

After first letter is typed the Keyboard

switches automatically to LOWER case to

complete the word.

30www.sisoft.in

Text input type in emulator

After entering spacethe keyboard

repeats cycle beginning with UPPER

case, then LOWER case letters.

31www.sisoft.in

input type: Number android:inputType="number|numberSigned|numberDecimal"

32www.sisoft.in

input type: Number

33www.sisoft.in

Input type: Phone Number

34www.sisoft.in

Input type: Phone Number

Using android:inputType="phone"

Soft keyboard displays the layout of a typical phone keypadplus additional non digit symbols such as:( ) . / Pause Wait # -+

35www.sisoft.in

Using android:inputType="phone"

36www.sisoft.in

Input type: Phone Number

Input type: Time

android:inputType="time"

37www.sisoft.in

Input type: Date

Using android:inputType="date"

38www.sisoft.in

Disable Soft Keyboard

39www.sisoft.in

Close/Hide Soft Keyboard

40www.sisoft.in

Hide Soft Keyboard

41www.sisoft.in

Floating Hint

42

Classes/Interfaces used --android.support.design.widget.TextInputLayout;

Gets us an animated view of Animation moving up to make space for the user input

-android.text.TextWatcher;Gets into action every time the user is typing text. This helps us

to start validating the Text entered

-android.util.Patterns;

Final validation of the text entered by the user

43

Sample xml code

<android.support.design.widget.TextInputLayout

android:id="@+id/input_layout_email"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<EditText

android:id="@+id/input_email"

android:singleLine="true"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Enter Complete Email"/>

</android.support.design.widget.TextInputLayout>

44

Data Validation

• Sometime we required all the fields are filled properly. To check all the data filled properly we use validation.

www.sisoft.in 45

Text Watcher Control

46www.sisoft.in

• TextWatcher is used to keep watch on the EditText content while user inputs the data. It allows you to keep track on each character when entered on EditText.

• For Implementing Text watcher, you have to call addTextChangedListener() method and pass the reference to TextWatcherinstance

• Method of TextWatcher Interface:• abstract void afterTextChanged(Editable s) This method is called to

notify you that, somewhere within s, the text has been changed. • abstract void beforeTextChanged(CharSequence s, int start, int count, int

after) This method is called to notify you that, within s, the count characters beginning at start are about to be replaced by new text with length after.

• abstract void onTextChanged(CharSequence s, int start, int before, intcount) This method is called to notify you that, within s, the count characters beginning at start have just replaced old text that had length before.

TextWatcher

TextWatcherDemo

47www.sisoft.in

Textwatcher

TextWatcherDemo

48www.sisoft.in

Xml Layout• <LinearLayout

android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical“android:paddingTop="50dp">

<TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="PLEASE FILL ALL DATA"android:textColor="#000000"android:textSize="12sp"android:textStyle="bold"android:typeface="serif" />

<EditTextandroid:id="@+id/editText2"android:layout_width="fill_parent"android:layout_height="40dp"android:layout_below="@+id/editText1"android:layout_marginTop="18dp“

android:background="@android:color/holo_green_light"

android:ems="10"android:hint="Person Name"android:inputType="textPersonName"android:textColor="#000000"android:textSize="12sp"android:textStyle="bold|italic"android:typeface="serif" >

<requestFocus /></EditText>

<EditTextandroid:id="@+id/editText4"android:layout_width="fill_parent"android:layout_height="40dp"android:layout_alignLeft="@+id/editText2"android:layout_alignRight="@+id/editText2“

android:background="@android:color/holo_green_light"

android:layout_below="@+id/editText2"android:layout_marginTop="20dp"android:gravity="left"android:ems="10"android:hint="EMail"

www.sisoft.in 49

Xml Layoutandroid:inputType="textEmailAddress"

android:textColor="#000000"android:textSize="12sp"android:textStyle="bold|italic"android:typeface="serif" />

<EditTextandroid:id="@+id/editText5"android:layout_width="fill_parent"android:layout_height="40dp"android:layout_alignLeft="@+id/editText4"android:layout_alignRight="@+id/editText4"android:layout_below="@+id/editText4"android:layout_marginTop="20dp"android:background="@android:color/holo_green_light"android:ems="10"android:hint="Phone"android:inputType="phone"android:textColor="#000000"android:textSize="12sp"android:textStyle="bold|italic"android:typeface="serif" />

<Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text = "Register"android:layout_below="@+id/editText3“android:layout_marginTop="20dp" />

</LinearLayout>www.sisoft.in 50

Code• public class MainActivity extends AppCompatActivity {

Button bt1;EditText ed1, ed2,ed3;

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);

ed1=(EditText)findViewById(R.id.editText2);ed2=(EditText)findViewById(R.id.editText4);ed3=(EditText)findViewById(R.id.editText5);

bt1=(Button)findViewById(R.id.button1);bt1.setOnClickListener(new View.OnClickListener() {

@Overridepublic void onClick(View arg0) {

String name = ed1.getText().toString().trim();String email = ed2.getText().toString().trim();String ph = ed3.getText().toString().trim();

www.sisoft.in 51

Code•

if(name.equals("")){

ed1.setError("Name is required");

}else if(email.equals("")){

ed2.setError("EMail is required");}else if(ph.equals("")){

ed3.setError("Phone is required");}else {

Toast.makeText(getApplicationContext(),"Data Submitted Successfully",Toast.LENGTH_SHORT).show();

}}

});

}

www.sisoft.in 52

Run

www.sisoft.in 53

Run

www.sisoft.in 54

Style/Themes• A style is a collection of properties that

specify the look and format for a View or window.

• A theme is a style applied to an entire Activityor application, rather than an individual View . When a style is applied as a theme, every View in the Activity or application will apply each style property that it supports.

• Styles in Android share a similar philosophy to cascading stylesheets in web design—they allow you to separate the design from the content

55www.sisoft.in

Applying Styles and Themes to the UI

• There are two ways to set a style:

• To an individual View, by adding the style attribute to a View element in the XML for your layout.

• Or, to an entire Activity or application, by adding the android:theme attribute to the <activity> or <application> element in the Android manifest.

56www.sisoft.in

Defining Style• To create a set of styles, save an XML file in the res/values/

directory of your project. The name of the XML file is arbitrary, but it must use the .xml extension and be saved in the res/values/ folder.

• The root node of the XML file must be <resources>.• For each style you want to create, add a <style> element to the

file with a name that uniquely identifies the style (this attribute is required).

• <?xml version="1.0" encoding="utf-8"?><resources>

<style name="CodeFont" parent="@android:style/TextAppearance.Medium">

<item name="android:layout_width">fill_parent</item><item name="android:layout_height">wrap_content</item><item name="android:textColor">#00FF00</item><item name="android:typeface">monospace</item>

</style></resources>

57www.sisoft.in

Put Text Style Using Styles.xml

58www.sisoft.in

Click here and open style.xml file &

create your styleClick Styles.xml file & create your style.

59www.sisoft.in

Click Styles.xml file & create your style.

60www.sisoft.in

Click Styles.xml file & create your style.

Write here your style name

Theme and Material Design

www.sisoft.in 61

Tools Android Theme Editor

Material Design

• Material Design is a Google’s conceptual design philosophy that outlines how apps should look and work on mobile devices

• the way people see and interact with interfaces

• concept of layered interfaces : layering involves stacking multiple elements, like a deck of cards, to create a single, unified experience that is both functional and aesthetically pleasing

www.sisoft.in 62

Material Design for Android

• Android 5.0 (API Level 21) support Material Design

• Android provides the following elements for you to build material design apps:

– A new theme (android:Theme.material)

– New widgets for complex views (RecylerView and CardView)

– New APIs for custom shadows and animations

www.sisoft.in 63

Material Design Color Customization

• Material Design provides set of properties to customize the Material Design Color theme. But we use five primary attributes to customize overall theme.

• colorPrimaryDark – This is darkest primary color of the app mainly applies to notification bar background.

• colorPrimary – This is the primary color of the app. This color will be applied as toolbar background.

• textColorPrimary – This is the primary color of text. This applies to toolbar title.

• windowBackground – This is the default background color of the app.

• navigationBarColor – This color defines the background color of footer navigation bar.

www.sisoft.in 64

www.sisoft.in 65