Posted by - Saturday, July 29, 2017

Tutorial Xamarin Android : Tabs Menu Material Design


Selamat siang semuanya, nah pada kesempatan kali ini kita akan membuat sebuah tabs sederhana dengan icon menggunakan material design dari android, seperti biasa kita menggunakan xamarin android untuk mendevelopnya. Kurang lebih tampilan tabs yang akan kita buata dalah sebagai berikut.



Ikuti langkah-langkah berikut ini

Langkah 1
Buatlah sebuah project baru dengan nama TutorialTabs kemudian
Lakukan instalasi Component Android Design Support Library pada xamarin anda, dan tunggu hingga proses instalasi selesai.

Langkah 2
Tambahkan gambar berikut untuk icon tabs yang kemudian kita taruh di folder drawable.
Untuk icon bisa di download disini

Langkah 3
Pada folder Resources -> Values buatlah sebuah file xml dengan nama colors.xml lalu masukan code sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#3f51b5</color>
    <color name="primary_dark">#303f9f</color>
    <color name="ripple">#F06292</color>
    <color name="accent">#E91E63</color>
    <color name="accent_pressed">#C2185B</color>
</resources>

Langkah 4
Pada folder Resources -> Values buat kembali file Styles.xml dan masukan code sebagai berikut :

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
   <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="windowNoTitle">true</item>
     <item name="windowActionBar">false</item>
      <item name="colorControlNormal">#0C92CF</item>
     <item name="colorPrimary">#2196F3</item>
     <item name="colorPrimaryDark">#1976D2</item>
     <item name="colorAccent">#0C92CF</item> 
   </style>     
   <style name="MyTheme" parent="MyTheme.Base">
   </style>
    <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light"> 
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
  </style>
</resources>

Langkah 5
Ubahlah file Strings.xml pada folder values dengan code seperti berikut ini.

<?xml version="1.0" encoding="utf-8"?>
<resources> 
 <string name="app_name">Aplikasi Tabs Xamarin</string>
 <string name="strCall">Call</string>
 <string name="strPesan">Pesan</string>
 <string name="strData">Data</string>
</resources>

Langkah 6
Buatlah sebuah folder baru dengan nama values-v21 kemudian buat sebuah file dengan nama Styles.xml dengan code sebagai berikut

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
 <style name="MyTheme" parent="MyTheme.Base">
  <item name="android:windowContentTransitions">true</item>
  <item name="android:windowAllowEnterTransitionOverlap">true</item>
  <item name="android:windowAllowReturnTransitionOverlap">true</item>
  <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
  <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
 </style>
</resources>

Langkah 7
Pada folder Layout buatlah sebuah layout baru dengan nama app_bar.axml lalu masukan code berikut

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="#ff1976d2"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Langkah 8
Buka file Main.axml lalu modifikasi dengan code seperti ini

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/layout_mainIcon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include
            layout="@layout/app_bar" />
        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabsIcon"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff1976d2"
            app:tabMode="fixed"
            app:tabGravity="fill" />
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpagerIcon"
            android:layout_width="match_parent"
            android:layout_height="0px"
            android:layout_weight="1"
            android:background="#ffffff" />
    </LinearLayout>
</LinearLayout>

Langkah 9
Buat juga layout dengan nama HalamanCall.axml dengan code sebagai berikut

<?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="#ffff9800"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="Halaman Call"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center" />
</RelativeLayout>

Langkah 10
Buat juga layout dengan nama HalamanPesan.axml dengan code sebagai berikut

<?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="#ffab47bc"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="Halaman Pesan"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center" />
</RelativeLayout>

Langkah 11
Buat juga layout dengan nama HalamanData.axml dengan code sebagai berikut

<?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="#ff8bc34a"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="Halaman Data"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center" />
</RelativeLayout>

Langkah 12
Buatalh sebuah class fragment baru dengan nama CallFragment.cs dengan code seperti ini

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;

namespace TutorialTabs
{
 public class CallFragment : Android.Support.V4.App.Fragment
 {
  public override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);
  }

  public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
   // Use this to return your custom view for this Fragment 
   View view = inflater.Inflate(Resource.Layout.HalamanCall, container, false);
   return view;
  }
 }
}

Langkah 13
Buatalh sebuah class fragment baru dengan nama DataFragment.cs dengan code seperti ini

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;

namespace TutorialTabs
{
 public class DataFragment : Android.Support.V4.App.Fragment
 {
  public override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);
  }

  public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
   // Use this to return your custom view for this Fragment 
   View view = inflater.Inflate(Resource.Layout.HalamanData, container, false);
   return view;
  }
 }
}

Langkah 14
Buatalh sebuah class fragment baru dengan nama PesanFragment.cs dengan code seperti ini

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;

namespace TutorialTabs
{
 public class PesanFragment : Android.Support.V4.App.Fragment
 {
  public override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);
  }

  public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
   // Use this to return your custom view for this Fragment 

   View view = inflater.Inflate(Resource.Layout.HalamanPesan, container, false);
   return view;
  }
 }
}

Langkah 15
Buatlah sebuah class adapter dengan nama TabsFragmentPagerAdapter.cs lalu masukan code seperti ini

using System;
using Android.Support.V4.App;
using Java.Lang;

namespace TutorialTabs
{
 public class TabsFragmentPagerAdapter : FragmentPagerAdapter
 {
  private readonly Fragment[] fragments;

  private readonly ICharSequence[] titles;

  public TabsFragmentPagerAdapter(FragmentManager fm, Fragment[] fragments, ICharSequence[] titles) : base(fm)
  {
   this.fragments = fragments;
   this.titles = titles;
  }
  public override int Count
  {
   get
   {
    return fragments.Length;
   }
  }

  public override Fragment GetItem(int position)
  {
   return fragments[position];
  }

  //  public override ICharSequence GetPageTitleFormatted(int position)
  //  {
  //   return titles[position]; 
  //  }
 }
}

 Langkah 16
Buka file MainActivity.cs dan ubahlah dengan code sebagai berikut.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.Support.Design.Widget;
using Android.Support.V4.View;
using Android.Support.V7.App;
using Android.Support.V7.Widget;

namespace TutorialTabs
{
 [Activity(Label = "Aplikasi Tabs", MainLauncher = true, Theme = "@style/MyTheme")]
 public class MainActivity : AppCompatActivity
 {
  TabLayout tabLayout;
  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);
   SetContentView(Resource.Layout.Main);
   var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.app_bar);
   SetSupportActionBar(toolbar);
   SupportActionBar.SetDisplayHomeAsUpEnabled(true);


   tabLayout = FindViewById<TabLayout>(Resource.Id.sliding_tabsIcon);
   FnInitTabLayout();
  }
  void FnInitTabLayout()
  {
   tabLayout.SetTabTextColors(Android.Graphics.Color.Aqua, Android.Graphics.Color.AntiqueWhite);
   //Fragment array
   var fragments = new Android.Support.V4.App.Fragment[]
   {
    new CallFragment(),
    new PesanFragment(),
    new DataFragment(),
   };
   //Tab title array
   var titles = CharSequence.ArrayFromStringArray(new[] {
    GetString(Resource.String.strCall),
    GetString(Resource.String.strPesan),
    GetString(Resource.String.strData),
   });
   var viewPager = FindViewById<ViewPager>(Resource.Id.viewpagerIcon);
   //viewpager holding fragment array and tab title text
   viewPager.Adapter = new TabsFragmentPagerAdapter(SupportFragmentManager, fragments, titles);

   // Berikan Tab ke ViePager
   tabLayout.SetupWithViewPager(viewPager);
   //tabLayout.SetTabTextColors(
   FnSetIcons();
   //FnSetupTabIconsWithText ();
  }
  void FnSetIcons()
  {
   tabLayout.GetTabAt(0).SetIcon(Resource.Drawable.iconCall);
   tabLayout.GetTabAt(1).SetIcon(Resource.Drawable.iconMsg);
   tabLayout.GetTabAt(2).SetIcon(Resource.Drawable.iconData);
  }


 }
}

Pada MainActivity.cs kita membuat sebuah fungsi untuk memanggil tabs yang diberikan ke ViewPager

FnInitTabLayout();


void FnInitTabLayout()
  {
   tabLayout.SetTabTextColors(Android.Graphics.Color.Aqua, Android.Graphics.Color.AntiqueWhite);
   //Fragment array
   var fragments = new Android.Support.V4.App.Fragment[]
   {
    new CallFragment(),
    new PesanFragment(),
    new DataFragment(),
   };
   //Tab title array
   var titles = CharSequence.ArrayFromStringArray(new[] {
    GetString(Resource.String.strCall),
    GetString(Resource.String.strPesan),
    GetString(Resource.String.strData),
   });
   var viewPager = FindViewById<ViewPager>(Resource.Id.viewpagerIcon);
   //viewpager holding fragment array and tab title text
   viewPager.Adapter = new TabsFragmentPagerAdapter(SupportFragmentManager, fragments, titles);

   // Give the TabLayout the ViewPager 
   tabLayout.SetupWithViewPager(viewPager);
   //tabLayout.SetTabTextColors(
   FnSetIcons();
   //FnSetupTabIconsWithText ();
  }





Terimakasih



Salam

Ipung Purwono









at























Labels:
,
,




Banyustudio
Jl. Jend. Sudirman No.296, Sokanegara, Purwokerto Tim., Kabupaten Banyumas, Jawa Tengah 53116, Indonesia




















No comments:















Post a Comment


Mohon melakukan komentar dengan bahasa yang mudah dipahami, santun dan dengan bahasa yang baik.
























        

      










Subscribe to:
Post Comments (Atom)