martedì 18 novembre 2014

Tuto 18 - Inserire la Action Bar Holo in App Inventor e personalizzarla!

Ciao a tutti, oggi come dal titolo andremo a vedere come inserire un tema diverso da quello messo a disposizione da app inventor e useremo come
esempio il tema Holo.
Prima di iniziare bisogna che sappiate che il tema Holo é supportato solamente da API 11 e superiori (versione android 3.0.0 o superiore) se é inferiore, verrá visualizzata la solita vecchia barra grigia di app inventor.
E che una volta ricompilata l'apk prima vi usciranno delle opzioni in inglese nell'app, per tradurle basta andare prima di ricompilarla in vostroprogettosmalicomgoogleappinventorcomponentsruntime, modificare il file Form.smali aprendolo con Notepad++e modificare le scritte da inglese con quelle che volete voi in italiano.
Cosa ci serve?
Solo due leggeri software:
- ApkStudio, per decompilare l'apk Download
- Notepad++ per modificare il file xml con facilitá Download 
- L'apk della nostra applicazione creata da app inventor.
Abbiamo tutto, iniziamo installando Notepad++ ed estraendo ApkStudio in una cartella a vostra scelta.
Apriamo ApkStudio.exe, clicchiamo il robottino sotto 'File' in alto a sinistra e compiliamo come nell'immagine cliccando create (i nomi non devono contenere spazi)

Una volta cliccato Create attendiamo che finisce la decompilazione del nostro apk e andiamo nella cartella de nome del progetto inserito in precedenza come nell'immagine aprendo il file 'AndroidManifest.xml' con Notepad++.
Il vostro manifest dovrebbe essere tipo questo:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="org.lape.devicetuto">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<application android:debuggable="false" android:icon="@drawable/ya" android:label="Device Tuto">
<activity android:configChanges="keyboardHidden|orientation" android:name=".Screen1" android:windowSoftInputMode="stateHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:configChanges="keyboardHidden|orientation" android:name="org.lape.devicetuto.Home" android:windowSoftInputMode="stateHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
</intent-filter>
</activity>
<activity android:configChanges="keyboardHidden|orientation" android:name="org.lape.devicetuto.articoli" android:windowSoftInputMode="stateHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
</intent-filter>
</activity>
<activity android:configChanges="keyboardHidden|orientation" android:name="org.lape.devicetuto.video2" android:windowSoftInputMode="stateHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
</intent-filter>
</activity>
<activity android:configChanges="keyboardHidden|orientation" android:name="org.lape.devicetuto.donazione" android:windowSoftInputMode="stateHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
</intent-filter>
</activity>
</application>
</manifest>

Inseriamo il nostro tema:
Ora dobbiamo scegliere uno di questi tipi di action bar ed inserirla alla fine di ogni activity, ersempio android:theme=”@android:style/Theme.Holo”:
Tema holo normale

Theme.Holo
Theme.Holo.Light
Theme.Holo.Light.DarkActionBar

Senza la action bar:


“Theme.Holo.NoActionBar”
“Theme.Holo.Light.NoActionBar”

A schermo intero:


“Theme.Holo.NoActionBar.Fullscreen”
“Theme.Holo.Light.NoActionBar.Fullscreen”

Versione classica usata in app inventor:



“Theme.Holo.NoActionBar.TranslucentDecor”
“Theme.Holo.Light.NoActionBar.TranslucentDecor”


Esempio di activity nel manifest una volta aggiunto la piccola stringa per il tema:
<activity android:configChanges="keyboardHidden|orientation" android:name=".Screen1" android:windowSoftInputMode="stateHidden" android:theme="@style/Theme.Holo">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>

Il risultato del manifest postato prima, una volta inserito ad ogni activity il nostro tema sará:
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="org.lape.devicetuto">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<application android:debuggable="false" android:icon="@drawable/ya" android:label="Device Tuto">
<activity android:configChanges="keyboardHidden|orientation" android:name=".Screen1" android:windowSoftInputMode="stateHidden" android:theme="@style/Theme.Holo">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:configChanges="keyboardHidden|orientation" android:name="org.lape.devicetuto.Home" android:windowSoftInputMode="stateHidden" android:theme="@style/Theme.Holo">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
</intent-filter>
</activity>
<activity android:configChanges="keyboardHidden|orientation" android:name="org.lape.devicetuto.articoli" android:windowSoftInputMode="stateHidden" android:theme="@style/Theme.Holo">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
</intent-filter>
</activity>
<activity android:configChanges="keyboardHidden|orientation" android:name="org.lape.devicetuto.video2" android:windowSoftInputMode="stateHidden" android:theme="@style/Theme.Holo">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
</intent-filter>
</activity>
<activity android:configChanges="keyboardHidden|orientation" android:name="org.lape.devicetuto.donazione" android:windowSoftInputMode="stateHidden" android:theme="@style/Theme.Holo">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
</intent-filter>
</activity>
</application>
</manifest>

Ricompilazione apk:
Ora basta riaprire dall'icona ApkStudio, premere nel menú progetti a sinistra la certella avente il nome del nostro progetto e cliccare il 'Martello' aspettando la ricompilazione del file apk ce verrá ricreato sotto nome di 'rebuilt.apk'.
 Arrivati a questo punto abbiamo un problema, il nostro apk é stato firmato con un keystore casuale da apkstudio, per firmare il nostro apk con il nostro keystore personale seguite questo Tutorial

Con questo abbiamo finito, se volete poi personalizzare la vostra action bar cambiando il colore e tutto continuate la lettura.
Non riinizieremo tutto da capo ma riprendiamo il tutorial de quando inseriamo il tema, dove al posto di scegliere un layout holo tra quelli elencati dobbiamo inserire la stringa android:theme="@style/CustomActionBarTheme" (a forza questa non avete scelta).
Poi scaricate questo leggerissimo pacchetto, contenente i file 'color.xml e themes.xml' ed estraete i due file xml nella cartella:
Nomevostroprogetto/res/values
Dovrebbe giá esserci un file chiamato 'public.xml' voi dovete solo aggiungere quei due file.
Quando li avete aggiunti basta andare ad aprire il file 'color.xml' e cambiare i colori di 'actionbar_text' che é il testo della barra e 'bg' che é il colore di sfondo della barra, salviamo tutto e riprendiamo dal paggo 'ricompilazione' sopra e continuate a leggere il tutorial fino a riottenere il file rebuilt.apk.
Video:

2 commenti:

  1. Ciao, è possibile inserire qualcosa del material design nelle nostre apps?

    RispondiElimina
  2. Ciao Alessandro!
    certo che é possibile questa guida puó essere apllicata su tutti i temi android! l’unica cosa é che devi cambiare le stringhe quelle theme.holo ecc… con una di queste:
    @android:style/Theme.Material (dark version)
    @android:style/Theme.Material.Light (light version)
    @android:style/Theme.Material.Light.DarkActionBar
    Peró purtroppo ci sono due problemi, il primo é che apkstudio non supporta ancora temi su versioni superiori a kitkat quindi il material essendo in lollipop non consente la ricompilazione di apk…
    e il secondo é anche se fosse supportato il material design é disponibile solo su android 5.0(lollipop- api21) quindi gli utenti che non hanno lollipop vedranno il vecchio tema… questa cosa é risolvibile peró usando le appcompat ed integrare il tema ache su versioni inferiori, ma é richiesta una conoscenza anche di Java
    Qui trovi altre info dalla pagina ufficiale di google per integrare il material design:
    http://developer.android.com/training/material/theme.html

    RispondiElimina