Learn how to create a custom view and layouts

1. Views and Layout

2. Views and Layout
The Android platform provides the developer View and
ViewGroup to create graphical interfaces of the Activity.
A ViewGroup is a layout object that can contain other Views.
A GUI is composed of a hierarchy of ViewGroups and Views.
GUIs can be created with xml layout files, but can also be created
at runtime because the xml file is a tool to simplify the job of the
developer: all xml file are parsed at runtime to create the objects
related with the listed attributes. This system is flexible to declare
different layouts for different configurations that would otherwise
be handled by code.
Views and Layout

3. Views and Layout
To indicate to the Activity which xml layout file in the /res folder
must be loaded you can use the method:
Activity.setContentView(int resourceId)
To retrieve an instance of a layout object the following method is
available:
Activity.findViewById(int resourceId)
Pattern: The invocation of setContentView() is free and can be
done at any point in the life cycle of the Activity. However, to
respect the time of parsing and to make the system to instantiate
all classes View contained once it is preferable to invoke it and
retrieve all View in onCreate().
UI Handling

4. Views and Layout
Each View or ViewGroup declared in the layout inherites from the
superclass attributes and specific attributes. The namespace is
always Android and the node is the name of the class you want to
instantiate.
<Button
android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/my_button_text" />
The difference between View and ViewGroup on a .xml is the
ability to insert other View or ViewGroup within the node of a
ViewGroup.
In general, the attributes that must always be specified are:
android:layout_width
android:layout_height
Attributes

5. Views and Layout
android:layout_width
android:layout_height
The parameters accepted by these attributes are:
● wrap_content
● fill_parent (match_parent)
● A value with relative units of measurement
● A reference to a dimen object
The id attribute is used to retrieve the instance of the View or
ViewGroup at runtime or in other positions of the layout.
To indicate to the system that a new entry is to be created in R
class for the view to be identified elsewhere you need to use this
syntax:
android:id=“@+id/<resourse_name>“
Attributes

6. Views and Layout
ViewGroups are:
● LinearLayout: the view contained are arranged in sequence
according to the indicated orientation attribute:
● android:orientation:"horizontal (default)
● vertical
● RelativeLayout: Each view can contain information about the
relative position to other already declared View or ViewGroup:
● layout_below
● layout_above
● layout_toRightOf
● layout_toLeftOf
● layout_alignParentTop
● layout_alignParentBottom
● layout_alignParentRight
● layout_alignParentLeft
Main Layouts

7. Views and Layout
● ScrollView: it allows vertical scrolling content. To do this it
accepts one only View or ViewGroup (which may contain other
View and ViewGroup)
● HorizontalScrollView: it allows horizontal scrolling of the
content. To do this it accepts one only View or ViewGroup
(which may contain other View and ViewGroup)
● ListView e GridView: they allow vertical scrolling of View and
ViewGroup. Entry must be done at runtime with an Adapter
object which must be specified in the id of the layout to be
loaded for each element.
● RadioGroup: it contains RadioButtons of which only one
element is checked
● TableLayout: it contains TableRow for creating a table.
Main Layouts

8. Views and Layout
● TextView
● EditText
● Button
● ImageView
● CheckBox
● ImageButton
● ProgressView
● RadioButton
● RatingBar
● SeekBar
● Spinner
● TextClock
● TimePicker
● DatePicker
● ToggleButton
Main View
● VideoView
● MediaController
● CheckedTextView
● AutoCompleteTextView
● CalendarView
● Chronometer
● DigitalClock
● ImageSwitcher
● NumberPicker
● SlidingDrawer
● ViewAnimator
● ViewSwitcher
● ViewFlipper
● ViewStub
● WebView

9. Views and Layout
Events are managed by implementing the interfaces of the
classes or superclasses that extends View.
The View class provides the following interfaces:
● View.OnClickListener{onClick(View v)} to handle the simple
click.
● View.onLongClickListener { onLongClick(View v) } o handle a
long click.
● View.onTouchListener { onTouch(View v, MotionEvent e) } to
handle a generic touch event
The implementation of the interface is passed to the View with the
methods:
View.setOnClickListener(View.OnClickListener listener)
View.setOnLongClickListener(View.OnLongClickListener listener)
View.setOnTouchListener(View.OnTouchListener listener)
Event Handlers

10. Views and Layout
There are 2 ways to implement the interfaces:
● Anonymous implementation:
private OnClickListener listener = new OnClickListener() {
public void onClick(View v) {
// ...
}
};
● Implementation as part of the Activity:
public class ExampleActivity extends Activity implements OnClickListener {
public void onClick(View v) {
// ...
}
}
Event handlers

11. Views and Layout
The implementation of anonymous is the most widely used, but it
produces overload of classes instantiated and allocation of
objects.
Pattern: it is preferable to implement the management of the
events as an integral part of the Activity not only to the
advantages in the management of the memory, but also for the
readability of the code (to avoid multiple indentations and to have
just one method that handles the events of all the Views).
Centralized management is possible by checking if the event was
generated by a View through its id:
public void onClick(View v) {
switch (v.getId()) {
case R.id.example:
// ...
break;
}
}
Event Handlers

12. Views and Layout
All Android Views extend the View class, and then to create a
custom view the class must extend View.
If you want to implement a new functionality for an existing View
you can extended directly that class.
Ex. To create a button that changes the background in certain
states you can extend Button instead redefine all its methods by
extending View
To create custom view you need to put the right emphasis on the
use of memory and CPU.
Custom View

13. Views and Layout
All the custom view created in xml file can be inserted as part of
the graphical interface. The node to be specified must contain the
complete package in addition to the name of the class in this way:
<com.example.android.view.CustomView ... />
The attributes that you can specify are those inherited from the
superclass and custom ones defined by the developer.
The definition of the attributes is via custom xml in the res/values
folder (in a file usually called attrs.xml)
<resources>
<declare-styleable name="CustomView" >
<attr name="showText" format="boolean" />
<attr name="labelPosition" format="enum" >
<enum name="left" value="0" />
<enum name="right" value="1" />
</attr>
</declare-styleable>
</resources>
Custom View - Attributes

14. Views and Layout
To insert the custom attributes inside the layout xml file you need
to add a namespace:
xmlns:custom="http://schemas.android.com/apk/res/com.example.customviews"
Or try making the system automatically in case of multiple custom
views in the same layout:
xmlns:custom="http://schemas.android.com/apk/res-auto"
The alias is chosen by the developer.
Custom View - Attributes

15. Views and Layout
Each custom view must implement at least one of the three
constructors inherited from the superclass View:
public CustomView(Context context) {
super(context);
}
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomView(Context context, AttributeSet attrs, int
defStyleAttr) {
super(context, attrs, defStyleAttr);
}
Custom View - Constructor

16. Views and Layout
To retrieve custom attributes defined in the layout you can use a
TypedArray object with the AttributeSet passed by the
constructor:
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.CustomView, 0, 0);
try {
showText = a.getBoolean(R.styleable.CustomView_showText,
false);
textPos = a.getInteger(R.styleable.CustomView_labelPosition, 0);
} finally {
a.recycle();
}
}
Custom View – Attributes
Retrieving

17. Views and Layout
The recovery of custom attributes is static. To make it dynamic fit
getter and setter methods for each attribute that you want to
manage externally:
public boolean isShowText() {
return showText;
}
public void setShowText(boolean showText) {
this.showText = showText;
invalidate();
requestLayout();
}
The View.invalidate() method completely redraws the view in
order to apply the change immediately.
The View.requestLayout() method notifies the layout that contains
the view that you have changed the size of its View.
Custom View – Attributes
management

18. Views and Layout
The View.onDraw() method specifies how to bring up the View. It
uses an object:
● Canvas: to determine what and where to draw;
● Paint: to determine how to draw.
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (showText) {
Paint paint = new Paint();
paint.setColor(Color.BLACK);
canvas.drawText(text, x, y, paint);
}
}
Custom View – onDraw()

19. Views and Layout
The View.onMeasure() method recovers the size of the View
requests from ViewGroup that contains it. In this way you can
calculate the correct size for the View in a variety of layouts,
configurations, display resolutions of the device.
@Override
protected void onMeasure(int widthMeasureSpec, int
heightMeasureSpec) {
int minw = getPaddingLeft() + getPaddingRight()
+ getSuggestedMinimumWidth();
int w = resolveSizeAndState(minw, widthMeasureSpec, 1);
int minh = MeasureSpec.getSize(w) - (int) mTextWidth
+ getPaddingBottom() + getPaddingTop();
int h = resolveSizeAndState(MeasureSpec.getSize(w) -
(int) mTextWidth,
heightMeasureSpec, 0);
setMeasuredDimension(w, h);
}
Custom View – onMeasure()

20. Views and Layout
The main aspects to be considered in designing a custom view are:
● The method of the View that has the greatest load on the Main
Thread of the application is the View.onDraw() method.
● The View.requestLayout() method generates a call to cascade to the
entire hierarchy of View contained in the layout.
● The View.invalidate() method call results in a new View.onDraw()
Pattern: so that the view will be seamless and not impact the loading of the
other view,
● It must minimize the call to the methods View.invalidate() and
View.requestLayout().
● The animations are handled externally with the objects available for the
purpose and not in the method View.onDraw().
● In order not to overload the method View.onDraw () is necessary not to
instantiate objects in its implementation, but only during the creation of the
View.
Custom View – Optimization