Based on TabLayout in Android+Implementing Tag Card Effect with ViewPager

The code has been uploaded to Github:https://github.com/YanYoJun/ViewPagerDemo

First Look at the Effect

1Layout File

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context="com.plbear.yyj.myapplication.MainActivity">
  <android.support.design.widget.TabLayout
    android:id="@"+id/tab"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    app:tabGravity="fill"
    app:tabIndicatorColor="#4978ef"
    app:tabIndicatorHeight="2dp"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="#4978ef"
    app:tabTextColor="#"222222></android.support.design.widget.TabLayout>
  <android.support.v4.view.ViewPager
    android:id="@"+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
</LinearLayout>

2、Code Implementation

package com.plbear.yyj.myapplication
import android.os.Bundle
import android.support.design.widget.Snackbar
import android.support.design.widget.TabLayout
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentPagerAdapter
import android.support.v7.app.AppCompatActivity
import android.view.Menu
import android.view.MenuItem
import kotlinx.android.synthetic.layout.activity_main.*
class MainActivity : AppCompatActivity() {
  var mFragList = ArrayList<Fragment>()
  var adapter = object:FragmentPagerAdapter(supportFragmentManager){
    override fun getItem(position: Int): Fragment {
      return mFragList[position]
    }
    override fun getCount(): Int {
      return 2
    }
  }
  override fun onCreate(savedInstanceState: Bundle63;) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    initViewPager() //Firstly, add each fragment to the viewpager
    initTabLayout(); //Initialize tablayout
  }
  fun initTabLayout(){
    tab.setupWithViewPager(view_pager)
    tab.setTabsFromPagerAdapter(adapter)
    tab.tabMode = TabLayout.MODE_FIXED
    tab.getTabAt(0)? setText("First Page")
    tab.getTabAt(1)? setText("Second Page")
  }
  fun initViewPager(){
    mFragList.add(Fragment1())
    mFragList.add(Fragment2())
    view_pager.adapter = adapter
  }
}

Here are some points to note, you need to bind setupWithViewPager and tablayout first, and then initialize the tab page of the tab, which is very important, otherwise it will cause the text in tablayout not to be displayed.

Summary

The above is what the editor introduces to everyone about Android based on TabLayout+ViewPager implements the tab card effect, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. We are also very grateful for everyone's support of the Yell Tutorial website!

Declaration: The content of this article is from the network, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit manually, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please report any infringement by sending an email to codebox.com (replace # with @ when sending an email), and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.