El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem sobre els dissenys XML en Android, que són fonamentals per crear la interfície d'usuari (UI) de les aplicacions Android. Els dissenys XML permeten definir la disposició dels elements de la UI de manera declarativa, separant la lògica de la presentació.

Conceptes Clau

Què és XML?
- XML (eXtensible Markup Language) és un llenguatge de marcatge utilitzat per definir dades de manera estructurada.
- En Android, XML s'utilitza per definir els dissenys de la UI.
Tipus de Dissenys en Android
- LinearLayout: Disposa els elements en una fila o columna.
- RelativeLayout: Disposa els elements en relació amb altres elements o amb el pare.
- ConstraintLayout: Permet disposar els elements amb restriccions flexibles i complexes.
- FrameLayout: Disposa els elements en una sola pila.
- GridLayout: Disposa els elements en una graella.
Components Bàsics d'un Fitxer de Disseny XML
- Elements: Representen els components de la UI (botons, text, imatges, etc.).
- Atributs: Defineixen les propietats dels elements (amplada, alçada, text, color, etc.).

Estructura d'un Fitxer de Disseny XML

Un fitxer de disseny XML típic en Android té l'estructura següent:

<?xml version="1.0" encoding="utf-8"?>
<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/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hola, món!" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Prem aquí" />

</LinearLayout>

Explicació del Codi

LinearLayout: El contenidor principal que disposa els elements en una columna (vertical).
- xmlns:android: Defineix l'espai de noms XML per als atributs d'Android.
- android:layout_width i android:layout_height: Defineixen l'amplada i l'alçada del contenidor.
- android:orientation: Defineix l'orientació dels elements dins del contenidor (vertical en aquest cas).
TextView: Un element de text.
- android:id: Identificador únic per a l'element.
- android:layout_width i android:layout_height: Defineixen l'amplada i l'alçada de l'element.
- android:text: Defineix el text que es mostrarà.
Button: Un botó que l'usuari pot prémer.
- android:id: Identificador únic per al botó.
- android:layout_width i android:layout_height: Defineixen l'amplada i l'alçada del botó.
- android:text: Defineix el text que es mostrarà al botó.

Exercici Pràctic

Objectiu

Crear un disseny XML que contingui un EditText per introduir text, un TextView per mostrar el text introduït i un Button per actualitzar el TextView amb el text de l'EditText.

Passos

Obre el fitxer activity_main.xml en el directori res/layout.
Substitueix el contingut existent pel següent codi XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Introdueix text aquí" />

    <Button
        android:id="@+id/buttonUpdate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Actualitza" />

    <TextView
        android:id="@+id/textViewResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="El text apareixerà aquí" />

</LinearLayout>

Explicació del Codi

EditText: Un camp de text on l'usuari pot introduir dades.
- android:hint: Text que es mostra quan el camp està buit.
Button: Un botó per actualitzar el TextView.
- android:text: Text que es mostra al botó.
TextView: Un element de text que mostrarà el text introduït a l'EditText.

Solució

Per completar l'exercici, necessitem afegir la lògica a l'activitat principal (MainActivity.java o MainActivity.kt) per actualitzar el TextView quan es premi el botó.

Java

package com.example.myfirstapp;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private EditText editText;
    private TextView textViewResult;
    private Button buttonUpdate;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = findViewById(R.id.editText);
        textViewResult = findViewById(R.id.textViewResult);
        buttonUpdate = findViewById(R.id.buttonUpdate);

        buttonUpdate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String text = editText.getText().toString();
                textViewResult.setText(text);
            }
        });
    }
}

Kotlin

package com.example.myfirstapp

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var editText: EditText
    private lateinit var textViewResult: TextView
    private lateinit var buttonUpdate: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        editText = findViewById(R.id.editText)
        textViewResult = findViewById(R.id.textViewResult)
        buttonUpdate = findViewById(R.id.buttonUpdate)

        buttonUpdate.setOnClickListener {
            val text = editText.text.toString()
            textViewResult.text = text
        }
    }
}

Resum

En aquest tema, hem après sobre els dissenys XML en Android, incloent-hi els tipus de dissenys més comuns i com crear un fitxer de disseny XML bàsic. També hem realitzat un exercici pràctic per reforçar els conceptes apresos. En el proper tema, explorarem els components bàsics de la interfície d'usuari en més detall.

Introducció als Dissenys XML

Conceptes Clau

Estructura d'un Fitxer de Disseny XML

Explicació del Codi

Exercici Pràctic

Objectiu

Passos

Explicació del Codi

Solució

Java

Kotlin

Resum

Curs d'Android Studio

Mòdul 1: Introducció a Android Studio

Mòdul 2: Desenvolupament Bàsic d'Android

Mòdul 3: Desenvolupament Intermedi d'Android

Mòdul 4: Desenvolupament Avançat d'Android

Mòdul 5: Desenvolupament Professional d'Android

Mòdul 6: Temes Especials