Your SlideShare is downloading. ×
0
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Custom UI Components at Android Only 2011

6,042

Published on

Published in: Technology, Design
3 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,042
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
132
Comments
3
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Custom UI Components
  • 2.  
  • 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. Widget != Widget
  • 5. Widget
  • 6. Layout
  • 7. View Hierarchy
  • 8. Why build customcomponents? Isntthere enough already?
  • 9. Free
  • 10. 37 SEK
  • 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. We can solve thisproblem with customcomponents.
  • 13. When building a fullycustomized componentextend View.
  • 14. Need to override onDrawto be able to showsomething.• 2D graphics• Text in different variations• Other components• Or pretty much anything else
  • 15. onMeasure should beoverridden by subclassesto provide measurementof their contents.
  • 16. Custom widgets canreally be as complicatedas you need them to be.
  • 17. Not so fully customizedcomponents.
  • 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. <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. Demo  
  • 21. Compound Components priceView.setPrice(     new Price(amount, currency) );
  • 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. 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. Demo  
  • 25. How to debug andoptimize the UI?
  • 26. $ ./tools/layoutopt
  • 27. $ ./tools/hierarchyviewer
  • 28. DemoHiearchy Viewer
  • 29. Reduce the number ofviews in the view treewith <merge>
  • 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. <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. And...inflater.inflate(    R.layout.priceview,    null    this,);    true);
  • 33. DemoHiearchy Viewer
  • 34. isInEditMode() 
  • 35. Photo by anarchosyn, http://www.flickr.com/photos/24293932@N00/4530523480/
  • 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. Styles and Themes• Custom attributes• Styles• Themes
  • 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. 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. 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. 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. 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. 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. <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. How do we make a customcomponent available forother applications.• We cant use JAR• We dont want to copy-paste resources
  • 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. Thank youhttps://github.com/johannilsson/ao11

×