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