Les 5: Lay-out elementen

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Python intro

Programming basics-II

Les 3 / Week 7a

Lay-out-elementen

Keuzedeel: Mobile Application Development

Les 5

Deze les

• Korte Herhaling
• Tweede Activity toevoegen aan project
  
• Responsive lay-out met ConstraintLayout
• Met een Button een tweede Activity openen
• Intents
• Gegevens uit een EditText ophalen
• Zelf uitzoeken: Een afbeelding element tonen
  

Wat is hier omlijnd?

1. Value
2. Attribuut
3. Key
4. Element

Wat is hier omlijnd?

1. Value
2. Attribuut
3. Key
4. Element value

Wat is hier omlijnd? (twee juiste antwoorden)

1. Tag
2. Self-closing Tag
3. Opening Tag
4. Element

Herhaling: Project aanmaken

We starten een nieuw project altijd met een ‘Empty Views Activity’, dat geeft ons 1 activiteit genaamd ‘MainActivity’ met een bijbehorende layout ‘activity_main.xml’

(Let op dat het lesboek licht verouderd is en het verkeerd aangeeft)

Herhaling: Project aanmaken

💻 Doe mee: Open Android Studio en maak een nieuw project met een naam als 'DitBenIkApp'

Let op: wanneer je dit blok ziet, 

dan ga je code schrijven

Herhaling: Lay-outs resource (.xml)

Herhaling: Lay-outs resource (.xml)

Herhaling: Lay-outs resource (.xml)

TextViews voor het tonen van tekst, EditTexts voor een tekstveld waar iets ingevoerd kan worden, Buttons, CheckBoxes, CalenderViews en nog veel meer:

Herhaling: Lay-out code-behind (.kt)

Zo weet de MainActivity welke xml geladen moet worden:

Tweede Activity toevoegen aan project

Tweede Activity een geschikte naam geven

Activity Klassenaam: UpperCamelCase, eindigend op ‘Activity’, bijv.: ContactActivity
Layout naam: lower_snake_case, beginnend met ‘activity_’, bijv.: activity_contact

Tweede Activity een geschikte naam geven

💻 Doe mee:

• Maak een tweede 'Empty Views Activity'
• Geef die de naam ContactActivity
  

Responsive lay-out met ConstraintLayout

• Geen vaste margins, noch paddings
• androidx.constraintlayout.widget.ConstraintLayout
  

Responsive lay-out met ConstraintLayout

Zorg dat de bovenkant van dit element ‘vastzit’ aan de bovenkant van dit andere element

Zorg dat de linkerkant van dit element vastzit aan de linkerkant van dit andere element

We maken duidelijk welk element we bedoelen via de id van dat element.

‘parent’ is het bovenliggende element (kan ook de activity zelf zijn)

Responsive lay-out met ConstraintLayout

Als we zowel app:layout_constraintTop_toTopOf=”parent” als app:layout_constraintBottom_toBottomOf=”parent” hebben dan wordt ons element verticaal in het midden geplaatst

Responsive lay-out met ConstraintLayout

Responsive lay-out met ConstraintLayout

💻 Doe mee:

• Maak een EditText met het id 'nameEditText'
  
• Maak een knop onderaan het scherm met het id 'nextButton' en de tekst: 'Ga naar de contactpagina'
• Zorg dat de EditText gecentreerd is in het scherm
• Zorg dat de nextButton horizontaal gecentreerd is
• Zorg dat de nextButton verticaal onderaan het scherm staat
  

Let op! Niet alle code die we tonen komt overeen met de opdracht. Je moet ook zelf nadenken 😉

Met een Button een tweede Activity openen

'packageContext' is een hint van de editor, geen code om te schrijven.

Met een Button een tweede Activity openen

Met een Button die een tweede Activity openen

Met een Button een tweede Activity openen

De naam die je als id geeft wordt automatisch toegevoegd aan de ‘R.id.’ registry.

We kunnen hierna in Kotlin in de MainActivity.kt dat element vinden met de ‘findViewById’-methode en er een 'click event listener' aan koppelen (of attributen bewerken)

Met een Button een tweede Activity openen

💻 Doe mee:

• Koppel een setOnClickListener aan de knop met id 'nextButton'.
• Laat die knop de ContactActivity openen
  

Gegevens aan een Activity meegeven

💻 Doe mee:

• Zorg dat de naam 'Janiek' wordt meegegeven via putExtra
• Gebruik als key 'Name'
  

key / value

Intents

Intent om een Activity te openen:

Intent om een andere App te openen:

Intents

Intent om een andere App te openen:

In de emulator is Chrome de enige app die hierop reageert. Die zal de link proberen te openen.

Apps kunnen in hun AndroidManifest.xml configuratie aangeven dat ze iets kunnen met ‘Intent.ACTION_VIEW’. Die worden dan als optie getoond voor het openen/verwerken van de link. 

Bron: https://developer.android.com/guide/components/intents-filters

Intents

💻 Doe mee:

• Voeg in de MainActivity een tweede knop toe die bovenin, in het midden staat.
• Geef de knop de tekst 'Open website'
• Geef de knop een id
  
• Zorg er in de code-behind (MainActivity.kt) dat bij het klikken op de knop de link 'https://curio.nl' of jouw eigen website opent.
  

Gegevens uit een EditText ophalen

Meegeven (eerste Activity)

                                     Ophalen (tweede Activity)

Gegevens uit een EditText ophalen

Tonen in de lay-out van de tweede Activity

Maak een TextView in de tweede Activity met een id, zodat je de 'text' via Kotlin kan instellen

Gegevens uit een EditText ophalen

💻 Doe mee:

• Geef uit de eerste Activity de in de EditText ingevulde naam mee (op de plek waar nu "Janiek" hard-coded wordt meegegeven)
  
• Haal die naam in de tweede Activity op
• Maak een TextView in de tweede Activity, geef die een id als 'welcomeTextView'
• Toon de naam in die TextView
• Zoek zelf uit hoe je "Welkom <hier de naam>" kunt tonen (in C#: $"Welkom {name}" of "Welkom " + name)
  

Meegeven (eerste Activity) - klik om te vergroten:

Ophalen (tweede Activity):

💻 Doe mee:
Zelf uitzoeken: Een afbeelding element tonen

Zoek op internet een voorbeeld en/of de documentatie om in je Activity een afbeelding te tonen.

Eisen:

• Gebruik ImageView
• Importeer een eigen afbeelding (drawable)
• Centreer de afbeelding in je app