Input felt, funktioner, variabler og if, if else, else

Vi laver vores første input felt. Laver en funktion som giver et svar tilbage og som indeholder en betingelse som giver det rigtige svar (if – if else – else)

Vi har styr på knapper og felter som vi kan tilføje i designet. Og vi ved hvordan vi kan sende en besked ud på skærmen med Toast.

Teksten er en “Plain Text”, som vi kan bruge som indtastnings felt. Knappen en normal “Button” knap.

Vi tager et kik på tekst feltet, som skal have et ID “tx_tekst”, en tekst og en stor font. Feltet skal også hænges rigtig på plads med “Attributes”.

Læg mærke til ID tx_tekst som skal bruges i programmet.

Også “Layout” er vigtigt. Inde i firkanten er der små streger som kan have 3 tilstande. Den som er markeret med rød viser at feltet trækkes ud til siderne (16) viser at der skal være 16 i afstand til kanten.

I toppen er tekst feltet hængt op med en afstand på (24) til øverste kant.

Indtastnings feltet har nu teksten “Indtast en tekst” og en skrift størrelse på 30.

Knappen er simpel – vi hænger den op øverst (16) i afstand, på vores indtastnings felt og centreret til højre og venstre men en afstand på (150). Kunne også være mindre vigtigt er dog at tallene i højre og venstre side er de samme ellers kommer knappen ikke i midten.

Knappen skal have et ID her “bn_knap” så vi kan bruge den i programmet.

I tager et kik på koden.

Vigtigt er her funktionen “fun test”, “setOnClickListner” til knappen og “Toast” som skriver en tekst på skærmen.

Her ses funktionen “fun test” som har en parameter tekst og giver et svar retur.

Vi kan se en setOnClickListner som venter til vi har trykket på en knap. Og en Toast som tager den tekst vi har tastet ind overfører det til funktionen og skriver svaret ud på skærmen.

Læg også mærke til (var svar:String = “”) som definerer en lokal variabel som bruges til at retunere svaret i vores test funktion.

Kik også på if. Her spørger vi om tekst = “Hej” er det korrekt sættes svar til “Hej med dig” – if (tekst == “Hej”) svar = “Hej med dig”.

Vi spørger på “Hej” og på “Hallo” er teksten en ander for vi svaret tilbage “Hvad?”.

Æ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 kan man se det første skærm biled.
Og billedet som skiftes når vi trykker på knappen.

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

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.

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.