Xamarin Android: How to build introduction slider.
Here is the final we are going to build for an app.
Design the intro screens
For this example, we're placing a big image in the centre and few texts below it. At the bottom, dots are placed which indicates the number of slides it has.
For every screen, we need each colors including background color and dots colors when it's active or inactive.
Create styles.xml located under resource/values and add the below color values.
<resources> <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">#3F51B5</item> <item name="colorPrimaryDark">#303F9F</item> <item name="colorAccent">#FF4081</item> </style> <color name="bgscreen1">#f64c73</color> <color name="bgscreen2">#20d2bb</color> <color name="bgscreen3">#3395ff</color> <color name="bgscreen4">#c873f4</color> </resources>Open strings.xml located under resource/values and add the below string values. Here is a description of each slide
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, Click Me!</string> <string name="app_name">SliderForTheFirstLaunch</string> <string name="next">NEXT</string> <string name="skip">SKIP</string> <string name="start">GOT IT</string> <string name="slide_1_title">Save Money</string> <string name="slide_1_desc">How to Integrate Intro-Sliders into your Android Application</string> <string name="slide_2_title">Trust Network</string> <string name="slide_2_desc">How to Integrate Intro-Sliders into your Android Application</string> <string name="slide_3_title">Notification</string> <string name="slide_3_desc">How to Integrate Intro-Sliders into your Android Application</string> <string name="slide_4_title">World Travel</string> <string name="slide_4_desc">How to Integrate Intro-Sliders into your Android Application</string> </resources>Intro slider just is shown only once when the app is launched for the very first time. So we use SharedPreferences. Create a RefLayoutManager.cs and add the below code.
ISharedPreferences sharePref; ISharedPreferencesEditor editor; Context context; // mode //shared preferene file name private static string pref_name = "Intro Slider"; private static string is_first_time_lauch = "thefirst"; public LayoutManager(Context context) { this.context = context; sharePref = this.context.GetSharedPreferences(pref_name,FileCreationMode.Private); editor = sharePref.Edit(); } public void setFirstTimeLauch(bool isFirstTime) { editor.PutBoolean(is_first_time_lauch, isFirstTime); editor.Commit(); } public Boolean isFirstTimeLauch() { return sharePref.GetBoolean(is_first_time_lauch, true); }Creating the welcome slides
It's time to create the layouts for the slider. We create four layouts named LayoutSlide1 to LayoutSlide2 under resource/layouts
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bgscreen1"> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:orientation="vertical"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/crane70" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/slide_1_title" android:textStyle="bold" android:textSize="17dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/slide_1_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="13dp" /> </LinearLayout> </RelativeLayout>The layout slides for 2, 3, and 4 is the same as layoutslide1.
Open Main under resource/layout and add the below code. Here we use ViewPager for slider and two buttons for Skip and Next navigation and dots
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/layoutPanel" android:layout_width="match_parent" android:layout_alignParentBottom="true" android:layout_height="30dp" android:gravity="center" android:layout_marginBottom="10dp" android:orientation="horizontal" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:alpha="0.5" android:layout_above="@id/layoutPanel" android:background="@android:color/white" /> <Button android:id="@+id/btn_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:background="@android:color/transparent" android:text="@string/next" android:textColor="@android:color/white" /> <Button android:id="@+id/btn_skip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:background="@android:color/transparent" android:text="@string/skip" android:textColor="@android:color/white" /> </RelativeLayout>Open MainActivity and add the below code.
We will check for first time launch before calling SetContentView.
layoutManager = new LayoutManager(this); if (!layoutManager.isFirstTimeLauch()) { lauchHomeScreen(); Finish(); }using Android.App; using Android.Widget; using Android.OS; using Android.Support.V7.App; using Android.Support.V4.View; using Android.Views; using Android.Content; using Android.Text; using Android.Content.Res; using Android.Graphics; namespace SliderForTheFirstLaunch { [Activity(Label = "SliderForTheFirstLaunch", MainLauncher = true, Icon = "@mipmap/icon")] public class MainActivity : AppCompatActivity { ViewPager viewPager; LinearLayout dotsLayout; TextView[] dots; public int[] layouts; Button btnNext, btnSkip; LayoutManager layoutManager; protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); layoutManager = new LayoutManager(this); if (!layoutManager.isFirstTimeLauch()) { lauchHomeScreen(); Finish(); } // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); layouts = new int[] { Resource.Layout.LayoutSlide1, Resource.Layout.LayoutSlide2, Resource.Layout.LayoutSlide3, Resource.Layout.LayoutSlide4 }; viewPager = (ViewPager)FindViewById(Resource.Id.viewPager); dotsLayout = (LinearLayout)FindViewById(Resource.Id.layoutPanel); btnNext = (Button)FindViewById(Resource.Id.btn_next); btnSkip = (Button)FindViewById(Resource.Id.btn_skip); addDots(0); ViewPagerAdapter adapter = new ViewPagerAdapter(layouts); viewPager.Adapter = adapter; viewPager.PageSelected+= ViewPager_PageSelected; //viewPager.AddOnPageChangeListener(new ViewPager.IOnPageChangeListener()); btnNext.Click += (sender, e) => { int current = GetItem(+1); if (current < layouts.Length) //move to next screen viewPager.CurrentItem = current; else { //lauch main screen here Intent intent = new Intent(this,typeof(MainPageActivity)); StartActivity(intent); } }; btnSkip.Click += (sender, e) => { Intent intent = new Intent(this, typeof(MainPageActivity)); StartActivity(intent); }; } void ViewPager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e) { addDots(e.Position); //changing the next button text // Next or Got it if (e.Position == layouts.Length - 1) { // if it is a last page. make button text to "Got it" btnNext.Text = (GetString(Resource.String.start)); btnSkip.Visibility = ViewStates.Gone; } else { // if it is not a last page. btnNext.Text = (GetString(Resource.String.next)); btnSkip.Visibility = ViewStates.Visible; } } private void addDots(int currentPage) { dots = new TextView[layouts.Length]; string[] colorsActive = {"#d1395c","#14a895","#2278d4","#a854d4" }; string[] colorsInactive = { "#f98da5", "#8cf9eb", "#93c6fd", "#e4b5fc" }; dotsLayout.RemoveAllViews(); for (int i = 0; i < dots.Length; i++) { dots[i] = new TextView(this); dots[i].Text=(Html.FromHtml("•")).ToString(); dots[i].TextSize=35; dots[i].SetTextColor(Color.ParseColor(colorsActive[currentPage])); dotsLayout.AddView(dots[i]); } if (dots.Length > 0) { dots[currentPage].SetTextColor(Color.ParseColor(colorsInactive[currentPage])); } } int GetItem(int i) { return viewPager.CurrentItem + i; } private void lauchHomeScreen() { layoutManager.setFirstTimeLauch(false); Intent intent = new Intent(this, typeof(MainPageActivity)); StartActivity(intent); Finish(); } public class ViewPagerAdapter : PagerAdapter { LayoutInflater layoutInflater; int[] _layout; public ViewPagerAdapter(int[] layout) { _layout = layout; } public override Java.Lang.Object InstantiateItem(ViewGroup container, int position) { layoutInflater =(LayoutInflater) Android.App.Application.Context.GetSystemService(Context.LayoutInflaterService); View view = layoutInflater.Inflate(_layout[position], container,false); container.AddView(view); return view; } public override int Count { get { return _layout.Length; } } public override bool IsViewFromObject(View view, Java.Lang.Object objectValue) { return view == objectValue; } public override void DestroyItem(ViewGroup container, int position, Java.Lang.Object objectValue) { View view = (View)objectValue; container.RemoveView(view); } } } }