In Android app development, user interface (UI) is a crucial element. If the UI is intuitive and easy to use, the user experience (UX) will be significantly improved, positively impacting the success of the application. This course will explore how to create basic tab buttons using Tab Layout<\/strong> with Kotlin and Android.<\/p>\n Tab Layout is a UI component that helps users easily switch between multiple screens using tabs. Tabs are primarily used to distinguish the main functions of the app, allowing users to select the desired tab on the top of the screen to switch content.<\/p>\n To implement tabs in Android, we utilize two components: TabLayout<\/strong> and ViewPager<\/strong>. TabLayout displays the actual tab buttons, while ViewPager manages multiple pages corresponding to the tabs. By using these two components together, we can create swipeable tabs.<\/p>\n To construct the Tab Layout, there are several steps to follow.<\/p>\n Create a new project through Android Studio. Select Empty Activity<\/strong> and choose to use Kotlin. Add the following dependency in the Modify the Now, open the Create Fragment classes to be used for the tabs. Create Write the rest of the Fragments similarly.<\/p>\n Now, when you build and run the entire project, you will see an app with three tabs. Each time you select a tab, the corresponding Fragment will be displayed. This time, let’s add some simple content to each Fragment. Create the layout files for each Fragment.<\/p>\n TabLayout provides many styling options by default. You can adjust the tab’s color, size, icons, etc., to create a more appealing UI. Below are some customization methods.<\/p>\n You can change the text color and background color of the tabs.<\/p>\n In this course, we learned how to construct a tab layout in an Android app using Kotlin. We were able to build a UI that easily switches between multiple Fragments using TabLayout and ViewPager, and also explored basic customization methods. By utilizing various APIs and libraries, we hope you create amazing apps that enhance the user experience!<\/p>\n In the next lecture, we will explore how to implement additional tab actions and animation effects. We appreciate your interest!<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Table of Contents<\/h2>\n
\n
Understanding Tab Layout<\/h2>\n
Constructing Tab Layout<\/h2>\n
\n
1. Create a project and set up Gradle<\/h3>\n
build.gradle<\/code> file of the created project:<\/p>\nimplementation 'com.google.android.material:material:1.4.0'<\/code><\/pre>\n2. Create the layout file<\/h3>\n
res\/layout\/activity_main.xml<\/code> file in the project as follows:<\/p>\n<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <com.google.android.material.tabs.TabLayout\n android:id=\"@+id\/tabLayout\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n app:tabMode=\"fixed\"\n app:tabGravity=\"fill\"\/>\n\n <androidx.viewpager.widget.ViewPager\n android:id=\"@+id\/viewPager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\"\/>\n\n <\/androidx.coordinatorlayout.widget.CoordinatorLayout><\/code><\/pre>\n3. Connect the tabs and ViewPager<\/h3>\n
MainActivity.kt<\/code> file and write the following:<\/p>\nimport android.os.Bundle\n import androidx.appcompat.app.AppCompatActivity\n import androidx.fragment.app.Fragment\n import androidx.fragment.app.FragmentPagerAdapter\n import androidx.viewpager.widget.ViewPager\n import com.google.android.material.tabs.TabLayout\n\n class MainActivity : AppCompatActivity() {\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n val tabLayout: TabLayout = findViewById(R.id.tabLayout)\n val viewPager: ViewPager = findViewById(R.id.viewPager)\n\n viewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager) {\n override fun getItem(position: Int): Fragment {\n return when (position) {\n 0 -> Fragment1()\n 1 -> Fragment2()\n else -> Fragment3()\n }\n }\n\n override fun getCount(): Int = 3\n \n override fun getPageTitle(position: Int): CharSequence? {\n return when (position) {\n 0 -> \"Tab 1\"\n 1 -> \"Tab 2\"\n 2 -> \"Tab 3\"\n else -> null\n }\n }\n }\n\n tabLayout.setupWithViewPager(viewPager)\n }\n }<\/code><\/pre>\n4. Set up the Fragment for the tabs<\/h3>\n
Fragment1.kt<\/code>, Fragment2.kt<\/code>, and Fragment3.kt<\/code> and write the following for each:<\/p>\nimport android.os.Bundle\n import androidx.fragment.app.Fragment\n import android.view.LayoutInflater\n import android.view.View\n import android.view.ViewGroup\n\n class Fragment1 : Fragment() {\n override fun onCreateView(\n inflater: LayoutInflater, container: ViewGroup?,\n savedInstanceState: Bundle?\n ): View? {\n return inflater.inflate(R.layout.fragment_1, container, false)\n }\n }<\/code><\/pre>\nExample of Tab Layout<\/h2>\n
fragment_1.xml<\/h3>\n
<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"This is the content of the first tab\"\n android:layout_gravity=\"center\"\/>\n\n <\/FrameLayout><\/code><\/pre>\nfragment_2.xml<\/h3>\n
<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"This is the content of the second tab\"\n android:layout_gravity=\"center\"\/>\n\n <\/FrameLayout><\/code><\/pre>\nfragment_3.xml<\/h3>\n
<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"This is the content of the third tab\"\n android:layout_gravity=\"center\"\/>\n\n <\/FrameLayout><\/code><\/pre>\nCustomizing Tab Layout<\/h2>\n
Setting Tab Colors<\/h3>\n
tabLayout.setTabTextColors(Color.parseColor(\"#FFFFFF\"), Color.parseColor(\"#FF0000\"))<\/code><\/pre>\nSetting Tab Icons<\/h3>\n
tabLayout.getTabAt(0)?.setIcon(R.drawable.icon1)\n tabLayout.getTabAt(1)?.setIcon(R.drawable.icon2)\n tabLayout.getTabAt(2)?.setIcon(R.drawable.icon3)<\/code><\/pre>\nConclusion<\/h2>\n