Computação Móvel e Ubíqua

Interface gráfica

André Rodrigues (agr@estgf.ipp.pt)

1
Fábio Silva (fas@estgf.ipp.pt)
Criar Activity

Todas as Activity devem ser criadas utilizado o

seguinte Menu para a mesma ser adicionada
ao AndroidManifest.xml

No projeto fazer clique direito no módulo e

aceder a
• New > Activity > Empty Activity

2
Criar Activity

3
Activity > Estrutura base

Nos métodos em que se faz Override da

public class ExampleActivity extends Activity {
classe mãe, deve-se sempre invocar o
@Override
respetivo método da super classe!
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
Para fazer Override a um método, podemos na // The activity is being created.

classe carregar em CTRL + SPACE e começar a }

}
digitar o nome do método.
Depois carregamos em ENTER e o método é
criado

4
Activity > Arrancar

Deve-se utilizar um Intent da seguinte forma

Intent intent = new Intent(CONTEXTO, ACTIVITY.class);

startActivity(intent);

Onde,
• Contexto representa o contexto onde a Activity será inicializada, neste caso será sempre
o contexto da nossa aplicação que pode ser obtido simplesmente através do “this”
• ACTIVITY.class, representa a classe da Activity que pretendemos inicializar

A Activity main é sempre inicializada automaticamente pelo Sistema Operativo

5
Activity > Arrancar

Podemos também passar argumentos para a nova Activity utilizando o Intent, o qual
funciona da mesma forma que um objeto do tipo “Key -> Value”

Intent intent = new Intent(this, SignInActivity.class);

intent.putExtra("NUMERO_TELEFONE", "+351 98 000 00 00");
startActivity(intent);

Onde,
• A “key” é “NUMERO_TELEFONE” e o “value” é “+ 351 98 000 00 00”

6
Activity > Arrancar

Os argumentos são obtidos na nova Activity, no método onCreate, da

seguinte forma
• getIntent().getStringExtra(KEY)

Questão
• Qual é o argumento que terei de passar ao método para obter o número de
telefone colocado como extra no Intent do slide anterior?

7
Activity > Terminar

Não é aconselhado fazer!

Contudo pode-se utilizar a seguinte instrução de modo a fechar a Activity

• NOMEACTIVITY.this.finish();

8
Interface gráfica

O design da Activity deve ser elaborado em XML

Layouts devem ser inicializados no método onCreate, e

sempre a seguir à invocação do super utilizando o
• setContentView(R.layout.main)

Constituída por layouts (ViewGroup) e componentes

gráficos (View)

9
Interface gráfica

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a TextView"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a Button"/>
</LinearLayout>

10
Layout > Tipos

FrameLayout

LinearLayout

RelativeLayout

TableLayout

11
Layout > Parâmetros mais utilizados

android:layout_width e android:layout_height
• Definem o comprimento e altura do componente gráfico
• match_parent e wrap_content são os parâmetros mais utilizados,
contudo pode ser utilizada uma unidade de comprimento fixa

match_parent – coloca o componente gráfico com a mesma

altura/comprimento do componente pai

wrap_content – o comprimento/altura é o do conteúdo do

componente apenas

12
Layout > Parâmetros mais utilizados
android:layout_width= match_parent

android:layout_height= wrap_content

android:layout_width= wrap_content

android:layout_height= wrap_content
13
Layout > Parâmetros mais utilizados

android:orientation
• Orientação do componente, normalmente utilizado no LinearLayout
• Valores - vertical ou horizontal

android:id
• Define um ID ao componente para ser referenciado noutras partes da aplicação
• android:id=“@+id/MEU_ID” – adiciona ao ficheiro R.java o ID MEU_ID
• android:id=“@id/MEU_ID” – faz referencia a um objeto existente

android:text
• Atribui ao objeto o texto pretendido
• android:text=“@strings/LABEL_TEXT”

android:textColor = “@color/opaque_blue”
• Atribui uma cor ao texto do componente gráfico

14
Layout > Parâmetros mais utilizados

android:gravity
• Como o conteúdo do objeto está alinhado horizontalmente ou verticalmente
• android:gravity=“center_vertical”

android:layout_gravity
• Posicionamento da “View” relativamente ao seu parente
• android:layout_gravity=“center_vertical”

android:padding
• Espaçamento dentro do objeto para a sua borda
• android:paddingBottom=“2dp”, android:paddingTop=“3dp”

android:layout_margin
• Espaçamento do componente gráfico para com os outros (após a sua borda)
• android:layout_marginBottom=“5dp”, android:layout_marginLeft=“1dp”

15
Layout > FrameLayout

Representa apenas um único objeto

<FrameLayout
android:id="@+id/frame_layout_exemplo"
android:layout_width="match_parent"
android:layout_height="match_parent ">

<TextView></TextView>
</FrameLayout>

16
Layout > LinearLayout

Alinha cada um dos filhos na horizontal ou na vertical e aparecem conforme a ordem presente no XML

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical">

<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="to"/>

<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="subject"/>
</LinearLayout>

17
Layout > LinearLayout
<LinearLayout
android:layout_width="match_parent"

Existe ainda um parâmetro muito android:layout_height="match_parent"

android:orientation="vertical">

importante para a definição do tamanho dos <LinearLayout android:layout_width="0dp"

android:layout_height="wrap_content"
android:layout_weight="1"
componentes gráficos android:orientation="vertical">
</LinearLayout>
<LinearLayout android:layout_width="0dp"
• android:layout_weight – atribui um peso android:layout_height="wrap_content"
android:layout_weight="2"

relativo a outro componente para android:orientation="vertical">

</LinearLayout>

especificar a medida de cada um deles <LinearLayout android:layout_width="0dp"

android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
• Este atributo pode ser aplicado às View e </LinearLayout>
</LinearLayout>
aos ViewGroup

18
Layout > RelativeLayout

A posição de um componente gráfico é definida relativamente a outro e não importa a ordem no XML

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<EditText
android:id="@+id/label2"
android:layout_below=“@id/label1“
android:layout_width="match_parent"
android:layout_height="match_parent"

android:hint="subject"/>

<EditText
android:id="@+id/label1"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:hint="to"/>
</RelativeLayout>

19
Layout > RelativeLayout

android:layout_alignParentTop
• Se "true", coloca o topo da View no mesmo ponto da View pai

android:layout_centerVertical
• Se "true", centra a View verticalmente com a View pai

android:layout_below
• Posiciona a View abaixo da View pretendida (utilizando o seu ID)

android:layout_above
• Posiciona a View acima da View pretendida (utilizando o seu ID)

android:layout_toRightOf
• Coloca a View ao lado direito da View pretendida (utilizando o seu ID)
20
Layout > TableLayout

Permite dividir o ecrã em colunas e linhas <TableLayout

android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns
android:stretchColumns="1">
• As colunas ocupam sempre o tamanho máximo da
View que possuem nelas <TableRow
• Por isso podemos definir qual a coluna que vai <EditText
ocupar o espaço vazio existente no ecrã android:hint="subject"/>
• Caso seja pretendido que todas as colunas tenham </TableRow>
o mesmo tamanho utilizamos o parâmetro “*” <TableRow
• O índice de colunas começa no “0” <EditText
android:hint="to"/>

android:layout_span </TableRow>
</TableLayout>
• Permite juntar o número de colunas pretendido

21
Questão 1

Um Service necessita de:

1. Uma interface gráfica

2. Estar declarado no AndroidManifest.xml

3. Uma Thread à parte para ser executado

4. Todas as anteriores

22
View > Button e ImageButton
<Button
android:id="@+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text "
android:drawableLeft="@drawable/button_icon"
android:background="@drawable/button_custom" ... />

<ImageButton
android:id="@+id/imgButton_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/button_icon"... />
23
View > Button e ImageButton
<Button
android:id="@+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text "
android:drawableLeft="@drawable/button_icon"
android:background="@drawable/button_custom" ... />

<ImageButton
android:id="@+id/imgButton_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/button_icon"... />
24
View > Button e ImageButton

Interfaces em Java – (implements) OnClickListener

Exemplo código – onCreate()

mButton = (Button) findViewById(R.id.myButton);
mButton.setOnClickListener(this);

Exemplo código – onClick()

@Override
public void onClick(View v) {
if (v.getId() == R.id.myButtonToOpenNewActivity) {
...
}
}

25
View > EditText

<EditText android:id="@+id/email_address"
android:layout_width=“match_parent"
android:layout_height="wrap_content"
android:hint="@string/email_hint"
android:inputType="textEmailAddress|textCapWords"/>

InputTypes – none | text | textCapCharacters | number | phone …

26
View > EditText

Obter texto de uma EditText

mEditText = (EditText) findViewById(R.id.myEditText);
mEditText.getText().toString();

Interfaces disponíveis
• OnEditorActionListener

27
View > TextView
<TextView
android:id="@+id/texto"
android:layout_width=“match_parent"
android:layout_height="wrap_content"
android:maxLines="3"
android:text=“@string/texto"
android:textColor="#000000"
android:textSize="11sp"/>

Método, no Java, a utilizar para colocar texto na TextView

mTextView = (TextView) findViewById(R.id.texto);
mTextView.setText(“teste”); ou mTextView.setText(R.string.texto);
28
View > ImageView

<ImageView
android:id="@+id/imgViewTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/imagem"/>

Método, no Java, a utilizar para definir a imagem imgView

= (ImageView) findViewById(R.id.imgViewTest);
imgView.setImageDrawable(R.drawable.imagem);
imgView.setImageBitmap(Bitmap);

29
View > CheckBox
<CheckBox
android:id="@+id/checkboxBrowser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/browser"/>

Interfaces em Java – (implements) OnCheckedChangeListener

Exemplo código – onCreate()

mCheckBox = (CheckBox) findViewById(R.id.checkboxBrowser);
mCheckBox.setOnCheckedChangeListener(this);

Exemplo código – onCheckedChanged(CheckBox checkBox, boolean isChecked)

30
View > RadioGroup
<RadioGroup
android:id=“@+id/rGroup"
android:layout_width=“match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:id="@+id/rButtonYes"
Interfaces em Java – (implements) OnCheckedChangeListener
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/yes"/> Exemplo código – onCreate()
<RadioButton mRadioGroup = (RadioGroup) findViewById(R.id.rGroup);
android:id="@+id/rButtonMaybe" mRadioGroup.setOnCheckedChangeListener(this);
android:layout_width="wrap_content"
android:layout_height="wrap_content" Exemplo código – onCheckedChanged(RadioGroup rGroup, int id)
android:text="@string/maybe"/>
</RadioGroup> 32
View > ToggleButton
<ToggleButton
android:id="@+id/togglebutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Vibrate on"
android:textOff="Vibrate off"/>

ToggleButton toggle = (ToggleButton) findViewById(R.id.togglebutton); toggle.setOnCheckedChangeListener(new

CompoundButton.OnCheckedChangeListener() {

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if (isChecked) {
// The toggle is enabled
}
}
33
});
View > Spinner
<Spinner android:id="@+id/planetsSpinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>

Adicionar dados à Spinner

Spinner spinner = (Spinner) findViewById(R.id.planetsSpinner);

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.planets_array,

android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); spinner.setAdapter(adapter);

33
Options Menu

@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuItem mnu1 = menu.add(0, 0, 0, R.string.savemenu);
mnu1.setIcon(R.drawable.ic_menu_save);

return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onMenuItemSelected(int featureId,
MenuItem item) {
if (item.getItemId() == 0) { … }
}

34
Context Menu

É acionado quando o utilizador realiza um long press num

objeto

Este ContextMenu é idêntico ao tradicional clique direito do rato

num computador pessoal

public void onCreateContextMenu(ContextMenu menu,

View v, ContextMenuInfo menuInfo) { … }

public boolean onContextItemSelected(MenuItem item) { … }

35
Toast

Este tipo de notificações são as mais utilizadas para mostrar

mensagens de texto curtas, como por exemplo "Ficheiro
Guardado".

Código Java de criação

Toast.makeText(CONTEXTO, TEXTO, DURAÇÃO).show();

Duração
• Toast.LENGTH_SHORT ou Toast.LENGTH_LONG

36
Unidades de medida

Existem várias unidades de tamanho que podem ser utilizadas para a definição do
tamanho/posição/espaçamento dos componente gráficos

• Pixels (px), Polegadas (in) e Milímetros (mm): corresponde aos pixéis no ecrã (não utilizar)

• Density-independent Pixels (dp)

• Unidade abstrata baseada na densidade física do ecrã
• Os valores são relativos a um ecrã com 160 dpi, ou seja, 1 dp equivale a 1 pixel num ecrã de 160 dpi
• O ratio dp-para-pixel muda conforme a resolução do ecrã

• Scale-independent Pixels (sp)

• Semelhante à dp, a escala varia de acordo com as preferências de tamanho da fonte especificadas pelo
utilizador

37
Unidades de medida

38
Unidades de medida

drawable-xhdpi (extra high density: 320 dpi)

drawable-hdpi (high density: 240 dpi)

• WVGA800 (480x800)
• WVGA854 (480x854)

drawable-mdpi (medium density: 160 dpi)

• HVGA (320x480)

drawable-ldpi (low density: 120 dpi)

• QVGA (240x320)
• WQVGA400 (240x400)
• WQVGA432 (240x432)
39
Pasta res dos layout

layout
• portrait (por predefinição)

layout-land
• landscape

layout-large
• A partir de 160dp (portrait)

layout-large-land
• A partir de 160dp (landscape)

layout-sw600dp
• Ecrã com comprimento mínimo de 600dp
40
 Questão 2
<LinearLayout
android:layout_width="match_parent" android:layout_height="100dp"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" a)
android:src="@drawable/nodata_icon">
</ImageView>
<LinearLayout
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1"
b)
android:orientation="vertical">
<TextView android:layout_width="match_parent" android:layout_height="50dp“/>
<TextView android:layout_width="match_parent" android:layout_height="50dp“/>
</LinearLayout>
</LinearLayout>
42
Questão 3

O tamanho de uma view pode ser definido pelos atributos:

1. android:layout_width, android:layout_height e android:id

2. android:layout_width, android:layout_height e android:layout_weight

3. android:layout_width, android:layout_gravity e android:layout_height

4. android:layout_weight, android:layout_height e android:text

42
Questão 4

<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/texto"
a)
android:layout_margin="10dp"/>
<EditText android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_margin="10dp"/>
<Button android:layout_width="match_parent"
b)
android:layout_height="wrap_content"
android:text="@string/ok"/>
</LinearLayout>
43