Ændre et billedet på skærmen med en knap.

Vi start med en tom skabelon.

Vi starter med at slette “Hello world”.
Tilføj en knap og hæng den op øverst,venstre og højre. Giv den et navn bn_skiftbiled “ID”.
Vi markerer 2 billeder “kopi” og tilføjer dem under “res/drawable” med past.
Tilføj de 2 billeder vi skal bruge.
Her ser vi vores billeder vigtigt er at de er skrevet med småt og ikke indeholder specialt tegn.
Vi tilføjer et billed til vores design.
Vi vælger et billed under projekt og trykker ok.
Så billedet er placeret og hængt på knappen og kanterne.
Vi har brug for en setOnClickListener som kontrollerer om knappen er trykket.

setImageResource skifter grafiken ud med vores hellow billed når vi trykker på knappen bn_skiftbilled.

Her vores første skærm biled.
Her kan vi se trykker vi på knappen bliver billedet skiftet.

Så nu kan vi ændre på de billeder, som vi viser på skærmen.

Se hvad der sker i programmet skriv til loggen

Du kan skrive en tekst til loggen så du kan følge med i hvad der sker i til program. Her et lille eksempel. Trykker man på knappen kommer der en meddelse i loggen at knappen er trykket.

Nu har vi mulighed for at se i loggen at knappen bliver trykket.

Trykker man nu på knappen kan men med det samme i loggen se teksten “Du har trykket på knappen”.

I Logcat kan man se at vi har trykket på knappen.

Der står rigtig mange oplysninger i Logcat hvis man øverst søger efter tag: teksten i dette eksempel “Knud” vises kun log beskeder som indeholder “Knud”. Trykker vi nu på knappen på mobilen som er tilsluttet med USB kablet eller på vores virtuelle mobil.

Kan man med det samme i Logcat se at knappen har været trykket.

Det er en god mulig for at fejl finde sit program. Debug tekster vises ikke på skærmen de vises kun i Logcat i program loggen.

Skriv en pop-up tekst på skærmen med Toast

Ønsker du en pop-up tekst på skærmen som vises og forsvinder igen så er Toast en god måde at gøre dette på.

Her et lille eksempel på en pop-up tekst med Toast.

Du skal bruge en import til Toast den tilføjes automatisk ved at trykke Alt+Enter på Toast.

Hvordan laver jeg en tryk knap

Hvordan tilføjer jeg en knap på skærmen og hvordan får jeg programmet til at reagere hvis man trykker på knappen.

Øverst til højre kan man zoome ind på sit design, lav denne større så man kan se designet.
Nu kan vi se teksten og er klar til at tilføje vores første knap.
Tilføjer vores først knap til vores skærm.
Knappen er nu tilføjet vores skærm, den skal dog også placeres på skærmen.
Nu kunne man tro at det var nok at placere knappen det rigtige sted på skærmen.

Sådan er det ikke. Vi kan flytte rund med knappen på skærmen. Men installerer man appen på sin telefon vil knappen ikke være korrekt placeret. For at placere knappen øverst i midten af skærmen skal der lidt mere til. Vi kikker lidt nærmere på knappen.

Vi kan de de runde prikker på knappen og de små firkantede i hjørnerne.

Prikkerne bruges til at gøre knappen fast til kanter eller til andre knapper, billeder m.m. Firkanterne i hørnerne bruges til at gøre knappen større eller mindre.

Vi gør knappen fast til kanterne ved at trykke på prikken øverst og trække den op til øverste kant. Prikken til høre trækkes til højre kant og prikken til venstre til venstre kant.

Knappen hænger nu fast øverst, til højre og til venstre. Til højre har vi “Attributes” som ses når man har fokus på knappen.

“Attributes” Egenskaber på knappen kan ændres i dette menu. Vi kan se at vi har en afstand på 8 til øverste kant, til venstre og til højre kant.

Dette gør at knappen bliver placeret øverst i midten. Det virker lidt som et anker hvor man definerer hvor skal knappen hænge fast med et gummibånd.

Det smarte er at knappen nu er korrekt placeret i portræt og i landscape, så drejer man mobilen vises knappen altid øverst i midten.

For at kunne bruge knappen skal vi have givet knappen et navn.

Knappen hedder nu bn_minknap det skal vi bruge i programmet og teksten på knappen er “Tryk”.

Så er vi klar til at bruge knappen i vores program. Knappen hedder bn_minknap og teksten på knappen er “TRYK”.

bn_minknap.setOnClickListener tjekker om om knappen er trykket og udfører det som står i {}.

Når man trykker på knappen skal den skrive på skærmen “Knappen er trykket”.

Vi bruger en Toast som kan vise en tekst på skærmen når man trykker på knappen.

I kan se Toast er rød og der står tryk Alt+Enter, det er fordi vi mangler at importerer Toast funktionen dette sker automatisk når man trykker Alt+Enter.

Toast funktionen er nu aktiv programmet er klar til at blive installeret på mobilen.
Et sidste kik på programmet.

Kik på “Attributes” egenskaberne for knappen der er mange til som kan indstilles her. Farver, tekst, fonte.

Spil en lyd eller musik

Der skal lid forberedelse til for at spille en lyd eller et stykke musik i appen.

Vi skal have lavet en raw folder. Højre klik på Res, New, Folder, Raw Resources Folder.
Vi har nu en raw folder og her kan vi med kopi og sæt ind tilføje vores lyd her ses “click_on.mp3”.
Vi skal have tilføjet en MediaPlayer som kan spille vores lyd.

Og her var så koden i Kotlin til at spille vores “click_on” lyd.

MediaPlayer.create(this,R.raw.click_on).start()

Tænd og sluk for kamera lyset

Således tændes og slukkes kamera lyset.

Vi skal her først importere kamera funktionen i vores program så vi kan få adgang til lyset.

Tilføj “import android.hardware.camera2.CameraManager” til MainActivity.kt.

Vi skal give appen rettigheder til at kamera lyset.

Rettighed til att bruge kamera lyset tilføjes i AndroidManifest.xml.

For at få adgang til lyset skal vi først åbne det rigtige kamera front kamera er normalt nummer 0. Så tager vi den simple version ser det således ud.

Nu er vi klar til at tænde eller slukke lyset med følgende kode i Kotlin.

camManager.setTorchMode(cameraId, true)
camManager.setTorchMode(cameraId, false)

Frys skærm orientering

Hvorledes låses skærm orienteringen i Kotlin til portræt eller landscape.

requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
Sættes koden ind i MainActivity.kt gælder i OnCreate fryses orienteringen i appen.

Således er vi i dette eksempel sikre på at appen vises i portræt og ikke vil skifte til landskabe når telefonen drejes.

Mit første projekt

Vi starter nu med at lave vores første projekt.

Start et nyt Android Studio projekt.
Vi skal vælge en skabelon til vores første app vælg her “Empty Activity” en tom aktivitet og tryk “Next”.
Under “Name” kan du give dit projekt et navn f.eks. “Hej med dig” og tryk “Finish”.

Vær her lidt tålmodig “Android Studio” vil nu bruge noget tid på at gøre dit først projekt klar. Det kan første gang godt tage et par minutter.

Vær opmærksom på opdateringer som vises nederst til højre. Her skal programmerings sproget Kotlin opdateres. Tryk på “Install” og følg vejledningen.
Der kom også en “Restart” for at gøre installationen færdig. Så tryk på genstart.

Der kan komme flere opdateringer ved første start. Efter en genstart af Android Studio startes projektet automatisk igen.

Opstarts siden på “Android Studio” vi kan se neders til venstre “Build: Completed successfully” så vi er klar.

I “Android Studio” ser vi nu nederst vores “Build”. En status på er vores projekt, de grønne flueben marker at alt er ok.

Øverst til venstre har vi “Android” det er vores stifinder, her finder vil alle de filer som bliver brugt til vores projekt.

Vi har øverst til højre vores editor som vi bruger til at programmere og til editere vores filer.

MainActivity.kt – indeholder vores programkode i Kotlin. Her skriver vi koden som skal gøre noget med de knapper, billeder osv. som vi definerer.

Activity_main.xml – indeholder vores skærm design. Her kan vi tilføje billeder, tekst, knapper osv.

Her skriver vi programmet i Kotlin.
Her designer vi hvilke knapper og billeder der skal vises i vores app.

Vores app skal i første omgang ikke gøre noget. Så vi prøver at installere den på vores mobiltelefon, for at se hvordan det ser ud.

Vi finder kør “Run” knappen øverst til højre.

Her kan man så vælge hvor appen skal køre på din mobiltelefon eller om det skal vises på computeren “Virtual Device”.

Du kan her lave en virtuel enhed hvor appen vises. Jeg har dog ikke haft det store held på min gamle computer. Og må også nok sige det er først sjov når man ser resultatet på sin egen mobiltelefon og kan se hvordan det kører.

Et godt tip. Tag din Android telefon, find ud af hvordan du aktiverer “Udvikler tilstand” på telefonen og tilslut den til computeren via et USB kabel.

Udvikler tilstand aktiveres normalt ved at gå ind i telefonens menu. Vælge “Om telefon” og trykker 6 gange på “Versions nummeret”. Tilslut nu telefonen til din computer.

Vælg på telefonen at den må tilsluttes computeren. Og vælg i udvikler menuen på telefonen at “USB fejlretning/ USB Debug” er aktiv.

Vælg kør igen i “Android Studio” nu skulle du kunne se din telefon.

Vælge din telefon og trykker OK.
Appen gøres nu klar og installeres på din mobiltelefon.
Sådan vil det se ud på din mobiltelefon.

Vi er nu klar til at lave apps. Kik lidt rundt i design editoren prøv at tilføje nogle knapper og billeder. Kik menuerne igennem i “Android Studio”.

Vigtigt i denne første app er at vi kan få vores app installeret på en mobiltelefon og på den måde er klar til at bygge vores projekter.

Her lidt om mig selv

Knud Schrøder

Jeg er ansat som IT systemadministrator og har altid ønsket at kunne lave apps til min mobiltelefon.

Jeg har har gennem tiderne programmeret i alt lige fra Assembler, Cobol, Pascal, Informix, Progress, Vbs, Java, HTML, C#… Og har været ansat inden for IT siden 1989.

Hjemmesiden har jeg lavet for at dokumentere hvorledes man programmere i Kotlin. Men også for at fortælle andre, hvorledes de kan komme i gang med at lave deres egne apps.

Siden skal være på dansk da alt det information man finder på nettet er på engelsk. Jeg vil på den måde give unge mulighed for at lære at programmere.

Jeg har ikke meget tid til et at lære Kotlin og til at opdatere min hjemmeside. Skulle i dog have spørgsmål har i muligheden for at skrive til min mail.

Jeg har udgivet min første app Google Play. Og i denne forbindelse har man også brug for en hjemmeside.

Knud ;O)