An efficient TabLayout implemented in Jetpack Compose 🚀

Overview

MagicTabLayout


An efficient TabLayout library implemented in Jetpack Compose 🚀


License API repo size
forks stars

Anatomy

banner_magic_tab_layout

  1. MagicTabLayout
  2. tabIndicatorColor (Optional, default value: blue)
  3. MagicTabItem
  4. MagicTabItem title

Including in your project

Gradle

Add below codes to your root build.gradle file (not your module build.gradle file).

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation 'com.github.iamageo:MagicTabLayout:1.0.1'     
}

Basic Usage

Add in you Activity file.

/* specify your tabs */
val tabs = listOf(
    MagicTabItem(title = "Home") { TabItemTest(item = "tab1") },
    MagicTabItem(title = "Favorites") { TabItemTest(item = "tab2") },
    MagicTabItem(title = "Settings") { TabItemTest(item = "tab3") },
)

Column() {
    MagicTabLayout(
        tabIndicatorColor = Color.Blue,
        tabColor = Color.White,
        tabList = tabs,
    )
}

/* in this case TabItemTest contains bellow composable function, but you can pass your functions */
@Composable
fun TabItemTest(item: String) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = item,
            color = Color.Black,
        )
    }
}

License

    Copyright 2022 Geovani Amaral

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

You might also like...
A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose
A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small navigation library for Jetpack Compose with state saving, backstack and animations support.

A small navigation library for Jetpack Compose with state saving, backstack and animations support.

A lightweight library to help you navigate in compose with well typed functions.

TypedNavigation A lightweight library to help you navigate in compose with well typed functions. Installation: You can add this library to your projec

CustomNavigationDrawer - Custom Navigation Drawer with compose
CustomNavigationDrawer - Custom Navigation Drawer with compose

An easy sample to explore navigation component and navigation drawer from Jetpac

Navigation for compose multiplatform

Navigation for compose multiplatform

An efficient TabLayout library implemented with RecyclerView.
An efficient TabLayout library implemented with RecyclerView.

RecyclerTabLayout An efficient TabLayout library implemented with RecyclerView. Features Efficient when having many tabs Easy setup with ViewPager (sa

An efficient TabLayout library implemented with RecyclerView.
An efficient TabLayout library implemented with RecyclerView.

RecyclerTabLayout An efficient TabLayout library implemented with RecyclerView. Features Efficient when having many tabs Easy setup with ViewPager (sa

An E-Commerce android App whose frontend is implemented using Kotlin & XML files and backend/database is implemented using My SQL & PHP files

An E-Commerce android App whose frontend is implemented using Kotlin & XML files and backend/database is implemented using My SQL & PHP files

Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Android library for fluid tablayout animation as seen on Snapchat.
Android library for fluid tablayout animation as seen on Snapchat.

SnapTabLayout Show some ❤️ and star the repo to support the project This library is the implementation of TabLayout as seen on popular messaging app S

Android library for fluid tablayout animation as seen on Snapchat.
Android library for fluid tablayout animation as seen on Snapchat.

SnapTabLayout Show some ❤️ and star the repo to support the project This library is the implementation of TabLayout as seen on popular messaging app S

An Android TabLayout Lib
An Android TabLayout Lib

FlycoTabLayout 中文版 An Android TabLayout Lib has 3 kinds of TabLayout at present. SlidingTabLayout: deeply modified from PagerSlidingTabStrip. new adde

ViewPager2&TabLayout:拓展出一个选中放大效果
ViewPager2&TabLayout:拓展出一个选中放大效果

ViewPager2正式推出已经一年多了,虽然不如3那样新潮,但是也不如老前辈ViewPager那样有众多开源库拥簇,比如它的灵魂伴侣TabLayout明显后援不足,好在TabLayout自身够硬!

Android自定义控件之RecyclerView打造万能ViewPager TabLayout(仿今日头条Tab滑动、Tab多布局、indicator蠕动、自定义indicator、文字颜色渐变、自定义Fragment)
Android自定义控件之RecyclerView打造万能ViewPager TabLayout(仿今日头条Tab滑动、Tab多布局、indicator蠕动、自定义indicator、文字颜色渐变、自定义Fragment)

文章目录 GitHub:https://github.com/AnJiaoDe/TabLayoutNiubility CSDN:https://blog.csdn.net/confusing_awakening/article/details/107635695 该轮子特异功能如下: 使用方法 注意

Added support to modify text size and indicator width based on the original TabLayout.
Added support to modify text size and indicator width based on the original TabLayout.

XTabLayout——可修改选中项字体大小和指示器长度的TabLayout XTabLayout是基于design包中的TabLayout进行了功能的扩展,在保留原有功能的基础上,增加了修改选中项字体大小、修改指示器长度以及限制屏幕显示范围内显示的Tab个数。 集成步骤: 1.添加XTabLayo

A lightweight synchronizer between Android's TabLayout and RecyclerView.

TabSync A lightweight synchronizer between Android's TabLayout and RecyclerView. The behavior of the synchronizer is that as you scroll through the Re

Super Heroes Kata implemented using Jetpack Compose and Screenshot Testing.
Super Heroes Kata implemented using Jetpack Compose and Screenshot Testing.

KataSuperHeroes with Jetpack Compose We are here to learn about Jetpack Compose. We are going to use Jetpack Compose Testing Tools to interact with th

A kitchen timer implemented with Jetpack Compose
A kitchen timer implemented with Jetpack Compose

Kitchen Timer Motivation and Context To commemorate Jetpack Compose first beta release, Google launched the #AndroidDevChallenge. In the 2nd round, co

Andromeda is a open-source design language system implemented in Jetpack Compose.
Andromeda is a open-source design language system implemented in Jetpack Compose.

Andromeda Andromeda is a open-source design language system implemented in Jetpack Compose. Catalog app Table of Contents About the Project Getting St

Releases(1.0.1)
Owner
Geovani Amaral
Android developer & Open Source ❤
Geovani Amaral
Memory efficient android library for managing individual fragment backstack.

fragstack : Android library for managing individual fragment backstack. An Easy to use library for managing individual fragment back stack as Instagra

Abhishesh 21 Feb 6, 2021
Ahmad Shahwaiz 1 Jan 26, 2022
Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android - Bottom App Bar with Bottom Navigation in Jetpack compose

Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android This is simple

Shruti Patel 1 Jul 11, 2022
Android multi-module navigation built on top of Jetpack Navigation Compose

MultiNavCompose Android library for multi-module navigation built on top of Jetpack Navigation Compose. The goal of this library is to simplify the se

Jeziel Lago 21 Aug 31, 2022
🛸Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

Adriel Café 746 Sep 29, 2022
A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

Kaustubh Patange 87 Oct 3, 2022
Implementing bottom navigation in jetpack compose

Compose-Bottom-Navigation Implementing bottom navigation in jetpack compose Add the Navigation dependency Open the app's build file, found at app/buil

Steve Chacha 5 Dec 26, 2021
Jetpack Compose BottomDrawerScaffold (Material Bottom Drawer)

BottomDrawerScaffold Current Compose Version: 1.0.2 Compose BottomDrawerScaffold which implements the Material Bottom Drawer https://material.io/compo

Alexander Karkossa 9 Sep 27, 2022
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Arvind Meshram 4 Jul 6, 2022
A library that you can use for bottom navigation bar. Written with Jetpack Compose

FancyBottomNavigationBar A library that you can use for bottom navigation bar. W

Alperen Çevlik 3 Jul 27, 2022