:speedboat: Floating navigation view for displaying a list of items dynamically on Android.

Related tags

Kotlin android kotlin navigation animation dsl android-library submarine skydoves
Overview

Submarine


License API Build Status Android Weekly Javadoc

Fully customizable floating navigation view for listing items dynamically on Android.

Including in your project

Maven Central Jtpack

Gradle

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

allprojects {
    repositories {
        mavenCentral()
    }
}

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

dependencies {
    implementation "com.github.skydoves:submarine:1.0.6"
}

Usage

Add following XML namespace inside your XML layout file.

xmlns:app="http://schemas.android.com/apk/res-auto"

SubmarineView

Here is how to implement like previews using SubmarineView.

<com.skydoves.submarine.SubmarineView
  android:id="@+id/submarineView"
  android:layout_width="50dp" // this will not affect on real view size. We can set anything.
  android:layout_height="50dp" //  this will not affect real view size. We can set anything.
  android:layout_alignParentBottom="true"
  android:layout_margin="20dp"
  android:alpha="0.8"
  app:submarine_animation="scale" // floating, dipping animation style.
  app:submarine_borderColor="@color/colorPrimaryDark" // navigation's border color.
  app:submarine_borderSize="1dp" // navigation's border thickness.
  app:submarine_circleAnchor="right" // decides where to moves the circle icon.
  app:submarine_circleBorderColor="@color/green" // circle icon's border color.
  app:submarine_circleBorderSize="1dp" // circle icon's border thickness.
  app:submarine_circleDrawable="@drawable/picasso" // circle icon's image drawable.
  app:submarine_circlePadding="2dp" // circle icon's padding value.
  app:submarine_circleSize="22dp" // circle icon's size. It decides the height or width of navigation.
  app:submarine_color="@android:color/black" // navigation's background color.
  app:submarine_duration="350" // navigation spreading duration.
  app:submarine_orientation="horizontal" // navigation spreading orientation.
/>

Float and Dip

Shows and makes disappear using the below methods.

submarineView.floats() // shows
submarineView.dips() // makes disappear

Navigate and Retreat

We can make the SubmarineView always floating (without appear, disappear actions) and navigating when we want.

Firstly, add below attributes to SubmarineView on your xml file.

app:submarine_autoDip="false"
app:submarine_autoNavigate="false"

And call floats() method before using navigates() method.

submarineView.floats()

Unfold and fold using the below methods.

submarineView.navigates() // unfold
submarineView.retreats() // fold

SubmarineItem

SubmarineItem is a data class for composing navigation list.

val item = SubmarineItem(ContextCompat.getDrawable(this, R.drawable.ic_edit))
submarineView.addSubmarineItem(item)

We can customize the icon drawable using IconForm.Builder.

val iconForm = IconForm.Builder(context)
  .setIconSize(45)
  .setIconTint(ContextCompat.getColor(context, R.color.colorPrimary))
  .setIconScaleType(ImageView.ScaleType.CENTER)
  .build()

// kotlin dsl
val iconForm = iconForm(context) {
  iconSize = 45
  iconColor = ContextCompat.getColor(context, R.color.colorPrimary)
  iconScaleType = ImageView.ScaleType.CENTER
}

val item = SubmarineItem(ContextCompat.getDrawable(this, R.drawable.ic_edit), iconForm)
submarineView.addSubmarineItem(item)

We can add SubmarineItem list, remove and clear all items.

submarineView.addSubmarineItem(item) // adds a SubmarineItem item.
submarineView.addSubmarineItems(itemList) // adds a SubmarineItem item list.
submarineView.removeSubmarineItem(item) // removes a SubmarineItem item.
submarineView.clearAllSubmarineItems() // clears all SubmarineItem items.

SubmarineItemClickListener

Interface definition for a callback to be invoked when a item is clicked.

submarineView.submarineItemClickListener = onItemClickListener

private object onItemClickListener: SubmarineItemClickListener {
  override fun onItemClick(position: Int, submarineItem: SubmarineItem) {
    // doSomething
  }
}

Circle Icon

We can customize the circle icon on the navigation.
Submarine uses CircleImageView. So you can reference the usage of it.

submarineView.circleIcon.setImageDrawable(drawable) // gets circle icon and changes image drawable.
submarineView.circleIcon.borderColor = ContextCompat.getColor(context, R.color.colorPrimary) // gets circle icon and changes border color.
submarineView.circleIcon.borderWidth = 2 // gets circle icon and changes border width.

SubmarineCircleClickListener

Interface definition for a callback to be invoked when a circle icon is clicked.

submarineView.submarineCircleClickListener = onCircleIconClickListener

private object onCircleIconClickListener: SubmarineCircleClickListener {
  override fun onCircleClick() {
    // doSomething
  }
}

Orientation and Anchor

SubmarineOrientation and CircleAnchor decide the where to spreads and where to moves.

app:submarine_circleAnchor="right" // left, right, top, bottom
app:submarine_orientation="horizontal" // horizontal, vertical
Horizontal and Left Horizontal and Right Vertical and Top Vertical and Bottom
or00 or01 or03 or02

SubmarineAnimation

SubmarineAnimation decides the animation of float and dip methods.

app:submarine_animation="scale" // scale, fade, none
SCALE FADE
or00 or05

SubmarineView Attributes

Attributes Type Default Description
orientation SubmarineOrientation Horizontal navigation's spreading orientation.
duration Long 350L navigation's spreading duration.
color Int(Color) Color.Black navigation's background color.
animation SubmarineAnimation None floating, dipping animation style.
borderSize Dimension 0f navigation's border thickness.
borderColor Int(Color) Color.Green navigation's border color.
expandSize Dimension display width size - 20dp size navigation's width or height size after expands.
radius Dimension 15dp navigation's corder radius.
autoNavigate Boolean true executes navigate method automatically after executing float method.
autoDip Boolean true executes dip method automatically after executing retreat method.
circleAnchor CircleAnchor Left decides where to moves the circle icon.
circleSize Dimension 20dp circle icon's size. It decides the height or width of navigation.
circleDrawable Drawable null circle icon's image drawable.
circleBorderSize Dimension 0f circle icon's border thickness.
circleBorderColor Int(Color) 0f circle icon's border color.
circlePadding Dimension 0f circle icon's padding width.

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐

License

Copyright 2019 skydoves (Jaewoong Eum)

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 collaborative list of awesome jetpack compose resources.

Awesome Jetpack compose A collaborative list of awesome jetpack compose resources. Featured in Content Official Documentation Conference talks Article

Naveen T P 289 Nov 15, 2022
An awesome list that curates the best KMM libraries, tools and more.

Awesome KMM Kotlin Multiplatform Mobile (KMM) is an SDK designed to simplify creating cross-platform mobile applications. With the help of KMM, you ca

Konstantin 994 Dec 28, 2022
Location-reminders - A Todo list app with location reminders that remind the user to do something when he reaches a specific location

Location Reminder A Todo list app with location reminders that remind the user t

Durim Aliu 0 Feb 1, 2022
Joker-App - List application tha make requests to a Chuck Norris Api
Joker-App - List application tha make requests to a Chuck Norris Api

Joker App About • Technologies • Features • Author • License 📚 About the Projec

Miguel S. da Silva 1 Feb 4, 2022
This sample Kotlin app shows a list of custom shoes added by the users

Shoe-store This sample Kotlin app shows a list of custom shoes added by the users. The app displays the content with RecyclerView and uses a tradition

Ana Stanescu 2 Aug 27, 2022
ListUtil.kt ListUtils - Advance list functions from kotlin standard library
ListUtil.kt ListUtils - Advance list functions from kotlin standard library

ListUtils - Advance list functions from kotlin standard library A set of utility functions to work with lists in a robust way. It is based on a patter

Zain Ul Hassan 1 May 6, 2022
An android application for generating random quotes for learning Room, Jetpack Navigation and Lifecycles, Retrofit
An android application for generating random quotes for learning Room, Jetpack Navigation and Lifecycles, Retrofit

Random-Quote-Generator An android application for generating random quotes for learning Room, Jetpack Navigation and Lifecycles, Retrofit MAD Score Te

Prasoon 2 Oct 16, 2022
Sample application to demonstrate Multi-module Clean MVVM Architecture and usage of Android Hilt, Kotlin Flow, Navigation Graph, Unit tests etc.
Sample application to demonstrate Multi-module Clean MVVM Architecture and usage of Android Hilt, Kotlin Flow, Navigation Graph, Unit tests etc.

MoneyHeist-Chars Sample application to demonstrate Multi-module Clean MVVM Architecture and usage of Android Hilt, Kotlin Flow, Navigation Graph, Room

Hisham 20 Nov 19, 2022
Multi module architecture Android template project using MVVM, Dagger-Hilt, and Navigation Components
Multi module architecture Android template project using MVVM, Dagger-Hilt, and Navigation Components

ModularAppTemplate An Android template project following a multi module approach with clean architecture. It has been built following Clean Architectu

Mbuodile Obiosio 7 May 23, 2022
Comments
  • Feature request : Define a tooltip text for each SubmarineItem

    Feature request : Define a tooltip text for each SubmarineItem

    My users would like know the meaning of each item by having a tooltip text displayed on long-press (same as android:tooltipText)

    Would it be possible to define a tooltip text for each item we add ?

    opened by RobbWatershed 6
  • Request : setDismissWhenTouchOutside

    Request : setDismissWhenTouchOutside

    Would it be possible to add a feature similar to Balloon's setDismissWhenTouchOutside ?

    I'm using Submarine as a micro menu that users can unfold and then either select or choose to ignore. The natual gesture for doing that is to touch outside of the menu... just like what you implemented on Balloon 🙃

    opened by RobbWatershed 4
  • OnClick doesn't work when a tooltip is defined

    OnClick doesn't work when a tooltip is defined

    Please complete the following information:

    • Library Version [e.g. v2.0.6]
    • Affected Device(s) Huawei 8X (Android 10) / Emulator (Android 8.1)

    Describe the Bug:

    When creating a SubmarineItem with a tooltip, its ItemClickListener doesn't activate when the user taps the item

    <com.skydoves.submarine.SubmarineView
        android:id="@+id/information_micro_menu"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:alpha="0.8"
        app:layout_constraintBottom_toBottomOf="@id/viewer_info_btn"
        app:layout_constraintStart_toStartOf="@id/viewer_info_btn"
        app:layout_constraintEnd_toEndOf="@id/viewer_info_btn"
        app:submarine_animation="scale"
        app:submarine_circleAnchor="bottom"
        app:submarine_color="@android:color/black"
        app:submarine_circleSize="14dp"
        app:submarine_expandSize="170dp"
        app:submarine_duration="250"
        app:submarine_orientation="vertical" />

    binding.controlsOverlay.informationMicroMenu.setSubmarineItemClickListener((p, i) -> onInfoMicroMenuClick(p));
binding.controlsOverlay.informationMicroMenu.addSubmarineItem(
	new SubmarineItem(ContextCompat.getDrawable(requireContext(), R.drawable.ic_book)) // <-- onClick works
);
binding.controlsOverlay.informationMicroMenu.addSubmarineItem(
         new SubmarineItem(ContextCompat.getDrawable(requireContext(), R.drawable.ic_page), null, getResources().getString(R.string.page_details)) // <-- onClick is never called
);

    Expected Behavior:

    ItemClickListener is always called when tapping the item, regardless of the presence of a tooltip.

    opened by RobbWatershed 2
  • Calling SubmarineView.float from Java

    Calling SubmarineView.float from Java

    For us mortals who still use Java instead of Kotlin, naming a method float confuses the compiler a lot,as float is a keyword referring to the primitive type of the same name.

    Any tip other than using reflection to make that work properly ?

    opened by RobbWatershed 2
Releases(1.0.7)
Owner
Jaewoong Eum
Android software engineer. Digital Nomad. Open Source Contributor. ❤️ Love coffee, music, magic tricks and writing poems. Coffee Driven Development.
Jaewoong Eum
GitHub
Handy states for dynamically obtained data.

Resource Handy states for dynamically obtained data. Table of contents Problem to solve Reasons to use Artifacts resource-plain resource-context Insta

Misha Malasai 6 Dec 12, 2022
💡🚀⭐️ A generalized adapter for RecyclerView on Android which makes it easy to add heterogeneous items to a list

Mystique is a Kotlin library for Android’s RecyclerView which allows you to create homogeneous and heterogeneous lists effortlessly using an universal

Rahul Chowdhury 48 Oct 3, 2022
A Clean Architecture App that uses clean Architecture (app, presentation, domain, data) packages to use coffee items API using MVVM Architecture, Coroutines, Retrofit2, Pagination, Live Data, Data Binding, Hilt , SOLID Principles , Navigation Component , RoomDb.

E-CommerceApp A Clean Architecture App that uses clean Architecture (app, presentation, domain, data) packages to use coffee items API using MVVM Arch

Ahmed Maged 2 Aug 31, 2022
Clean MVVM with eliminating the usage of context from view models by introducing hilt for DI and sealed classes for displaying Errors in views using shared flows (one time event), and Stateflow for data

Clean ViewModel with Sealed Classes Following are the purposes of this repo Showing how you can remove the need of context in ViewModels. I. By using

Kashif Mehmood 22 Oct 26, 2022
:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion

NAVIGATION TOOLBAR Navigation toolbar is a Kotlin slide-modeled UI navigation controller. We specialize in the designing and coding of custom UI for M

Ramotion 804 Dec 9, 2022
Android RecyclerView Adapter with nested items & expand/contract functionality

AccordionRecycler Android RecyclerView Adapter with nested items & expand/contract functionality With AccordionRecycler you can easily create awesome

Fanis Veizis 17 Aug 18, 2022
This server uses json files to model items, entities and more.

Design Server | Simple server to design items, entities or more About this project/server: This server uses json files to model items, entities and mo

Phillipp Glanz 5 Jan 7, 2022
UserLoc - A API call using Retrofit to obtain list of users details and show on UI in recycler view and google map

UserLoc This uses a API call using Retrofit to obtain list of users details and

Rohit Kumar 0 Jun 22, 2022
Blinking-image-view - A variant of Android View that blinks only the source image (not the background)

Blinker View for Android What is this? Blinker View is an Android View that blinks a given drawable. Yes, it's that simple. Place it in your layout an

Milos Marinkovic 4 Jul 29, 2020
Name of your app is an android app that allows building a todo list

Project 1 - SimpleToDo Name of your app is an android app that allows building a todo list and basic todo items management functionality including add

Javier Nazario 0 Nov 23, 2021