Autore Topic: [facile] Inserire un'immagine in un Widget (Button, TextView, RadioButton, etc)  (Letto 12858 volte)

Offline JD

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

Questo brevissimo tutorial ha lo scopo di illustrare come inserire un'immagine all'interno di Widget quali Button, TextView, RadioButton e CheckBox.


Il tutto è veramente semplice ma, a quanto ho visto, non molto documentato:
si devono solamente inserire uno o più dei seguenti attributi
Codice: [Seleziona]
android:drawableLeft
android:drawableRight
android:drawableTop
android:drawableBottom
all'interno di un Widget compatibile, come ad esempio un Button:
Codice (XML): [Seleziona]
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/icon"
        android:drawableRight="@drawable/icon"
        android:drawableTop="@drawable/icon"
        android:drawableBottom="@drawable/icon"
        android:text="tutti e 4"
        android:minWidth="180dp" />

Tutto qui :D.

Sorgenti:
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center">
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Alcuni esempi di utilizzo degli attributi android:drawable"
                        android:gravity="center" />
                <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:drawableLeft="@drawable/icon"
                        android:text="drawableLeft"
                        android:minWidth="180dp" />
                <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:drawableRight="@drawable/icon"
                        android:text="drawableRight"
                        android:minWidth="180dp" />
                <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:drawableTop="@drawable/icon"
                        android:text="drawableTop"
                        android:minWidth="180dp" />
                <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:drawableBottom="@drawable/icon"
                        android:text="drawableBottom"
                        android:minWidth="180dp" />
                <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:drawableLeft="@drawable/icon"
                        android:drawableRight="@drawable/icon"
                        android:drawableTop="@drawable/icon"
                        android:drawableBottom="@drawable/icon"
                        android:text="tutti e 4"
                        android:minWidth="180dp" />
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="drawableLeft"
                        android:drawableLeft="@drawable/icon"
                        android:minWidth="180dp" />
                <RadioButton
                        android:text="drawableLeft"
                        android:drawableLeft="@drawable/icon"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:minWidth="180dp"></RadioButton>
                <CheckBox
                        android:text="drawableLeft"
                        android:drawableLeft="@drawable/icon"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:minWidth="180dp"></CheckBox>
        </LinearLayout>
       
</ScrollView>

Bibliografia:
« Ultima modifica: 08 Settembre 2010, 23:20:34 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 pivot

  • Nuovo arrivato
  • *
  • Post: 49
  • Respect: +1
    • Mostra profilo
  • Dispositivo Android:
    HTC Desire
  • Sistema operativo:
    Windows
+1
Molto molto utile, spesso le soluzioni semplici sfuggono.

Aggiungo, se posso permettermi, che anche lo sfondo è semplice da gestire tramite l'attributo android:background.
Inoltre si possono specificare immagini diverse a seconda dello stato: pressed, focused, ecc.

Codice

res\drawable\android_button.xml

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/android_pressed"
                android:state_pressed="true" />
        <item android:drawable="@drawable/android_focused"
                android:state_focused="true" />
        <item android:drawable="@drawable/android_normal" />
</selector>

L'ordine con cui si elencano i vari stati è importante, al primo stato verificato ci si ferma.
Sempre nella directory res\drawable inserire le immagini da utilizzare (io ho usato android_pressed.png, android_focused.png, android_normal.png che rappresentano il robottino android in 3 colori diversi).

res\layout\main.xml

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <Button android:id="@+id/button"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:padding="10dp"
               android:background="@drawable/android_button" />
</LinearLayout>

L'onCreate della vostra Activity sarà:

Codice (Java): [Seleziona]
@Override
public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        final Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {
                public void onClick(View v) {
                        // Perform action on clicks
                        Toast.makeText(HelloFormStuff.this, "Clicked!",
                                        Toast.LENGTH_SHORT).show();
                }
        });
}

Ora non trovo il link del tutorial ufficiale Android, ma se cercate esiste.


Offline daniele

  • Nuovo arrivato
  • *
  • Post: 17
  • Respect: +1
    • Mostra profilo
JD grazie per la guida.

pivot penso che la guida che cerchi sia questa: http://developer.android.com/intl/zh-TW/resources/tutorials/views/hello-formstuff.html.
L'unico problema è che il comportamento definito in state_focused non mi è mai funzionato, qualcuno saprebbe dire il perchè?

Ciao a tutti.

Offline pivot

  • Nuovo arrivato
  • *
  • Post: 49
  • Respect: +1
    • Mostra profilo
  • Dispositivo Android:
    HTC Desire
  • Sistema operativo:
    Windows
Esatto daniele, proprio quella!

Il focused a me funziona, almeno con l'emulatore. Se per esempio selezioni il tasto spostandoti con le frecce si attiva. Se hai un terminale solo touch mi sa che sarà difficile replicare lo stato.

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
0
@daniele & pivot
Ho appena pubblicato un tutorial sui Button con background personalizzato, provate a darci uno sguardo ;)
http://www.anddev.it/index.php/topic,174.0.html
È 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 daniele

  • Nuovo arrivato
  • *
  • Post: 17
  • Respect: +1
    • Mostra profilo
0
Pivot hai ragione, è che io pensavo che bastasse posizionarsi sopra col mouse :-).

JD guardo subito e ti faccio sapere. Grazie per quello che fai.

Offline kabuto

  • Nuovo arrivato
  • *
  • Post: 4
  • Kabuto
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy i7500 (1.6 donut)
  • Sistema operativo:
    Windows Seven
0
grande Jd :) ottimo lavoro in effetti mi aspettavo qualcosa di + complesso!
direi che si inizia bene!
Non rinunciare ad ESSERE

Offline MMarko

  • Utente junior
  • **
  • Post: 128
  • Respect: +5
    • MarcoMatarazzi
    • Mostra profilo
    • La Rocchetta Bed And Breakfast
  • Dispositivo Android:
    HTC Legend
  • Play Store ID:
    MarcoMatarazzi
0
E' invece possibile inserire immagini e testo all'interno di uno spinner?

Offline Ivan86

  • Utente junior
  • **
  • Post: 139
  • Respect: +1
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy S II
  • Sistema operativo:
    Windows 7
Ciao, grazie per la guida.

Io vorrei mettere le mie icon nelle checkbox del mio submenu. come posso fare?
Ecco la mia porzione di codice:
Codice (Java): [Seleziona]
int subGroupDi = 10;
                SubMenu subMenu1 = menu.addSubMenu(subGroupDi, order, order++, "Filtri");
                        subMenu1.add(subGroupDi, 0, 0, "Feedback +");
                        subMenu1.add(subGroupDi, 0, 0, "Feedback -");
                        subMenu1.add(subGroupDi, 0, 0, "Consigli");
                        subMenu1.setGroupCheckable(subGroupDi, true, false);
               
                        subMenu1.setHeaderTitle("Filtri");
                        subMenu1.setHeaderIcon(R.drawable.pref);
                        subMenu1.setIcon(R.drawable.pref);
Vorrei mettere una icon per ciascuna delle tre voci



EDIT:
ho letto che non è supportato... uff
c'è un altro modo? tramite finestre popup?
« Ultima modifica: 26 Marzo 2011, 13:24:22 CET da Ivan86 »

Offline Ricky`

  • Amministratore
  • Utente storico
  • *****
  • Post: 3487
  • Respect: +506
    • Github
    • Google+
    • rciovati
    • Mostra profilo
c'è un altro modo? tramite finestre popup?

Ti sei risposto da solo: usando un dialog.

Offline r1si

  • Utente junior
  • **
  • Post: 73
  • Respect: +1
    • Mostra profilo
  • Dispositivo Android:
    lg 2x
  • Play Store ID:
    r1si
  • Sistema operativo:
    ubuntu 11.10
Re:[facile] Inserire un'immagine in un Widget (Button, TextView, RadioButton, etc)
« Risposta #10 il: 01 Dicembre 2011, 15:07:00 CET »
0
c'è un  modo per importare le immagini  in automatico fatte a 72x72 nei tre formati senza scalare le immagini a mano?

Offline Gdg92ct

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Google+
    • Mostra profilo
    • gdgweb.altervista.org
  • Play Store ID:
    Gdg92ct
  • Sistema operativo:
    Windows 7
Re:[facile] Inserire un'immagine in un Widget (Button, TextView, RadioButton, etc)
« Risposta #11 il: 22 Gennaio 2013, 09:28:22 CET »
0
Grazie, ottima guida! :)

Offline christian13

  • Utente junior
  • **
  • Post: 83
  • Respect: +2
    • Mostra profilo
Re:[facile] Inserire un'immagine in un Widget (Button, TextView, RadioButton, etc)
« Risposta #12 il: 23 Agosto 2014, 17:16:54 CEST »
0
salve, vorrei chiedevi una cosa.

Il procedimento è molto semplice però ho un problema.
Al momento che carico un'immagine qualsiasi in una delle cartelle "drawable", nel rispettivo progetto Android sparisce la classe R.java, se cancello la foto allora ricompare.

Sapete per caso il motivo??