Tweet
Tweet

Slide 1

Slide 1 text

TextViews & Localization Elliott Chenger @echenger

Slide 2

Slide 2 text

Overview •Android Text Rendering •Typography and Android •Internationalization and Localization •Localize All the Androids

Slide 3

Slide 3 text

Android Text Rendering Let me explain you

Slide 4

Slide 4 text

Android Text Rendering Let me explain you Slightly Abridged

Slide 5

Slide 5 text

Widget Text Graphics Three major packages that help render text

Slide 6

Slide 6 text

TextView Layout Text Paint Other Classes in android.text Widget Text Graphics

Slide 7

Slide 7 text

TextView Layout Text Paint Other Classes in android.text Widget Text Graphics

Slide 8

Slide 8 text

Layout TextView Text Paint Other Classes in android.text Widget Text Graphics

Slide 9

Slide 9 text

Canvas Layout TextView Text Paint Other Classes in android.text Widget Text Graphics

Slide 10

Slide 10 text

Typography & Android

Slide 11

Slide 11 text

Imaginary line which a line of text rests upon Baseline getBaseline(); getLineBounds(0, null); getLineBounds(1, null);

Slide 12

Slide 12 text

Imaginary line which a line of text rests upon Baseline getBaseline(); getLineBounds(0, null); getLineBounds(

Slide 13

Slide 13 text

Baseline getBaseline(); getLineBounds(0, null); public final int getLineBaseline(int line) {
 // getLineTop(line+1) == getLineTop(line)
 return getLineTop(line+1) - getLineDescent(line);
 }

Slide 14

Slide 14 text

Imaginary line which a line of text rests upon Baseline getBaseline(); getLineBounds(0, null); getLineBounds(

Slide 15

Slide 15 text

Imaginary line which a line of text rests upon Baseline getBaseline() getLineBounds( getLineBounds(1, null);

Slide 16

Slide 16 text

Imaginary line running along the top of non-ascending, lowercase letters Meanline

Slide 17

Slide 17 text

Imaginary line running along the top of non-ascending, lowercase letters Meanline No Known Android API

Slide 18

Slide 18 text

The invisible line marking the farthest distance between the baseline and the top of the glyph. Ascent Line textView.getPaint().ascent()

Slide 19

Slide 19 text

textView.getPaint().ascent() /**
 * Return the distance above (negative) the baseline (ascent) based on the
 * current typeface and text size.
 *
 * @return the distance above (negative) the baseline (ascent) based on the
 * current typeface and text size.
 */ Ascent Line

Slide 20

Slide 20 text

textView.getPaint() .getFontMetrics().top The invisible line marking the farthest distance between the baseline and the top of the glyph. Ascent Line

Slide 21

Slide 21 text

/**
 * The maximum distance above the baseline for the tallest glyph in
 * the font at a given text size.
 */ textView.getPaint().getFontMetrics().top Ascent Line

Slide 22

Slide 22 text

The invisible line marking the lowest point of the descenders within a font. Descender Line textView.getPaint().descent()

Slide 23

Slide 23 text

textView .getPaint() .getFontMetrics().bottom The invisible line marking the lowest point of the descenders within a font. Descender Line

Slide 24

Slide 24 text

The spacing between the baselines of each line of text Leading textView .setLineSpacing(add,mult); “Multiple people defending fragment API and behavior pretty hard around the internet lately. Enjoy your straw houses, little pigs.” “Multiple people defending fragment API and behavior pretty hard around the internet lately. Enjoy your straw houses, little pigs.”

Slide 25

Slide 25 text

The spacing between the baselines of each line of text Leading textView .setLineSpacing(add,mult); Add: pixels added to each line height “Multiple people defending fragment API and behavior pretty hard around the internet lately. Enjoy your straw houses, little pigs.” “Multiple people defending fragment API and behavior pretty hard around the internet lately. Enjoy your straw houses, little pigs.”

Slide 26

Slide 26 text

The spacing between the baselines of each line of text Leading textView .setLineSpacing(add,mult); Add: pixels added to each line height Mult: float to multiply each line height by. Initially 1.0 “Multiple people defending fragment API and behavior pretty hard around the internet lately. Enjoy your straw houses, little pigs.” “Multiple people defending fragment API and behavior pretty hard around the internet lately. Enjoy your straw houses, little pigs.”

Slide 27

Slide 27 text

Internationalization & Localization

Slide 28

Slide 28 text

Internationalization Design a product from the ground up to be easily localizable

Slide 29

Slide 29 text

Localization The act of making a product meet language and cultural requirements for a locale*.

Slide 30

Slide 30 text

Locale A set of parameters that define a users language and country

Slide 31

Slide 31 text

Locale in Android Locale.class getDefault() Returns the users preferred locale getDisplayLanguage() Get language name for default Locale getDisplayCountry() Get country name for default Locale

Slide 32

Slide 32 text

Locale in Android res/values/strings.xml Resource Qualifiers res/values-fr/strings.xml res/values-ja/strings.xml res/values-en-rGB/strings.xml

Slide 33

Slide 33 text

Locale in Android res/values/strings.xml Resource Qualifiers res/values-fr/strings.xml res/values-ja/strings.xml res/values-en-rGB/strings.xml Language Qualifier

Slide 34

Slide 34 text

Locale in Android res/values/strings.xml Resource Qualifiers res/values-fr/strings.xml res/values-ja/strings.xml res/values-en-rGB/strings.xml Country Qualifier Language Qualifier

Slide 35

Slide 35 text

Localize all the Androids

Slide 36

Slide 36 text

1.Identify target languages and locales 2.Design for localization 3.Manage Strings for localization 4.Translate UI Strings and other resources 5.Test your localized app 6.Prepare for localized app 7.Support international users after launch Google Localization Checklist

Slide 37

Slide 37 text

1.Identify target languages and locales 2.Design for localization (and develop your layouts
 using proper localization standards) 3.Manage Strings for localization 4.Translate UI Strings and other resources 5.Test your localized app 6.Prepare for localized app 7.Support international users after launch Google Localization Checklist

Slide 38

Slide 38 text

Google Localization Checklist 1.Identify target languages and locales 2.Design for localization (and develop your layouts
 using proper localization standards) 3.Manage Strings for localization 4.Translate UI Strings and other resources 5.Test your localized app 6.Prepare for localized app 7.Support international users after launch

Slide 39

Slide 39 text

Elliott’s Development Localization Checklist

Slide 40

Slide 40 text

1.Support RTL Elliott’s Development Localization Checklist

Slide 41

Slide 41 text

Support RTL LTR RTL

Slide 42

Slide 42 text

Support RTL

Slide 43

Slide 43 text

Support RTL

Slide 44

Slide 44 text

Support RTL

Slide 45

Slide 45 text

Support RTL API 17+

Slide 46

Slide 46 text

Support RTL LTR RTL Margin Start Margin Start

Slide 47

Slide 47 text

Support RTL LTR RTL Margin End

Slide 48

Slide 48 text

1.Support RTL 2.Make font file a localized String Elliott’s Development Localization Checklist

Slide 49

Slide 49 text


 
 
 
 res/values/attr.xml Fonts

Slide 50

Slide 50 text

fonts/NotoSans-Regular.ttf res/values/strings.xml (for each locale) Fonts

Slide 51

Slide 51 text

private void loadCustomFont(Context context, AttributeSet attrs) {
 TypedArray typedArray =
 context.obtainStyledAttributes(attrs, R.styleable.DebugTextView);
 String fontLocation = typedArray.getString(R.styleable.DebugTextView_font);
 Typeface customTypeFace = Typeface.createFromAsset(getContext().getAssets(), fontLocation);
 super.setTypeface(customTypeFace);
 } CustomTextView.java Cache in memory Fonts

Slide 52

Slide 52 text

Fonts public DebugTextView(Context context, AttributeSet attrs) {
 super(context, attrs);
 loadCustomFont(context,attrs);
 } CustomTextView.java Do for all constructors

Slide 53

Slide 53 text

1.Support RTL 2.Make font file a localized String 3.Mind font padding Elliott’s Development Localization Checklist

Slide 54

Slide 54 text

Don’t set include font padding to false Font Padding

Slide 55

Slide 55 text

Don’t set include font padding to false Font Padding

Slide 56

Slide 56 text

Don’t set include font padding to false Font Padding

Slide 57

Slide 57 text

Font Padding

Slide 58

Slide 58 text

Font Padding

Slide 59

Slide 59 text

1.Support RTL 2.Make font file a localized String 3.Mind font padding 4.One layout to rule them all Elliott’s Development Localization Checklist

Slide 60

Slide 60 text

“In cases where your UI can't accommodate text in one of your target languages, you can create an alternative layout for that language only.” Google Localization Checklist https://developer.android.com/distribute/tools/localization-checklist.html One Layout

Slide 61

Slide 61 text

“In cases where your UI can't accommodate text in one of your target languages, you can create an alternative layout for that language only.” “While the flexibility of alternative layouts exists it can also make your apps harder to maintain over time. In general, using a single, more flexible layout is preferred.” Google Localization Checklist https://developer.android.com/distribute/tools/localization-checklist.html One Layout

Slide 62

Slide 62 text

“In cases where your UI can't accommodate text in one of your target languages, you can create an alternative layout for that language only.” “While the flexibility of alternative layouts exists it can also make your apps harder to maintain over time. In general, using a single, more flexible layout is preferred.” Google Localization Checklist https://developer.android.com/distribute/tools/localization-checklist.html One Layout

Slide 63

Slide 63 text

API 17+ One Layout

Slide 64

Slide 64 text


 API 17+ API <17 One Layout

Slide 65

Slide 65 text


 API 17+ API <17 One Layout

Slide 66

Slide 66 text


 <item name="android:layout_marginStart">20dp</ item>
 
 <item name="android:layout_marginRight">60dp</ item>
 
 values-v17 values One Layout

Slide 67

Slide 67 text

One Layout

Slide 68

Slide 68 text

1.Support RTL 2.Make font file a localized String 3.Mind font padding 4.One layout to rule them all 5.Be careful with Spans Elliott’s Development Localization Checklist

Slide 69

Slide 69 text

Don’t Span Everything

Slide 70

Slide 70 text

Don’t Span Everything

Slide 71

Slide 71 text

Don’t Span Everything

Slide 72

Slide 72 text

1.Support RTL 2.Make font file a localized String 3.Mind font padding 4.One layout to rule them all 5.Be careful with Spans 6.Localize Line Heights Elliott’s Development Localization Checklist

Slide 73

Slide 73 text

Line Height Add/Mult

Slide 74

Slide 74 text

Line Height Add/Mult

Slide 75

Slide 75 text

Line Height Add/Mult

Slide 76

Slide 76 text

Line Height Add/Mult

Slide 77

Slide 77 text

Line Height Add/Mult

Slide 78

Slide 78 text

Line Height Add/Mult

Slide 79

Slide 79 text

Line Height Add/Mult

Slide 80

Slide 80 text

Line Height Add/Mult 
 0.8
 
 1.0
 values/integers.xml values-th/integers.xml

Slide 81

Slide 81 text

1.Support RTL 2.Make font file a localized String 3.Mind font padding 4.One layout to rule them all 5.Be careful with Spans 6.Localize Line Heights 7.Pseudolocalizations Elliott’s Development Localization Checklist

Slide 82

Slide 82 text

Pseudolocalization

Slide 83

Slide 83 text

Pseudolocalization buildTypes {
 debug{
 pseudoLocalesEnabled true
 }
 release {
 minifyEnabled false
 proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
 }
 }

Slide 84

Slide 84 text

Pseudolocalization buildTypes {
 debug{
 pseudoLocalesEnabled true
 }
 release {
 minifyEnabled false
 proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
 }
 }

Slide 85

Slide 85 text

Pseudolocalization

Slide 86

Slide 86 text

Pseudolocalization Configure Device for Locale: en_XA

Slide 87

Slide 87 text

Pseudolocalization

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

Elliott Chenger @echenger omitneedlesscode.com Special Thanks to:
 @ericboam