All Projects → afollestad → Material Cab

afollestad / Material Cab

Licence: apache-2.0
🚕 An Android & Kotlin library for placing and manipulating Contextual Action Bars in your UI.

Programming Languages

kotlin
9241 projects

Projects that are alternatives of or similar to Material Cab

Material Theme
Material Theme, the most epic theme for Sublime Text 3 by Mattia Astorino
Stars: ✭ 11,093 (+1022.77%)
Mutual labels:  material-design, ux
Motion
A library used to create beautiful animations and transitions for iOS.
Stars: ✭ 1,726 (+74.7%)
Mutual labels:  material-design, ux
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-88.87%)
Mutual labels:  material-design, ux
Material
A UI/UX framework for creating beautiful applications.
Stars: ✭ 11,870 (+1101.42%)
Mutual labels:  material-design, ux
Tucao
http://www.tucao.tv/ 吐槽第三方Android客户端
Stars: ✭ 976 (-1.21%)
Mutual labels:  material-design
React Native Js Bottom Sheet
A React Native implementation of Android's bottom sheet
Stars: ✭ 29 (-97.06%)
Mutual labels:  material-design
Vue Twitter Counter
Counter component inspired in Twitter with Vue
Stars: ✭ 29 (-97.06%)
Mutual labels:  ux
Travelmantics
Firestore & firebase storage MVVM sample
Stars: ✭ 28 (-97.17%)
Mutual labels:  material-design
Animated Text Kit
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]
Stars: ✭ 984 (-0.4%)
Mutual labels:  material-design
Peel Off Animation Example Code
Example code for https://robb.is/working-on/a-peel-off-animation
Stars: ✭ 37 (-96.26%)
Mutual labels:  ux
Materialdesign Login Register Forgot Html
3 Simple forms ( login , register , forgot password ), using beautifull material design components.
Stars: ✭ 34 (-96.56%)
Mutual labels:  material-design
Vue Auth Boilerplate
🔑 Vue.js scalable boilerplate with user authentication.
Stars: ✭ 31 (-96.86%)
Mutual labels:  material-design
Baseliner
All your baseline are belong to us
Stars: ✭ 35 (-96.46%)
Mutual labels:  ux
Material Dokuwiki
A material design template for DokuWiki
Stars: ✭ 29 (-97.06%)
Mutual labels:  material-design
Gdynet
Unsupervised learning of atomic scale dynamics from molecular dynamics.
Stars: ✭ 37 (-96.26%)
Mutual labels:  material-design
Elephant
Elephant is PHPHub Community Android unofficial client, base on Material Design + MVP+RxJava+Retrofit .
Stars: ✭ 949 (-3.95%)
Mutual labels:  material-design
Curricula Ux
Currícula UX en @Laboratoria
Stars: ✭ 34 (-96.56%)
Mutual labels:  ux
Angular4 Admin Front
Admin system front based on Angular. 基于Angular4的后台管理系统(no longer maintain)
Stars: ✭ 36 (-96.36%)
Mutual labels:  material-design
Jtmaterialtransition
An iOS transition for controllers based on material design.
Stars: ✭ 966 (-2.23%)
Mutual labels:  material-design
Wanandroid jetpack
玩安卓的Jetpack版本
Stars: ✭ 33 (-96.66%)
Mutual labels:  material-design

Material Contextual Action Bar

Maven Central Android CI License

Material CAB allows you to implement a customizable and flexible contextual action bar in your app. The traditional stock CAB on Android is limited to being placed at the top of your Activity, and the navigation drawer cannot go over it. This library lets you choose its exact location, and a toolbar is used, allowing views to be be placed over and under it.

Table of Contents

  1. Gradle Dependency
  2. Getting Started
  3. Destroying the CAB

Gradle Dependency

Maven Central

Add Material CAB to your module's build.gradle dependencies block:

dependencies {

  implementation 'com.afollestad:material-cab:2.0.1'
}

Getting Started

This library attaches to your Activity by taking the place of a ViewStub in your Activity layout. For an example, this is similar to the main layout of the sample project:

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.Toolbar
      android:id="@+id/main_toolbar"
      ... />

    <ViewStub
      android:id="@+id/cab_stub"
      android:layout_width="match_parent"
      android:layout_height="?actionBarSize" />

  </FrameLayout>

  <androidx.recyclerview.widget.RecyclerView
    android:id="@+id/list"
    ... />

</LinearLayout>

You create/attach a Material CAB in an Activity like this:

class MyActivity : AppCompatActivity() {
  private var cab: AttachedCab? = null
  
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    
    // createCab is an extension on Activity/Fragment
    cab = createCab(R.id.cab_stub) {
        title(R.string.some_title)
        menu(R.menu.some_menu)
        slideDown()
    }
  }
}

R.id.cab_stub references the ViewStub, which is replaced with the CAB toolbar.

In addition, you can also pass the ID of a ViewGroup (such as a FrameLayout). The CAB will get appended as a child to that view group.


Configuration

You can configure various properties about your CAB during attachment:

val attachedCab = createCab(R.id.cab_stub) {
    title(R.string.some_title)
    title(literal = "Some Title")
    subtitle(R.string.some_subtitle)
    subtitle(literal = "Some Subtitle")
    
    titleColor(R.color.white)
    titleColor(literal = Color.WHITE)
    subtitleColor(R.color.white)
    subtitleColor(literal = Color.WHITE)
    
    popupTheme(R.style.ThemeOverlay_AppCompat_Light)
    
    contentInsetStart(R.dimen.mcab_default_content_inset)
    contentInsetStart(literal = 52)
    
    backgroundColor(R.color.dark_gray)
    backgroundColor(literal = Color.DARK_GRAY)
    
    closeDrawable(R.drawable.close_icon)
    
    menu(R.menu.cab_menu_items)

    onCreate { cab, menu ->
      ...
    }
    onSelection { item ->
      ...
      true // allow selection?
    }
    onDestroy { cab ->
      ...
      true // allow destruction?
    }
    
    animateOnCreate { view, animator -> 
      // Animate the view with its animator.
      // See the source of fadeIn(Long) or slideDown(Long) for an example.
    }
    
    animateOnDestroy { view, animator ->
      // Animate the view with its animator.
      // See the source of fadeIn(Long) or slideDown(Long) for an example.
    }
    
    // Sets animateOnCreate and animateOnDestroy to fade the CAB. Duration is optional, 250 is default.
    fadeIn(durationMs = 250)
    
    // Sets animateOnCreate and animateOnDestroy to slide the CAB up/down. Duration is optional, 250 is default.
    slideDown(durationMs = 250)
}

Destroying the CAB

The navigation icon in your CAB toolbar (far left button) will trigger this method, but you can manually call it whenever you'd like as well:

val cab: AttachedCab? = // ...

val isDestroyed = cab.isDestroyed() // true if null or destroyed
val isActive = cab.isActive() // true if not destroyed

cab.destroy()

This will invoke the onDestroy callback. If the callback returns true, the CAB is destroyed. If the CAB replaced a ViewStub, it's hidden (GONE), otherwise it's removed from the layout.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].