custom ui components at android only 2011
TRANSCRIPT
![Page 1: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/1.jpg)
Custom UI Components
![Page 2: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/2.jpg)
![Page 3: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/3.jpg)
Widgets and Layouts are used to construct a UI.• A Widget is a UI element, like a text field or button
• Layouts are invisible containers, like LinearLayout or RelativeLayout
![Page 4: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/4.jpg)
Widget != Widget
![Page 5: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/5.jpg)
Widget
![Page 6: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/6.jpg)
Layout
![Page 7: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/7.jpg)
View Hierarchy
![Page 8: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/8.jpg)
Why build custom components? Isn't there enough already?
![Page 9: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/9.jpg)
Free
![Page 10: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/10.jpg)
37 SEK
![Page 11: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/11.jpg)
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) { } });}
![Page 12: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/12.jpg)
We can solve this problem with custom components.
![Page 13: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/13.jpg)
When building a fully customized component extend View.
![Page 14: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/14.jpg)
Need to override onDraw to be able to show something.• 2D graphics
• Text in different variations
• Other components
• Or pretty much anything else
![Page 15: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/15.jpg)
onMeasure should be overridden by subclasses to provide measurement of their contents.
![Page 16: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/16.jpg)
Custom widgets can really be as complicated as you need them to be.
![Page 17: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/17.jpg)
Not so fully customized components.
![Page 18: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/18.jpg)
![Page 19: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/19.jpg)
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) { }}
![Page 20: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/20.jpg)
<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" />
<TextView android:id="@+id/price" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/free" android:textSize="30sp" />
![Page 21: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/21.jpg)
Demo
![Page 22: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/22.jpg)
Compound Components
priceView.setPrice( new Price(amount, currency));
![Page 23: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/23.jpg)
<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>
![Page 24: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/24.jpg)
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());
}
}
![Page 25: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/25.jpg)
Demo
![Page 26: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/26.jpg)
How to debug and optimize the UI?
![Page 27: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/27.jpg)
$ ./tools/layoutopt
![Page 28: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/28.jpg)
$ ./tools/hierarchyviewer
![Page 29: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/29.jpg)
DemoHiearchy Viewer
![Page 30: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/30.jpg)
Reduce the number of views in the view tree with <merge>
![Page 31: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/31.jpg)
<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>
![Page 32: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/32.jpg)
<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>
![Page 33: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/33.jpg)
And...
inflater.inflate( R.layout.priceview, null);
inflater.inflate( R.layout.priceview, this, true);
![Page 34: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/34.jpg)
DemoHiearchy Viewer
![Page 35: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/35.jpg)
isInEditMode()
![Page 36: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/36.jpg)
Photo by anarchosyn, http://www.flickr.com/photos/24293932@N00/4530523480/
![Page 37: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/37.jpg)
Sets of properties that specifies the look of a Widget. This can be properties such a width, height and colors. The concept is similar to CSS and separates presentation from the content.
![Page 38: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/38.jpg)
Styles and Themes• Custom attributes
• Styles
• Themes
![Page 39: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/39.jpg)
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" />
![Page 40: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/40.jpg)
Goes into res/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
![Page 41: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/41.jpg)
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();}
![Page 42: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/42.jpg)
Styles goes into res/values/styles.xml
<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>
<merge> <TextView android:id="@+id/amount" style="@style/AmountText"/> <TextView android:id="@+id/currency" style="@style/CurrencyText"/></merge>
![Page 43: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/43.jpg)
A problem with styles is that it's hard to change the style of an View that's included within a compound component. And we can't change the style in runtime.
![Page 44: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/44.jpg)
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...
![Page 45: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/45.jpg)
<attr name="amountStyle" format="reference" />
android:theme="@style/AO11Theme"
<style name="AO11Theme" parent="android:style/Theme"> <item name="amountStyle">@style/AmountText</item></style>
<TextView android:id="@+id/priceview_amount" style="?attr/amountStyle" />
android:theme="@style/AO11ThemeCustom"
<style name="AO11ThemeCustom" parent="android:style/Theme.Light"> <item name="amountStyle">@style/CustomAmountText</item></style>
![Page 46: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/46.jpg)
How do we make a custom component available for other applications.• We can't use JAR
• We don't want to copy-paste resources
![Page 47: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/47.jpg)
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
![Page 48: Custom UI Components at Android Only 2011](https://reader033.vdocuments.mx/reader033/viewer/2022052410/5558013ad8b42ae31c8b4e99/html5/thumbnails/48.jpg)
Thank you
https://github.com/johannilsson/ao11