ANDROID FUNDAMENTAL WORKSHOP Introduction to User Interface Introduction

ANDROID FUNDAMENTAL WORKSHOP Introduction to User Interface

Introduction In the previous example, you learned that an activity is concept that allows users to interact with the application. An activity alone does not have a presence on the screen. It has to draw the screen using elements taken from the Views and View. Group class. An activity displays the user interface of your application, which may contain widgets like buttons, labels, text boxes and so on, that belong to the Views class. Now, lets look at the details you need to consider while building interfaces in Android.

Introduction Typically, you define your UI using an XML file, which may look like this:

Introduction During run time, you load the XML UI in the on. Create( ) event handler in your activity class, using the method highlighted in red below: @Override public void on. Create(Bundle saved. Instance. State){ super. on. Create(saved. Instance. State); set. Content. View(R. layout. activity_main); } While it is always easier to build your UI using an XML file, sometime you need to build your UI dynamically during run time. Hence, it is also possible to create your UI entirely using Java code.

View and View. Groups An activity contains Views and View. Groups. A view is a widget that has an appearance on screen. � � � A view derives from the base class android. view. One or more views can be grouped together into a View. Group. � � � Buttons Labels Text boxes Linear. Layout Absolute. Layout Relative. Layout Table. Layout Frame. Layout Scroll. View A View. Group derives from the base class android. view. View. Group.

Linear. Layout The Linear. Layout arranges views in a single column or a single row. Child views can be arranged either vertically or horizontally.

Absolute. Layout enables you to specify the exact location of its children. Consider the following UI defined in activity_main. xml

Absolute. Layout Which translates to this interface:

Relative. Layout enables you to specify how child views are positioned relative to each other.

Relative. Layout

Relative. Layout Note that each view embedded within the Relative. Layout has attributes that enable it to align with another view.

Relative. Layout And they translate into this interface:

Unit of Measurement When specifying the size of an element on an Android UI, you should be aware of the following measurement units: dp — Density-independent pixel. 160 dp is equivalent to one inch of physical screen size. This is the recommended unit of measurement when specifying the dimension of views in your layout. You can specify either “dp” or “dip” when referring to a density-independent pixel. sp — Scale-independent pixel. This is similar to dp and is recommended for specifying font sizes. pt — Point. A point is defined to be 1/72 of an inch, based on the physical screen size. px — Pixel. Corresponds to actual pixels on the screen. Using this unit is not recommended, as your UI may not render correctly on devices with different screen sizes.

Example Let’s see those widgets and layouts in action! Let’s create an application that uses Button and Edit. Text