ListView Spinner Button TextView EditText Radiogroup GridView ViewPager Tabbladen...

Transcriptie

1 Android UI componenten 1/41 UI componenten Inhoud ListView... 2 Spinner... 9 Button TextView EditText Radiogroup GridView ViewPager Tabbladen NavigationDrawer AlertDialog Imageview WebView OptionsMenu DatePickerDialog CalendarView Toast... 40

2 2/41 Android UI componenten UI componenten De gebruikersinterface (User Interface) in Android wordt opgebouwd met Views en Viewgroups. Een View is een specifiek onderdeel van het scherm zoals bvb. een lijst, een keuzelijst, een knop, een tekstvak, een label, een afbeelding, een grid, enz Een Viewgroup kan een aantal Views bevatten. Zo kan je bvb. in een LinearLayout een label, een tekstvak, een knop en lijst opnemen. De positie van de Views kan bepaald worden door de attributen van de Viewgroup. Zo kan het oriëntatie-attribuut van een LinearLayout aangeven dat de Views onder mekaar moeten verschijnen (android:orientation="vertical") of achter mekaar moeten verschijnen (android:orientation="horizontal"). ListView In dit voorbeeld wordt een ListView getoond op het startscherm van de app. In de source code wordt de "activity_main" layout niet gebruikt en wordt met de functie setlistadapter(mijnadapter) aangegeven dat de inhoud van de "adapter" op het scherm moet getoond worden. De activiteit is afgeleid van een ListActivity. De regels in de lijst gebruiken als standaard layout (per regel) de Android gedefinieerde layout "simple_list_item_1". De gegevens komen uit de String array "waarden". De "ArrayAdapter" zorgt dus voor de koppeling tussen de gegevens uit de array en de layout van de lijst. Als de gebruiker op een item van de lijst klikt met de muis in de emulator (AVD) of met de vinger een item aanduidt op een tablet of smartphone dan wordt de functie "onlistitemclick()" uitgevoerd. In het voorbeeld wordt dan voor het eerste item (Klanten) een nieuwe activiteit opgestart (met een "intent"). package com.android.listactiviteit;

3 Android UI componenten 3/41 import android.app.listactivity; import android.content.intent; import android.os.bundle; import android.view.view; import android.widget.arrayadapter; import android.widget.listview; import android.widget.toast; public class MainActivity extends ListActivity { protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); //setcontentview(r.layout.activity_main); String[] waarden = new String[] {"Klanten","Leveranciers","Bestellingen","Betalingen","Producten" ; ArrayAdapter<String> mijnadapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,waarden); setlistadapter(mijnadapter); protected void onlistitemclick(listview l, View v, int position, long id) { String item = (String) getlistadapter().getitem(position); //Toast.makeText(this, item + " geselecteerd", Toast.LENGTH_LONG).show(); if (position == 0) { // klanten Intent in1 = new Intent(this,Klanten.class); startactivity(in1); In de Klanten activiteit kunnen gegevens ingegeven worden en worden die gegevens toegevoegd aan een lijst. De lijst is hier een onderdeel van een gewone activiteit. package com.android.listactiviteit; import java.util.arraylist; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.adapterview; import android.widget.arrayadapter; import android.widget.button; import android.widget.edittext; import android.widget.listview; import android.widget.adapterview.onitemclicklistener; import android.widget.toast; public class Klanten extends Activity { private Button btn1; private ListView lvcontacten; private ArrayList<String> lvstrings = new ArrayList<String>(); private ArrayAdapter<String> lvadapter; private EditText etnaam; private EditText ettelefoon; private EditText et ; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.klanten); btn1 = (Button) findviewbyid(r.id.button1); btn1.setonclicklistener(btn1klik); etnaam = (EditText) findviewbyid(r.id.et_contacten_naam);

4 4/41 Android UI componenten ettelefoon = (EditText) findviewbyid(r.id.et_contacten_telefoon); et = (EditText) findviewbyid(r.id.et_contacten_ ); OnClickListener btn1klik = new OnClickListener() { public void onclick(view v) { // opvullen adapter en koppelen aan listview vulop(); ; public void vulop() { lvcontacten = (ListView) findviewbyid(r.id.lv_contacten); lvadapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, lvstrings); lvadapter.add(etnaam.gettext().tostring() + " " + ettelefoon.gettext().tostring() + " " + et .gettext().tostring()); lvcontacten.setadapter(lvadapter); lvcontacten.setonitemclicklistener(lvitemclick); etnaam.settext(""); ettelefoon.settext(""); et .settext(""); OnItemClickListener lvitemclick = new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { String item = (String) lvadapter.getitem(position); String naam = item.substring(0, item.indexof(" ")); Toast.makeText(getApplicationContext(), naam, Toast.LENGTH_SHORT).show(); ; En de layout van het Klanten scherm ziet er als volgt uit: <LinearLayout xmlns:android=" xmlns:tools=" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:orientation="horizontal" > <TextView android:id="@+id/tv_contacten_naam" android:layout_width="wrap_content" android:text="naam: " android:textstyle="bold" /> <EditText android:id="@+id/et_contacten_naam" > </EditText> </LinearLayout> <LinearLayout android:orientation="horizontal" > <TextView android:id="@+id/tv_contacten_telefoon" android:layout_width="wrap_content" android:text="telefoon: " android:textstyle="bold" />

5 Android UI componenten 5/41 <EditText > </EditText> </LinearLayout> <LinearLayout android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:text=" " android:textstyle="bold" /> <EditText android:layout_width="296dp" android:layout_weight="0.95" > </EditText> <Button android:layout_width="wrap_content" android:text="toevoegen" /> </LinearLayout> <LinearLayout android:orientation="vertical" > <ListView > </ListView> </LinearLayout> </LinearLayout> Als je meer dan 1 activiteit in jouw app gebruikt dan moet je dat ook aangeven in het Android manifest bestand. <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="com.android.listactiviteit" android:versioncode="1" android:versionname="1.0" > <uses-sdk android:minsdkversion="15" android:targetsdkversion="17" /> <application android:allowbackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/apptheme" > <activity android:name="com.android.listactiviteit.mainactivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity>

6 6/41 Android UI componenten <activity android:name="com.android.listactiviteit.klanten" > <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> </application> </manifest> De functie setlistadapter() van een ListActivity en de functie setadapter() van een Listview (lvcontacten.setadapter(lvadapter);) gebruiken een "adapter". Een adapter kan op verschillende manieren opgevuld worden. Enkele voorbeelden: 1) Een array van strings die vooraf gedefinieerd is. // declaraties private ListView lvlijst; private ArrayAdapter<String> lvadapter; public static final String[] scheesestrings = { "Abbaye de Belloc", "Abbaye du Mont des Cats", "Abertam", "Abondance", "Ackawi", "Xanadu", "Xynotyro", "Yarg Cornish", "Yarra Valley Pyramid", "Yorkshire Blue", "Xanadu", "Xynotyro", "Yarg Cornish", "Yarra Valley Pyramid", "Yorkshire Blue", "Xanadu", "Xynotyro", "Yarg Cornish", "Yarra Valley Pyramid", "Yorkshire Blue", "Zamorano", "Zanetti Grana Padano", "Zanetti Parmigiano Reggiano" ; // in de oncreate functie lvlijst = new ListView(this); // een vaste array van strings om de adapter op te vullen lvadapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, scheesestrings); lvlijst.setonitemclicklistener(lvitemclick); lvlijst.setadapter(lvadapter); setcontentview(lvlijst); 2) Een array van "Character Sequences" (strings) die gedefinieerd is in "strings.xml" (res/values).

7 Android UI componenten 7/41 // declaraties private ListView lvlijst; private ArrayAdapter<CharSequence> lvadapter; // in de oncreate functie lvlijst = new ListView(this); // een array van character sequences (strings) die gedefinieerd is in strings.xml (res/values) lvadapter = ArrayAdapter.createFromResource(this, R.array.leerlingen_list, android.r.layout.simple_list_item_1); lvlijst.setonitemclicklistener(lvitemclick); lvlijst.setadapter(lvadapter); setcontentview(lvlijst); De "R.array.leerlingen_list" inhoud wordt als volgt gedefinieerd. <string-array name="leerlingen_list"> <item>jan</item> <item>piet</item> <item>joris</item> <item>korneel</item> <item>anna</item> <item>linda</item> <item>paul</item> <item>peter</item> <item>cindy</item> </string-array> 3) Een lege arraylist van strings die opgevuld wordt met de methode "add()" van de adapter. // declaraties private ListView lvlijst; private ArrayAdapter<String> lvadapter; private ArrayList<String> lvstrings = new ArrayList<String>(); // in de oncreate functie lvlijst = new ListView(this); //lvstrings :een lege arraylist van strings die opgevuld wordt met de methode add van de adapter lvadapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, lvstrings); lvadapter.add("item 1"); lvadapter.add("item 2"); lvadapter.add("item 3"); lvlijst.setonitemclicklistener(lvitemclick); lvlijst.setadapter(lvadapter); setcontentview(lvlijst);

8 8/41 Android UI componenten 4) Items ophalen uit een database en in de "SimpleCursorAdapter" stoppen met de eigen gemaakte functie getitems(). // declaraties public static final int ADD_ITEM = 0; private static final int ENDAPP = 1; private DBAdapter mdbhelper; private int mitemnumber = 1; private ListView lvlijst; private SimpleCursorAdapter lvadapter; // in de oncreate functie lvlijst = new ListView(this); mdbhelper = new DBAdapter(this); mdbhelper.open(); lvadapter = getitems(); lvlijst.setonitemclicklistener(lvitemclick); lvlijst.setadapter(lvadapter); setcontentview(lvlijst); public boolean oncreateoptionsmenu(menu mnoptions) { mnoptions.add(0,add_item,0,r.string.add_item); mnoptions.add(0,endapp,0,r.string.endapp); return true; public boolean onoptionsitemselected(menuitem item) { switch (item.getitemid()) { case ADD_ITEM: createitem(); return true; case ENDAPP: finish(); return true; return super.onoptionsitemselected(item); private void createitem() { String itemname = "Item LVvoorbeeld: " + mitemnumber++; mdbhelper.createitem(itemname); lvadapter = getitems(); private SimpleCursorAdapter getitems() { Cursor cur = mdbhelper.fetchallitems();

9 Android UI componenten 9/41 startmanagingcursor(cur); String[] van = new String[] { DBAdapter.KEY_ITEMS_NAME ; int[] naar = new int[] { R.id.text1 ; SimpleCursorAdapter items = new SimpleCursorAdapter(this, R.layout.items_row, cur, van, naar); return items; De uitleg over het gebruik van een database volgt in een volgend hoofdstuk. Spinner Een "Spinner" in Android is eigenlijk een keuzelijst (of "dropdownlist"). De werking is te vergelijken met een ListView. Er wordt ook een "Adapter" gebruikt om de gegevens in de lijst te zetten. Er is een standaard layout gedefinieerd in Android om de gegevens te tonen namelijk "simple_spinner_item". // bibliotheken import android.widget.spinner; // declaraties private Spinner spitems; private ArrayList<String> spstrings = new ArrayList<String>(); private ArrayAdapter<String> spadapter; // in de oncreate functie // spinner invullen spitems = (Spinner) findviewbyid(r.id.spinner1); spadapter = new ArrayAdapter<String>(this, android.r.layout.simple_spinner_item, spstrings); spadapter.add("spitem 1"); spadapter.add("spitem 2"); spadapter.add("spitem 3"); spitems.setadapter(spadapter); spitems.setselection(0); spitems.setonitemselectedlistener(spselected); // spinner selectie OnItemSelectedListener spselected = new AdapterView.OnItemSelectedListener() { public void onitemselected(adapterview<?> adapterview, View view, int i, long l) { Toast.makeText(getApplicationContext(), "spinner item " + String.valueOf(i), Toast.LENGTH_LONG).show();

10 10/41 Android UI componenten public void onnothingselected(adapterview<?> adapterview) { return; ; <Spinner android:id="@+id/spinner1" android:layout_width="100dp" android:layout_weight="0.17" /> Om een "Spinner" te openen klik of tap je op het weergegeven item. Het eerste item uit de lijst heeft het volgnummer 0 omdat het eerste item uit de gebruikte array steeds de index 0 heeft. Net als bij een ListView kan er een schuifbalk verschijnen en kan je door omhoog of omlaag te "swipen" de regels van de lijst verplaatsen. Button Voor elke button moet een "onclicklistener()" functie gedefinieerd worden. Als de gebruiker op de button klikt of tapt dan wordt de code in de "onclicklistener()" functie uitgevoerd. In het voorbeeld wordt een melding op het scherm getoond. // bibliotheken import android.widget.button; // declaraties private Button btn1; private Button btn2; // in de oncreate functie // buttons clicks btn1 = (Button) findviewbyid(r.id.button1); btn1.setonclicklistener(button1click); btn2 = (Button) findviewbyid(r.id.button2); btn2.setonclicklistener(button2click); // button1 click OnClickListener button1click = new OnClickListener() { public void onclick(view v) { Toast.makeText(getApplicationContext(), "button1 geklikt!", Toast.LENGTH_LONG).show(); ; // button2 click OnClickListener button2click = new OnClickListener() { public void onclick(view v) { Toast.makeText(getApplicationContext(), "button2 geklikt!", Toast.LENGTH_LONG).show(); ; Een "Button" kan eenvoudig gedefinieerd worden in de layout met de "<Button>" markering in het "activity_main.xml" bestand. <LinearLayout android:orientation="horizontal"

11 Android UI componenten 11/41 android:layout_height="200dp" > <Button android:layout_width="wrap_content" android:layout_gravity="center_horizontal" android:text="button1" /> <Button android:layout_width="wrap_content" android:layout_gravity="center_horizontal" android:text="button2" /> </LinearLayout> Een button kan ook een ander uitzicht hebben. Zo kan je bvb. de achtergrond instellen met een kleur. <LinearLayout android:layout_height="50dp" android:orientation="horizontal" > <EditText android:layout_width="450dp" android:layout_height="50dp" android:layout_weight="0.50" android:paddingleft="5dp" android:ems="10" android:textstyle="bold" > </EditText> <Button android:layout_width="wrap_content" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:text="go" /> </LinearLayout> En in de "onclicklistener()" functie kan je de webpagina laten ophalen waarvan de URL vermeld is in het tekstvak aangeduid met "edittext3". OnClickListener btngoclick = new OnClickListener() { public void onclick(view v) { eturl = (EditText) getactivity().findviewbyid(r.id.edittext3); eturl.requestfocus(); LoadWebPageASYNC task = new LoadWebPageASYNC(); task.execute(new String[] { eturl.gettext().tostring() ); ;

12 12/41 Android UI componenten TextView Een "TextView" kan je in Android gebruiken om vaste tekst op het scherm te plaatsen. Je kan het ook een "label" noemen. In Android Studio kan je in het ontwerp ("Design") venster kiezen uit 4 "TextViews". Met het attribuut "android:textappearance" kan je het uitzicht van de tekst wijzigen. <TextView android:id="@+id/textview1" android:layout_width="100dp" android:text="large Text" android:textappearance="?android:attr/textappearancelarge" /> Je kan de inhoud van een "TextView" in de code ook wijzigen. Je gebruikt dan de "settext()" functie van de "TextView". // declaraties private TextView tekst; // in de oncreate functie tekst = (TextView) findviewbyid(r.id.textview1); tekst.settext("nieuwe grote tekst"); EditText Een "EditText" is een tekst "invulvak" in Android. Er zijn verschillende soorten "EditText" views elk met zijn specifieke eigenschappen.

13 Android UI componenten 13/41 In de code kan je net zoals bij een TextView verwijzen naar de layout. In het voorbeeld gebeurt dit in de "onactivitycreated()" functie van het fragment. // bibliotheken import android.widget.edittext; // declaraties private EditText etnaam; private EditText etlocatie; // in de onactivitycreated functie van het fragment etnaam = (EditText) getactivity().findviewbyid(r.id.et_activiteiten_naam); etlocatie = (EditText) getactivity().findviewbyid(r.id.et_activiteiten_locatie); In een aparte eigen geschreven functie kan je dan controleren of de inhoud van de "EditText" view leeg is. if (etnaam.gettext().tostring() == null etnaam.gettext().tostring().trim().length() == 0) { Toast.makeText(getActivity(), "Naam is leeg!", Toast.LENGTH_SHORT).show(); return false; if (etlocatie.gettext().tostring() == null etlocatie.gettext().tostring().trim().length() == 0) { Toast.makeText(getActivity(), "Locatie is leeg!", Toast.LENGTH_SHORT).show(); return false; Je kan de tekstvakken leegmaken met de "settext()" functie van de "EditText" view. Met de functie "requestfocus()" wordt de invoegpositie ("cursor") op de "EditText" view geplaatst. etnaam.settext(""); etlocatie.settext(""); etnaam.requestfocus(); Uiteraard kan je met de "settext()" functie de invulvakken invullen. etnaam.settext(activiteit.getnaam()); etlocatie.settext(activiteit.getlocatie()); Je kan de inhoud van de invulvakken ophalen met de "gettext()" functie. Met de "tostring()" functie kan je er zeker van zijn dat er een "String" wordt gebruikt. objactiviteit = new Activiteit(etnaam.getText().toString(), etlocatie.gettext().tostring(), newdate, newdate,etoms.gettext().tostring()); <LinearLayout android:orientation="horizontal" > <TextView android:id="@+id/tv_activiteiten_naam" android:layout_width="wrap_content" android:text="naam: " android:textstyle="bold" /> <EditText android:id="@+id/et_activiteiten_naam" > </EditText> </LinearLayout> <LinearLayout

14 14/41 Android UI componenten android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:text="locatie: " android:textstyle="bold" /> <EditText > </EditText> </LinearLayout> Radiogroup Een "Radiogroup" kan een aantal "RadioButtons" bevatten. Uit de lijst van "RadioButtons" wordt er 1 bolletje gezet als op de "RadioButton" wordt geklikt of getapt. Je kan de buttons ook een eigen uitzicht geven. In het voorbeeld hieronder wordt de rand van de "RadioButton" lichtblauw gekleurd als de knop geselecteerd is. Om dit effect te bekomen werd er hier gebruik gemaakt van een "Selector" en een "Shape" in de XML bestanden in de map "res/drawable". "rbachtergrond.xml" <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=" <item android:drawable="@drawable/rbnormaal" android:state_checked="true" android:state_pressed="true" /> <item android:drawable="@drawable/rbselected" android:state_pressed="true" /> <item android:drawable="@drawable/rbselected" android:state_checked="true" /> <item android:drawable="@drawable/rbnormaal" /> </selector>

15 Android UI componenten 15/41 "rbnormaal.xml" <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" android:shape="rectangle" > <corners android:radius="5dp" /> <solid android:color="#fff" /> <stroke android:width="5dp" android:color="#555555" /> </shape> "rbselected.xml" <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" android:shape="rectangle" > <corners android:radius="5dp" /> <solid android:color="#fff" /> <stroke android:width="5dp" android:color="#53aade" /> </shape> In de source code wordt de setoncheckedchangelistener() functie geïmplementeerd. De oncheckedchanged() functie bevat de code die moet uitgevoerd worden als de status van een "RadioButton" gewijzigd werd. // bibliotheken import android.widget.radiobutton; import android.widget.radiogroup; // declaraties RadioGroup rgtalen; // in de onactivitycreated functie van het fragment rgtalen = (RadioGroup) getactivity().findviewbyid(r.id.radiogroup1); rgtalen.setoncheckedchangelistener(new android.widget.radiogroup.oncheckedchangelistener() { public void oncheckedchanged(radiogroup arg0, int arg1) { RadioButton selectedrb = (RadioButton) getactivity().findviewbyid(rgtalen.getcheckedradiobuttonid()); String taal = selectedrb.gettext().tostring(); int catnum; categorieid = categoriesids.get(positie); if (categorieid.tostring() == null categorieid.tostring().trim().length() == 0) { catnum = 0; else { catnum = Integer.valueOf(categorieid); switch (taal.trim()) { case "Nederlands": lvadapter = getvertalingenlistpercat(catnum); lvitems.setadapter(lvadapter); break; case "Engels": lvadapter = getvertalingenengels(catnum); lvitems.setadapter(lvadapter); break; case "Thais": lvadapter = getvertalingenthais(catnum);

16 16/41 Android UI componenten lvitems.setadapter(lvadapter); break; ); In de layout worden de specifieke achtergronden gebruikt voor de "RadioButtons". <LinearLayout android:paddingtop="10dp" android:paddingbottom="1dp" android:orientation="horizontal" > <RadioGroup android:padding="10dp" android:orientation="horizontal" > <RadioButton android:checked="true" android:layout_weight="1" android:text=" Nederlands " android:textsize="28dp" /> <RadioButton android:layout_weight="1" android:text=" Engels " android:textsize="28dp" /> <RadioButton android:layout_weight="1" android:text=" Thais " android:textsize="28dp" /> </RadioGroup> </LinearLayout> GridView De "GridView" voorziet in een rooster waarin een andere "View" kan geplaatst worden. De "Views" worden van links naar rechts ingevuld en van boven naar beneden. Als er geen ruimte meer is verschijnt er een verticale schuifbalk en kan de gebruiker naar beneden en naar boven "scrollen".

17 Android UI componenten 17/41 In het voorbeeld wordt gebruik gemaakt van een "ImageView" voor elke cel in de grid. Het invullen van elke cel gebeurt via een "ImageAdapter" klasse die afgeleid is van de "BaseAdapter". // bibliotheken import android.widget.gridview; // declaratie in de onactivitycreated functie van het fragment GridView gridview = (GridView) getactivity().findviewbyid(r.id.gridview); gridview.setadapter(new ImageAdapter(getActivity())); De "ImageAdapter": import android.content.context; import android.view.view; import android.view.viewgroup; import android.widget.baseadapter; import android.widget.gridview; import android.widget.imageview; public class ImageAdapter extends BaseAdapter { private Context mcontext; // Constructor public ImageAdapter(Context c) { mcontext = c; public int getcount() { return mthumbids.length; public Object getitem(int position) { return null; public long getitemid(int position) { return 0; // create a new ImageView for each item referenced by the Adapter public View getview(int position, View convertview, ViewGroup parent) { ImageView imageview; if (convertview == null) { imageview = new ImageView(mContext); imageview.setlayoutparams(new GridView.LayoutParams(195, 195));

18 18/41 Android UI componenten imageview.setscaletype(imageview.scaletype.center_crop); imageview.setpadding(18, 18, 18, 18); else { imageview = (ImageView) convertview; imageview.setimageresource(mthumbids[position]); return imageview; // Keep all Images in array public Integer[] mthumbids = { R.drawable.image001, R.drawable.image002, R.drawable.image003, R.drawable.image004, R.drawable.image005, R.drawable.image006, R.drawable.image007, R.drawable.image008, R.drawable.image009, R.drawable.image010, R.drawable.image011, R.drawable.image012, R.drawable.image013, R.drawable.image014, R.drawable.image015, R.drawable.image016, R.drawable.image001, R.drawable.image002, R.drawable.image003, R.drawable.image004, R.drawable.image005, R.drawable.image006, R.drawable.image007, R.drawable.image008, R.drawable.image009, R.drawable.image010, R.drawable.image011, R.drawable.image012, R.drawable.image013, R.drawable.image014, R.drawable.image015, R.drawable.image016, ; De "ImageView" wordt in de "getview()" functie opgevuld met een image uit de "mthumbids" array. De nummers in deze array verwijzen naar de bestanden die in de map "res/drawable" staan. De individuele foto's worden opgehaald en getoond in een aparte activiteit die met een "Intent" wordt opgeroepen. // in de onactivitycreated functie van het fragment gridview.setonitemclicklistener(new AdapterView.OnItemClickListener() { public void onitemclick(adapterview<?> parent, View v, int position, long id) { // Send intent to SingleViewActivity Intent i = new Intent(getActivity(), SingleViewActivity.class); // Pass image index i.putextra("id", position); startactivity(i); ); In de "SingleViewActivity" staat de volgende code in de "oncreate()" functie: // Get intent data Intent i = getintent(); // Selected image id int position = i.getextras().getint("id"); ImageAdapter imageadapter = new ImageAdapter(this); ImageView imageview = (ImageView) findviewbyid(r.id.singleview); imageview.setimageresource(imageadapter.mthumbids[position]); De gebruikte foto's werden voor dit voorbeeld verkleind tot een grootte van 200 op 200 pixels. Je kan een foutmelding "outofmemory" krijgen bij het uitvoeren van de app in het virtual device als de bestandsgrootte van de foto's te groot is.

19 Android UI componenten 19/41 ViewPager Met een "ViewPager" kan je "swipen" van het ene scherm naar het andere (van links naar rechts en van rechts naar links). In het voorbeeld zijn 3 fragmenten aanwezig: LijstFragment, BeheerFragment, TabelFragment. De activiteit zorgt ook voor de tabbladen in de actionbar. Een "ViewPager" object maakt ook gebruik van een adapter. In het voorbeeld is een "SectionsPageAdapter" (sub)klasse ingevoegd die afgeleid is van de "FragmentPagerAdapter". In de "SectionsPageAdapter" klasse zijn 3 functies geïmplementeerd: getitem(), getcount() en getpagetitle(). package com.android.layouts4; import android.app.actionbar; import android.app.fragmenttransaction; import android.content.context; import android.os.bundle; import android.support.v4.app.fragment; import android.support.v4.app.fragmentactivity; import android.support.v4.app.fragmentmanager; import android.support.v4.app.fragmentpageradapter; import android.support.v4.app.navutils; import android.support.v4.view.viewpager; import android.view.gravity; import android.view.layoutinflater; import android.view.menu; import android.view.menuitem; import android.view.view; import android.view.viewgroup; import android.widget.textview; public class MainActivity extends FragmentActivity implements ActionBar.TabListener {

20 20/41 Android UI componenten SectionsPagerAdapter msectionspageradapter; ViewPager mviewpager; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); msectionspageradapter = new SectionsPagerAdapter(getSupportFragmentManager()); final ActionBar actionbar = getactionbar(); actionbar.setnavigationmode(actionbar.navigation_mode_tabs); mviewpager = (ViewPager) findviewbyid(r.id.pager); mviewpager.setadapter(msectionspageradapter); mviewpager.setonpagechangelistener(new ViewPager.SimpleOnPageChangeListener() { public void onpageselected(int position) { actionbar.setselectednavigationitem(position); ); for (int i = 0; i < msectionspageradapter.getcount(); i++) { actionbar.addtab(actionbar.newtab().settext(msectionspageradapter.getpagetitle(i)).settablistener(this)); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.activity_main, menu); return true; public void ontabselected(actionbar.tab tab, FragmentTransaction fragmenttransaction) { mviewpager.setcurrentitem(tab.getposition()); public void ontabunselected(actionbar.tab tab, FragmentTransaction fragmenttransaction) { public void ontabreselected(actionbar.tab tab, FragmentTransaction fragmenttransaction) { public class SectionsPagerAdapter extends FragmentPagerAdapter { public SectionsPagerAdapter(FragmentManager fm) { super(fm); public Fragment getitem(int i) { switch (i) { case 0: Fragment lijstfragment = new LijstFragment(); Bundle lijstargs = new Bundle(); lijstargs.putint(dummysectionfragment.arg_section_number, i + 1); lijstfragment.setarguments(lijstargs); return lijstfragment; case 1: Fragment beheerfragment = new BeheerFragment(); Bundle beheerargs = new Bundle(); beheerargs.putint(dummysectionfragment.arg_section_number, i + 1); beheerfragment.setarguments(beheerargs); return beheerfragment; case 2: Fragment tabelfragment = new TabelFragment(); Bundle tabelargs = new Bundle(); tabelargs.putint(dummysectionfragment.arg_section_number, i + 1); tabelfragment.setarguments(tabelargs); return tabelfragment;

21 Android UI componenten 21/41 default: Fragment fragment = new DummySectionFragment(); Bundle args = new Bundle(); args.putint(dummysectionfragment.arg_section_number, i + 1); fragment.setarguments(args); return fragment; public int getcount() { return 3; public CharSequence getpagetitle(int position) { switch (position) { case 0: return getstring(r.string.title_section1).touppercase(); case 1: return getstring(r.string.title_section2).touppercase(); case 2: return getstring(r.string.title_section3).touppercase(); return null; /** * A dummy fragment representing a section of the app, but that simply displays dummy text. */ public static class DummySectionFragment extends Fragment { public DummySectionFragment() { public static final String ARG_SECTION_NUMBER = "section_number"; public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { TextView textview = new TextView(getActivity()); textview.setgravity(gravity.center); Bundle args = getarguments(); textview.settext(integer.tostring(args.getint(arg_section_number))); return textview; <android.support.v4.view.viewpager xmlns:android=" xmlns:tools=" android:id="@+id/pager" android:layout_height="match_parent" tools:context=".mainactivity" /> Tabbladen Tabbladen kunnen op verschillende manieren geïmplementeerd worden in Android. In het voorbeeld van de "ViewPager" werden tabbladen voorzien in de actionbar met de volgende code: public class MainActivity extends FragmentActivity implements ActionBar.TabListener { In de activiteit zijn ook de volgende functies opgenomen voor de tabbladen:

22 22/41 Android UI componenten public void ontabselected(actionbar.tab tab, FragmentTransaction fragmenttransaction) { mviewpager.setcurrentitem(tab.getposition()); public void ontabunselected(actionbar.tab tab, FragmentTransaction fragmenttransaction) { public void ontabreselected(actionbar.tab tab, FragmentTransaction fragmenttransaction) { Daarnaast kan je ook nog op een andere manier tabbladen gebruiken. In het voorbeeld hieronder zie je 3 tabbladen. In de code wordt gebruik gemaakt van het "TabHost" object en zijn "TabSpec" objecten. De activiteit is afgeleid van de "TabActivity" klasse. package com.android.layouts3; import android.os.bundle; import android.app.tabactivity; import android.content.intent; import android.view.menu; import android.widget.tabhost; import public class MainActivity extends TabActivity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); TabHost tabhost = gettabhost(); TabSpec spec1=tabhost.newtabspec("tab 1"); spec1.setindicator("tab 1"); Intent in1=new Intent(this, Act1.class); spec1.setcontent(in1); TabSpec spec2=tabhost.newtabspec("tab 2"); spec2.setindicator("tab 2"); Intent in2=new Intent(this,Act2.class);

23 Android UI componenten 23/41 spec2.setcontent(in2); TabSpec spec3=tabhost.newtabspec("tab 3"); spec3.setindicator("tab 3"); Intent in3=new Intent(this,Act3.class); spec3.setcontent(in3); tabhost.addtab(spec1); tabhost.addtab(spec2); tabhost.addtab(spec3); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.activity_main, menu); return true; In de FrameLayout ("tabcontent") worden de schermen van de activiteiten getoond. <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_height="match_parent" > <TabHost android:id="@android:id/tabhost" android:layout_height="match_parent" android:layout_alignparentleft="true" android:layout_alignparenttop="true" > <LinearLayout android:layout_height="match_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" > </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_height="match_parent" > </FrameLayout> </LinearLayout> </TabHost> </RelativeLayout>

24 24/41 Android UI componenten NavigationDrawer Een "NavigationDrawer" is een schuifbalk die links verschijnt als je vanaf de linker rand veegt of als je op de "Home" knop links in de actionbar drukt. De schuifbalk bevat een lijst met bvb. fragment namen. Op deze manier kan je jouw app opdelen in logische onderdelen (of secties). package android.taaldb; import android.app.activity; import android.content.intent; import android.support.v7.app.actionbaractivity; import android.support.v7.app.actionbar; import android.support.v4.app.fragment; import android.support.v4.app.fragmentmanager; import android.content.context; import android.os.build; import android.os.bundle; import android.view.gravity; import android.view.layoutinflater; import android.view.menu; import android.view.menuitem; import android.view.view; import android.view.viewgroup; import android.support.v4.widget.drawerlayout; import android.widget.arrayadapter; import android.widget.textview; public class MainActivity extends ActionBarActivity implements NavigationDrawerFragment.NavigationDrawerCallbacks { /** * Fragment managing the behaviors, interactions and presentation of the navigation drawer. */ private NavigationDrawerFragment mnavigationdrawerfragment; /** * Used to store the last screen title. For use in {@link #restoreactionbar(). */ private CharSequence mtitle;

25 Android UI componenten 25/41 protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mnavigationdrawerfragment = (NavigationDrawerFragment) getsupportfragmentmanager().findfragmentbyid(r.id.navigation_drawer); mtitle = getstring(r.string.categorie); //gettitle(); // Set up the drawer. mnavigationdrawerfragment.setup( R.id.navigation_drawer, (DrawerLayout) findviewbyid(r.id.drawer_layout)); public void onnavigationdraweritemselected(int position) { // update the main content by replacing fragments Fragment fragment = null; switch (position) { case 0: fragment = new CategoriesFragment(); mtitle = getstring(r.string.categorie); break; case 1: fragment = new VertalingenFragment(); mtitle = getstring(r.string.vertaling); break; case 2: fragment = new ZoekenFragment(); mtitle = getstring(r.string.zoeken); break; default: break; if (fragment!= null) { FragmentManager fragmentmanager = getsupportfragmentmanager(); fragmentmanager.begintransaction().replace(r.id.container, fragment).commit(); else { FragmentManager fragmentmanager = getsupportfragmentmanager(); fragmentmanager.begintransaction().replace(r.id.container, PlaceholderFragment.newInstance(position + 1)).commit(); public void onsectionattached(int number) { switch (number) { case 1: mtitle = getstring(r.string.categorie); break; case 2: mtitle = getstring(r.string.vertaling); break; case 3: mtitle = getstring(r.string.zoeken); break; public void restoreactionbar() { ActionBar actionbar = getsupportactionbar(); actionbar.setnavigationmode(actionbar.navigation_mode_standard); actionbar.setdisplayshowtitleenabled(true); actionbar.settitle(mtitle);

26 26/41 Android UI componenten public boolean oncreateoptionsmenu(menu menu) { if (!mnavigationdrawerfragment.isdraweropen()) { // Only show items in the action bar relevant to this screen // if the drawer is not showing. Otherwise, let the drawer // decide what to show in the action bar. getmenuinflater().inflate(r.menu.main, menu); restoreactionbar(); return true; return super.oncreateoptionsmenu(menu); public boolean onoptionsitemselected(menuitem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. // Handle action buttons switch(item.getitemid()) { case R.id.menu_settings: //startactivity(new Intent(this, Preferences.class)); return true; case R.id.menu_endapp: finish(); return true; return super.onoptionsitemselected(item); public static class PlaceholderFragment extends Fragment { private static final String ARG_SECTION_NUMBER = "section_number"; public static PlaceholderFragment newinstance(int sectionnumber) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putint(arg_section_number, sectionnumber); fragment.setarguments(args); return fragment; public PlaceholderFragment() { public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { View rootview = inflater.inflate(r.layout.fragment_main, container, false); return rootview; public void onattach(activity activity) { super.onattach(activity); ((MainActivity) activity).onsectionattached( getarguments().getint(arg_section_number)); package android.taaldb; import android.support.v7.app.actionbaractivity; import android.app.activity; import android.support.v7.app.actionbar;

27 Android UI componenten 27/41 import android.support.v4.app.fragment; import android.support.v4.app.actionbardrawertoggle; import android.support.v4.view.gravitycompat; import android.support.v4.widget.drawerlayout; import android.content.sharedpreferences; import android.content.res.configuration; import android.os.bundle; import android.preference.preferencemanager; import android.view.layoutinflater; import android.view.menu; import android.view.menuinflater; import android.view.menuitem; import android.view.view; import android.view.viewgroup; import android.widget.adapterview; import android.widget.arrayadapter; import android.widget.listview; import android.widget.toast; /** * Fragment used for managing interactions for and presentation of a navigation drawer. * See the <a href=" * design guidelines</a> for a complete explanation of the behaviors implemented here. */ public class NavigationDrawerFragment extends Fragment { /** * Remember the position of the selected item. */ private static final String STATE_SELECTED_POSITION = "selected_navigation_drawer_position"; /** * Per the design guidelines, you should show the drawer on launch until the user manually * expands it. This shared preference tracks this. */ private static final String PREF_USER_LEARNED_DRAWER = "navigation_drawer_learned"; /** * A pointer to the current callbacks instance (the Activity). */ private NavigationDrawerCallbacks mcallbacks; /** * Helper component that ties the action bar to the navigation drawer. */ private ActionBarDrawerToggle mdrawertoggle; private DrawerLayout mdrawerlayout; private ListView mdrawerlistview; private View mfragmentcontainerview; private int mcurrentselectedposition = 0; private boolean mfromsavedinstancestate; private boolean muserlearneddrawer; public NavigationDrawerFragment() { public void oncreate(bundle savedinstancestate) {

28 28/41 Android UI componenten super.oncreate(savedinstancestate); // Read in the flag indicating whether or not the user has demonstrated awareness of the // drawer. See PREF_USER_LEARNED_DRAWER for details. SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(getActivity()); muserlearneddrawer = sp.getboolean(pref_user_learned_drawer, false); if (savedinstancestate!= null) { mcurrentselectedposition = savedinstancestate.getint(state_selected_position); mfromsavedinstancestate = true; // Select either the default item (0) or the last selected item. selectitem(mcurrentselectedposition); public void onactivitycreated(bundle savedinstancestate) { super.onactivitycreated(savedinstancestate); // Indicate that this fragment would like to influence the set of actions in the action bar. sethasoptionsmenu(true); public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { mdrawerlistview = (ListView) inflater.inflate( R.layout.fragment_navigation_drawer, container, false); mdrawerlistview.setonitemclicklistener(new AdapterView.OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { selectitem(position); ); mdrawerlistview.setadapter(new ArrayAdapter<String>( getactionbar().getthemedcontext(), android.r.layout.simple_list_item_activated_1, android.r.id.text1, new String[]{ getstring(r.string.categorie), getstring(r.string.vertaling), getstring(r.string.zoeken), )); mdrawerlistview.setitemchecked(mcurrentselectedposition, true); return mdrawerlistview; public boolean isdraweropen() { return mdrawerlayout!= null && mdrawerlayout.isdraweropen(mfragmentcontainerview); /** * Users of this fragment must call this method to set up the navigation drawer interactions. * fragmentid The android:id of this fragment in its activity's layout. drawerlayout The DrawerLayout containing this fragment's UI. */ public void setup(int fragmentid, DrawerLayout drawerlayout) { mfragmentcontainerview = getactivity().findviewbyid(fragmentid); mdrawerlayout = drawerlayout;

29 Android UI componenten 29/41 // set a custom shadow that overlays the main content when the drawer opens mdrawerlayout.setdrawershadow(r.drawable.drawer_shadow, GravityCompat.START); // set up the drawer's list view with items and click listener ActionBar actionbar = getactionbar(); actionbar.setdisplayhomeasupenabled(true); actionbar.sethomebuttonenabled(true); // ActionBarDrawerToggle ties together the the proper interactions // between the navigation drawer and the action bar app icon. mdrawertoggle = new ActionBarDrawerToggle( getactivity(), /* host Activity */ mdrawerlayout, /* DrawerLayout object */ R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */ R.string.navigation_drawer_open, /* "open drawer" description for accessibility */ R.string.navigation_drawer_close /* "close drawer" description for accessibility */ ) { public void ondrawerclosed(view drawerview) { super.ondrawerclosed(drawerview); if (!isadded()) { return; getactivity().supportinvalidateoptionsmenu(); // calls onprepareoptionsmenu() public void ondraweropened(view drawerview) { super.ondraweropened(drawerview); if (!isadded()) { return; if (!muserlearneddrawer) { // The user manually opened the drawer; store this flag to prevent auto-showing // the navigation drawer automatically in the future. muserlearneddrawer = true; SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(getActivity()); sp.edit().putboolean(pref_user_learned_drawer, true).apply(); ; getactivity().supportinvalidateoptionsmenu(); // calls onprepareoptionsmenu() // If the user hasn't 'learned' about the drawer, open it to introduce them to the drawer, // per the navigation drawer design guidelines. if (!muserlearneddrawer &&!mfromsavedinstancestate) { mdrawerlayout.opendrawer(mfragmentcontainerview); // Defer code dependent on restoration of previous instance state. mdrawerlayout.post(new Runnable() { public void run() { mdrawertoggle.syncstate(); ); mdrawerlayout.setdrawerlistener(mdrawertoggle);

30 30/41 Android UI componenten private void selectitem(int position) { mcurrentselectedposition = position; if (mdrawerlistview!= null) { mdrawerlistview.setitemchecked(position, true); if (mdrawerlayout!= null) { mdrawerlayout.closedrawer(mfragmentcontainerview); if (mcallbacks!= null) { mcallbacks.onnavigationdraweritemselected(position); public void onattach(activity activity) { super.onattach(activity); try { mcallbacks = (NavigationDrawerCallbacks) activity; catch (ClassCastException e) { throw new ClassCastException("Activity must implement NavigationDrawerCallbacks."); public void ondetach() { super.ondetach(); mcallbacks = null; public void onsaveinstancestate(bundle outstate) { super.onsaveinstancestate(outstate); outstate.putint(state_selected_position, mcurrentselectedposition); public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); // Forward the new configuration the drawer toggle component. mdrawertoggle.onconfigurationchanged(newconfig); public void oncreateoptionsmenu(menu menu, MenuInflater inflater) { // If the drawer is open, show the global app actions in the action bar. See also // showglobalcontextactionbar, which controls the top-left area of the action bar. if (mdrawerlayout!= null && isdraweropen()) { inflater.inflate(r.menu.global, menu); showglobalcontextactionbar(); super.oncreateoptionsmenu(menu, inflater); public boolean onoptionsitemselected(menuitem item) { if (mdrawertoggle.onoptionsitemselected(item)) { return true; /* if (item.getitemid() == R.id.action_example) {

31 Android UI componenten 31/41 */ Toast.makeText(getActivity(), "Example action.", Toast.LENGTH_SHORT).show(); return true; return super.onoptionsitemselected(item); /** * Per the navigation drawer design guidelines, updates the action bar to show the global app * 'context', rather than just what's in the current screen. */ private void showglobalcontextactionbar() { ActionBar actionbar = getactionbar(); actionbar.setdisplayshowtitleenabled(true); actionbar.setnavigationmode(actionbar.navigation_mode_standard); actionbar.settitle(r.string.app_name); private ActionBar getactionbar() { return ((ActionBarActivity) getactivity()).getsupportactionbar(); /** * Callbacks interface that all activities using this fragment must implement. */ public static interface NavigationDrawerCallbacks { /** * Called when an item in the navigation drawer is selected. */ void onnavigationdraweritemselected(int position); AlertDialog Een "AlertDialog" is een pop-up venster dat volledig aan te passen is aan jouw wensen. Je geeft een titel op ("settitle()"), voorziet een bericht ("setmessage()") en duid aan wat er moet gebeuren bij de "positieve" knop ("setpositivebutton()") en bij de "negatieve" knop ("setnegativebutton()"). Uiteindelijk wordt het venster getoond met de functie "show()" van het "AlertDialog.Builder" object. AlertDialog.Builder alert = new AlertDialog.Builder(getActivity()); alert.settitle(r.string.notadelete_title); alert.setmessage(ettitel.gettext().tostring()); alert.setpositivebutton(r.string.notadeleteok, new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int whichbutton) { // delete nota objnota = new Nota(rowid,ettitel.getText().toString(),ettekst.getText().toString()); objdbhelper.deletenota(objnota);

32 32/41 Android UI componenten refreshscreen(); spnotasadapter = getnotaslist(); spnotas.setadapter(spnotasadapter); ); alert.setnegativebutton(r.string.notadeletecancel, new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int whichbutton) { // geen delete ); alert.show(); Je kan in het "message" gedeelte ook nog meerdere "Views" opnemen zoals je in het onderstaande voorbeeld ziet. Met de "setview()" functie van het "AlertDialog.Builder" object wordt de omsluitende "View" toegevoegd (in het voorbeeld de "LinearLayout" "Viewgroup"). AlertDialog.Builder alert = new AlertDialog.Builder(getActivity()); alert.settitle(r.string.websites_title); alert.setmessage(r.string.webadres); llwebsites = new LinearLayout(getActivity()); llwebsites.setorientation(linearlayout.vertical); llwebsites.setlayoutparams(new LayoutParams(500, 600)); TextView tvnaam = new TextView(getActivity()); tvnaam.settext(" Naam"); llwebsites.addview(tvnaam); naam = new EditText(getActivity()); llwebsites.addview(naam); TextView tvinput = new TextView(getActivity()); tvinput.settext(" URL"); llwebsites.addview(tvinput); input = new EditText(getActivity()); llwebsites.addview(input); TextView tvoms = new TextView(getActivity()); tvoms.settext(" Omschrijving (optioneel)"); llwebsites.addview(tvoms); oms = new EditText(getActivity()); llwebsites.addview(oms); alert.setview(llwebsites); alert.setpositivebutton(r.string.websitesok, new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int whichbutton) { // insert website if (validatie() == true) { Website ws = new Website(naam.getText().toString(), input.gettext().tostring(), oms.gettext().tostring()); db.createwebsite(ws);

33 Android UI componenten 33/41 mspinneradapter = getwebsites(); actionbar.setlistnavigationcallbacks(mspinneradapter,monnavigationlistener); ); alert.setnegativebutton(r.string.websitescancel, new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int whichbutton) { // geen update ); alert.show(); Imageview Als je een afbeelding wil gebruiken in jouw app dan kan je een "ImageView" gebruiken. Je koppelt de "ImageView" aan de "ImageView" layout en je gebruikt bvb. de "setimageresource()" functie om de afbeelding op te halen uit de "res/drawable" map. // bibliotheken import android.widget.imageview; // in de oncreate functie ImageView imview = (ImageView) findviewbyid(r.id.imageview); imview.setimageresource(r.drawable.speelkaarten); <ImageView android:id="@+id/imageview" android:layout_width="180dp" android:layout_height="240dp" android:layout_gravity="center_horizontal" /> Je kan dezelfde afbeelding met Java source code ook ophalen zoals je kan zien in het volgende voorbeeld. De afbeelding is dezelfde.

34 34/41 Android UI componenten In de "oncreateview()" functie van het "BeheerFragment" wordt een "LinearLayout" met daarin een "ImageView" en een "TextView" gedefinieerd. package com.android.layouts4; import android.graphics.drawable.drawable; import android.os.bundle; import android.support.v4.app.fragment; import android.view.gravity; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup; import android.widget.imageview; import android.widget.linearlayout; import android.widget.textview; import android.widget.linearlayout.layoutparams; public class BeheerFragment extends Fragment { private Drawable imagefile; private ImageView imview; private LinearLayout llmain; public BeheerFragment() { public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { llmain = new LinearLayout(getActivity()); llmain.setorientation(linearlayout.vertical); llmain.setlayoutparams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); llmain.setgravity(gravity.center_horizontal); imagefile = getactivity().getresources().getdrawable(r.drawable.speelkaarten); imview = new ImageView(getActivity()); imview.setlayoutparams(new LayoutParams(100, 200)); imview.setimagedrawable(imagefile); llmain.addview(imview); TextView textview = new TextView(getActivity()); textview.setgravity(gravity.center); textview.settext("beheerfragment"); llmain.addview(textview); return llmain;

35 Android UI componenten 35/41 WebView Zoals de naam al doet vermoeden kan je met een "WebView" webpagina's tonen in een app. Als je dubbelklikt of tweemaal kort na mekaar op de "WebView" drukt wordt de pagina vergroot. Met duim en wijsvinger naar mekaar of van mekaar weg vegen op de "WebView" zorgt voor een aangepaste vergroting van de pagina. // bibliotheken import android.net.uri; import android.os.asynctask; import android.webkit.webview; import android.webkit.webviewclient; // declaraties private WebView webview; // in de onactivitycreated functie van het fragment webview = (WebView) getactivity().findviewbyid(r.id.webview1); webview.setwebviewclient(new mywebviewclient()); // Android (17) webview sluit app als Javascript wordt gebruikt!!! if(build.version.sdk_int < 16){ webview.getsettings().setjavascriptenabled(true); else { webview.getsettings().setjavascriptenabled(false); if(build.version.sdk_int == 19) { webview.getsettings().setjavascriptenabled(true); webview.getsettings().setbuiltinzoomcontrols(true); webview.getsettings().setloadwithoverviewmode(true); webview.getsettings().setusewideviewport(true); LoadWebPageASYNC task = new LoadWebPageASYNC(); task.execute(new String[] { " ); // achtergrond taak om een webpagina te laden private class LoadWebPageASYNC extends AsyncTask<String, Void, String> { protected String doinbackground(string... urls) { return urls[0];

36 36/41 Android UI componenten protected void onpostexecute(string result) { webview.loadurl(result); // WebViewClient klasse om de verwerking van hyperlink clicks op te vangen public class mywebviewclient extends WebViewClient { private String newurl; public void onpagestarted(webview view, String url, Bitmap favicon) { super.onpagestarted(view, url, favicon); eturl.settext(url); eturl.requestfocus(); public void onreceivederror(webview view, int errorcode, String description, String failingurl) { Log.d("Webview client", "error code:" + errorcode + " - " + description); public boolean shouldoverrideurlloading(webview view, String url) { try { if (url.endswith(".pdf") url.endswith(".apk") url.endswith(".doc") url.endswith(".docx") url.endswith(".xls") url.endswith(".xlsx") url.endswith(".ppt") url.endswith(".pptx")) { startactivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url))); return true; else { if (url.equals("about:blank")) return true; view.loadurl(url); return true; catch (Exception e) { Log.v("Webclient shouldoverrideurlloading",e.tostring()); return true; public void onbackpressed() { // geen actie omdat de knop in de actionbar moet gebruikt worden /* public void onbackpressed() { if ((webview!= null) && (webview.cangoback())) { if (webview.geturl() == null) { webview.goback(); webview.goback(); else { super.getactivity().onbackpressed(); */

37 Android UI componenten 37/41 OptionsMenu Gewoonlijk verschijnt er een menu knopje rechts bovenaan. Als je erop drukt (of klikt) wordt de menutekst getoond. Je kan voor menu-ingangen een icoontje voorzien (die in de actionbar kunnen getoond worden). Op sommige tabletten en smartphones is er een hardware knop op het toestel dat ook de menu toont als je erop drukt. De menu kan dan onderaan verschijnen. public void oncreateoptionsmenu(menu menu, MenuInflater inflater) { inflater.inflate(r.menu.activiteiten_menu, menu); super.oncreateoptionsmenu(menu, public boolean onoptionsitemselected(menuitem mnitem) { try { Fragment fragment = null; switch (mnitem.getitemid()) { case R.id.menu_settings: return false; case R.id.menu_toevoegen_activiteit: insert_activiteit(); return true; case R.id.menu_wijzigen_activiteit: update_activiteit(); return true; case R.id.menu_verwijderen_activiteit: delete_activiteit(); return true; case R.id.menu_kalender_fragment: fragment = new KalenderFragment(); if (fragment!= null) { android.support.v4.app.fragmentmanager fragmentmanager = getfragmentmanager(); FragmentTransaction fragmenttransaction = fragmentmanager.begintransaction(); fragmenttransaction.replace(r.id.content_frame, fragment); fragmenttransaction.commit(); return true; case R.id.menu_ongedaan_maken: refreshscreen(); return true; case R.id.menu_endapp: return false; default: return super.onoptionsitemselected(mnitem);

38 38/41 Android UI componenten catch (Exception e) { Log.v("Activiteiten fragment onoptionsitemselected", e.tostring()); finally { return true; Met het attribuut "android:showasaction" geef je aan of er een icoontje in de actionbar mag verschijnen ("ifroom") of niet ("never"). Als er geen icoontje kan getoond worden (op een smartphone bvb.) dan wordt de menu-ingang tekst in de menu getoond. <menu xmlns:android=" > <item android:id="@+id/menu_ongedaan_maken" android:icon="@drawable/ic_action_back" android:title="@string/menu_ongedaan_maken" android:orderincategory="700" android:showasaction="ifroom" /> <item android:id="@+id/menu_toevoegen_activiteit" android:icon="@drawable/ic_action_new" android:title="@string/menu_toevoegen_site" android:orderincategory="701" android:showasaction="ifroom" /> <item android:id="@+id/menu_wijzigen_activiteit" android:icon="@drawable/ic_action_edit" android:title="@string/menu_wijzigen_site" android:orderincategory="702" android:showasaction="ifroom" /> <item android:id="@+id/menu_verwijderen_activiteit" android:icon="@drawable/ic_action_discard" android:title="@string/menu_verwijderen_site" android:orderincategory="703" android:showasaction="ifroom" /> <item android:id="@+id/menu_kalender_fragment" android:icon="@drawable/ic_action_new" android:title="@string/menu_kalender_fragment" android:orderincategory="704" android:showasaction="never" /> </menu> Als je een verschillend "OptionsMenu" per fragment wil gebruiken dan moet je in de "oncreate()" functie van het fragment de functie "sethasoptionsmenu(true)" aanroepen. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); sethasoptionsmenu(true);

39 Android UI componenten 39/41 DatePickerDialog Om een datum te selecteren kan je gebruik maken van een "DatePickerDialog" venster (in het voorbeeld geïmplementeerd in een "DialogFragment"). DialogFragment newfragment = new DatePickerFragment1(); newfragment.show(getfragmentmanager(), "datepicker"); public static class DatePickerFragment1 extends DialogFragment implements DatePickerDialog.OnDateSetListener { public Dialog oncreatedialog(bundle savedinstancestate) { // Use the current date as the default date in the picker final Calendar c = Calendar.getInstance(); int year = c.get(calendar.year); int month = c.get(calendar.month); int day = c.get(calendar.day_of_month); // Create a new instance of DatePickerDialog and return it return new DatePickerDialog(getActivity(), this, year, month, day); public void ondateset(datepicker view, int year, int month, int day) { // Do something with the date chosen by the user jaar = String.valueOf(year); if (month+1 < 10) { maand = "0" + String.valueOf(month + 1); else { maand = String.valueOf(month + 1); if (day < 10) { dag = "0" + String.valueOf(day); else { dag = String.valueOf(day); etvan.settext(jaar + "-" + maand + "-" + dag);

40 40/41 Android UI componenten CalendarView Met een "CalendarView" kan je een kalender op het scherm zetten. Als je op een datum drukt wordt er voor die datum in het voorbeeld de activiteiten eronder getoond. De weergave wijzigt als je van boven naar onder of van onder naar boven veegt. De maandtitel past zich automatisch aan. // bibliotheken import android.widget.calendarview; // declaraties private CalendarView cvkalender; SimpleDateFormat datumformaat; // in de onactivitycreated functie van het fragment cvkalender = (CalendarView) getactivity().findviewbyid(r.id.calendarview1); cvkalender.setondatechangelistener(datechange); datumformaat = new SimpleDateFormat("yyyy-MM-dd"); String dat = datumformaat.format(calendar.getinstance().gettime()); toon_activiteiten(dat); OnDateChangeListener datechange = new OnDateChangeListener() { public void onselecteddaychange(calendarview view, int year, int month, int dayofmonth) { String datum = datumformaat.format(view.getdate()); toon_activiteiten(datum); ; Toast Als je berichten op het scherm wil zetten kan je gebruik maken van een "Toast" object. Met de "maketext()" functie van het "Toast" object kan je kort of lang (enkele seconden) een bericht tonen.