Talk With Angel Garcia!

Talk With Angel Garcia!

a blog about software and beers

CabañasRD, from native to cross-platform with Xamarin Forms [2/4].

So, following my last post, let’s continue with the second part of this series of blogs about migrating and redesigning an existing and popular app: CabañasRD.

The plan is to divide all the process in 4 parts:

  1. From Adobe XD to XAML: Design and structure.
  2. Implementing the command for opening native map, app icons, splash screens, info tab and also the search functionality over the map (this post).
  3. Moving the data to the cloud: Let’s make our backend with Azure Functions and CosmosDB and consume it from the app.
  4. Implementing continuous integration and continuous delivery with App Center.

Implementing the command for opening native map, app icons, splash screens, info tab and also the search functionality over the map.

Let’s start by looking at the search functionality, this is how it looks over the map:

We already have this map screen using a grid:

So we are going to start adding a frame in the same position as the map in the grid and inside the frame we will need to have something like this:

Let’s do the markup for this in the MotelsMapPage.xaml (look at the Search Bar area):

Run the app and see the results:

Now, for showing the results of our search, we need to overlay the entire main grid, adding a StackLayout as a container with a ListView inside will make the trick, place the following before the search bar:

As you can see, we are reusing the same Locations ObservableCollection for binding the results, we are going to change it later, before running the app, we will more locations to be added to the list, go to App/CabanasRD/Framework/DataSources/InMemoryMotelsSource.cs and add more items, like this:

Ok, now play run:

Cool! Now let’s add some logic to make this work as expected, first let’s control the visibility of the search results putting IsVisible bound to our ViewModel, then create the real collection for the CollectionView’s ItemSource.

We also need to do some changes in the way we have the bindings, before start modifying our map logic, let’s add the package Xamarin.Forms.GoogleMaps.Bindings in the shared project.

Now modify the following:

Run the app and try the search bar, click on any result and see that we already can select the pin through the result of the search.

Do you remember the “VER RUTA” button in the details view for the motel? It’s time to add the command for opening the native map in the device when we tap in the button.

Xamarin.Essentials.Map helps us to manage this task, add the following to complete the implementation:

For the app icons, first export your icon image with a min resolution of 1024 x 1024 (in pixels).

I use two web tools for generating the icons:

In iOS is super straightforward to change the icon, just go to the Assets.xcassets in the iOS project and replace the icons for the generated ones.

In Android, for not modifying any code and just update the icon image, we will need to generate 2 set of icons, one named “icon” and other named “launcher_foreground”, then replace them in the mipmaps folders, sometimes is necessary to delete the obj folder for the Android project when you see the icon doesn’t update.

Well done, time for the splash screens!

Follow the official Xamarin docs for creating splash screens:

For Android use the following code for the splash_screen.xml:

And finally we are going to markup the page for the Info tab and will look like this:

Before going to the XAML, export and add the “.NET Dominicana” image for both platforms and name it “dotnetdo.png”.

Now go to App/CabanasRD/UI, create a folder for holding the info view, name it “Info”, inside the new folder add two more folders “Views” and “ViewModels”.

In App/CabanasRD/UI/Info/Views create a XAML called “InfoPage” and in App/CabanasRD/UI/Info/ViewModels create the “InfoPageViewModel.cs” that inherits from ViewModelBase, and finally register this new view in the App.xaml.cs.

To use this InfoPage as the second tab, modify the MainTabbedPage.xaml, replace the default content page that we are using as second tab for this:

This is a simple layout compared with the ones we have done before in this app, check it out:

Run the app and move to the second tab:

🕺🏽Yessir, we are done!

[UPDATE]: I posted in my twitter the link for the streaming and a video with the final results:

See you in the next post of this serie! 🚀

See the code on Github


Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.