Custom UI control for android which is showing data as a segments and a value inside them.

Overview

Segmented Bar View for Android

Custom UI control for android which is showing data as a segments and a value inside them.

Screenshots

Imgur

Install

From repositories

Add jcenter to project repositories

repositories {
    jcenter()
}

Add compile line to project dependencies

compile 'mobi.gspd:segmentedbarview:1.1.6@aar'

Local aar

Download

Put aar into app/libs folder. Add flatDir in build.gradle

repositories {
    mavenCentral()
    flatDir {
        dirs 'libs'
    }
}

And add dependency

compile 'mobi.gspd:segmentedbarview:1.1.6@aar'

Usage

Builder

SegmentedBarView barView = SegmentedBarView.builder(this)
                           .segments(segments)
                           .value(5.25f)
                           .unit("ml<sup>2</sup>")
                           .showDescriptionText(true)
                           .sideStyle(SegmentedBarViewSideStyle.ANGLE)
                           .build();

Constructor and setters

SegmentedBarView barView = new SegmentedBarView(this);
barView.setValueWithUnit(4.96f, "10<sup>12</sup>/l"); /* You can use Html tags here in unit to support superscript and subscript */
barView.setSegments(segments);

Within xml layout

<mobi.gspd.segmentedbarview.SegmentedBarView
        android:id="@+id/bar_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        app:sbv_empty_segment_text="No segments"
        app:sbv_segment_gap_width="10dp"
        app:sbv_segment_text_size="20sp"
        app:sbv_show_description_text="true"
        app:sbv_side_style="angle"
        app:sbv_side_text_style="twoSided"
        app:sbv_value_sign_height="30dp"
        app:sbv_value_sign_round="8dp"
        app:sbv_value_sign_width="30dp" 
/>

Create segments

In any case you should create segments list to put in view.

List<Segment> segments = new ArrayList<>();
Segment segment = new Segment(0, 4.5f, "Low", Color.parseColor("#EF3D2F"));
segments.add(segment);
Segment segment2 = new Segment(4.5f, 6.5f, "Optimal", Color.parseColor("#8CC63E"));
segments.add(segment2);
Segment segment3 = new Segment(6.5f, 20f, "High", Color.parseColor("#EF3D2F"));
segments.add(segment3);

Each segment contains min and max value, color, description text (optional), custom text (optional). Value sign position is calculated automatically in these intervals.

Also there can be segments with no min and max. Then you should set valueSegment field of SegmentedBarView, it's just an index of segment to show value sign over.

Customization

Xml attributes

Here is list of xml attributes and their defaults.

  • sbv_show_description_text - boolean
    • false (default)
  • sbv_show_segment_text - boolean
    • true (default)
  • sbv_value_sign_background - color
    • #7492E2 (default)
  • sbv_empty_segment_background - color
    • #858585 (default)
  • sbv_description_text_size - dimension
    • 14sp (default)
  • sbv_value_text_size - dimension
    • 14sp (default)
  • sbv_segment_text_size - dimension
    • 14sp (default)
  • sbv_bar_height - dimension
    • 24dp (default)
  • sbv_value_sign_height - dimension
    • 32dp (default)
  • sbv_value_sign_width - dimension
    • 72dp (default)
  • sbv_arrow_height - dimension
    • 5dp (default)
  • sbv_arrow_width - dimension
    • 10dp (default)
  • sbv_description_box_height - dimension
    • 24dp (default)
  • sbv_value_sign_round - dimension
    • 4dp (default)
  • sbv_side_style - enum
    • normal (default)
    • rounded
    • angle
  • sbv_side_text_style - enum
    • oneSided (default)
    • twoSided

All of these also can be set via setters of SegmentedBarView class.

License

The MIT License (MIT)

Copyright (c) 2015 gspd.mobi

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.

This code was produced for Clinishare Ltd. This code is published as open-source with the permission of Clinishare Ltd. www.clinishare.net

You might also like...
Compose app with dummy data which serves as a playground to try out new things in the Android world.
Compose app with dummy data which serves as a playground to try out new things in the Android world.

Music Event Manager Compose app with dummy data which serves as a playground to try out new things in the Android world. Description The app primarily

This project created just for help developer who want to and ability of read VISA, UNION PAY, HUMO, ATTO and some other cards data read.

If you enjoy my content, please consider supporting what I do. Thank you. By me a Coffee To get a Git project into your build: Step 1. Add the JitPack

a custom view that provides dragged and scaled
a custom view that provides dragged and scaled

DragScaleCircleView A custom imageview that provides the circle window can be dragged and scaled, crop image. How does it look? Why? Sometimes need to

Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle!
Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle!

LabeledSeekSlider Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle! Minimum target

DailyTags - a flexible markdown library that supports custom tags and markups
DailyTags - a flexible markdown library that supports custom tags and markups

The library parses a given markup into rich text for Jetpack Compose. DailyTags comes with Markdown and HTML support by default (please, see the supported features) and is very easy to extend to support custom markups.

 🗨️ Beautiful Dialog is a Simple and Beautiful custom dialog
🗨️ Beautiful Dialog is a Simple and Beautiful custom dialog

Beautiful Dialog 🗨️ Beautiful Dialog is a Simple and Beautiful custom dialog. Screenshots Including in your project Gradle Add below codes to your ro

Useful library to use custom fonts in your android app
Useful library to use custom fonts in your android app

EasyFonts A simple and useful android library to use custom fonts in android apps without adding fonts into asset/resource folder.Also by using this l

Custom android music player view.
Custom android music player view.

InteractivePlayerView Custom android music player view. Screen Check it on youtube Usage(XML) Define it in your xml file. co.mobiwise.library.Intera

Android Library for Custom Switches.
Android Library for Custom Switches.

Android Library for Custom Switches.

Comments
  • Segmented Padding in the end

    Segmented Padding in the end

    I would like to ask about some sort of unexpected behavior. The library appears to have some invisible padding in the end, so when I set it let's say at 200dp, it 'builds' until 150dp and the other 50dp is invisible/transparent, so the alignment with other elements is impossible. Do you have any idea of what should I do? In order to validate it, I used Android's see bounds from settings-programming section.

    Thanks a lot for your time and for delivering your library, it is pretty good!!

    opened by fpasxos 0
  • Different width of segments

    Different width of segments

    Hello everyone, Is there a possible way to customize the width of each particular segment? For example, I have a bar that has 3 segments and I would like the left segment to have, let's say 5dp, the middle one 12 and the right one 10. Is there a feature that implements this functionallity or if not, is there a possibillity to integrate it (The 'solution' of adding 3 seperate bars, does not fit me :/ ) ? Thanks in advance!! :)

    opened by fpasxos 1
Owner
GSPD
We Create Value for Startups, SMEs, and Investors
GSPD
ExpandableSelector is an Android library created to show a list of Button/ImageButton widgets inside a animated container which can be collapsed or expanded.

ExpandableSelector ExpandableSelector is an Android library created to show a list of Button/ImageButton widgets inside a animated container which can

Karumi 699 Nov 19, 2022
TabSlider - An expanding slider widget which displays selected value

TabSlider - An expanding slider widget which displays selected value

null 1 Apr 20, 2022
Android library for creating an expandable to full screen view inside a viewgroup composition.

Expandable Panel Android Library Check ExpandablePanel Demo application on GooglePlay: Details This Android library implements the expand by sliding l

Jorge Castillo 422 Nov 10, 2022
GIFView is a library for showing GIFs in applications

GIFView GIFView is a library for showing GIFs in applications. Setup In your project's build.gradle file: allprojects { repositories { ...

Tzlil Gavra 20 Apr 19, 2022
Pinterest like awesome menu control for Android

Pinterest like awesome menu control for Android DEMO NOTE Any pull request is available. HOW TO USE /** * PinterestView'layoutPar

Bruce too 421 Nov 21, 2022
Android layout decorators : Injecting custom attributes in layout files, Using decorators to get rid of unnecessary class explosion with custom views

Decor Decor is a library that applies decorators to Android layout with additional attributes without the need to extend and create a custom View for

Mouna Cheikhna 304 Nov 25, 2022
Name UI states, navigate between them, remember where you've been.

Deprecated Flow had a good run and served us well, but new use is strongly discouraged. The app suite at Square that drove its creation is in the proc

Square 2.8k Dec 29, 2022
Sentinel is a simple one screen UI which provides a standardised entry point for tools used in development and QA alongside device, application and permissions data.

Sentinel Sentinel is a simple one screen UI that provides standardised entry point for tools used in development and QA alongside device, application

Infinum 29 Dec 12, 2022
IconicDroid is a custom Android Drawable which allows to draw icons from several iconic fonts.

IconicDroid IconicDroid is a custom Android Drawable which allows to draw icons from several iconic fonts. Try out the sample application on the Googl

Artur Termenji 387 Nov 20, 2022
A custom view, in which device contact list is displayed

Getting Started This repository contains a custom view, in which device contact list is displayed Implementation Go to Settings.gradle, inside reposit

Ankit Kumar 2 May 7, 2022