Post
Ask Question

Design ScrollView With TableView In StackLayout Android Application Using Xamarin.Forms

What is Xamarin and Xamarin Forms?

  • Xamarin is a cross-platform to develop Multi-Platform Applications
  • Xamarin is a shared code(C#) but separately designs UIs Android (Java), Windows(C#), iOS (Objective – C & Xcode).
  • Xamarin forums are UIs & Shared code (C#) are same. To develop multi-platform Applications, run all the projects (Android, Windows, iOS) at the same time.

Prerequisites

  • Visual Studio 2017 Enterprise

The steps given below are required to be followed in order to design ScrollView with TableView in StackLayout Android Application, using Xamarin.Forms.

Step 1

  • Go to Visual Studio.
  • Click File -> New -> Project

    Xamarin

Step 2

  • In this step, click C# -> Cross Platform -> Cross Platform App (Native or Xamarin forms).
  • Enter the Application name, followed by clicking OK.

    Xamarin

Step 3

  • Afterwards, go to New Cross Platform app and click Blank App ->
  • UIs Technology as Click Xamarin forums ->
  • Code sharing statergy is Click PCL(Portable Class Library) ->
  • Click OK

    Xamarin

Step 4

  • In UWP Project, select Target version & Minimum Version, followed by clicking OK.

    Xamarin

Step 5

  • In this step, go to Solution Explorer -> Portable Class Library, followed by clicking XAM. Insert the code given below in XAML page and save it.
  • Xamarin
    1. <?xml version="1.0" encoding="utf-8" ?>  
    2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
    3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
    4.              xmlns:local="clr-namespace:TableView"  
    5.              x:Class="TableView.MainPage">  
    6.     <ScrollView>  
    7.   
    8.         <StackLayout Padding="32" Spacing="32" >  
    9.           
    10.             <BoxView Color="#FFF25022" HeightRequest="128" />  
    11.         <BoxView Color="#FF7FBA00" HeightRequest="128" />  
    12.         <BoxView Color="#FF01A4EF" HeightRequest="128" />  
    13.         <BoxView Color="#FFFFB901" HeightRequest="128" />  
    14.             <BoxView Color="#FFF25022" HeightRequest="128" />  
    15.             <BoxView Color="#FF7FBA00" HeightRequest="128" />  
    16.             <BoxView Color="#FF01A4EF" HeightRequest="128" />  
    17.             <BoxView Color="#FFFFB901" HeightRequest="128" />  
    18.             <BoxView Color="#FFF25022" HeightRequest="128" />  
    19.             <BoxView Color="#FF7FBA00" HeightRequest="128" />  
    20.             <BoxView Color="#FF01A4EF" HeightRequest="128" />  
    21.             <BoxView Color="#FFFFB901" HeightRequest="128" />  
    22.         </StackLayout>  
    23.   
    24.     </ScrollView>  
    25. </ContentPage>  

Step 6

  • Click Build menu and go to Configuration Manager
  • Configure your Android, Windows, iOS Depoly & Build Setting, followed by clicking Close.

    Xamarin

Step 7

  • Go to Solution Explorer -> Click UWP Application ->Right click it and then add the Reference. 

    Xamarin

Click Cross Platform ->Extension->add the extension given below.

  • Windows Desktop Extensions for UWP 10.0.143953

    Xamarin

Step 8

In this step, select Build & deploy option, followed by clicking Start your Application

Now, go to Run option, choose Debug from the list of Android or IOS or UWP simulators, which are available. You can choose any one Simulator and run it.

Xamarin

Step 9 

Output
  • After a few seconds, the app will start running on your Android Simulator. You will see your app working successfully.

    Xamarin
  • Your TableView and ScrollView Application were created succesfully

Conclusion

Thus, we learned Design ScrollView with TableView in StackLayout Android Application, using Xamarin.Forms.


Similar Articles