Category Archives: Xamarin Essentials

Xamarin Shell: Shell Navigation

Posted on by
Reply

Xamarin Shell mempunyai URI-based navigation yang menggunakan mekanisme routes sehingga kita dapat berpindah navigasi tanpa harus mengikuti mekanisme navigasi hirarki standard.

1. Pada aplikasi yang sudah kita buat sebelumnya, tambahkan code behind sebagai berikut:

        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute("liststring", typeof(BindingListString));
            Routing.RegisterRoute("imagecell", typeof(ListViewImageCell));
            Routing.RegisterRoute("datamodel", typeof(BindingToDataModel));
            Routing.RegisterRoute("customlist", typeof(ListViewCustom));
        }

2. Kemudian pada bagian xaml tambahkan route berikut ini:

    <FlyoutItem Title="List Sample"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Tab Menu">
            <ShellContent Title="Binding List" Route="liststring">
                <views:BindingListString/>
            </ShellContent>
            <ShellContent Title="Image Cell" Route="imagecell">
                <views:ListViewImageCell />
            </ShellContent>
        </Tab>
        <ShellContent Title="Binding List String" Route="liststring">
            <views:BindingListString />
        </ShellContent>
        <ShellContent Title="Binding Data Model" Route="datamodel">
            <views:BindingToDataModel />
        </ShellContent>
        <ShellContent Title="Custom ListView" Route="customlist">
            <views:ListViewCustom />
        </ShellContent>
    </FlyoutItem>

3. Pada halaman BindingListString yang sudah dibuat sebelumnya tambahkan tmbol untuk navigasi halaman.

        <StackLayout>
            <Button x:Name="btnImageCell" 
                    Text="Ke Halaman Image Cell" Clicked="btnImageCell_Clicked" />
            <ListView x:Name="listView" />
        </StackLayout>

4. Untuk navigasi dengan menggunakan route yang sudah dibuat, anda dapat menambahkan perintah berikut ini:

        private async void btnImageCell_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync("imagecell");
        }

image

Advertisement

Xamarin Essentials: Menggunakan Map

Posted on by
Reply

Map API dapat digunakan untuk menampilkan posisi/lokasi tertentu kedalam google map.

1. Buat halaman baru dengan nama XEMap. Kemudian tambahkan kode xaml berikut:

        <StackLayout>
            <Button x:Name="btnMap" Text="Map" Clicked="btnMap_Clicked" />
            <Button x:Name="btnPlacemark" Text="Placemark" Clicked="btnPlacemark_Clicked" />
        </StackLayout>

2. Tambahkan kode berikut ketika tombol Map ditekan.

        public async Task NavigateToBuilding25()
        {
            var location = new Location(47.645160, -122.1306032);
            var options = new MapLaunchOptions { Name = "Microsoft Building 25" };

            await Map.OpenAsync(location, options);
        }

        private async void btnMap_Clicked(object sender, EventArgs e)
        {
            await NavigateToBuilding25();
        }

3. Jalankan aplikasi untuk membuka map sesuai lokasi yang telah ditentukan.

image

4. Anda juga dapat memasukan informasi placemark yang lebih lengkap sebagai berikut:

        private async void btnPlacemark_Clicked(object sender, EventArgs e)
        {
            var placemark = new Placemark
            {
                CountryName = "United States",
                AdminArea = "WA",
                Thoroughfare = "Microsoft Building 25",
                Locality = "Redmond"
            };
            var options = new MapLaunchOptions { Name = "Microsoft Building 25" };

            await Map.OpenAsync(placemark, options);
        }

Xamarin Essentials: Menggunakan Geocoding

Posted on by
Reply

Geocoding API menyediakan informasi geocode placemark (alamat tertentu) menjadi koordinat latitude dan longitude, dan sebaliknya koordinat menjadi placemark (reverse geocode coordinates).

1. Buat halaman baru dengan nama XEGeocoding dan tambahkan kode xaml berikut:

        <StackLayout>
            <Entry x:Name="txtAlamat" Placeholder="Masukan Alamat" />
            <Button x:Name="btnGeocoding" Text="Geocoding" 
                    Clicked="btnGeocoding_Clicked" />
        </StackLayout>

2. Kemudian tambahkan code behind berikut untuk menampilkan geocode.

        private async void btnGeocoding_Clicked(object sender, EventArgs e)
        {
            try
            {
                var address = txtAlamat.Text;
                var locations = await Geocoding.GetLocationsAsync(address);
                var location = locations?.FirstOrDefault();
                if (location != null)
                {
                    await DisplayAlert("Keterangan",
                        $"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}", "OK");
                }
            }
            catch (FeatureNotSupportedException fnsEx)
            {
                await DisplayAlert("Error", fnsEx.Message, "OK");
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error", ex.Message, "OK");
            }
            
        }

3. Kemudian jalankan aplikasi dan ketikan alamat tertentu, maka akan ditampilkan posisi latitude dan longitude dari alamat tersebut.

image

4. Anda juga dapat melakukan reverse geocoding dari koordinat latitude dan longitude.

5. Tambahkan entry pada halaman xaml untuk memasukan data latitude dan longitude.

        private async void btnReverseGeo_Clicked(object sender, EventArgs e)
        {
            try
            {
                double lat = Convert.ToDouble(txtLatitude.Text);
                double lon = Convert.ToDouble(txtLongitude.Text);

                var placemarks = await Geocoding.GetPlacemarksAsync(lat, lon);

                var placemark = placemarks?.FirstOrDefault();
                if (placemark != null)
                {
                    var geocodeAddress =
                        $"AdminArea:       {placemark.AdminArea}\n" +
                        $"CountryCode:     {placemark.CountryCode}\n" +
                        $"CountryName:     {placemark.CountryName}\n" +
                        $"FeatureName:     {placemark.FeatureName}\n" +
                        $"Locality:        {placemark.Locality}\n" +
                        $"PostalCode:      {placemark.PostalCode}\n" +
                        $"SubAdminArea:    {placemark.SubAdminArea}\n" +
                        $"SubLocality:     {placemark.SubLocality}\n" +
                        $"SubThoroughfare: {placemark.SubThoroughfare}\n" +
                        $"Thoroughfare:    {placemark.Thoroughfare}\n";

                    await DisplayAlert("Keterangan",geocodeAddress,"OK");
                }
            }
            catch (FeatureNotSupportedException fnsEx)
            {
                await DisplayAlert("Error", fnsEx.Message, "OK");
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error", ex.Message, "OK");
            }
        }

image

Xamarin Essentials: Menggunakan Geolocation

Posted on by
Reply

Pada tutorial kali ini kita akan mencoba menggunakan salah satu API dari Xamarin Essentials yaitu Geolocation API.

Geolocation API digunakan untuk mengambil lokasi dari devices berupa informasi koordinat (latitude, dan longitude).

1. Buat halaman baru dengan nama XEGeolocation, kemudian tambahkan xaml berikut:

        <StackLayout>
            <Button x:Name="btnGeolocation" Text="Geoloation" />
        </StackLayout>

2. Tambahkan permission berikut pada Android Project. Tambahkan kode berikut pada file AssemblyInfo.cs.

[assembly: UsesPermission(Android.Manifest.Permission.AccessCoarseLocation)]
[assembly: UsesPermission(Android.Manifest.Permission.AccessFineLocation)]
[assembly: UsesFeature("android.hardware.location", Required = false)]
[assembly: UsesFeature("android.hardware.location.gps", Required = false)]
[assembly: UsesFeature("android.hardware.location.network", Required = false)]

3. Kemudian tambahkan kode berikut untuk mengambil informasi geolocation.

        private async void btnGeolocation_Clicked(object sender, EventArgs e)
        {
            try
            {
                var request = new GeolocationRequest(GeolocationAccuracy.Medium);
                var location = await Geolocation.GetLocationAsync(request);
                if (location != null)
                {
                    await DisplayAlert("Keterangan",
                        $"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}","OK");
                }
            }
            catch (FeatureNotSupportedException fnsEx)
            {
                await DisplayAlert("Error", fnsEx.Message, "OK");
            }
            catch (FeatureNotEnabledException fneEx)
            {
                await DisplayAlert("Error", fneEx.Message, "OK");
            }
            catch (PermissionException pEx)
            {
                await DisplayAlert("Error", pEx.Message, "OK");
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error", ex.Message, "OK");
            }
        }

4. Kemudian jalankan aplikasinya, jika anda belum mengaktifkan fitur lokasi pada devices, maka akan ditampilkan notifikasi sebagai berikut:

image

5. Agar aplikasi dapat digunakan aktifkan fitur location/GPS pada devices. Maka akan ditampilkan informasi geolocationnya.

image