• Stars
    star
    152
  • Rank 244,685 (Top 5 %)
  • Language
    Kotlin
  • Created over 7 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

ColorMatchTabsAndroid

License Yalantis

Check this project on dribbble

Requirements

  • Android SDK 16+

Usage

Add to your root build.gradle:

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

Add the dependency:

dependencies {
	compile 'com.github.Yalantis:ColorMatchTabsAndroid:v0.0.1'
}

How to use this library in your project?

To use ColorMatchTabs, add ColorMatchTabLayout to the XML layout of your activity. Also, please note that a ViewPager is also added, which should be attached to ColorMatchTabs in the activity below through the following code:

<RelativeLayout
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">
 
	<com.yalantis.colormatchtabs.colormatchtabs.colortabs.ColorMatchTabLayout
	   android:id="@+id/tabLayout"
	   android:layout_width="match_parent"
	   android:layout_height="wrap_content"
	   android:layout_below="@+id/toolbar"
	   android:background="?attr/colorPrimary"
	   android:elevation="6dp"
	   android:minHeight="?attr/actionBarSize"
	   android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
 
	<android.support.v4.view.ViewPager
	   android:id="@+id/pager"
	   android:layout_width="match_parent"
	   android:layout_height="fill_parent"
	   android:layout_below="@id/tabLayout" />
 
</RelativeLayout>

In your onCreate() method bind the ColorMatchTabs and add to it tabs using the .addTab() method.

colorMatchTabLayout.addTab(ColorTabAdapter.createColorTab(colorMatchTabLayout, tabName, selectedColor, icon))

If you use an OnPageChangeListener with your ViewPager, you should set ColorTabLayoutOnPageChangeListener(colorMatchTabLayout) in the ViewPager rather than on the pager directly.

viewPager.addOnPageChangeListener(ColorTabLayoutOnPageChangeListener(tabLayout))

Customization

One of the most important feature of every custom view is the ability to customize its look as needed. By calling the following methods (or attributes), you can customize ColorMatchTabLayout as you need.

// to change unselected tab color you can change background color for all layout
setBackgroundColor(color: Int) 
 
//Change selected tab color, icon and title of tab:
tab.selectedColor = color : Int
tab.icon = icon : Drawable
tab.text = iconTitle : String
 
//or change all these parameters
ColorTabAdapter.createColorTab(colorMatchTabLayout, tabName, selectedColor, icon)
 
//Set selected ColorTab width in portrait and horizontal orientation
selectedTabWidth, selectedTabHorizontalWidth
 
addArcMenu(arcMenu)

To change the selected tab, you can use the methods below:

//Set selected tab
selectedTabIndex: Int
selectedTab: Int
 
//Get the position of the current selected tab
selectedTabPosition : Int
 
//Return ColorTab at the specified index 
colorMatchTabLayout.getTabAt(index : Int)

ArcMenu is an addition to the ColorMatchTabLayout. To use ArcMenu, add it to the XML layout of your activity with the color tabs as shown below:

<RelativeLayout 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="com.yalantis.colormatchtabs.colortabs.MainActivity">
 
   <com.yalantis.colormatchtabs.colormatchtabs.colortabs.ColorMatchTabLayout
       android:id="@+id/colorMatchTabLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_below="@+id/toolbar"
       android:background="?attr/colorPrimary"
       android:elevation="6dp"
       android:minHeight="?attr/actionBarSize"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
 
   <android.support.v4.view.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="match_parent"
       android:layout_height="fill_parent"
       android:layout_below="@id/colorMatchTabLayout" />
 
   <com.yalantis.colormatchtabs.colormatchtabs.menu.ArcMenu
       android:id="@+id/arcMenu"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_centerHorizontal="true" />
 
</RelativeLayout>

After that, bind your ArcMenu and add it to ColorMatchTabLayout:

colorMatchTabLayout.addArcMenu(arcMenu)

Remember It’s important to note that the ArcMenu doesn’t work as an independent element. A user needs to add this component to ColorMatchTabLayout. Also, this part of the animation works only with 3–5 tabs in ColorMatchTabLayout. With a different number of tabs, you get an InvalidNumberOfTabsException.

Let us know!

We’d be really happy if you could send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding the animation.

P.S. We’re going to publish more awesomeness wrapped in code and a tutorial on how to make UI for iOS (Android) better than better. Stay tuned!

License

The MIT License (MIT)

Copyright © 2017 Yalantis, https://yalantis.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

More Repositories

1

uCrop

Image Cropping Library for Android
Java
11,656
star
2

Koloda

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.
Swift
5,268
star
3

Side-Menu.Android

Side menu with some categories to choose.
Java
5,218
star
4

Phoenix

Phoenix Pull-to-Refresh
Java
4,024
star
5

Context-Menu.Android

You can easily add awesome animated context menu to your app.
Kotlin
3,841
star
6

StarWars.iOS

This component implements transition animation to crumble view-controller into tiny pieces.
Swift
3,761
star
7

FoldingTabBar.iOS

Folding Tab Bar and Tab Bar Controller
Objective-C
3,672
star
8

Persei

Animated top menu for UITableView / UICollectionView / UIScrollView written in Swift
Swift
3,451
star
9

GuillotineMenu

Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
Swift
2,919
star
10

GuillotineMenu-Android

Neat library, that provides a simple way to implement guillotine-styled animation
Java
2,735
star
11

Side-Menu.iOS

Animated side menu with customizable UI
Swift
2,714
star
12

Segmentio

Animated top/bottom segmented control written in Swift.
Swift
2,504
star
13

DisplaySwitcher

Custom transition between two collection view layouts
Swift
2,326
star
14

Euclid

User Profile Interface Animation
Java
2,237
star
15

Horizon

Horizon - Simple visual equaliser for Android
Java
2,208
star
16

Pull-to-Refresh.Rentals-iOS

This project aims to provide a simple and customizable pull to refresh implementation. Made in Yalantis
Objective-C
2,143
star
17

StarWars.Android

This component implements transition animation to crumble view into tiny pieces.
Java
1,941
star
18

PullToMakeSoup

Custom animated pull-to-refresh that can be easily added to UIScrollView
Objective-C
1,924
star
19

Context-Menu.iOS

You can easily add awesome animated context menu to your app.
Objective-C
1,843
star
20

FlipViewPager.Draco

This project aims to provide a working page flip implementation for usage in ListView.
Java
1,839
star
21

Taurus

A little more fun for the pull-to-refresh interaction.
Java
1,671
star
22

SearchFilter

Implementing Search Filter Animation in Kotlin for Quora Meets LinkedIn, Our App Design Concept
Kotlin
1,657
star
23

ToDoList

Micro-Transitions for Smooth Android To-Do List Animations
Java
1,621
star
24

JellyToolbar

Kotlin
1,491
star
25

pull-to-make-soup

Custom animated pull-to-refresh that can be easily added to RecyclerView
Java
1,446
star
26

ColorMatchTabs

This is a Review posting app that let user find interesting places near them
Swift
1,382
star
27

Multi-Selection

Multiselection Solution for Android in Kotlin
Kotlin
1,373
star
28

PixPic

PixPic, a Photo Editing App
Swift
1,337
star
29

PullToRefresh

This component implements pure pull-to-refresh logic and you can use it for developing your own pull-to-refresh animations
Swift
1,250
star
30

Preloader.Ophiuchus

Custom Label to apply animations on whole text or letters.
Objective-C
882
star
31

CameraModule

Simple camera module for android applications
Java
684
star
32

ForceBlur

ForceBlur Animation for iOS Messaging Apps
Swift
670
star
33

EatFit

Eat fit is a component for attractive data representation inspired by Google Fit
Swift
655
star
34

FastEasyMapping

A tool for fast serializing & deserializing of JSON
Objective-C
553
star
35

PullToMakeFlight

Custom animated pull-to-refresh that can be easily added to UIScrollView
Swift
499
star
36

OfficialFoldingTabBar.Android

Kotlin
451
star
37

Watchface-Constructor

This is simple watchface constructor demo
Java
279
star
38

CloudKit-Demo.Swift

Swift
253
star
39

Koloda-Android

Kotlin
248
star
40

e-contact-android

Java
223
star
41

FitTrack

Concept of a fitness app.
Swift
168
star
42

iOS-Guidelines

iOS Guidelines used in Yalantis ;)
145
star
43

CloudKit-Demo.Objective-C

Objective-C
135
star
44

AppearanceNavigationController

Example with advanced configuration of the navigation controller's appearance
Swift
98
star
45

GLata

Android library for creating OpenGL animations
Kotlin
84
star
46

VishnuCalendar

Kotlin
75
star
47

YACalendar

Yalantis Calendar
Swift
72
star
48

e-contact-ios

Swift
49
star
49

APIClient

Swift
40
star
50

YALConsole

Objective-C
40
star
51

DBClient

Swift
28
star
52

go-config

Go
8
star
53

android-styler

Java
5
star
54

go-pool

Go
4
star
55

go-monitoring

Go
2
star
56

go-influx

Go
2
star
57

Result

Swift
2
star
58

go-graphql

Go
1
star