Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (149).NET Core  (24)Angular  (42)ASP.NET  (48)ASP.NET Core  (56)ASP.NET MVC  (84)Azure  (28)Blazor  (70)DocIO  (18)Essential JS 2  (67)Essential Studio  (161)Flutter  (82)JavaScript  (140)Microsoft  (101)PDF  (54)React  (31)Succinctly series  (120)Syncfusion  (457)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (17)Windows Forms  (54)WPF  (106)Xamarin  (117)XlsIO  (22)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (104)Chart  (43)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (36)Development  (245)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (16)Extensions  (9)File Manager  (3)Gantt  (7)Gauge  (5)Git  (3)Grid  (25)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (183)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (19)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (19)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (14)Solution Services  (2)Spreadsheet  (4)SQL  (5)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (42)UI  (102)Uncategorized  (68)Unix  (2)User interface  (66)Visual State Manager  (1)Visual Studio  (16)Visual Studio Code  (8)Web  (158)What's new  (102)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Replicating Banking Exploration UI in Xamarin

Replicating Banking Exploration UI in Xamarin

Howdy! In this blog post, we’ll be replicating a banking exploration UI in Xamarin.Forms obtained from this Dribble design site.

Our design contains the following three screens:

  • SignInPage: Shows the Sign In and Sign Up options.
  • AcitivityPage: Shows more details about the user.
  • TransactionPage: Shows the transaction validation information (for example: Success).

Three screens in replicating Banking Exploration UI in XamarinLet ‘s start!

Designing the sign-in page

As you may have expected, we’ll start with designing the first screen. Let’s name this page SignInPage. To create the Sign In button, I am going to use the Syncfusion Xamarin Button control. You can read about the  control’s implementation logic in this getting started documentation.

Let ‘s code!

Main layout structure

It’s important to choose the right layout for our page. In this case,  for the main layout structure, I am using the StackLayout.

<!-- Main structure-->
 <StackLayout Padding="{OnPlatform iOS='0,90', Android='0,35'}">
   <!-- You must write here what is explained from the step number 1 -->

 </StackLayout>

Step 1: Sign in

The First Screen
The First Screen

To start, let’s divide the screen into the following controls:

  • An image.
  • “Save your money” title.
  • Description.
  • Sign In button.
  • Sign Up text.

Code implementation

<!-- Main image-->
   <Image Source="SaveYourMoney" Margin="50,40" />
   <!-- Main description-->
   <Label Text="Save your money" FontSize="20" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
   <Label Text="Best solution to save and
Invest out money just
with smartphone" FontSize="20" HorizontalTextAlignment="Center" TextColor="Silver" Padding="0,35"/>
   <!-- Sign In & Sign Up-->
   <StackLayout VerticalOptions="EndAndExpand">
      <buttons:SfButton Text="Sign In" FontAttributes="Bold" WidthRequest="165" HeightRequest="60" HorizontalOptions="Center" CornerRadius="30" TextColor="White" BackgroundColor="Black"/>
      <Label HorizontalTextAlignment="Center" Padding="0,40,0,0" VerticalOptions="End">
         <Label.FormattedText>
           <FormattedString>
               <Span Text="Don't have an account? " TextColor="Silver"/>
               <Span Text=" Sign Up" TextColor="#ff7114" FontAttributes="Bold"/>
           </FormattedString>
         </Label.FormattedText>
      </Label>
  </StackLayout>

Designing the activity page

Step 2: Displaying balance information

Balance Information on Activity Page
Balance Information on Activity Page

Now, we are going to design the second screen. Let’s name this page ActivityPage.

Here, we’ll use the Syncfusion Xamarin Avatar View control to display the user’s profile image in circular shape. You can check the control implementation logic in this getting started documentation.

To display the Friends and Activity lists, we’ll use the CollectionView. To learn more about it, refer to these CollectionView examples.

Let ‘s code!

Main layout structure

Here, we are using the Grid control as the main layout structure.

<!-- Main structure-->
<Grid Padding="35,45,35,45" RowDefinitions="Auto,Auto,Auto,Auto,Auto,*,Auto" ColumnDefinitions="*,Auto">
 <!-- You must write here what is explained from the steps number 2,3,4 -->
</Grid>

To learn more about using Grid for layouts, refer to our blog post 5 Tips to Easily Use the Grid for Layouts in Xamarin.Forms.

Display the balance information with the following code implementation,

<!-- Balance information-->
   <Label Grid.Row="0" Grid.Column="0" Text="2 Feb, Monday" TextColor="Gray"/>
   <Label Grid.Row="1" Grid.Column="0" Text="Hi, Jimmy!" FontSize="20" FontAttributes="Bold"/>
   <sfavatar:SfAvatarView Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" HorizontalOptions="End" ContentType="Custom"
            ImageSource="Marie.png"
            VerticalOptions="Center"
            BorderColor="White"
            HeightRequest="50"
            CornerRadius="25"
            WidthRequest="50" />
      <Frame Margin="0,20" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" CornerRadius="30" BackgroundColor="#ff7114" HasShadow="False" HeightRequest="120">
         <Grid RowDefinitions="Auto,*" Padding="0,20" ColumnDefinitions="*,Auto">
            <Label Grid.Row="0" Grid.Column="1" Text="..." TextColor="White" />
            <Label Grid.Row="0" Grid.Column="0" Text="Balance" FontSize="20" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
            <Label Grid.Row="1" Grid.Column="0" Text="$28,640" FontSize="40" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
         </Grid>
      </Frame>

<!-- You must add here what is explained in the next step -->

Step 3: Displaying the friends list

Friends List
Friends List

Here, we’ll use the CollectionView layout to display the friends list and use circular buttons to display the Add Friend action and the friends.

Code implementation

<!-- Friends-->
   <Grid Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*">
      <Button Grid.Row="0" Grid.Column="0" Text="+" TextColor="White" BackgroundColor="Black" CornerRadius="30" WidthRequest="60" HeightRequest="60"/>
      <Label Grid.Row="1" Grid.Column="0" Text="Add
Friend" HorizontalTextAlignment="Center"/>
      <CollectionView Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" ItemsSource="{Binding FriendsCollection}"
             HeightRequest="110" Margin="0,0,-45,0"
             HorizontalScrollBarVisibility="Never"
             ItemsLayout="HorizontalList">
          <CollectionView.ItemTemplate>
              <DataTemplate>
                 <Grid RowDefinitions="Auto,Auto">
                    <sfavatar:SfAvatarView Grid.Row="0" HorizontalOptions="End" ContentType="Custom"
                         ImageSource="{Binding Image}"
                         VerticalOptions="Center"
                         BorderColor="White"
                         HeightRequest="60"
                         CornerRadius="30"
                         WidthRequest="60" />
                      <Label Grid.Row="1" WidthRequest="80" Text="{Binding Name}" HorizontalTextAlignment="Center"/>
                    </Grid> 
                 </DataTemplate>
            </CollectionView.ItemTemplate>
         </CollectionView> 
   </Grid>

<!-- You must add here what is explained in the next step -->

Step 4: Activities

Activity History
Activity History

Now, let’s create an activity list with the following items for each activity:

  • Image
  • Title
  • Date
  • Price

Code implementation

<!-- Activities-->
  <Label Grid.Row="4" Grid.Column="0" Text="New Activity" FontAttributes="Bold" Padding="0,20" FontSize="25"/> 
  <Label Grid.Row="4" Grid.Column="1" Text="View All" Padding="0,20" TextColor="Silver" FontAttributes="Bold" HorizontalTextAlignment="End" FontSize="20"/> 

   <CollectionView Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" ItemsSource="{Binding ActivitiesCollection}"
            VerticalScrollBarVisibility="Never">
          <CollectionView.ItemTemplate>
             <DataTemplate>
                <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" Padding="0,10">
                    <Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"  ImageSource="{Binding Image}" TextColor="White" BackgroundColor="#e8e8e8" CornerRadius="25" WidthRequest="50" HeightRequest="50"/>
                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding Title}" Padding="15,0,0,0" FontAttributes="Bold" />
                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Date}" Padding="15,0,0,0" TextColor="Silver"/>
                    <Label Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Text="{Binding Price}" VerticalTextAlignment="Center" TextColor="#589280" FontAttributes="Bold" Padding="15,0,0,0"/>
                </Grid> 
            </DataTemplate>
         </CollectionView.ItemTemplate>
    </CollectionView>

Finally,  let’s add the bottom menu to display the option to navigate to the different pages in the UI.

<!--Bottom menu-->
<Grid Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" RowDefinitions="Auto" ColumnDefinitions="*,Auto,*" VerticalOptions="EndAndExpand">
     <Image Grid.Row="0" Grid.Column="0" HeightRequest="50" Source="House" BackgroundColor="Transparent" />
     <Button Grid.Row="0" Grid.Column="1" ImageSource="Main" TextColor="Black" BackgroundColor="#ff7114" CornerRadius="25" WidthRequest="50" HeightRequest="50"/>
     <Image Grid.Row="0" Grid.Column="2" HeightRequest="50" Source="Arrows" BackgroundColor="Transparent"/>
 </Grid>

Designing the Transaction page

Step 5: Success

Transaction page of the Banking UI in Xamarin
The Final Screen

Let’s continue with the last screen of our UI! We’ll do the following:

  • Name this page TransactionPage.
  • Use Syncfusion Xamarin Button control to create a Done button.
  • Use StackLayout as the main layout in this screen.

Code implementation

Here, we are going to add the following components:

  • An image
  • Success title
  • Amount
  • Description
  • Done button
<StackLayout>
 <Frame Margin="{OnPlatform iOS='0,140,0,-22', Android='0,70,0,22'}" CornerRadius="30" VerticalOptions="FillAndExpand">
   <StackLayout>
       <Image Source="Success" Margin="50,30"/>
       <Label Text="Success" FontSize="20" HorizontalTextAlignment="Center" FontAttributes="Bold"/>
       <Label Text="$120.00" Margin="0,20" FontSize="20" BackgroundColor="#e8e8e8" Padding="45,20" HorizontalOptions="Center" HorizontalTextAlignment="Center" FontAttributes="Bold"/>
       <Label Text="Has been send to Visa
X-4860 from your balance" TextColor="Silver" FontSize="20" HorizontalTextAlignment="Center"/>
       <buttons:SfButton Text="Done" Margin="0,0,0,50" FontAttributes="Bold" WidthRequest="165" HeightRequest="60" HorizontalOptions="Center" VerticalOptions="EndAndExpand" CornerRadius="30" TextColor="White" BackgroundColor="Black"/>
    </StackLayout>
  </Frame>
</StackLayout>
</ContentPage.Content>

And our UI is done!

Banking Exploration UI in Xamarin
Banking Exploration UI in Xamarin

Reference

To see the complete code structure of this project, refer to our Replicating Banking Exploration UI in Xamarin.Forms demo on GitHub.

Conclusion

Thanks for reading! In this blog post, we have seen how to replicate a banking exploration UI in Xamarin.Forms. Let’s use these steps as a starting point to build our own UI!

Syncfusion’s Xamarin suite offers over 150 UI controls, from basic editors to powerful, advanced controls like DataGrid, Charts, ListView, and Rich Text Editor. Try them out and leave your comments below.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related Blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top