Text Properties Data Validation Styles/Themes Material Design...Text Properties Data Validation Styles/Themes Material Design 1 Sisoft Technologies Pvt Ltd SRC E7, Shipra Riviera Bazar,
Post on 15-Oct-2020
0 Views
Preview:
Transcript
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
top related