How create tabbed view in anko

Question

I want create timetable app, but I have problem with create tabbed view like in the picture. I tried to use the tabhost and tabwidget, but without effects. Is it possible, build tabview using anko? Picture

Answer 1

if your problem is the anko side, at first you should use

"org.jetbrains.anko:anko-support-v4:${versions.anko}"

and then the anko code could be like this

coordinatorLayout {
  lparams(matchParent, matchParent)

  appBarLayout {
    lparams(matchParent, wrapContent)

    myTabLayout = themedTabLayout(R.style.ThemeOverlay_AppCompat_Dark) {
      lparams(matchParent, wrapContent)
      {
        tabGravity = Gravity.FILL
        tabMode = TabLayout.MODE_FIXED
      }
    }
  }
  myViewPager = viewPager {
    id = R.id.viewpager
  }.lparams(matchParent, matchParent)
  (myViewPager!!.layoutParams as CoordinatorLayout.LayoutParams).behavior = AppBarLayout.ScrollingViewBehavior()
}

at last the kotlin side can be like @Saurabh's solution :

 mPagerAdapter = PageAdapter(supportFragmentManager, this)

// Set up the ViewPager with the sections adapter.
myViewPager!!.adapter = mPagerAdapter

myTtabLayout.setupWithViewPager(myViewPager)

// set icons
myTabLayout.getTabAt(0)!!.setIcon(R.drawable.ic_call)
myTabLayout.getTabAt(1)!!.setIcon(R.drawable.ic_fav)
myTabLayout.getTabAt(2)!!.setIcon(R.drawable.ic_contacts)

Answer 2

You have to create it by using TabLayout with ViewPager using fragments. Here is the Kotlin code snippet

 // Create the adapter that will return a fragment for each of the three
    // primary sections of the activity.
    mPagerAdapter = PageAdapter(supportFragmentManager, this)

    // Set up the ViewPager with the sections adapter.
    mViewPager = findViewById<ViewPager?>(R.id.container)
    mViewPager!!.adapter = mPagerAdapter

    val tabLayout = findViewById<View>(R.id.tabs) as TabLayout
    tabLayout.setupWithViewPager(mViewPager)

    // set icons
    tabLayout.getTabAt(0)!!.setIcon(R.drawable.ic_call)
    tabLayout.getTabAt(1)!!.setIcon(R.drawable.ic_fav)
    tabLayout.getTabAt(2)!!.setIcon(R.drawable.ic_contacts)