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
  
  
  

Step 2

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

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
  
  
  

Step 4

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

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.
• 
  

  <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:local="clr-namespace:TableView"
               x:Class="TableView.MainPage">
      <ScrollView>
  
          <StackLayout Padding="32" Spacing="32" >
  
              <BoxView Color="#FFF25022" HeightRequest="128" />
          <BoxView Color="#FF7FBA00" HeightRequest="128" />
          <BoxView Color="#FF01A4EF" HeightRequest="128" />
          <BoxView Color="#FFFFB901" HeightRequest="128" />
              <BoxView Color="#FFF25022" HeightRequest="128" />
              <BoxView Color="#FF7FBA00" HeightRequest="128" />
              <BoxView Color="#FF01A4EF" HeightRequest="128" />
              <BoxView Color="#FFFFB901" HeightRequest="128" />
              <BoxView Color="#FFF25022" HeightRequest="128" />
              <BoxView Color="#FF7FBA00" HeightRequest="128" />
              <BoxView Color="#FF01A4EF" HeightRequest="128" />
              <BoxView Color="#FFFFB901" HeightRequest="128" />
          </StackLayout>
  
      </ScrollView>
  </ContentPage>

Step 6

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

Step 7

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

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

• Windows Desktop Extensions for UWP 10.0.143953
  
  
  

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.

Step 9 

Output

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

• Your TableView and ScrollView Application were created succesfully

Conclusion

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