Programiranje za Android - Predavanje 1


Preuzimanje projekta sa predavanja

##Sadržaj

Pokretanje emulatora

Upute za postavljanje Eclipse projekta s objašnjenjima bitnih pojmova

Struktura projekta u Eclipse-u

GUI editor

Android layouts

Zadaci za vježbu

Dodatni materijali

##Pokretanje emulatora

Emulator je aplikacija koja nam omogućava da testiramo našu aplikaciju na računalu. Da bi mogli uopće vidjeti kako aplikacija izgleda i radi moramo ju pokrenuti na uređaju ili na emulatoru. Da bi pokrenuli emulator prvo ga moramo kreirati. Kreiramo ga na sljedeći način:

  1. Pokrenite Eclipse i odaberite Window > Android Virtual Device Manager
  2. Prebacite na tab Device Definitions i odaberite željeni uređaj te kliknite Create AVD.
  3. Kliknite OK. Virtual Device je kreiran. Da bi ga pokrenuli odaberite ga u izborniku i kliknite Start. Pričekajte dok se emulator ne pokrene

##Upute za postavljanje Eclipse projekta s objašnjenjima bitnih pojmova

Eclipse je razvojno okruženje koje ćemo koristiti tijekom radionica. Pod pojmom razvojno okruženje mislimo na računalni program koji nam omogućava da jednostavnije izrađujemo druge programe(u ovom slučaju programe za Android).

Eclipse je razvojno okruženje koje je postojalo i prije Android operacijskog sustava i može se koristiti u razne svrhe. Eclipse omogućava instalaciju raznih dodataka u svrhu poboljšanja i prilagođavanja razvojnog okruženja. Tako u našem slučaju postoji dodatak za razvoj Android aplikacija.

Eclipse zajedno s dodatkom za razvoj Android aplikacija možete preuzeti ovdje. Datoteku ne treba instalirati, nego samo raspakirati u željeni direktorij. Nakon toga pokrenuti iz tog direktorija SDK Manager i instalirati ažuriranja (update) svih paketa koji nisu ažurirani. U raspakiranom folderu trebala bi se nalaziti ikona Eclipse programa.

Nakon što ste preuzeli i raspakirali Eclipse spremni ste za razvoj. Sljedeći koraci objašnjavaju kako postaviti prvi projekt:

  1. Odaberite File > New > Project.
  2. Odaberite Android > Android Application Project, i kliknite Next.
  3. Unesite osnovne postavke za projekt:
    • Application name - Ime aplikacije. Ime koje se vidi na ekranu ispod ikone aplikacije.
    • Project name - Ime projekta. Ime foldera u kojem se nalaze datoteke vezane za projekt.
    • Package name - Ime paketa. Zasada ne toliko bitno.
    • Minimum Required SDK - Najmanja podržana verzija Androida.
    • Target SDK - Najveća verzija na kojoj je aplikacija testirana.
    • Compile With - Verzija na kojoj se aplikacija kompajlira.
    • Theme - Tema aplikacije. Moguće odabrati jednu od standardnih tema na Androidu.
  4. Konfiguracija projekta:
    • Create custom launcher icon - Označiti. Eclipse će kreirati default ikonu za aplikaciju.
    • Create activity - Označite da želite kreirati novi “Activity”
    • Mark this project as library - Ovo nemojte označiti.
    • Create project in workspace - Ovo označite. Projekt će biti kreiran u workspace-u kojeg smo odredili prilikom prvog pokretanja Eclipse-a. Lokacija na disku na kojoj se projekt nalazi.
  5. Konfiguracija ikone - Ovdje se nalaze razni parametri za konfiguraciju ikone. Nije toliko bitno pa nećemo ovdje objašnjavati što koji parametar znači, ali možete sami pokušati mijenjati parametre da vidite koji što radi.
  6. Konfiguracija “Activity” - Za sada odabrati “Blank Activity”
    • Activity name - Ime glavnog “Activity”. “Activity” će biti objašnjen na drugom predavanju. Zasada je dovoljno shvatiti da predstavlja jedan ekran.
    • Layout name - Ime datoteke u kojoj će biti UI.
    • Fragment Layout Name - Zasada nebitno, ovisno o verziji Eclipse-a ovo možda i nećete imati.
    • Navigation Type - Također nebitno za sada.
  7. Kliknite Finish. Novi projekt je kreiran

##Struktura projekta u Eclipse-u

Od puno stvari koje se ovdje nalaze za sada su bitne samo one koje su označene crvenim pravokutnikom.
Prvi u cijeloj strukturi je glavni folder projekta(ovdje se zove radionica1). Ispod njega je src folder u kojem će se nalaziti source code projekta. Tu vidimo datoteku MainActivity.java koju možemo zamisliti kao kod koji je vezan za jedan ekran. Više o tome na drugom predavanju.
Sljedeći bitan folder je res u kojem se nalaze resursi koje aplikacija koristi. U podfolderu layout se nalazi xml datoteka koja predstavlja grafički izgled našeg ekrana. Zadnje što nam je bitno je strings.xml datoteka u kojoj će se nalaziti svi tekstovi koje aplikacija koristi u layout datotekama.

##GUI editor ##Android layouts

Da bi organizirali objekte po ekranu na Androidu se koriste razni kontejneri. Pod pojmom kontejner smatramo objekt koji ima mogućnost da u sebi drži druge objekte. Ovisno o ponašanju kontejnera možemo ostvariti razne rasporede objekata koje stavljamo u taj kontejner. Osnovne vrste kontejnera su:

  1. Linear layout(vertikalni i horizontalni)
  2. Relative layout
  3. Frame layout
  4. Table layout
  5. Grid layout

###Linear layout

kontejner koji organizira djecu u red ili u stupac. Ako imamo horizontalni linearni layout kada dodamo objekt u njega on će te objekte slagati jedan do drugog u redu. Vertikalni radi isto samo organizira tako da slaže objekte jedan ispod drugoga.

###Relative layout

kontejner koji organizira djecu tako da svako dijete može specificirati poziciju relativno na drugi element ili na roditelja odnosno kontejner.

###Frame layout Jednostavan kontejner koji je predviđen da sadrži jedan objekt. Međutim moguće je dodati u njega i više objekta pa se ovisno o rasporedu dodavanja slažu jedan na drugi. Pogodno za situacije u kojima imamo overlay. Specifičan slučaj ScrollView ###Table layout

Organizira djecu u redove i stupce. Nešto slično html tablicama.

###Grid layout

Slično kao table layout. Organizira djecu u mrežu. U nekim slučajevima jednostavniji za korištenje od table layout-a.

##Zadaci za vježbu

Zbog malog broja sati predavanja koje možemo držati, nakon svakog predavanja će biti objavljeni zadaci za vježbu. Ideja je da svatko kod kuće prouči materijale s predavanja i ovisno o željama i mogućnostima riješi zadatke koji su zadani. Zadaci će biti raznih težina(obično poredani od lakših prema težima) tako da svatko može vježbati koliko želi. Također, tko želi može rješavati i nešto što nije ovdje zadano. Rješenja i pitanja možete poslati mailom ili na neki drugi način od onih navedenih u zaglavlju.

  1. Napraviti novi projekt i imenujte ga “home1”. Paket neka se zove com.hr.futura.home1. Pokrenite i vidite jeli sve uredu.
  2. Za svaki sljedeći zadatak napraviti novi layout file.
  3. Napraviti horizontalni linear layout s dva tekstualna polja.
  4. Napraviti vertikalni linear layout s tekstualnim poljem i pucom.
  5. Napraviti relative layout sa slikom i tekstualnim poljem pored slike.
  6. Na prethodni zadatak dodati pucu ispod slike
  7. Napraviti frame layout i u njemu sliku i overlay tako da izgleda da je slika okrugla.
  8. Napraviti tablicu u table layout s brojevima od 1 do 9 u tri reda i tri stupca
  9. Prethodni zadatak napraviti s grid layout-om.
  10. Napraviti layout login ekrana poznatih aplikacija:

    Ostvariti layout prema slici. Ovo je login ekran facebook aplikacije. Koji bi layout bio najzgodniji za ostvariti ovo?
    Upute: Nije potrebno da vaš layout izgleda identično ovome. Dovoljno je dobiti otprilike jednaku strukturu na ekranu. Ako želite bilo bi super da pokušate potpuno imitirati ovaj ekran
    Ostvariti layout prema slici. Ovo je login ekran twitter aplikacije. Koji bi layout bio najzgodniji za ostvariti ovo?
    Upute: Nije potrebno da vaš layout izgleda identično ovome. Dovoljno je dobiti otprilike jednaku strukturu na ekranu. Tipkovnicu ne morate uzimati u obzir, ona se sama pojavi kada se klikne na tekstualno polje. Ako želite bilo bi super da pokušate potpuno imitirati ovaj ekran osim plavog dijela u vrhu ekrana. On zapravo niti neće biti dio layout datoteke nego se automatski pojavljuje.
  11. Sljedeći zadatak se sastoji od 3 podzadatka od kojih možete odabrati koje ćete raditi ili možete sve. Napravit ćemo jedan ekran Facebook aplikacije

    Ostvariti layout koji je označen crvenim pravokutnikom. Ikone možete potražiti na internetu. Nije bitno koje su, stavite koje želite.
    Ostvariti layout koji je označen crvenim pravokutnikom. Slike možete potražiti na internetu. Nije bitno koje su, stavite koje želite.
    Spojite prethodna dva koraka u jedan layout
  12. U ovom zadatku glavni dio je ostvariti da slika izgleda okruglo. To se postiže tako da se napravi jedna dodatna slika koja će prekriti našu sliku, ali ta slika mora biti prozirna u dijelu u kojem želimo da se vidi naša slika.

    Sliku možete uzeti koju želite, a overlay slika se nalazi ovdje.Ostatak ekrana također možete ostvariti ako želite.
  13. U sljedećoj tablici su još neki ekrani poznatih aplikacija, pa ako želite pokušajte i njih ostvariti.

##Dodatni materijali

Android dokumentacija - Službena android dokumentacija. Ovdje se mogu naći informacije o komponentama, metodama, …

Android layouts - Dio do “Building Layouts with an Adapter”

Google I/O- An Introduction to Android - Ne toliko vezano uz ovo predavanje, ali tko želi korisno za pogledati.

XML - O XML jeziku