-
-
Notifications
You must be signed in to change notification settings - Fork 330
Usage
if you want to add Right to Left language (like Arabic) just use app:sv_textRightToLeft="true" attribute in XML, and speedometerTextRightToLeft = true in code.
look at the text in this image:
unit Text always attached to speed Text, you can change position using sv_speedTextPosition Attribute, in your XML:
app:sv_speedTextPosition="TOP_LEFT"in the Code:
speedometer.speedTextPosition = Gauge.Position.CENTERthis image show you where could put speed-unit Text:
also you can use sv_unitUnderSpeedText="true".
just for Speedometer family.
you can change the default start degree 135 and End Degree 405 easily.\
in XML use app:sv_startDegree and app:sv_endDegree attributes :
app:sv_startDegree="180"
app:sv_endDegree="360"in code use setStartDegree(int) and setEndDegree(int) methods :
speedometer.setStartDegree(180)
speedometer.setEndDegree(270)just for Speedometer family.
since version 1.5.0 you can add any number of sections, whenever you want, fully customized.
lets start with easy way to add 5 sections equal to each others:
speedometer1.makeSections(5, Color.CYAN, Style.BUTT)
// this is very simple way to add sections,
// if your speedometer has 0-100 speed rage
// that means every section has '20' speed-unit in space.
// you can change colors to every:
speedometer1.sections[0].color = Color.GREEN
speedometer1.sections[1].color = Color.BLUE
speedometer1.sections[2].color = Color.RED
...here you noticed that we add Style.BUTT style to our section,
there is also Style.ROUND style, try it yourself.
to get all sections call speedometer.sections
sections is an array of Section that hold all your sections, it is read-only don't try to add new section to the list immediately by call .speedometer.sections.add(Section(..))
to add new section to existing sections, use this:
// .9f(90%) start of the section.
// 1f(100%) ends of the section.
val myNewSection = Section(.9f, 1f, Color.BLUE, speedometer2.speedometerWidth, Style.ROUND)
speedometer2.addSections(myNewSection)first we create Section with its constructor, 1st parameter is startOffset it must be between [0-1] it means [0% to 100%], in our example 90%, 2nd parameter is endOffset.
then the color, and section width, finaly section style.
be careful, if there is any section in speedometer2 exists between [(90%)->(100%)] you will have IllegalArgumentException cause of the conflict between tow sections.
lets have an example to have a speedometer with sections [10%, 40%, 75%, 90%] and we don't need any section between 90%->100%.
// first remove all old sections.
speedometer3.clearSections()
speedometer3.addSections(Section(0f, .1f, Color.LTGRAY)
, Section(.1f, .4f, Color.YELLOW)
, Section(.4f, .75f, Color.BLUE)
, Section(.75f, .9f, Color.RED))
// be aware, we didn't add Section(.9f, 1f, ..) because we need it empty.to remove particular section call speedometer.removeSection(section).
you can get a callback when indicator move to new section with OnSectionChangeListener.\
when you want to change the color or speedOffset to a particular section, you can immediately call speedometer.sections[0].color =.. without tack care of invalidate the SpeedView, because it's observing any change to sections and do auto invalidate.
and for that reason, you mustn't add one section to two speedometers.
just for Speedometer family.
if you want to change indicator's position, or make semi-circular Gauge ...., you need to change sv_speedometerMode, this image tell you what sv_speedometerMode can do:
change speedometerMode in XML:
app:sv_speedometerMode="TOP"in the Code:
speedometer.speedometerMode = Speedometer.Mode.TOP_LEFTsince v1.2.0, you can add light effect behind the indicator like this:
if you like to use this effect just use sv_withIndicatorLight="true" and you can customize its color sv_indicatorLightColor="#BB0000FF" or in your code by its methods.
for Light Effect Color add some transparent to make the effect as light (recommend #BB in hex).
just like AwesomeSpeedometer, since V 1.1.5 you can add labels at each tick points.
simply, you must specify the number of ticks and the library will calculate its values and positions.
in XML use sv_tickNumber attribute like this:
<com.github.anastr.speedviewlib.SpeedView
android:id="@+id/speedometer"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:sv_tickNumber="6"/>in your Code:
speedometer.tickNumber = 10by defult, AwesomeSpeedometer has TickNumber = 9.
you can add custom ticks at custom speed value, like so:
// 0% 25% 50% 75% 100%
speedometer.ticks = arrayListOf(0f, .25f, .5f, .75f, 1f)ticks expect a list of offset points in range [0f-1f].
if your min-max speed is 0-100 and you want custom tick at 50 simply add .5f to ticks.
you don't have to add them in order, for Ex (0f, .7f, .5f, .8f) is fine.
you can add simple label to each tick in your speedometer, just use OnPrintTickLabel interface.
for Example: we want to change tick 1000 to 1 km.
speedometer.onPrintTickLabel = { tickPosition: Int, tick: Float ->
if (tick >= 1000)
String.format(Locale.getDefault(), "%.1f Km", tick / 1000f)
else
null
// null means draw default tick label.
// also you can return SpannableString to change color, textSize, lines...
}this will draw n M before 1000 value, and n Km when value>=1000.
if you don't like its position you can change padding value easily using sv_tickPadding="10dp",
or speedometer.tickPadding = 15 in code.
We recommended to leave it at default value.
if you have any idea, image, template please open new issue and give me the image , and i well try to add it to the Library, it must be possible to drawn, if you like this library you can support it.