DevCorner: utilizziamo i custom dialog

Cosa c'è di meglio di una buona applicazione per combattere il caldo estivo? Come dite? Una granita? Un gelato? Tutte opzioni valide, ma una bibita rinfrescante non è certo un buon motivo per saltare l'appuntamento con DevCorner! Qualche settimana fa vi abbiamo spiegato come utilizzare gli alert dialog: che ne direste adesso di studiare un po' come personalizzare la schermata "popup", al fine di piegarla meglio alle nostre esigenze?

Quanto avevamo fatto la scorsa volta, infatti, va bene per una semplice finestra di conferma, ma cosa fare se, ad esempio, vogliamo che l'utente possa digitare del testo da salvare? Vediamo insieme come realizzare una cosiddetta custom dialog.

Per prima cosa, creiamo un nuovo progetto: noi per comodità lo abbiamo chiamato proprio CustomDialog e definiamo come dev'essere la MainActivity. Per questo nostro test, abbiamo bisogno soltanto di una TextView (da poter modificare con il testo inserito nella dialog) e di un bottone.

Definiamo quindi il nostro XML in questo modo:

A questo punto è necessario creare un secondo layout, che andrà a definire l'aspetto della schermata che apparirà al clic del bottone. Clicchiamo quindi col destro sulla cartella layout e, dopo aver selezionato New, scegliamo Android XML file. Chiamiamo il nuovo arrivato custom.xml e inseriamoci dentro un'immagine, una TextView, un EditText e un bottone. In questo modo, l'utente potrà scrivere del testo e, cliccando sul tasto di conferma, si troverà quanto digitato all'interno della MainActivity. Il risultato finale delle nostre operazioni, dovrà essere qualcosa di simile:

    

    

    

        
    

/>

    

È giunto finalmente il momento di mettere le nostre manacce sul codice vero e proprio: per prima cosa, quindi, apriamo il nostro MainActivity.java e dichiariamo la TextView e il Button andandoli a pescare dall'ID, come abbiamo sempre fatto.

public class MainActivity extends Activity {

	final Context context = this;
	Button button;
	TextView mainText;

	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		button = (Button) findViewById(R.id.CustomDialog_btn);
		mainText = (TextView) findViewById(R.id.mainText);

A questo punto, non ci rimane che stabilire cosa deve succedere quando l'utente clicca il nostro tasto "Mostra finestra": dobbiamo fare in modo che, premendo il tasto, appaia una sorta di popup dove poter digitare del testo.

Scriviamo quindi quanto segue nell'OnClickListener:

	button.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {

				// custom dialog
				final Dialog dialog = new Dialog(context);
				dialog.setContentView(R.layout.custom);
				dialog.setTitle("AndroidWorld");


				TextView text = (TextView) dialog.findViewById(R.id.text);
				text.setText("Digita qui il testo che vuoi far apparire:");
				
				final EditText input = (EditText) dialog
						.findViewById(R.id.inputText);

				Button buttonDialog = (Button) dialog
						.findViewById(R.id.dialogButtonOK);

				buttonDialog.setOnClickListener(new OnClickListener() {
					@Override
					public void onClick(View v) {
						String testo = input.getText().toString();
						mainText.setText(testo);
						dialog.dismiss();
					}
				});

				dialog.show();
			}
		});

Come potete leggere, per prima cosa abbiamo impostato un nuovo oggetto di tipo Dialog (chiamandolo banalmente dialog): allo stesso abbiamo impostato il layout che avevamo precedentemente creato (setContentView(R.layout.custom)) e abbiamo stabilito il titolo (dialog.setTitle("AndroidWorld")). A questo punto, dopo aver richiamato la nostra TextView tramite l'ID text e aver impostato il suo contenuto (Digita qui il testo che vuoi far apparire:), abbiamo infine definito il nostro EditText chiamandolo input e il tasto buttonDialog.

Una volta che tutti gli elementi sono stati raggiunti tramite il loro ID, non ci rimane che fare in modo che al clic del bottone quanto abbiamo scritto nel campo di digitazione vada a sovrascrivere il testo della MainActivity: per farlo, abbiamo creato un nuovo OnClickListener che salva in una Stringa chiamata testo quel che trova nell'EditText, lo imposta nel nostro MainText e infine chiude il dialog:

public void onClick(View v) {
						String testo = input.getText().toString();
						mainText.setText(testo);
						dialog.dismiss();
					}

Come ultimo passaggio, non dimentichiamoci di mostrare il dialog con un semplice

dialog.show();

Il codice completo del nostro MainActivity.java, quindi, sarà più o meno come il seguente:

package com.peppeuz.customdialog;

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

	final Context context = this;
	Button button;
	TextView mainText;

	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		button = (Button) findViewById(R.id.CustomDialog_btn);
		mainText = (TextView) findViewById(R.id.mainText);

		// add button listener
		button.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {

				// custom dialog
				final Dialog dialog = new Dialog(context);
				dialog.setContentView(R.layout.custom);
				dialog.setTitle("AndroidWorld");


				TextView text = (TextView) dialog.findViewById(R.id.text);
				text.setText("Digita qui il testo che vuoi far apparire:");
				
				final EditText input = (EditText) dialog
						.findViewById(R.id.inputText);

				Button buttonDialog = (Button) dialog
						.findViewById(R.id.dialogButtonOK);

				buttonDialog.setOnClickListener(new OnClickListener() {
					@Override
					public void onClick(View v) {
						String testo = input.getText().toString();
						mainText.setText(testo);
						dialog.dismiss();
					}
				});

				dialog.show();
			}
		});
	}
}

Anche per questa settimana l'appuntamento è terminato e adesso potrete far apparire utili finestrelle per personalizzare l'applicazione con contenuti inseriti dall'utente: come sempre, se avete qualche dubbio su questo tutorial o sulla programmazione Android in generale, vi rimandiamo sul nostro forum dove saremo felici di aiutarvi a chiarire qualsiasi dubbio!