Materi ini membahas tentang membuat menu berupat TAB, sama seperti materi sebelumnya namun menu ini bisa di geser ke kanan dan ke kiri sehingga user tidak perlu mengklik tab yang ada di atas menu. misalnya ada 3 menu yaitu Home, Music dan Movie. menu home kontennya berupa webview, menu music berupa audio dan menu movie berupa videoview. gambaran sistem sebagai berikut:
Menu Home
Menu Music
Menu Movie
Buatlah DesainLayout ViewPager Tab Terlebih dahulu
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#0000FF" app:tabTextColor="@android:color/background_light" tools:ignore="MissingConstraints"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@+id/tabLayout"> </android.support.v4.view.ViewPager> </android.support.constraint.ConstraintLayout>
Kemudian desain fragement_home (webview)
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webView"/> </FrameLayout>
fragment_music
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- TODO: Update blank fragment layout --> <Button android:id="@+id/btn_play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Play Audio From URL" android:layout_margin="25dp" /> </FrameLayout>
fragment_movie
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="example.javatpoint.com.kotlintablayoutexample.MovieFragment"> <VideoView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:id="@+id/videovw"/> <ProgressBar android:layout_width="200dp" android:layout_height="200dp" android:id="@+id/progrss" android:visibility="gone" android:layout_centerInParent="true"/> </FrameLayout>
Buatlah code di MainActivity yang menghubungkan ke Adapter
package a.riki.cobahello import android.support.v7.app.AppCompatActivity import android.os.Bundle import android.support.design.widget.TabLayout import android.support.v4.view.ViewPager class MainActivity : AppCompatActivity() { var tabLayout: TabLayout? = null var viewPager: ViewPager? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.pagerlayout) tabLayout = findViewById<TabLayout>(R.id.tabLayout) viewPager = findViewById<ViewPager>(R.id.viewPager) tabLayout!!.addTab(tabLayout!!.newTab().setText("Home")) tabLayout!!.addTab(tabLayout!!.newTab().setText("Music")) tabLayout!!.addTab(tabLayout!!.newTab().setText("Movie")) tabLayout!!.tabGravity = TabLayout.GRAVITY_FILL val adapter = MyAdapter(this, supportFragmentManager, tabLayout!!.tabCount) viewPager!!.adapter = adapter viewPager!!.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tabLayout)) tabLayout!!.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener { override fun onTabSelected(tab: TabLayout.Tab) { viewPager!!.currentItem = tab.position } override fun onTabUnselected(tab: TabLayout.Tab) { } override fun onTabReselected(tab: TabLayout.Tab) { } }) } }
Buat Code MyAdapater.kt yang memanggil fragment-fragment
package a.riki.cobahello import android.support.v4.app.FragmentPagerAdapter import android.content.Context; import android.support.v4.app.Fragment import android.support.v4.app.FragmentManager class MyAdapter(private val myContext: Context, fm: FragmentManager, internal var totalTabs: Int) : FragmentPagerAdapter(fm) { // this is for fragment tabs override fun getItem(position: Int): Fragment? { when (position) { 0 -> { // val homeFragment: HomeFragment = HomeFragment() return HomeFragment() } 1 -> { return MusicFragment() } 2 -> { // val movieFragment = MovieFragment() return MovieFragment() } else -> return null } } // this counts total number of tabs override fun getCount(): Int { return totalTabs } }
Buat masing-masing class fragment
HomeFragment
package a.riki.cobahello import android.os.Bundle import android.support.v4.app.Fragment import android.view.* import android.webkit.WebView import android.webkit.WebViewClient class HomeFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? { val v = inflater?.inflate(R.layout.fragment_home, container, false) val mWebView = v?.findViewById<View>(R.id.webView) as WebView mWebView.loadUrl("http://insanpembelajar.com/") // Enable Javascript val webSettings = mWebView.settings webSettings.javaScriptEnabled = true // Force links and redirects to open in the WebView instead of in a browser mWebView.webViewClient = WebViewClient() mWebView.canGoBack() mWebView.setOnKeyListener(View.OnKeyListener { v, keyCode, event -> if (keyCode == KeyEvent.KEYCODE_BACK && event.action == MotionEvent.ACTION_UP && mWebView.canGoBack()) { mWebView.goBack() return@OnKeyListener true } false }) return v } }// Required empty public constructor
MusicFragment
package a.riki.cobahello import android.os.Bundle import android.support.v4.app.Fragment import android.view.ViewGroup import android.view.LayoutInflater import android.view.View class MusicFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? { // Inflate the layout for this fragment return inflater!!.inflate(R.layout.fragment_music, container, false) } }// Required empty public constructor Required empty public constructor
dan terakhir MovieFragment
package a.riki.cobahello import android.os.Bundle import android.support.v4.app.Fragment import android.view.LayoutInflater import android.view.View import android.view.ViewGroup class MovieFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? { // Inflate the layout for this fragment return inflater!!.inflate(R.layout.fragment_movie, container, false) } }// Required empty public constructor