Designing Android ui components in XML using Android XML vocabulary for views, widgets, graphics, and layouts. In this lesson we will cover the basics of designing UI components in XML for Android applications. We will also take a look at how those definitions in XML can be accessed in runtime.
XML in Runtime
XML stands for Extensible Markup Language and it is a markup
language that defines a set of rules for encoding documents in a format which
is both human readable and machine readable. This allows us to easily construct
UI components that are later interpreted by the Android system and converted in
visual UI objects. The WSYIWYG editor in Android studio also interprets these
xml files live to render previews of our UI on a multitude of different
screens, android versions, and other configurations.
XML
In
Android xml files are used for a wide variety of purposes in addition to
creating the UI layouts we have previously discussed. XML files can also be
used to define string constants which are normally stored in values slash
strings.xml. Strings.xml files allow for easy update of string constants and
effortless multi-language implementations. Xml files can be used to define
dynamic graphical asset references for instance different drawable
assets for different states of a view like pressed or clicked.
In
Android application development a common user interface component is the menu
whether it by a menu from the App bar of the application or a floating context
based menu. In the case of menus the menu items can be easily defined in xml
format and allow for the full power of the resource system to decide which menu
to use for specific occasions.
When
designing animations for views in our applications we can easily create xml
assets that define and configure these animations for using in runtime.
When
designing the look and feel of the application it is important to define the
overall style. A valuable way to define aspects like styles, themes, and color
schemes is in xml files that can then be applied to parts or the whole of our
application.
In
addition predefined values for Boolean, dimension, and array properties can be
defined in xml resources. These values can be used for default settings or
desired paddings and margins for different devices running our application.
Android Studio
Layout Editor
In Android
studio we have the powerful layout editor tool to assist us in designing the
XML for our UI components whether they be complete screen layouts or smaller
aspects of certain screens. The drag and drop style building allows us to
quickly prototype a desired visual component which the layout editor converts
on the fly to xml. We can then switch to the xml view of the file and edit
aspects of the layout more precisely and tailor it to our precise needs for the
application.
One
of the enhancements we receive with the Android Studio layout editor is the
ability to preview our UI components on many different screen sizes, different
screen dimension and proportions. This way we can insure that our xml will be
compatible with all desired target screens for our application. The
enhancements don’t stop there however and we can even change the locale for our
UI previews and insure that our UI is as expected for different locales. This
allows us to preview different string constants and assets tied to specific
locals easily by changing the local in the preview.
The
android operating system has progressed through many different version which
has including UI updates and changes. In the advanced layout editor we can
preview our xml for different versions of Android to insure that what we have
designed can look great on all of our target Android versions.
XML in Runtime
When a
layout xml asset is loaded, Android initiates each component of the layout into
a runtime object which in most cases would be some type of view like a TextView or a
Button. Once these objects are initialized we can retrieve them in our Java
code by calling the method find view by id which receives an int as a
parameter. This will normally be done in our activity class, but must be done
after the xml resources has been loaded.
The int
parameter from the find view by id method call is a reference that is listed in
the R.java file that is auto generated by the Android build systems. This
R.java file creates the linkage we need between our xml code and our Java code
in runtime and allows us to access our predesigned UI elements in the
application runtime.
We
will now take a look at how this is done in Android Studio, we will start by
opening our hello world example application that we created in previous hello
world lesson and following lab exercise.
0 Komentar untuk "Design Using XML"