Material Design, Intent
Esempi di utilizzo
Laboratorio 1
Programmazione di Sistemi Mobile – AA 2025/2026 1
Esercizi
1. Utilizzare elementi di Material Design
2. Avviare un'activity interna al progetto
3. Avviare activity esterne
4. TravelDiary – Schermate dell’applicazione
Programmazione di Sistemi Mobile – AA 2025/2026 2
1.1. Utilizzare elementi di Material Design
• Partire dall’esercizio JetpackCompose
(materiale disponibile su Virtuale)
– Contiene l'esercizio della LazyColumn
dello scorso lab
• Creare un nuovo file
[Link]
• Implementare nel file uno o più
composable per arricchire l’esempio
della LazyColumn come in figura,
aggiungendo allo Scaffold:
– TopAppBar
– FloatingActionButton
Programmazione di Sistemi Mobile – AA 2025/2026 3
1.1. Soluzione
Scaffold(
topBar = { AppBar() },
floatingActionButton = {
FloatingActionButton(onClick = { /*TODO*/ }) {
Icon([Link], "Add item")
}
}
) { contentPadding ->
Column(modifier = [Link](contentPadding)) {
ScrollableList()
}
}
Programmazione di Sistemi Mobile – AA 2025/2026 4
1.1. Soluzione
Scaffold(
topBar = { AppBar() },
floatingActionButton = {
FloatingActionButton(onClick = { /*TODO*/ }) {
@OptIn(ExperimentalMaterial3Api::class)
Icon([Link]@Composable
, "Add item")
} fun AppBar() {
} TopAppBar(
) { contentPadding -> title = { Text("Title") },
Column(modifier = [Link](contentPadding))
navigationIcon ={ {
ScrollableList() IconButton(onClick = { /*TODO*/ }) {
} Icon([Link], "Menu")
} }
},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon([Link], "Shopping Cart")
}
IconButton(onClick = { /*TODO*/ }) {
Icon([Link], "Favorites")
}
},
colors = [Link](
containerColor = [Link]
)
)
}
Programmazione di Sistemi Mobile – AA 2025/2026 5
1.2. Utilizzare elementi di Material Design
• Creare un nuovo composable
MaterialListItem da utilizzare al
posto di Text per gli elementi della
lista
– Parametro: testo da mostrare
– Colore di sfondo: surfaceVariant
– Colore del contenuto:
onSurfaceVariant
– Arrotondamento angoli: 12dp
– Mostrare un’immagine accanto al testo
Programmazione di Sistemi Mobile – AA 2025/2026 6
1.2. Soluzione
@Composable
fun MaterialList() {
val elems = (0..100).map { "Elem $it" }
LazyColumn(
verticalArrangement = [Link]([Link]),
contentPadding = PaddingValues([Link])
) {
items(elems) {
MaterialListItem(it)
}
}
}
Programmazione di Sistemi Mobile – AA 2025/2026 7
1.2. Soluzione
@Composable
fun MaterialList() {
val elems = (0..100).map { "Elem $it" }
@Composable
LazyColumn( fun MaterialListItem(item: String, modifier: Modifier = Modifier) {
verticalArrangement = [Link](4.
Row( dp),
contentPadding = PaddingValues([Link]
dp) = [Link],
) { modifier = modifier
items(elems) { .clip(RoundedCornerShape([Link]))
MaterialListItem(it) .background([Link])
} .fillMaxWidth()
} .padding(vertical = [Link], horizontal = [Link])
} ) {
Image(
painter = painterResource([Link].ic_launcher_foreground),
contentDescription = "Android Logo",
colorFilter = [Link]([Link]),
modifier = [Link]([Link])
)
Spacer([Link]([Link]))
Text(
item,
style = [Link],
color = [Link]
)
}
}
Programmazione di Sistemi Mobile – AA 2025/2026 8
2. Avviare un'activity interna al progetto
• In un nuovo progetto Android,
creare due activity come negli
screenshot a lato
– MainActivity (sinistra)
– SecondActivity (destra)
• Al click sul tasto di
MainActivity, passare a
SecondActivity
Programmazione di Sistemi Mobile – AA 2025/2026 9
2. Caratteristiche del tasto
• Il tasto "Start SecondActivity" deve avere le seguenti proprietà:
– Dimensioni: 200dp * 50dp
– Arrotondamento angoli: 16dp
– Colore di sfondo: primary
– Colore del contenuto: onPrimary
Programmazione di Sistemi Mobile – AA 2025/2026 10
2. Soluzione
class SecondActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContent {
IntentTheme {
Surface(
modifier = [Link](),
color = [Link]
) {
}
}
}
}
}
Programmazione di Sistemi Mobile – AA 2025/2026 11
2. Soluzione
class SecondActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContent {
@Composable
IntentTheme {
fun SecondActivityButton() {
Surface(
val ctx = [Link]
modifier = [Link](),
color = [Link]
Button(
) {
modifier = [Link]([Link], [Link]),
}
shape = RoundedCornerShape([Link]),
}
colors = [Link](
}
containerColor = [Link],
}
contentColor = [Link],
}
),
onClick = {
val intent = Intent(ctx, SecondActivity::[Link])
[Link](intent)
}
) {
Text("Start SecondActivity")
}
}
Programmazione di Sistemi Mobile – AA 2025/2026 12
2. Soluzione
class SecondActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState) requiredSize fa l’override
setContent { delle dimensioni del padre
@Composable
IntentTheme {
fun SecondActivityButton() {
Surface(
val ctx = [Link]
modifier = [Link](),
color = [Link]
Button(
) {
modifier = [Link]([Link], [Link]),
}
shape = RoundedCornerShape([Link]),
}
colors = [Link](
}
containerColor = [Link],
}
contentColor = [Link],
}
),
onClick = {
[Link] permette di val intent = Intent(ctx, SecondActivity::[Link])
ottenere un riferimento al [Link](intent)
contesto corrente, sul quale è }
) {
possibile richiamare startActivity Text("Start SecondActivity")
}
}
Programmazione di Sistemi Mobile – AA 2025/2026 13
2. Errore!
[Link]: Unable to find explicit
activity class {[Link]/[Link]};
have you declared this activity in your [Link], or does
your intent not match its declared <intent-filter>?
• Non abbiamo dichiarato SecondActivity nel manifest
• Alt+Invio sul nome dell’activity
<activity android:name="[Link]" />
Evita che l’activity possa
essere avviata da altre app
<activity android:name=".SecondActivity" android:exported="false" />
Programmazione di Sistemi Mobile – AA 2025/2026 14
3. Avviare activity esterne
• In SecondActivity, aggiungere i
tasti:
– "Show Map": apre la posizione di
Cesena in qualsiasi app di mappe
installata
– "Show Google Maps": apre la
posizione di Cesena su Google Maps
– "Share As Text": condivide le
coordinate di Cesena come testo
• Coordinate:
geo:44.1391, 12.24315
Programmazione di Sistemi Mobile – AA 2025/2026 15
3. Caratteristiche del tasto
• I tasti devono avere le seguenti proprietà:
– Dimensioni: 200dp * 50dp
– Arrotondamento angoli: 16dp
– Colore di sfondo: primaryContainer
– Colore del contenuto: onPrimaryContainer
Programmazione di Sistemi Mobile – AA 2025/2026 16
3. Caratteristiche del tasto
• Possiamo creare un composable riutilizzabile per il button
@Composable
fun MyButton(label: String, onClick: () -> Unit) {
Button(
modifier = [Link]([Link], [Link]),
shape = RoundedCornerShape([Link]),
colors = [Link](
containerColor = [Link],
contentColor = [Link],
),
onClick = onClick
) {
Text(label)
}
}
Programmazione di Sistemi Mobile – AA 2025/2026 17
3. Soluzione - Mappa (intent implicito)
@Composable
fun MapButton(coordinates: String) {
val ctx = [Link]
MyButton(
label = "Show Map",
onClick = {
val geolocation = [Link]()
val intent = Intent(Intent.ACTION_VIEW, geolocation)
if ([Link]([Link]) != null) {
[Link](intent)
}
}
)
}
Programmazione di Sistemi Mobile – AA 2025/2026 18
3. Soluzione - Google Maps (intent esplicito)
@Composable
fun GoogleMapsButton(coordinates: String) {
val ctx = [Link]
MyButton(
label = "Show Google Maps",
onClick = {
val geolocation = [Link]()
val intent = Intent(Intent.ACTION_VIEW, geolocation).apply {
`package` = "[Link]"
}
if ([Link]([Link]) != null) {
[Link](intent)
}
}
)
}
Programmazione di Sistemi Mobile – AA 2025/2026 19
3. Soluzione - Testo (intent implicito con chooser)
@Composable
fun ShareTextButton(coordinates: String) {
val ctx = [Link]
MyButton(
label = "Share As Text",
onClick = {
val intent = Intent().apply {
action = Intent.ACTION_SEND
putExtra(Intent.EXTRA_TEXT, coordinates)
type = "text/plain"
}
val chooser = [Link](intent, "Share via")
if ([Link]([Link]) != null) {
[Link](chooser)
}
}
)
}
Programmazione di Sistemi Mobile – AA 2025/2026 20
3. Disposizione nell'activity
Surface(
color = [Link],
modifier = [Link]()
) {
Column(
horizontalAlignment = [Link],
verticalArrangement = [Link],
modifier = [Link](),
) {
Column(
verticalArrangement = [Link]([Link])
) {
val coordinates = "geo:44.1391, 12.24315"
MapButton(coordinates)
GoogleMapsButton(coordinates)
ShareTextButton(coordinates)
}
}
}
Programmazione di Sistemi Mobile – AA 2025/2026 21
3. Soluzione - Manifest
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="[Link]
xmlns:tools="[Link]
<!-- ... -->
<queries>
<intent>
<action android:name="[Link]" />
<data android:scheme="geo" />
<category android:name="[Link]" />
</intent>
</queries>
</manifest>
Programmazione di Sistemi Mobile – AA 2025/2026 22
3. Soluzione - Manifest
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="[Link]
xmlns:tools="[Link]
<!-- ... -->
<queries>
<intent>
<action android:name="[Link]" />
<data android:scheme="geo" />
<category android:name="[Link]" />
</intent>
</queries>
</manifest> Usando [Link]
non serve dichiarare nulla nel
manifest. È il sistema che si
occupa di effettuare la query
per Intent.ACTION_SEND.
Programmazione di Sistemi Mobile – AA 2025/2026 23
4. TravelDiary – Schermate dell’applicazione
• Creare un progetto col nome TravelDiary
• Ad ogni esercitazione, lo arricchiremo con nuove funzionalità
• Oggi partiamo con la creazione delle quattro schermate che
compongono l’app
Programmazione di Sistemi Mobile – AA 2025/2026 24
4. TravelDiary – Schermate dell’applicazione
• Aggiungere un package [Link], con al suo interno i file:
– [Link]
– [Link]
– [Link]
– [Link]
• Fare riferimento agli screenshot delle prossime slide per il design e ai
riferimenti nell’ultima slide per suggerimenti sui componenti da
utilizzare.
• Non è necessario gestire la navigazione tra le varie schermate. Sarà
oggetto del prossimo laboratorio.
Programmazione di Sistemi Mobile – AA 2025/2026 25
Material Icons Extended
• Per utilizzare le icone di Material Design che compaiono negli screenshot è
necessario installare la libreria Material Icons Extended
• Suggerimento: per velocizzare l'installazione utilizzando Gradle Version Catalog,
aggiungere la seguente riga al blocco dependencies del file [Link]
(modulo :app), come se non utilizzassimo il catalog:
implementation("[Link]:material-icons-extended")
• A questo punto, Android Studio dovrebbe proporci di convertire la dipendenza in
un'entry del catalog
Programmazione di Sistemi Mobile – AA 2025/2026 26
Approfondimento: Gradle Version Catalog
• Il Gradle Version Catalog è un metodo gentralizzato di gestione
delle dipendenze in un progetto Gradle.
• Permette di ridurre il codice duplicato e avere una single
source of truth per tutte le dipendenze, anche in progetti con
più moduli.
• È abilitato di default nei nuovi progetti Android.
Programmazione di Sistemi Mobile – AA 2025/2026 27
Approfondimento: Gradle Version Catalog
• Tutte le dipendenze e le loro versioni sono raccolte in un unico file
[Link], diviso in tre sezioni:
– versions: elenca tutte le versioni di librerie e plugin
– libraries e plugins: elencano rispettivamente le librerie e i plugin usati dal
progetto, facendo riferimento a una versione dichiarata in versions
# [Link]
[versions]
kotlin = "2.0.21"
coreKtx = "1.17.0"
[libraries]
androidx-core-ktx = { group = "[Link]", name = "core-ktx", [Link] = "coreKtx" }
[plugins]
kotlin-android = { id = "[Link]", [Link] = "kotlin" }
kotlin-compose = { id = "[Link]", [Link] = "kotlin" }
Programmazione di Sistemi Mobile – AA 2025/2026 28
Approfondimento: Gradle Version Catalog
• I moduli del progetto possono fare riferimento a una libreria o
un plugin del catalog tramite la variabile libs.
// [Link]
plugins {
alias([Link])
alias([Link])
# [Link] }
[versions] dependencies {
kotlin = "2.0.21" implementation([Link])
coreKtx = "1.17.0"
}
[libraries]
androidx-core-ktx = { group = "[Link]", name = "core-ktx", [Link] = "coreKtx" }
[plugins]
kotlin-android = { id = "[Link]", [Link] = "kotlin" }
kotlin-compose = { id = "[Link]", [Link] = "kotlin" }
Programmazione di Sistemi Mobile – AA 2025/2026 29
4. TravelDiary – Tema chiaro
Programmazione di Sistemi Mobile – AA 2025/2026 30
4. TravelDiary – Tema scuro
Programmazione di Sistemi Mobile – AA 2025/2026 31
Riferimenti
• Componenti di Material Design 3
[Link]
• App bars
[Link]
• Card
[Link]
• Images
[Link]
• Text fields
[Link]
Programmazione di Sistemi Mobile – AA 2025/2026 32