Android App: Setting Up User Interfaces

• The presentation covers the development of mobile applications and graphical interfaces.
• The slides provide information and code examples related to Android app development.

Setting Up User Interfaces on Android

• User interfaces are created using XML files.
• XML files describing the interface are stored in the res/layout directory.
• These files are referenced using R.layout.filename.
• Activities use the setContentView(R.layout.filename) method to display the interface defined in an XML file.
• The View class is the basic building block for user interfaces.
• It occupies an area on the screen and handles drawing and event management.
• View is the base class for widgets used to create interactive UI components like buttons and text fields.
• ViewGroup is a subclass of View that provides an invisible container for other Views or ViewGroups, defining their layout properties.

XML File Structure for Android UI

• XML files have a general structure, including XML version, encoding, comments, and layout elements.
• It starts with an XML declaration specifying the version and encoding: <?xml version="1.0" encoding="utf-8"?>.
• Comments can be added using <!- Comment -->.
• The layout consists of a root container element such as <ContainerClass.
• The root element contains namespace declarations, attributes and nested elements.
• Elements are defined with corresponding properties like <ClassName android:property="value" />.
• When an element is a container, its content elements must be indicated.
• Elements inside the container are other container elements or interface elements.

Measurement Units in XML Files

• Interface element dimensions (size, margins) can be expressed in:
  • Pixels (px)
  • Inches (in)
  • Millimeters (mm)
  • Points (pt) equal to 1/72 inch
  • Density-independent pixels (dp)
• Units are specified as strings, e.g., "24.5mm" or "65px".

Common Properties of Interface Elements

Identifiers

• An identifier can be assigned to each XML element so that the created object can be referenced in other XML files.
• Elements that are not referenced do not need an identifier.
• The android:id attribute creates an identifier.
  • Example: android:id="@+id/my_id"
• To retrieve an element from the XML file use: findViewById(R.id.my_id).

Size

• All elements in a graphical interface must be sized by using both:
  • android:layout_height
  • android:layout_width
• There are 3 types of possible values:
  • Fixed Size, for example: 50px (in pixels).
  • match_parent: element uses all of the space that its container provides.
  • wrap_content: element uses only the space needed, the size of its content.

Element Gravity

• Elements are placed on the upper-left side of the layout by default.
• The attribute "android:gravity" is used to set the element's position.
• Values for this attribute are:
  • "center_horizontal"
  • "center_vertical"
  • "top"
  • "bottom"
  • "left"
  • "right"
• The | symbol is used to combine multiple values such as:
  • "top|right"

Text

• A text can put over any interface element by using the attribute android:text
• Example: android:text = ="Cancel"

Spacing

• Created elements are close to each other by default.
• Spacing can be modified using the follow properties:
  • android:padding for internal margins.
  • android:layout_margin for external margins.
• Example:
  • android:padding="5px" the value specifies the space inside of the border.
  • android:layout_margin ="5px" the value specifies the space outside of the border.
• It is possible to create a spacing on only one of the sides sides:
  • Left: paddingLeft or layout_marginLeft.
  • Right: paddingRight or layout_marginRight.
  • Top: paddingTop or layout_marginTop.
  • Bottom: paddingBottom or layout_marginBottom.

Basic Widgets

• Widgets are used for creating graphical interfaces.
• Each widget type is a View class derivation.
• They are always systematically placed inside layouts.

TextView Widget

Usage

• The TextView widget is used to display text.
• Displays text to the user.
• It extends the View.

Important XML Attributes

• android:text: For setting the text displayed.
• android:layout_width: To define the width.
• android:layout_height: To define the height.
• android:id: Identifier for references.

Other properties

• The style of the text can be chosen: ("normal", "bold", "italic") by using the android:textStyle.
• The attribute android:typeface chooses the "sans", "serif" character style.
• Additional attributes can be set, such as text colour, police or text size.

EditText Widget

Use

• The EditText view allows the user to type in and edit text.
• It is also a View class extension.

Important XML Attributes

• android:layout_width: Used to set the width, usually to fill available space.
• android:layout_height: Sets the height, often adapted to the content size.
• android:hint: Displays a hint message when empty.
• android:inputType: Decides the type of input accepted by the field such as "phone" for phone type.
• android:text: To initialize the field with a default text, like "0367569867", number, or date and so on.
• Possible attribute value for android:inputType are: "text, date, or `phone``.

Additional points

• android:hint allows to show a comment.
• android:text allows to initialize default text with any specified value.

Methods for using the Widget

• getText() can retrieve the inserted text.
• setText() allows to place any text to the field.

Button/ImageButton

• Button and ImageButton are classes of android.widget.
• The android:text property can be used to define specific text for a button. Example (Button):

    android:text="Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:layout_gravity="center" />

• The android:srcCompat property can be used to add specific image for an ImageButton. Example (ImageButton):

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher"
    android:id="@+id/imageButton"
    android:layout_gravity="center"/>

CheckBox Functionality

Details

• Usage: Used to create checkable options in an UI.
• Important XML Attribute: For a code android:text="Option to check 1".

Getting a Checked CheckBox

• The CheckBox Class (Java):

CheckBox ch= this.findViewById(R.id.checkbox1);
boolean b='ch.isChecked();

RadioButton

Details

• Usage: Used to create a selectable RadioButton in an UI.
• Important XML Attribute: For a code android:text="Radio Button".

Getting a Checked RadioButton

• The CheckBox Class (Java):

RadioButton ch= this.findViewById(R.id.radioButton);
boolean b=ch.isChecked();

RadioGroup

• The RadioGroup can contain multiple RadioButton and only one action can happen.
• The arrangement of RadiosButtons can be arranged vertically and horizontally by using the attribute: android:orientation=“vertical”.
• The checked status can be chosen by the property: android:checked="true".

Toast

• A Toast is a message that the system gives to the user.
• It is displayed as an information and then disappears.
• A toast is an instance of the class "Toast" of the library android.widget.

GESTURE

• When you click on a element:
• Use the OnClickListener interface.
• Declare a android:onClick attribute in a XML file.

Click Gesture (Method 1)

• The java onClickListener interface is implemented: to achieve this the word implements is used.
• An example of implemented gesture: public class MainActivity extends AppCompatActivity implements OnClickListener {...}
• Used: for the method onClick (View v) of the OnClickListener interface.
• Can called when a click event is detected.
• The method setonClickListener() adds a gesture listener.

Button b = this.findViewById(R.id.button);
b.setOnClickListener(this);

Click Gesture (Method 2)

• A android:onClick can be declared in a XML file.
• One way: using the Button method.

<Button
      android:text="Add"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/button"
      android:onClick="calculer"/>

• Two entities are summed with Android:
  • Using a click listener Sol1.
  • Using the attribute xml android:onclick Sol2.

Layouts Description

• A layout is an object containing elements called Texview,Buttons:
• It can manage the way elements are aligned depending to the screen.
• Multiple types of layout exists:
  • LinearLayout
  • RelativeLayout
  • TableLayout
• Each come with different properties.

LinearLayout

• Elements can be aligned vertically or horizontally inside of a LinearLayout.
• The orientation is defined through the property android: orientation`.

Weights

• The property android:layout_weight assigns a weight to an element.
• By doing that the element can occupy more space to fill the screen.

RelativeLayout

• The user can define the position depending to other element's relation.
• The position of each view is specified depending to it's brother items or depending to the container.

Position Description

• Some attributes are used to define relations between different elements:
  • android:layout_alignParentTop: specifies if the item's higher margin must be aligned to the container.
  • android:layout_alignParentBottom: specifies if the element is aligned to the lower border.
  • android:layout_alignParentLeft: used for defining the alignment to the left borders.
  • android:layout_alignParentRight: used for defining the alignment to the right borders.
  • android:layout_centerHorizontal: defines if the element is aligned horizontally to the container.
  • android:layout_centerVertical: defines vertical alignement for a container.
  • android:layout_toLeftOf: sets element to the left of another item by it's id: .
  • android:layout_toRightOf" sets to the right of the element.
  • android:layout_above: sets above the element.
  • android:layout_below: sets element under another item.
  • android:layout_alignLeft: left side of the element starts aligned.
  • android:layout_alignRight: the right side of the element is aligned.
  • android:layout_alignTop: higher element and is aligned.
  • android:layout_alignBottom: element starts on a bottom line is also aligned.
• Remarks: The container gravity: android:gravity, position content on one element Element: android:layout_gravity, position element under container.

TableLayout

• For managing elements that are structured as tables like in HTML but without borders. One way to structure the table is:
• Declaring and using the <TableRow>.
• With the TableRow Balise it is possible to build each single line.
• Table cells have each object and each view.

GridLayout

• Allows to place items in a grid.
• Necessitates two options:
  • android:columnCount must correspond to number of lines to the grid.
  • android:rowCount must correspond to the number of columns.

ConstraintLayout

• The ConstrainstLayout class has existed since 2016.
• This is an improved RelativeLayout class that allows widgets to be bound together.
• It's been designed.
• By using this solution the time for creating complex UIs have been reduced.
• Additional XML Layouts are used for:
  • layout_constraintLeft_toLeftOf.
  • layout_constraintLeft_toRightOf,
  • layout_constraintRight_toLeftOf,
  • layout_constraintRight_toRightOf,
  • layout_constraintTop_toTopOf.
  • layout_constraintTop_toBottomOf.
  • layout_constraintBottom_toTopOf,
  • layout_constraintStart_toStartOf,
  • layout_constraintBottom_toBottomOf,
  • layout_constraintStart_toEndOf.
  • layout_constraintEnd_toStartOf.
  • layout_constraintEnd_toEndOf, -layout_constraintBaseline_toBaselineOf.
• Working in harmony with Layout Editor of Android Studio

Other Widget and Views Information

• Toast is used for displaying and notification in a time range.
• Additional information are stored in LENGTH_LONG or LENGTH_SHORT, they specify how long the view will be displayed.
• Void allows to: - Create a toast using a specific text:(Context context, CharSequence text, int duration).
• Show the toast():.
• Set the space, by editing horizontal space:(float horizontalMargin, float verticalMargin) :edit horizontally.

Toast Customization

• It's possible to create customized toasts android:
  • After this, show an image alongside a personalized view with different parameters.
  • In this order, there are limited options in comparing with the customizations.
• A layout is designed under layout res/layout/toast layout.mxl.
  • Main code. LayoutInflater inflater = getLayoutInflater();. // Get the LayoutInflater Class. View layout = inflater.inflate(R.layout.toast layout, (ViewGroup) findViewByid(R.id.toast layout id)); // get layout. Toast toast = new Toast(this); // declare new Toast. toast.setView(layout). Important: Layoutinflation is a Java Class:

import android.content.Context;
import android.widget.ArrayAdapter;

Widget: Toggle Button

• Can be used to display and true or false status.
• Toggle buttons do allow users to change the settings and the volume is modified.
  • Example: activating desactivating Wifi, Bluetooth, etc

XML attributes are:

• text OFF: indicate text for desactivated status. text ON: indicate text On when text is activated. Methods are:
• Charsequence getText OFF () show text OFF.
• Charsequence getText ON () show text ON. boolean iSCheckled(), show actual button status. void set Checked (show boolean will check).

Auto Completable Edit Text View

• The Auto Complete edit Text View:
  • The auto completion edit text provides suggestions from available sources in a dropdown menu.
  • Autocomplete is selected from reserved words and a list of different suggestions.
  • This auto completion does not show or present all letters.

XML Attributes of the AutoCompletable EditText View:

• android.completionThreshold: the letters are minimum and must be displayed for using and auto completes suggestions.
• Method:

  • modifiy the values of what´s used . set adapter is used to edit automaticaly.

  • to select to select the name, a threshold property: specify minimum number of letters to be in use is necessary.

List View and Array Adapter

• Language and code can be displayed in the Auto Complete Text View.
• Code:

String language [“C”,”C++”,”Java”,”Android”.”ASM.NET….”].
ArrayAdapter <String> adapter =New ArrayAdapter.<String> (this, android, Layout select dialog item.Language)

RatingBar

• Can be displayed rating and can be gotten from users.
• Returns to the user one or more values.
• XML class uses an XML set:

 android: Rating, number Star and define different values from the user.
```.
- Method:
```java
flat getRating();
Renvoive la note Number de stars remplines
```.
### DatePiker

With XML the Date Piker can be set to:
color a text with value;  `android:calendarTextColor`
The `BackgroundColor`, `FirstDayOfweek`, `Max or mindDate`.
Main methods:
- `getMonth`
- `getDayOfMonth`
- `getYear`
- `Le Widget Android`.

### Time Picker can choose:
Date the It can manage:
```java
set is 24 hours value, it can set value with select AM.

Integar get C, integar C Returns minutes.

Widget: The Progreess Barr

• The progress barre displays when youredownloading a files:

Set a file with style Horizontal
Show, set message. set the maximal var setProgressStyle, setCancelable

alert The dialog

• Can be used to interrupt a dialog:

Dialog, icon, show set message , set the icon set positive button and set negative button
```.
The Code to  create dialogs can be:
```java
Show. // and message.

The code used create dialogue, after the user clicks on, click on, ``"" confirm, set Positive button and Set NegativeButton.

• ScrollView`

• Used for :

  • the Element used vertical and horizontally and also with method to set different views. Main Class:

• AnnalogClock and Digital Clock*

• This class, used and is used to display the 2 different types:

  • Numerique.
  • Analog clock.

• It's been deprecated and TextClock is used mostly.

• You must code on Java, for the Class Analog Clock in order, to be used for the application.

• If we´re going to modify and change the time:

  • we utilize these to do so DatePiker and TimePiker.