See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/323644259

Seri Belajar Xamarin: Pengenalan Xamarin untuk Android

Book · March 2018

CITATIONS READS
0 6,832

2 authors:

M Reza Faisal Erick Kurniawan

Universitas Lambung Mangkurat Universitas Kristen Duta Wacana
52 PUBLICATIONS   74 CITATIONS    20 PUBLICATIONS   3 CITATIONS   

SEE PROFILE SEE PROFILE

Some of the authors of this publication are also working on these related projects:

IT Asset Management View project

Publications View project

All content following this page was uploaded by M Reza Faisal on 08 March 2018.

The user has requested enhancement of the downloaded file.

i
Kata Pengantar
Penulis mendedikasikan buku ini kepada Komunitas Microsoft User Group Indonesia & INDC yang selalu
memberi dukungan dan dorongan kepada penulis untuk terus memiliki semangat untuk berkarya dan
berbagi. Tidak lupa penulis juga mengucapkan terima kasih kepada Microsoft Indonesia atas dukungan
dan dedikasinya pada komunitas MUGI & INDC sehingga kami bisa selalu terus berkarya.

Buku ini ditujukan untuk pengembang yang ingin mempelajari pembuatan aplikasi mobile berbasis
platform Android dengan menggunakan teknologi Microsoft seperti bahasa C# dan Visual Studio 2017.

Untuk menghubungi penulis anda dapat mengirimkan email ke alamat erick@actual-training.com atau
ke reza.faisal@gmail.com.

Akhir kata semoga buku ini dapat bermanfaat bagi komunitas IT di Indonesia.

Yogyakarta, 2 Maret 2018

Erick Kurniawan & M. Reza Faisal

1
Daftar Isi
Kata Pengantar............................................................................................................................................... i
Daftar Isi ........................................................................................................................................................ 2
1 Instalasi Xamarin for Visual Studio ................................................................................................... 3
2 Android Platform .............................................................................................................................. 4
2.1 Xamarin dan Android ................................................................................................................ 6
2.2 Menjalankan Android Emulator ................................................................................................ 8
2.3 Menambahkan Activity ........................................................................................................... 18
2.4 Menyimpan State ketika proses Recreated Activity ............................................................... 20
2.5 Android Life Cycle Management ............................................................................................. 21
2.6 Menambahkan Menu.............................................................................................................. 23
2.7 Menambahkan Navigasi Action Bar ........................................................................................ 24
2.8 Menambahkan Context Menu ................................................................................................ 24
2.9 Mengirimkan Nilai antar Activity ............................................................................................ 25
2.10 Code Sharing dengan Platform Lain ........................................................................................ 27
3 Layout.............................................................................................................................................. 32
3.1 Linear Layout ........................................................................................................................... 32
3.2 Relative Layout ........................................................................................................................ 32
3.3 Table Layout ............................................................................................................................ 34
3.4 Grid View ................................................................................................................................. 36
4 Membuat ListView .......................................................................................................................... 38
4.1 Menampilkan data dengan ListView ....................................................................................... 38
4.2 Menggunakan ListActivity ....................................................................................................... 39
4.3 Menggunakan Simple Adapter................................................................................................ 40
5 Menggunakan REST Web Services .................................................................................................. 41

2
1 PENGENALAN XAMARIN FOR ANDROID

1.1 INSTALASI XAMARIN FOR VISUAL STUDIO

Untuk membuat aplikasi cross platform menggunakan Xamarin, anda harus menginstal Visual Studio
2015/2017 Community, anda dapat mengunduhnya pada tautan berikut:

• File .iso (7GB): https://go.microsoft.com/fwlink/?LinkId=615448&clcid=0x409 (Untuk VS 2015)

• Web Installer: https://go.microsoft.com/fwlink/?LinkId=532606&clcid=0x409
• Untuk Visual Studio 2017 Community anda dapat mengunduh secara onlie pada tautan berikut.

Atau jika anda sudah memiliki Visual Studio 2015 sebelumnya, anda dapat mengunduh aplikasi disini
untuk mengupdate Visual Studio dan juga menginstal Xamarin:

• https://www.xamarin.com/download

Instalasi Visual Studio 2015 Community with Update 2 adalah sebagai berikut:

3
4
2 ARSITEKTUR ANDROID PLATFORM
Arssitektur dari platform Android dapat dilihat dari bagan dibawah ini:

Langkah kompilasi yang dilakukan saat program Android dijalankan adalah sebagai berikut:

Android sendiri mempunyai banyak SDK, yang terbaru adalah API Level 23 untuk Sistem Operasi
Marshmallow.

5
2.1 XAMARIN DAN ANDROID
Xamarin adalah platform yang berisi library cross platform untuk membuat aplikasi berbasis Android,
IOS, Windows Phone, dan Windows Universal Apps.

Xamarin for Android menyediakan kumpulan library yang dapat digunakan untuk bekerja dengan
Android SDK dan Dalvik VM. Xamarin memetakan library yang ada pada Mono CLR ke Dalvik VM
sehingga kita dapat menggunakan C# dan .NET Framework untuk membuat aplikasi Android.

6
Klik kanan pada project – pilih Properties

7
Tools – options - Xamarin

2.2 MENJALANKAN ANDROID EMULATOR

Membuat Android Emulator Manager

8
9
10
Untuk melihat desain tampilan anda dapat ke folder Resources – layout – Main.xaml

11
Tekan tombol F4 untuk menampilkan properties.

Buka MainActivity.cs, kemudian tambahkan kode berikut pada method OnCreate.

protected override void OnCreate(Bundle bundle)

{
base.OnCreate(bundle);

// Set our view from the "main" layout resource

12
 SetContentView(Resource.Layout.Main);

---------------------------------

//mengambil object btnHello

Button btnHello = FindViewById<Button>(Resource.Id.btnHello);
btnHello.Click += btnHello_Click;

private void btnHello_Click(object sender, EventArgs e)

{
AlertDialog.Builder alert = new AlertDialog.Builder(this);
alert.SetTitle("Hello Xamarin Android !");
alert.SetPositiveButton("Good", (senderAlert, args) => { });
alert.SetNegativeButton("Bad", (senderAlert, args) => { });
alert.Show();
}

Tambahkan beberapa view berikut untuk menjumlahkan dua bilangan.

13
//mengambil data bil1 dan bil2
EditText txtBil1 = FindViewById<EditText>(Resource.Id.txtBil1);
EditText txtBil2 = FindViewById<EditText>(Resource.Id.txtBil2);
Button btnHitung = FindViewById<Button>(Resource.Id.btnHitung);

btnHitung.Click += delegate {
double bil1 = Convert.ToInt32(txtBil1.Text);
double bil2 = Convert.ToInt32(txtBil2.Text);
double hasil = bil1 + bil2;
Toast.MakeText(this, "Hasilnya adalah : " + hasil.ToString(),
ToastLength.Long).Show();
};

14
Membuat Aplikasi Protein Tracker

Buat tampilan activity sebagai berikut

15
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tvHello" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/etHello" />
<Button
android:text="Click Me"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnHello" /></LinearLayout>

Pada method Ocreate tambahkan kode berikut:

//ambil textview
TextView tvHello = FindViewById<TextView>(Resource.Id.tvHello);
//ambil edit text
EditText etHello = FindViewById<EditText>(Resource.Id.etHello);
//ambil button
Button btnHello = FindViewById<Button>(Resource.Id.btnHello);

btnHello.Click += delegate
{
tvHello.Text = etHello.Text;
};

Method yang terpisah

private TextView tvHello;

private EditText etHello;

16
 private Button btnHello;

protected override void OnCreate(Bundle bundle)

{
base.OnCreate(bundle);

// Set our view from the "main" layout resource

SetContentView(Resource.Layout.Main);

//ambil textview
tvHello = FindViewById<TextView>(Resource.Id.tvHello);
//ambil edit text
etHello = FindViewById<EditText>(Resource.Id.etHello);
//ambil button
btnHello = FindViewById<Button>(Resource.Id.btnHello);

btnHello.Click += BtnHello_Click;

private void BtnHello_Click(object sender, EventArgs e)

{
tvHello.Text = etHello.Text;
}

Untuk menambahkan Log

private void BtnHello_Click(object sender, EventArgs e)

{
tvHello.Text = etHello.Text;
Log.Debug("ProteinTracker", tvHello.Text);
}

Jalankan aplikasi (deploy ke emulator), kemudian buka DDMS

17
2.3 MENAMBAHKAN ACTIVITY
Untuk menambahkan Actiity baru, anda bisa klik kanan pada project – kemudian pilih new item

Klik kanan pada folder layout

18
Tambahkan TextView.

Tambahkan juga kode berikut pada HelpActivity.cs

protected override void OnCreate(Bundle savedInstanceState)

{
base.OnCreate(savedInstanceState);

// Create your application here

SetContentView(Resource.Layout.Help);
}

Pada Main.axml tambahkan satu button dengan nama btnHelpActivity.

19
Tambahkan kode berikut agar ketika tombol Help Activity dipilih maka akan ditampilkan Activity baru
yaitu HelpActivity. Untuk memanggil activity lain kita dapat menggunakan object Intent.

Pada method OnCreate pada MainActivity tambahkan kode berikut:

//ambil button help

Button btnHelpActivity =
FindViewById<Button>(Resource.Id.btnHelpActivity);
btnHelpActivity.Click += delegate
{
Intent helpIntent = new Intent(this, typeof(HelpActivity));
StartActivity(helpIntent);
};

2.4 MENYIMPAN STATE KETIKA PROSES RECREATED ACTIVITY

Ketika proses recreated activity (pada application lifecycle) nilai yang ada (misal yg disimpan pada object
variable atau collection) akan dihapus. Jika anda ingin mempertahankan nilai tersebut anda dapat
menyimpan nilai kedalam state. Misal pada kondisi aplikasi di rotate.

Tambahkan kode berikut pada HelpActivity

protected override void OnSaveInstanceState(Bundle outState)

{
outState.PutString("HelpStatus", tvHelpInfo.Text);
Log.Debug("OnSaveInstanceState", "fase on OnSaveInstanceState");
//Log.Debug("MasukInstance", "dijalankan " + tvHelpInfo.Text);
base.OnSaveInstanceState(outState);
}

Kemudian tambahkan juga kode berikut pada method onCreate untuk mengembalikan nilai yang kita
simpan pada

protected override void OnCreate(Bundle savedInstanceState)

{
--------------------------------------
btnInfo = FindViewById<Button>(Resource.Id.btnInfo);

if (savedInstanceState != null)
{

20
 Log.Debug("MasukInstance", savedInstanceState.GetString("HelpStatus"));
tvHelpInfo.Text = savedInstanceState.GetString("HelpStatus");
}

------------------------------------------------
}

2.5 ANDROID LIFE CYCLE MANAGEMENT

Pada HelperActivity tambahkan kode berikut:

21
 protected override void OnCreate(Bundle savedInstanceState)
{
Log.Debug("OnCreate", "fase on OnCreate");

-----------------------------------------------
}

protected override void OnStart()

{
Log.Debug("OnStart", "fase on start");
base.OnStart();
}

protected override void OnResume()

{
Log.Debug("OnResume", "fase on OnResume");
base.OnResume();
}

protected override void OnPause()

{
Log.Debug("OnPause", "fase on OnPause");
base.OnPause();
}

protected override void OnStop()

{
Log.Debug("OnStop", "fase on OnStop");
base.OnStop();
}

protected override void OnDestroy()

{
Log.Debug("OnDestroy", "fase on OnDestroy");
base.OnDestroy();
}

protected override void OnSaveInstanceState(Bundle outState)

{
------------------------------------
Log.Debug("OnSaveInstanceState", "fase on OnSaveInstanceState");
base.OnSaveInstanceState(outState);
}

Pada DDMS dapat dilihat Log-nya.

22
2.6 MENAMBAHKAN MENU
Untuk menambahkan menu pada android, tambahkan folder menu pada folder Resources, kemudian
tambahkan file xml, beri nama Main_Options.xml

<?xml version="1.0" encoding="utf-8" ?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/action_refresh"
android:icon="@drawable/ic_action_refresh"
android:title="@string/action_refresh" />
<item android:id="@+id/action_settings"
android:title="@string/action_settings" />
<item android:id="@+id/action_about"
android:title="@string/action_about"/>
</menu>

Untuk menambahkan menu pada Main Activity tambahkan kode berikut:

public override bool OnCreateOptionsMenu(IMenu menu)

{
MenuInflater.Inflate(Resource.Menu.Main_Options,menu);
return true;
}

public override bool OnOptionsItemSelected(IMenuItem item)

{

23
 if (item.ItemId == Resource.Id.action_refresh)
{
Toast.MakeText(this, "Menu Refresh Dipilih", ToastLength.Short).Show();
}
return base.OnOptionsItemSelected(item);
}

2.7 MENAMBAHKAN NAVIGASI ACTION BAR

Fitur ini dapat digunakan untuk navigasi ke Main Activity dari child activity.

Pada HelpActivity tambahkan kode berikut:

[Activity(Label = "Help Activity",ParentActivity =typeof(MainActivity))]

public class HelpActivity : Activity
{
-------------------------------
Pada method onCreate tambahkan pula kode berikut:

protected override void OnCreate(Bundle savedInstanceState)

{
-------------

ActionBar.SetDisplayHomeAsUpEnabled(true);

2.8 MENAMBAHKAN CONTEXT MENU

Context menu dapat dipanggil dari semua view, misal ketika kita melakukan penekanan lama pada
tombol atau edit text maka context menu akan ditampilkan.

Pada MainActivity tambahkan kode berikut:

public override void OnCreateContextMenu(IContextMenu menu, View v,

IContextMenuContextMenuInfo menuInfo)
{
base.OnCreateContextMenu(menu, v, menuInfo);
MenuInflater.Inflate(Resource.Menu.Main_Options, menu);
}

24
Untuk menangani event saat menu dipilih, tambahkan kode berikut:

public override bool OnContextItemSelected(IMenuItem item)

{
if(item.ItemId==Resource.Id.action_refresh)
{
Toast.MakeText(this, "Refresh from context", ToastLength.Short).Show();
}
return base.OnContextItemSelected(item);
}

Kemudian tambahkan context menu tersebut pada salah satu view (sebagai contoh tombol context
menu). Pada method oncreate() tambahkan kode berikut:

Button btnContext = FindViewById<Button>(Resource.Id.btnContext);

this.RegisterForContextMenu(btnContext);

2.9 MENGIRIMKAN NILAI ANTAR ACTIVITY

Buat halaman Main.axml.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/etPesan" />
<Button
android:text="Kirim"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnKirim" />
</LinearLayout>

Tambahkan kode MainActivity.cs.

25
namespace PassDataBetweenActivity
{
[Activity(Label = "PassDataBetweenActivity", MainLauncher = true, Icon =
"@drawable/icon")]
public class MainActivity : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);

// Set our view from the "main" layout resource

SetContentView(Resource.Layout.Main);

EditText etPesan = FindViewById<EditText>(Resource.Id.etPesan);

Button btnKirim = FindViewById<Button>(Resource.Id.btnKirim);

btnKirim.Click += delegate
{
var showDataActivity = new Intent(this, typeof(ShowDataActivity));
showDataActivity.PutExtra("Pesan", etPesan.Text);
StartActivity(showDataActivity);
};
}
}
}

Tambahkan layout dengan nama ShowData.axml untuk menampilkan data yang dikirimkan dari halaman
Main.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tvData" />
</LinearLayout>

Tambahkan kode pada ShowDataActivity.cs.

using Android.Widget;

namespace PassDataBetweenActivity
{
[Activity(Label = "ShowDataActivity")]
public class ShowDataActivity : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);

26
 // Create your application here
SetContentView(Resource.Layout.ShowData);

TextView tvData = FindViewById<TextView>(Resource.Id.tvData);

tvData.Text = Intent.GetStringExtra("Pesan") ?? "Data tidak ditemukan";
}
}
}

2.10 CODE SHARING DENGAN PLATFORM LAIN

Kelebihan Xamarin adalah kode C# yang kita buat akan dapat digunakan kembali pada platform lain yang
juga menggunakan Xamarin seperti IOS, Windows Desktop, Windows Universal App.

Buat project Native Portable dengan nama XamarinCodeSharing.

2.10.1 Menambahkan Kode pada PCL Class

Pada project PCL tambahkan library dari nuget.

Kemudian buat class dengan nama BlogItem.cs

public class BlogItem

{
public string Title { get; set; }
public string Link { get; set; }
public DateTime PublishDate { get; set; }
public string Description { get; set; }
}

Kemudian tambahkan class dengan nama XamarinBlog.cs. kode ini digunakan untuk mendownload data
dari Xamarin Blog dan membaca dokumen XML yang didapatkan.

27
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;
using System.Xml.Linq;
using System.Net;

namespace XamarinCodeSharing
{
public class XamarinBlog
{
private const string BlogUrl = "http://blog.xamarin.com/feed";
// blog metadata properties
public string Title { get; set; }
public string Link { get; set; }
public List<BlogItem> Items { get; private set; }

// Download the feed, parse it and return a blog object

public static async Task<XamarinBlog> Download()
{
HttpClient client = new HttpClient();
HttpResponseMessage response = await
client.GetAsync(BlogUrl);
// if all went well, read the feed, otherwise fail
if (response.IsSuccessStatusCode)
{
return await ParseResponse(response.Content);
}
else
{
throw new Exception("There was a problem.");
}
}

private static async Task<XamarinBlog> ParseResponse(HttpContent content)

{
XamarinBlog blog = new XamarinBlog();

using (Stream stream = await content.ReadAsStreamAsync())

{
XDocument doc = XDocument.Load(stream);
XElement channel = doc.Root.Element("channel");

// load the blog metadata

blog.Title = WebUtility.HtmlDecode(channel.Element("title").Value);
blog.Link = WebUtility.HtmlDecode(channel.Element("link").Value);

// load the blog items

var items =
from item in channel.Elements("item")
select new BlogItem
{
Title = WebUtility.HtmlDecode(item.Element("title").Value),
Link = WebUtility.HtmlDecode(item.Element("link").Value),

28
 PublishDate =
DateTime.Parse(WebUtility.HtmlDecode(item.Element("pubDate").Value)),
Description =
WebUtility.HtmlDecode(item.Element("description").Value),
};
blog.Items = items.ToList();
}

return blog;
}
}
}

2.10.2 Membuat Aplikasi Desktop

Tambahkan project Windows Form dengan nama XamarinCodeSharing.Desktop

Kemudian tambahkan kode berikut untuk menggunakan sharing code (PCL) pada aplikasi Windows
Form. Tambahkan kode berikut pada Form1.

private async Task GetBlogItems()

{
Console.WriteLine("Proses Download !");
XamarinBlog blog = await XamarinBlog.Download();
Console.WriteLine("Download Finished");
Console.WriteLine();

foreach(var item in blog.Items)

{
lstDownload.Items.Add(item.Title + " " +
item.PublishDate.ToString("d MMMM yyyy")+ " " +
item.Description);
}
}

private void btnDownload_Click(object sender, EventArgs e)

{
var result = GetBlogItems();
}

Hasilnya dapat dilihat pada tampilan dibawah ini:

29
2.10.3 Membuat Aplikasi Android
Untuk menggunakan class PCL yang sudah kita buat pada aplikasi Android, buka project
XamarinCodeSharing.Droid. Tambahkan referensi System.net.http. Tambahkan juga kode berikut untuk
menampilkan data yang kita ambil dari Xamarin Blog kedalam List.

using System.Collections.Generic;
using System.Linq;
using XamarinCodeSharing;

namespace XamarinCodeSharing.Droid
{
[Activity(Label = "XamarinCodeSharing.Droid", MainLauncher = true, Icon =
"@drawable/icon")]
public class MainActivity : ListActivity
{
private const string TitleKey = "title";
private const string SubtitleKey = "subtitle";

protected async override void OnCreate(Bundle bundle)

{
base.OnCreate(bundle);

var progress = new ProgressDialog(this);

progress.SetTitle("Downloading Blog....");
progress.SetMessage("Please wait while we download xamarin blog");
progress.Show();

XamarinBlog blog = await XamarinBlog.Download();

var items = from item in blog.Items
select new JavaDictionary<string, object>
{
{ TitleKey,item.Title },
{ SubtitleKey,item.Description }
};
ListAdapter = new SimpleAdapter(this,
items.Cast<IDictionary<string, object>>().ToList(),
Android.Resource.Layout.SimpleListItem2,new[] { TitleKey,SubtitleKey },
new[] { Android.Resource.Id.Text1,Android.Resource.Id.Text2 });

progress.Dismiss();

30
 progress.Dispose();
}
}
}

31
3 LAYOUT
Ada beberapa macam layout yang dapat digunakan pada Android, pada bab ini akan dibahas beberapa
contoh layout diantaranya adalah:

• Linear Layout
• Relative Layout
• Table Layout
• Absolute Layout
• Sample Layout Project (Protein Tracker App)

3.1 LINEAR LAYOUT

Linear Layout adalah Layout default yang ada ketika kita membuat project android baru. Linear layout
dapat digunakan untuk menyusun control secara vertikal maupun horizontal. Anda juga dapat membuat
nested linear layout (linear layout didalam linear layout yang lain).

3.2 RELATIVE LAYOUT

Relative Layout digunakan untuk pengaturan control yang diposisikan relative terhadap control yang
lain.

Buat project Android baru dengan nama LatihanLayout

Kemudian pada layout Main.axml tambahkan beberapa tombol berikut:

32
Buat layout baru dengan nama RelativeLayout.axml kemudian tambahkan desain berikut:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/relativeLayout1">
<TextView
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Type here:" />
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label" />
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text="OK" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>

33
Buat Activity baru dengan nama RelativeActivity untuk menampilkan relative layout yang sudah kita
buat sebelumnya:

[Activity(Label = "Relative Activity")]

public class RelativeActivity : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);

// Create your application here

SetContentView(Resource.Layout.RelativeLayout);
}
}

3.3 TABLE LAYOUT

Table Layout dapat digunakan untuk pengaturan control dengan format tabel (terdiri dari baris dan
kolom). Jadi control dapat diposisikan sesuai dengan poisisi baris dan kolom.

Tambahkan layout baru dengan nama TableLayout.axml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"

34
 android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Import..."
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Export..."
android:padding="3dip" />
<TextView
android:text="Ctrl-E"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:layout_column="1"
android:text="Quit"
android:padding="3dip" />
</TableRow>
</TableLayout>

Tambahkan TableActivity untuk menampilkan TableLayout yang sudah anda buat.

protected override void OnCreate(Bundle savedInstanceState)

{
base.OnCreate(savedInstanceState);

// Create your application here

SetContentView(Resource.Layout.TableLayout);
}

35
3.4 GRID VIEW
GridView dapat digunakan jika kita ingin menampilkan data kedalam GridView.

Pada folder Layout buat file baru dengan nama GridLayout.axml.

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />

Kode pada GridActivity.cs

namespace LatihanLayout
{
[Activity(Label = "GridActivity")]
public class GridActivity : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);

// Create your application here

SetContentView(Resource.Layout.GridLayout);

var gridview = FindViewById<GridView>(Resource.Id.gridview);

gridview.Adapter = new ImageAdapter(this);

gridview.ItemClick += delegate (object sender, AdapterView.ItemClickEventArgs

e)
{
Toast.MakeText(this, e.Position.ToString(), ToastLength.Short).Show();
};
}
}
}

36
37
4 MEMBUAT LISTVIEW
ListView adalah kontrol yang sangat penting yang ada pada android. ListVirw digunakan untuk
menampilkan data dalam bentuk List.

4.1 MENAMPILKAN DATA DENGAN LISTVIEW

Buat project baru dengan nama SampleWebServices, kemudian pada MainLayout tambahkan kontrol
berikut:

Pada folder layout tambahkan layout baru dengan nama SampleListView.axml kemudian tambahkan
kode berikut:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/lvData" />
</LinearLayout>

Buat Activity dengan nama SampleListViewActivity, kemudian tambahkan kode berikut:

protected override void OnCreate(Bundle savedInstanceState)

{
base.OnCreate(savedInstanceState);

// Create your application here

SetContentView(Resource.Layout.SampleListView);

ListView lvData = FindViewById<ListView>(Resource.Id.lvData);

IEnumerable<int> numbers = Enumerable.Range(1, 1000);

IEnumerable<string> strings =
numbers.Select(i => string.Format("Item number {0}", i));
List<string> data = new List<string>(strings);

ArrayAdapter<string> adapter = new ArrayAdapter<string>(

this, Android.Resource.Layout.SimpleListItem1, data);

lvData.Adapter = adapter;

lvData.ItemClick += (sender, e) =>

{
using(var dialog = new AlertDialog.Builder(this))
{
int position = e.Position;
string value = data[position];
dialog.SetTitle("Item Selection");

38
 dialog.SetMessage(value);
dialog.Show();
}
};
}

4.2 MENGGUNAKAN LISTACTIVITY

ListActivity adalah activity khusus yang hanya digunakan untuk menampilkan list.

[Activity(Label = "SimpleListActivity")]
public class SimpleListActivity : ListActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);

IEnumerable<int> numbers = Enumerable.Range(1, 1000);

IEnumerable<string> strings =
numbers.Select(i => string.Format("Item number {0}", i));
List<string> data = new List<string>(strings);

ArrayAdapter<string> adapter = new ArrayAdapter<string>(

this, Android.Resource.Layout.SimpleListItem1, data);

ListAdapter = adapter;

ListView.ItemClick += (sender, e) =>

{
using (var dialog = new AlertDialog.Builder(this))
{
int position = e.Position;
string value = data[position];
dialog.SetTitle("Item Selection");
dialog.SetMessage(value);
dialog.Show();

39
 }
};
}
}

4.3 MENGGUNAKAN SIMPLE ADAPTER

Buat layout baru dengan nama SimpleAdapter.axml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="Menampilkan Nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnNama" />
<Button
android:text="Menampilkan Nama dan Status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnNamaStatus" />
<Button
android:text="Nama dan Checkbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnNamaCheckbox" />
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/lvData" />
</LinearLayout>

40
5 MENGGUNAKAN REST WEB SERVICES
Untuk berkomunikasi dengan database yang ada di server/cloud kita membutuhkan web services. Pada
bab ini akan dibahas bagaimana cara untuk bekerja dengan web services berbasis REST.

Library yang harus di download:

Buat project xamarin for android baru dengan nama SampleREST.

Buat folder dengan nama Models, tambahkan class dengan nama Mahasiswa.cs.

namespace SampleREST.Models
{
public class Mahasiswa
{
public string Nim { get; set; }
public string Nama { get; set; }
public string Jurusan { get; set; }
public string Email { get; set; }
public double IPK { get; set; }
}
}

Kemudian pada folder Resources/Layout buka file Main.axml, kemudian tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<Button
android:text="New Mahasiswa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnCreate" />
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"

41
 android:id="@+id/lvData" />
</LinearLayout>

Pada layout tersebut dapat dilihat sebuah tombol dengan nama ‘btnCreate’ yang akan digunakan untuk
menambahkan data mahasiswa baru. Kemudian kita juga menambahkan ListView kontrol yang akan
digunakan untuk menampilkan data mahasiswa.

Pada file MainActivitiy.cs tambahkan kode sebagai berikut:

[Activity(Label = "Mahasiswa", MainLauncher = true, Icon = "@drawable/icon")]

public class MainActivity : Activity
{
private List<Mahasiswa> lstMhs;
private ListView lvData;
private Button btnCreate;
private List<string> lstNim;

private string GetUrl()

{
var url = @"http://webapiazure72130049.azurewebsites.net/api/Mahasiswas/";
return url;
}

private async Task<List<Mahasiswa>> GetDataMahasiswa()

{
lstMhs = new List<Mahasiswa>();
using (var client = new HttpClient())
{
var results = await client.GetStringAsync(GetUrl());
lstMhs = JsonConvert.DeserializeObject<List<Mahasiswa>>(results);
return lstMhs;
}
}

private async Task IsiDataMahasiswa()

{
IList<IDictionary<string, object>> data = new JavaList<IDictionary<string,
object>>();
var results = await GetDataMahasiswa();
lstNim = new List<string>();
foreach (var rs in results)

42
 {
lstNim.Add(rs.Nim);
data.Add(new JavaDictionary<string, object>
{
{ "Title", rs.Nim + " "+rs.Nama },
{ "Description", rs.Jurusan + " " + rs.IPK.ToString()+ " "+rs.Email }
});
}

SimpleAdapter doubleLineAdapter = new SimpleAdapter(this, data,

Android.Resource.Layout.SimpleListItem2,
new[] { "Title", "Description" }, new[] { Android.Resource.Id.Text1,
Android.Resource.Id.Text2 });
lvData.Adapter = doubleLineAdapter;
}

//delete mahasiswa
private async Task<HttpResponseMessage> DeleteMahasiswa(string nim)
{
using (var client = new HttpClient())
{
HttpResponseMessage response = await client.DeleteAsync(GetUrl()+nim);
return response;
}
}

protected override async void OnCreate(Bundle bundle)

{
base.OnCreate(bundle);

// Set our view from the "main" layout resource

SetContentView(Resource.Layout.Main);
lvData = FindViewById<ListView>(Resource.Id.lvData);
await IsiDataMahasiswa();

btnCreate = FindViewById<Button>(Resource.Id.btnCreate);
btnCreate.Click += delegate
{
Intent addAct = new Intent(this, typeof(AddActivity));
StartActivity(addAct);
};

lvData.ItemClick += LvData_ItemClick;

//delete data
lvData.ItemLongClick += LvData_ItemLongClick;
}

private void LvData_ItemLongClick(object sender,

AdapterView.ItemLongClickEventArgs e)
{
AlertDialog.Builder alert = new AlertDialog.Builder(this);
alert.SetTitle("Confirm Delete");
alert.SetMessage("Apakah anda yakin akan mendelete data ini?");
alert.SetPositiveButton("OK", async (senderAlert, args) =>
{
var result = await DeleteMahasiswa(lstNim[e.Position]);
if(result.IsSuccessStatusCode)

43
 {
Toast.MakeText(this, "Data berhasil didelete",
ToastLength.Short).Show();
await IsiDataMahasiswa();
}
});
alert.SetNegativeButton("Cancel", (senderAlert, args) => { });
Dialog dialog = alert.Create();
dialog.Show();
}

private void LvData_ItemClick(object sender, AdapterView.ItemClickEventArgs e)

{
//Toast.MakeText(this, "Nim: " + lstNim[e.Position],
ToastLength.Short).Show();
Intent editAct = new Intent(this, typeof(EditActivity));
editAct.PutExtra("Nim", lstNim[e.Position]);
StartActivity(editAct);
}
}

Pada Resource tambahkan layout dengan nama ShowData.axml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="NIM"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtNim" />
<TextView
android:text="Nama"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView2" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtNama" />
<TextView
android:text="Jurusan"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView3" />

44
 <EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtJurusan" />
<TextView
android:text="Email"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textviewEmail" />
<EditText
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtEmail" />
<TextView
android:text="IPK"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView5" />
<EditText
android:inputType="numberDecimal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/txtIPK" />
<Button
android:text="Save"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnSave" />
<Button
android:text="Delete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnDelete" />
</LinearLayout>

Untuk menambahkan data kedalam web services, tambahkan AddActivity.cs.

using SampleREST.Models;
using System.Net.Http;
using Newtonsoft.Json;
using System.Threading.Tasks;

namespace SampleREST
{
[Activity(Label = "Add Mahasiswa")]
public class AddActivity : Activity
{
private EditText txtNim;
private EditText txtNama;
private EditText txtJurusan;
private EditText txtEmail;
private EditText txtIPK;
private Button btnSave;

private string GetUrl()

45
 {
var url = @"http://webapiazure72130049.azurewebsites.net/api/Mahasiswas/";
return url;
}

private async Task<HttpResponseMessage> AddMahasiswa(Mahasiswa mhs)

{
using (var client = new HttpClient())
{
var json = JsonConvert.SerializeObject(mhs);
var content = new StringContent(json, Encoding.UTF8, "application/json");
HttpResponseMessage response = await client.PostAsync(GetUrl(), content);
return response;
}
}

protected override void OnCreate(Bundle savedInstanceState)

{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.ShowData);

txtNim = FindViewById<EditText>(Resource.Id.txtNim);
txtNama = FindViewById<EditText>(Resource.Id.txtNama);
txtJurusan = FindViewById<EditText>(Resource.Id.txtJurusan);
txtEmail = FindViewById<EditText>(Resource.Id.txtEmail);
txtIPK = FindViewById<EditText>(Resource.Id.txtIPK);

btnSave = FindViewById<Button>(Resource.Id.btnSave);
btnSave.Click += BtnSave_Click;
}

private async void BtnSave_Click(object sender, EventArgs e)

{
var newMhs = new Mahasiswa
{
Nim = txtNim.Text,
Nama = txtNama.Text,
Jurusan = txtJurusan.Text,
Email = txtEmail.Text,
IPK = Convert.ToDouble(txtIPK.Text)
};
var response = await AddMahasiswa(newMhs);
if(response.IsSuccessStatusCode)
{
Toast.MakeText(this, "Data berhasil ditambahkan",
ToastLength.Short).Show();
Intent mainAct = new Intent(this, typeof(MainActivity));
StartActivity(mainAct);
}
}
}
}

Untuk mengedit data tambahkan EditActivity.cs

using SampleREST.Models;
using System.Net.Http;
using Newtonsoft.Json;

46
using System.Threading.Tasks;

namespace SampleREST
{
[Activity(Label = "Edit Mahasiswa")]
public class EditActivity : Activity
{
private EditText txtNim;
private EditText txtNama;
private EditText txtJurusan;
private EditText txtEmail;
private EditText txtIPK;
private Button btnSave;
private string Nim;

private string GetUrl()

{
var url = @"http://webapiazure72130049.azurewebsites.net/api/Mahasiswas/";
return url;
}

private async Task<Mahasiswa> GetDataMahasiswaByNim(string nim)

{
using (var client = new HttpClient())
{
var result = await client.GetStringAsync(GetUrl() + nim);
var mhs = JsonConvert.DeserializeObject<Mahasiswa>(result);
return mhs;
}
}

private async Task<HttpResponseMessage> EditMahasiswa(Mahasiswa mhs)

{
using (var client = new HttpClient())
{
var json = JsonConvert.SerializeObject(mhs);
var content = new StringContent(json, Encoding.UTF8, "application/json");
HttpResponseMessage response = await client.PutAsync(GetUrl()+mhs.Nim,
content);
return response;
}
}

protected async override void OnCreate(Bundle savedInstanceState)

{
base.OnCreate(savedInstanceState);

// Create your application here

SetContentView(Resource.Layout.ShowData);

Nim = Intent.GetStringExtra("Nim");
txtNim = FindViewById<EditText>(Resource.Id.txtNim);
txtNama = FindViewById<EditText>(Resource.Id.txtNama);
txtJurusan = FindViewById<EditText>(Resource.Id.txtJurusan);
txtEmail = FindViewById<EditText>(Resource.Id.txtEmail);
txtIPK = FindViewById<EditText>(Resource.Id.txtIPK);

47
 txtNim.Enabled = false;
var mhs = await GetDataMahasiswaByNim(Nim);
txtNim.Text = mhs.Nim;
txtNama.Text = mhs.Nama;
txtJurusan.Text = mhs.Jurusan;
txtEmail.Text = mhs.Email;
txtIPK.Text = mhs.IPK.ToString();

btnSave = FindViewById<Button>(Resource.Id.btnSave);
btnSave.Click += BtnSave_Click;
}

private async void BtnSave_Click(object sender, EventArgs e)

{
var editMhs = new Mahasiswa
{
Nim = this.Nim,
Nama = txtNama.Text,
Jurusan = txtJurusan.Text,
Email = txtEmail.Text,
IPK = Convert.ToDouble(txtIPK.Text)
};

var response = await EditMahasiswa(editMhs);

if(response.IsSuccessStatusCode)
{
Toast.MakeText(this,"Data berhasil diedit !",ToastLength.Short).Show();
Intent mainAct = new Intent(this, typeof(MainActivity));
StartActivity(mainAct);
}
}
}
}

48
 49

View publication stats