Custom UI Components
 
Widgets and Layouts areused to construct a UI.• A Widget is a UI element, like a text field or button• Layouts are invisib...
Widget != Widget
Widget
Layout
View Hierarchy
Why build customcomponents? Isntthere enough already?
Free
37 SEK
public void onCreate(Bundle savedInstanceState) {    ....    mPriceTextView = (TextView) findViewById(R.id.price);    mPri...
We can solve thisproblem with customcomponents.
When building a fullycustomized componentextend View.
Need to override onDrawto be able to showsomething.•   2D graphics•   Text in different variations•   Other components•   ...
onMeasure should beoverridden by subclassesto provide measurementof their contents.
Custom widgets canreally be as complicatedas you need them to be.
Not so fully customizedcomponents.
PriceViewpublic class PriceView extends TextView implements TextWatcher {    public PriceView(Context context, AttributeSe...
<TextView     android:id="@+id/price"    android:layout_width="fill_parent"     android:layout_height="wrap_content"     a...
Demo  
Compound Components priceView.setPrice(     new Price(amount, currency) );
 <LinearLayout    android:layout_width="wrap_content"    android:layout_height="wrap_content"    >    <TextView        and...
public class PriceView extends LinearLayout {    private TextView mAmount;    private TextView mCurrency;    public PriceV...
Demo  
How to debug andoptimize the UI?
$ ./tools/layoutopt
$ ./tools/hierarchyviewer
DemoHiearchy Viewer
Reduce the number ofviews in the view treewith <merge>
<LinearLayout    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <TextView        android:...
<merge    <TextView         android:id="@+id/amount"         android:layout_width="wrap_content"         android:layout_he...
And...inflater.inflate(    R.layout.priceview,    null    this,);    true);
DemoHiearchy Viewer
isInEditMode() 
Photo by anarchosyn, http://www.flickr.com/photos/24293932@N00/4530523480/
Sets of properties that specifies thelook of a Widget. This can beproperties such a width, height andcolors. The concept i...
Styles and Themes• Custom attributes• Styles• Themes
Custom attributes<com.markupartist.demo.ao11.demo5.PriceView    android:id="@+id/price"    android:layout_width="wrap_cont...
Goes intores/values/attrs.xml• Declared in the top <resources or in the <declare-stylable>  element• The <attr> element ha...
Custom Attributes<resources>    <attr name="amountStyle" format="reference" />    <declare-styleable name="PriceView">    ...
Styles goes intores/values/styles.xml<merge>    <TextView android:id="@+id/amount" style="@style/AmountText"/>    <TextVie...
A problem with styles isthat its hard to changethe style of an Viewthats included within acompound component.And we cant c...
Themes, a style that’s applied to a whole Activity or Application• With custom attributes we can provide a way to  style v...
<attr name="amountStyle" format="reference" /><TextView android:id="@+id/priceview_amount"  style="?attr/amountStyle" /><s...
How do we make a customcomponent available forother applications.• We cant use JAR• We dont want to copy-paste resources
Library Projects• Holds shared code and resources• Resources are merged at build time• Can be used for  – Custom component...
Thank youhttps://github.com/johannilsson/ao11
Custom UI Components at Android Only 2011
Upcoming SlideShare
Loading in …5
×

Custom UI Components at Android Only 2011

6,502 views

Published on

Published in: Technology, Design
3 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total views
6,502
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
133
Comments
3
Likes
8
Embeds 0
No embeds

No notes for slide

Custom UI Components at Android Only 2011

  1. 1. Custom UI Components
  2. 2.  
  3. 3. Widgets and Layouts areused to construct a UI.• A Widget is a UI element, like a text field or button• Layouts are invisible containers, like LinearLayout or RelativeLayout
  4. 4. Widget != Widget
  5. 5. Widget
  6. 6. Layout
  7. 7. View Hierarchy
  8. 8. Why build customcomponents? Isntthere enough already?
  9. 9. Free
  10. 10. 37 SEK
  11. 11. public void onCreate(Bundle savedInstanceState) { .... mPriceTextView = (TextView) findViewById(R.id.price); mPriceTextView.addTextChangedListener(new TextWatcher() { @Override public void onTextChanged(CharSequence s, int start, int before, int count) { if (getText(R.string.free).equals(s.toString())) { mPriceTextView.setTextColor( getResources().getColor(R.color.free)); } else { mPriceTextView.setTextColor( getResources().getColor(R.color.rent)); } } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { } });}
  12. 12. We can solve thisproblem with customcomponents.
  13. 13. When building a fullycustomized componentextend View.
  14. 14. Need to override onDrawto be able to showsomething.• 2D graphics• Text in different variations• Other components• Or pretty much anything else
  15. 15. onMeasure should beoverridden by subclassesto provide measurementof their contents.
  16. 16. Custom widgets canreally be as complicatedas you need them to be.
  17. 17. Not so fully customizedcomponents.
  18. 18. PriceViewpublic class PriceView extends TextView implements TextWatcher {    public PriceView(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    public void onTextChanged(CharSequence s, int start,            int before, int count) {        if (!TextUtils.isEmpty(s) && getResources()                .getText(R.string.free).equals(s.toString())) {            setTextColor(getResources().getColor(R.color.free));        } else {            setTextColor(getResources().getColor(R.color.rent));        }    }    @Override    public void afterTextChanged(Editable s) {    }    @Override    public void beforeTextChanged(CharSequence s, int start,            int count, int after) {    }}
  19. 19. <TextView     android:id="@+id/price"    android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="@string/free"    android:textSize="30sp"    /><com.markupartist.demo.ao11.demo2.PriceView     android:id="@+id/price"    android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="@string/free"    android:textSize="30sp"    />
  20. 20. Demo  
  21. 21. Compound Components priceView.setPrice(     new Price(amount, currency) );
  22. 22.  <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/amount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/rent" android:textSize="30sp" /> <TextView android:id="@+id/currency" android:paddingLeft="5dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp" /></LinearLayout>
  23. 23. public class PriceView extends LinearLayout {    private TextView mAmount;    private TextView mCurrency;    public PriceView(Context context, AttributeSet attrs) {        super(context, attrs);        LayoutInflater inflater = (LayoutInflater) context.getSystemService(                Context.LAYOUT_INFLATER_SERVICE);        LinearLayout priceView = (LinearLayout) inflater.inflate(                R.layout.priceview, null);        mAmount = (TextView) priceView.findViewById(R.id.amount);        mCurrency = (TextView) priceView.findViewById(R.id.currency);    }    public void setPrice(Price price) {        mAmount.setText(price.getAmount());        mCurrency.setText(price.getCurrency());    }}
  24. 24. Demo  
  25. 25. How to debug andoptimize the UI?
  26. 26. $ ./tools/layoutopt
  27. 27. $ ./tools/hierarchyviewer
  28. 28. DemoHiearchy Viewer
  29. 29. Reduce the number ofviews in the view treewith <merge>
  30. 30. <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/amount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/rent" android:textSize="30sp"/> <TextView android:id="@+id/currency" android:paddingLeft="5dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp"/></LinearLayout>
  31. 31. <merge <TextView android:id="@+id/amount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/rent" android:textSize="30sp"/> <TextView android:id="@+id/currency" android:paddingLeft="5dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp"/></merge>
  32. 32. And...inflater.inflate(    R.layout.priceview,    null    this,);    true);
  33. 33. DemoHiearchy Viewer
  34. 34. isInEditMode() 
  35. 35. Photo by anarchosyn, http://www.flickr.com/photos/24293932@N00/4530523480/
  36. 36. Sets of properties that specifies thelook of a Widget. This can beproperties such a width, height andcolors. The concept is similar toCSS and separates presentationfrom the content.
  37. 37. Styles and Themes• Custom attributes• Styles• Themes
  38. 38. Custom attributes<com.markupartist.demo.ao11.demo5.PriceView android:id="@+id/price" android:layout_width="wrap_content" android:layout_height="wrap_content" app:amountText="37" app:currencyText="SEK" />
  39. 39. Goes intores/values/attrs.xml• Declared in the top <resources or in the <declare-stylable> element• The <attr> element has two attributes name and format – Name is used when referring from code e.g. R.stylable.PriceView_amountText – Format defines the value it represents • Reference • Color • String • Boolean • And a few more
  40. 40. Custom Attributes<resources> <attr name="amountStyle" format="reference" /> <declare-styleable name="PriceView"> <attr name="amountText" format="string" /> </declare-styleable></resources>public PriceView(Context context, AttributeSet attrs) { super(context, attrs); TypedArray array = context.obtainStyledAttributes( attrs, R.styleable.PriceView, 0, 0); String amountText = array.getString(R.styleable.PriceView_amountText); // Set amount to the view... array.recycle();}
  41. 41. Styles goes intores/values/styles.xml<merge> <TextView android:id="@+id/amount" style="@style/AmountText"/> <TextView android:id="@+id/currency" style="@style/CurrencyText"/></merge><style name="PriceText" parent="android:style/Widget.TextView"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:textSize">30sp</item></style><style name="AmountText" parent="@style/PriceText"> <item name="android:textColor">@color/rent</item></style><style name="CurrencyText" parent="@style/PriceText"> <item name="android:paddingLeft">5dip</item></style>
  42. 42. A problem with styles isthat its hard to changethe style of an Viewthats included within acompound component.And we cant change thestyle in runtime.
  43. 43. Themes, a style that’s applied to a whole Activity or Application• With custom attributes we can provide a way to style views within compound components• Makes it easier for others to override default styles• This can be hooks for styles, dimensions, colors...
  44. 44. <attr name="amountStyle" format="reference" /><TextView android:id="@+id/priceview_amount" style="?attr/amountStyle" /><style name="AO11Theme" parent="android:style/Theme"> <item name="amountStyle">@style/AmountText</item></style>android:theme="@style/AO11Theme"<style name="AO11ThemeCustom" parent="android:style/Theme.Light"> <item name="amountStyle">@style/CustomAmountText</item></style>android:theme="@style/AO11ThemeCustom"
  45. 45. How do we make a customcomponent available forother applications.• We cant use JAR• We dont want to copy-paste resources
  46. 46. Library Projects• Holds shared code and resources• Resources are merged at build time• Can be used for – Custom components – White label apps – Paid and free versions of the same app
  47. 47. Thank youhttps://github.com/johannilsson/ao11

×