Autore Topic: [facile] Button con background personalizzato ridimensionabile  (Letto 12776 volte)

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
+4
Livello di difficoltà: facile
Versione SDK utilizzata: 1.6
Link al file compresso del progetto eclipse: file in allegato

Questo tutorial ha lo scopo di illustrare i passi principali da compiere per poter realizzare dei background ridimensionabili da applicare al Widget Button.


Per prima cosa dovrete procurarvi/disegnarvi i vostri bottoni "statici":


La dimensione consigliata è 18x42 px per la superficie visibile del pulsante + 3 px di margine trasparente destro e sinistro, 1 px superiore e 5 px inferiore.
La dimensione totale dell'immagine dovrà quindi essere 24x48 px:


I pulsanti da creare dovrebbero essere 5: normale, normale-disabilitato, normale-disabilitato-selezionato, premuto e selezionato.
In questo tutorial è stato omesso il pulsante normale-disabilitato-selezionato. Tenetelo a mente quando realizzerete i vostri pulsanti personalizzati.

Una volta realizzata la grafica statica si deve utilizzare il software Draw 9-patch, presente nella directory tools dell'Android SDK, per indicare le aree "allungabili" delle immagini PNG:


Colorando con il mouse i pixel del bordo esterno andremo a definire le aree allungabili (aree verdi) e le zone riservate al contenuto (aree viola).
In particolare i pixel del lato sinistro e superiore permettono di identificare le regioni dell'immagine che potranno essere ridimensionate, mentre quelli del lato destro e inferire  definiscono l'area che un elemento (ad esempio il testo del Button) potrà occupare se contenuto nell'immagine stessa:


Definite le aree si dovrà procedere a salvare le nuove immagini. L'estensione ".9.png" verrà inserita automaticamente da Draw 9-patch:


Ora non rimane che importare le immagini appena salvate dentro la directory drawable del nostro progetto (createla se non esiste) e creare un file xml chiamato, ad esempio, btn_custom.xml:


L'interno del file va strutturato come segue:
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<selector
        xmlns:android="http://schemas.android.com/apk/res/android">
        
        <item
                android:state_window_focused="false"
                android:state_enabled="true"
                android:drawable="@drawable/btn_custom_normal" />
        
        <item
                android:state_window_focused="false"
                android:state_enabled="false"
                android:drawable="@drawable/btn_custom_normal_disable" />
        <item
                android:state_pressed="true"
                android:drawable="@drawable/btn_custom_pressed" />
        <item
                android:state_focused="true"
                android:state_enabled="true"
                android:drawable="@drawable/btn_custom_selected" />
        <item
                android:state_enabled="true"
                android:drawable="@drawable/btn_custom_normal" />
        <item
                android:state_focused="true"
                android:drawable="@drawable/btn_custom_normal_disable" />
        <item
                android:drawable="@drawable/btn_custom_normal_disable" />
</selector>

Se avete creato un'immagine anche per il pulsante normale-disabilitato-selezionato ricordate di modificare questa parte:
Codice (XML): [Seleziona]
        <item
                android:state_focused="true"
                android:drawable="@drawable/btn_custom_normal_disable" />

A questo punto è possibile utilizzare le immagini del nostro pulsante personalizzato all'interno di uno stile/tema:
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<resources>
        <style name="MyButtonStyle" parent="@android:style/Widget.Button">
            <item name="android:background">@drawable/btn_custom</item>
        </style>
</resources>
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<resources>
        <style name="JDsTheme" parent="android:Theme.Black">
                <item name="android:windowNoTitle">true</item>
                <item name="android:windowFullscreen">true</item>
                <item name="android:buttonStyle">@style/MyButtonStyle</item>
        </style>
</resources>
da utilizzare all'interno dell'AndroidManifest :
Codice (XML): [Seleziona]
<application
                android:icon="@drawable/icon"
                android:label="@string/app_name"
                android:theme="@style/JDsTheme">
                [...]
</application>

Bibliografia:
« Ultima modifica: 08 Settembre 2010, 23:28:23 CEST da JD »
È stata trovata una soluzione al tuo problema?
Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato ;).
E se hai aperto tu il thread marcalo come risolto cliccando !

Offline blackgin

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1387
  • Respect: +164
    • Google+
    • blackgins
    • blackginsoft
    • Mostra profilo
  • Dispositivo Android:
    Galaxy Nexus
  • Sistema operativo:
    Mac OSX 10.8
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #1 il: 28 Marzo 2010, 20:07:06 CEST »
0
Ottimo, mi serviva una cosa del genere. Sono sempre stato troppo pigro per andare a informarmi sulla gestione degli stati xD
Postate il LogCat LogCat LogCat LogCat LogCat

Offline daniele

  • Nuovo arrivato
  • *
  • Post: 17
  • Respect: +1
    • Mostra profilo
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #2 il: 29 Marzo 2010, 16:05:31 CEST »
0
Grazie JD per la guida...sto girò però confesso che ho riutilizzato il tuo codice e le tue immagini, ero troppo pigro per provare a farmele io  :-P .
Ciao.

Offline daliz

  • Nuovo arrivato
  • *
  • Post: 13
  • I love Android!
  • Respect: 0
    • Mostra profilo
    • Datapixel
  • Dispositivo Android:
    Motorola Milestone
  • Play Store ID:
    Datapixel
  • Sistema operativo:
    Microsoft Windows 7
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #3 il: 06 Aprile 2010, 19:45:24 CEST »
0
Grazie, mi hai aiutato definitivamente a capire ste maledette NinePatch... finora le avevo utilizzate un pò a caso :)

Offline Pinabello

  • Nuovo arrivato
  • *
  • Post: 22
  • Respect: +12
    • Mostra profilo
  • Dispositivo Android:
    Htc Dream Tim
  • Sistema operativo:
    Mac os X
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #4 il: 06 Aprile 2010, 21:28:55 CEST »
0
Grande, prenderò spunto anche io  ;-)

Offline ScarfaceIII

  • Utente junior
  • **
  • Post: 112
  • Respect: +13
    • raferalston12
    • Mostra profilo
  • Dispositivo Android:
    Nexus One
  • Sistema operativo:
    GNU/Linux, Ubuntu 10.04 / Windows 7
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #5 il: 31 Maggio 2010, 16:06:53 CEST »
0
Ciao, grazie mille, questo tutorial è ottimo, davvero.
Volevo chiedere una cosa, però: è possibile ottenere una cosa del genere senza creare dei pulsanti custom?
mi spiego: vorrei ottenere il comportamento "disable/enable" con i colori stock del dispositivo, senza creare dei pulsanti da me (sto creando l'applicazione per un progetto universitario e a chi mi segue vanno bene questi colori, nel crearli da me dovrei riprodurli precisamente per non far notare il cambiamento...non ho esattamente il tempo di occuparmene...)

grazie mille ancora!

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #6 il: 31 Maggio 2010, 16:14:46 CEST »
0
Non sono sicuro di aver capito cosa stai chiedendo, comunque per disabilitare un pulsante è sufficiente utilizzare questo attributo nell'XML che lo definisce: android:enabled="false"
In alternativa puoi utilizzare il metodo setEnabled: View | Android Developers
È stata trovata una soluzione al tuo problema?
Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato ;).
E se hai aperto tu il thread marcalo come risolto cliccando !

Offline ScarfaceIII

  • Utente junior
  • **
  • Post: 112
  • Respect: +13
    • raferalston12
    • Mostra profilo
  • Dispositivo Android:
    Nexus One
  • Sistema operativo:
    GNU/Linux, Ubuntu 10.04 / Windows 7
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #7 il: 31 Maggio 2010, 17:03:49 CEST »
0
sei un drago! che velocità... o_O
era esattamente quello che mi serviva cmq! grazie mille

Offline eagledeveloper

  • Translate Team
  • Utente senior
  • ****
  • Post: 516
  • Respect: +37
    • Google+
    • 347516210
    • dark_pinz
    • @WandDStudios
    • Mostra profilo
    • W&D Studios
  • Dispositivo Android:
    HTC One X e HTC One
  • Play Store ID:
    W%26D+Studios
  • Sistema operativo:
    Ubuntu / Windows 7
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #8 il: 16 Giugno 2010, 10:14:44 CEST »
0
Ho creato diversi Button personalizzati, una decina di stili  :-)

Gli attributi che si ripetono, devo inserirli ogni volta nello stile o c'e' un altro modo scrivendoli una sola volta?
C'e' un modo per far capire ad eclipse di visualizzare i Button nel Layout (come anteprima, scheda Layout invece che main.xml) senza far partire l'applicazione?
Ed ultima domanda, se ho un Button o qualsiasi altro elemento, non c'e' un modo per fare tipo export style? Sarebbe fichissimo  :D

Sciau.
I numeri contano molto di più del seme.

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #9 il: 16 Giugno 2010, 11:54:27 CEST »
0
Se hai creato il tema come ho fatto io nel tutorial dovresti poterlo selezionare nella schermata Layout di Eclipse e avere l'anteprima del layout senza bisogno di avviare l'applicazione. Controlla nel menu a tendina Theme.
È stata trovata una soluzione al tuo problema?
Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato ;).
E se hai aperto tu il thread marcalo come risolto cliccando !

Offline eagledeveloper

  • Translate Team
  • Utente senior
  • ****
  • Post: 516
  • Respect: +37
    • Google+
    • 347516210
    • dark_pinz
    • @WandDStudios
    • Mostra profilo
    • W&D Studios
  • Dispositivo Android:
    HTC One X e HTC One
  • Play Store ID:
    W%26D+Studios
  • Sistema operativo:
    Ubuntu / Windows 7
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #10 il: 16 Giugno 2010, 13:30:41 CEST »
0
No, per ora non ho una tema ma uso soltanto gli stili, dovrei creare un tema vero?
I numeri contano molto di più del seme.

Offline idom3z

  • Nuovo arrivato
  • *
  • Post: 1
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    HTC Magic
  • Sistema operativo:
    W7
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #11 il: 16 Settembre 2010, 18:31:42 CEST »
0
Grazie mille, ottima guida!
Neanche registrato sul forum e già ho trovato ciò che cercavo. :)

Offline droid7

  • Nuovo arrivato
  • *
  • Post: 44
  • Respect: +4
    • droidrcc
    • Mostra profilo
    • echlabSoftware
  • Dispositivo Android:
    Lg Optimus One
  • Play Store ID:
    echlab software
  • Sistema operativo:
    Archlinux
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #12 il: 27 Ottobre 2010, 15:47:30 CEST »
0
Avrei un suggerimento per il tutorial... Invece che create 5 pulsanti uguali tranne che per il colore e per risparmiare un pò di spazio, potresti associare a ciascun stato un diverso LayerDrawable che abbia come sfondo il pulsante creato con ninepath e come secondo livello un colore trasparente.
Android applications: echlabSoftware

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #13 il: 27 Ottobre 2010, 15:50:26 CEST »
0
Il modo che ho suggerito è quello che utilizzato da Android stesso per i pulsanti standard.
Se ti va posta un progettino col tuo metodo così vediamo effettivamente quant'è la differenza di spazio utilizzato e se la resa visiva è la medesima :)
È stata trovata una soluzione al tuo problema?
Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato ;).
E se hai aperto tu il thread marcalo come risolto cliccando !

Offline zerocool87

  • Utente junior
  • **
  • Post: 131
  • Respect: +4
    • Mostra profilo
  • Dispositivo Android:
    Htc Legend
  • Sistema operativo:
    Ubuntu 10.04
Re:[facile] Button con background personalizzato ridimensionabile
« Risposta #14 il: 07 Novembre 2010, 18:00:54 CET »
0
è possibile impostare pulsanti differenti? per esempio se io voglio che i pulsanti della prima activity siano in un modo, mentre i pulsanti della seconda activity siano in un altro.

Un'altra domanda. è possibile fare una cosa analoga per le immagini? Per esempio se io uso un'immagine di sfondo ad un elemento della listview e voglio che alla pressione l'immagine cambi, si può fare in questo modo? (lo so che potrei modificare il background da codice utilizzando l'onCLickListener, ma crea problemi con il chaching e il TAG)
« Ultima modifica: 07 Novembre 2010, 18:04:54 CET da zerocool87 »