Scribd
Upload
57 views29 pages

Android User Interface: Yuliana Setiowati Rizky Yuniar Hakkun

The document discusses various basic user interface widgets in Android such as labels, buttons, images, edit texts, checkboxes and radio buttons. It provides code examples to demonstrate how to use these widgets in an Android application by defining them in XML layouts and accessing them from Java code. It also discusses different units of measurement used for dimensions in Android user interfaces.

Uploaded by

i05014
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
57 views29 pages

Android User Interface: Yuliana Setiowati Rizky Yuniar Hakkun

The document discusses various basic user interface widgets in Android such as labels, buttons, images, edit texts, checkboxes and radio buttons. It provides code examples to demonstrate how to use these widgets in an Android application by defining them in XML layouts and accessing them from Java code. It also discusses different units of measurement used for dimensions in Android user interfaces.

Uploaded by

i05014
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

Android

User Interface
Yuliana Setiowati
Rizky Yuniar Hakkun

Politeknik Elektronika Negeri Surabaya 1


Outline
• Label
• Button
• Image View and Image Button
• EditText
• CheckBox
• RadioButton
The View Class
• The View class represents the basic building
block for user interface components.
• View is the base class for widgets, which are
used to create interactive UI components
(buttons, text fields, etc.).
• The ViewGroup subclass is the base class for
layouts, which are invisible containers that
hold other Views (or other ViewGroups) and
define their layout properties.
Using @ in XML Layouts

Anything you do want to use in your Java source needs an


android:id=“…”

The convention is to use @+id/nnn as the id value, where


the nnn represents your locally-unique name for the widget
(eg. @+id/myButton).
Attaching Layouts to Java Code
• Assume res/layout/main.xml has been created. This
layout could be called by an application using the
statement
setContentView(R.layout.main);
• Individual widgets, such as myButton could be
accessed by the application using the statement
findViewByID(...) as in
Button btn= (Button) findViewById(R.id.myButton);
• Where R is a class automatically generated to keep
track of resources available to the application. In
particular R.id... is the collection of widgets defined in
the XML layout.
Attaching Layouts to Java Code
Attaching Listeners to the Widgets
• The button of our example could now be used, for
instance a listener for the click event could be
written as:
Basic Widgets: Labels
• A label is called in android a
TextView.
• TextViews are typically used to
display a caption.
• TextViews are not editable,
therefore they take no input.
Basic Widgets: Labels
Basic Widgets: Buttons
• A Button widget allows the simulation of a clicking action on a GUI.
• Button is a subclass of TextView. Therefore formatting a Button’s face is
similar to the setting of a TextView.
...
<Button
android:id="@+id/btnExitApp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10px"
android:layout_marginLeft="5px"
android:text="Exit Application"
android:textSize="16sp"
android:textStyle="bold"
android:gravity="center"
android:layout_gravity="center_horizontal"
>
</Button>
Basic Widgets: Images
• ImageView and ImageButton are two Android widgets
that allow embedding of images in your applications.
• Each widget takes an android:src or
android:background attribute (in an XML layout) to
specify what picture to use.
• Pictures are usually reference a drawable resource.
• You can also set the image content based on a URI
from a content provider via setImageURI().
• ImageButton, is a subclass of ImageView. It adds the
standard Button behavior for responding to clickevents.
Basic Widgets: Images
Basic Widgets: EditText
• The EditText(or textBox)
widget is an extension of
TextView that allows
updates.
• The control configures itself
to be editable.
• Important Java methods
are:
txtBox.setText(“someValue”)
and
txtBox.getText().toString()
Basic Widgets: EditText
Example
...
<EditText
android:id="@+id/txtUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:autoText="true"
android:capitalize="words"
android:hint="First Last Name"
>
</EditText>
Basic Widgets: Example 1
In this little example we will use an LinearLayout holding a label( TexView), a
textBox(EditText), and a Button.
We will use the view as a sort of simplified login screen.
Basic Widgets: Example 1
Basic Widgets: Example 1
Android’s Application (1 of 2)
Basic Widgets: Example 1
Android’s Application (2 of 2)
Basic Widgets: Example 1
• Another way of defining a Listener for multiple button widgets
Basic Widgets: CheckBox
• A checkbox is a
specific type of two-
states button that can
be either checked or
unchecked.
• An example usage of a
checkbox inside your
activity would be the
following:
Basic Widgets: CheckBox
• Complete code for the checkBoxdemo (1 of 3)
Basic Widgets: CheckBox
• Complete code for the checkBoxdemo (2 of 3)
Basic Widgets: CheckBox
• Complete code for the checkBox demo (3 of 3)
Basic Widgets: RadioButtons
• A radio button is a two-states button that can be either
checked or unchecked.
• When the radio button is unchecked, the user can
press or click it to check it.
• Radio buttons are normally used together in a
RadioGroup.
• When several radio buttons live inside a radio group,
checking one radio button unchecks all the others.
• Similarly, you can call isChecked() on a RadioButtonto
see if it is selected, toggle() to select it, and so on, like
you can with a CheckBox.
Basic Widgets: RadioButtons
• We extend the previous example by adding a RadioGroupand three
RadioButtons. Only new XML and Java code is shown:
Basic Widgets: RadioButtons
• Android Activity (1 of 3)
Basic Widgets: RadioButtons
• Android Activity (2 of 3)
Basic Widgets: RadioButtons
Basic Widgets: RadioButtons
Example
This UI uses RadioButtons
and CheckBoxes
RadioGroup
to define choices

Summary of choices
Unit measurement
in Android
• px = Pixels – corresponds to actual pixels on the screen.
• pt = Points – 1/72 of an inch based on the physical size of the
screen.
• dp
Density-independent Pixels – an abstract unit that is based on the
physical density of the screen. These units are relative to a 160 dpi
screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-
to-pixel will change with the screen density, but not necessarily in
direct proportion. Note: The compiler accepts both “dip” and “dp”,
though “dp” is more consistent with “sp”.
• sp
Scale-independent Pixels – this is like the dp unit, but it is also
scaled by the user’s font size preference. It is recommend you use
this unit when specifying font sizes, so they will be adjusted for
both the screen density and user’s preference.

You might also like