PhilJay/CircleDisplay

CircleDisplay

Android View for displaying and selecting (by touch) values / percentages in a circle-shaped View, with animations.

Features

Core features:

• Displaying values in a beautiful circle shaped View
• Supports percentage and normal values
• Selecting / Choosing values with touch gestures (including callbacks)
• Fully customizeable
• Animated drawing (bar representig the value fills up animated)

Usage

Simply copy the CircleDisplay.java file into your project. No annoying library imports, you ONLY need that single file.

For using the CircleDisplay, define it in .xml:

    <com.philjay.circledisplay.CircleDisplay
        android:id="@+id/circleDisplay"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    CircleDisplay cd = (CircleDisplay) findViewById(R.id.circleDisplay);

or create it in code:

    CircleDisplay cd = new CircleDisplay(Context);

Style your CircleDisplay, and show values.

Styling methods:

• setColor(int color): Use this method to set the color for the arc/bar that represents the value. You can either use Color.COLORNAME as a parameter or getColor(resid).
• setStartAngle(float angle): Set the starting angle of your arc/bar. By default, it starts at the top of the view (270°).
• setAnimDuration(int millis): Set the duration in milliseconds it takes to animate/build up the bar.
• setTextSize(float size): Set the size of the text in the center of the view.
• setValueWidthPercent(float percentFromTotalWidth): Set the width of the value bar/arc in percent of the circle radius.
• setFormatDigits(int digits): Sets the number of digits to use for the value in the center of the view.
• setDimAlpha(int alpha): Value between 0 and 255 indicating the alpha value used for the remainder of the value-arc.
• setDrawText(boolean enabled): If enabled, center text (containing value and unit) is drawn.
• setPaint(int which, Paint p): Sets a new Paint object instead of the default one. Use CircleDisplay.PAINT_TEXT for example to change the text paint used.
• setUnit(String unit): Sets a unit that is displayed in the center of the view. E.g. "%" or "€" or whatever it is you want the circle-display to represent.
• setStepSize(float stepsize): Sets the stepsize (minimum selection interval) of the circle display, default 1f. It is recommended to make this value not higher than 1/5 of the maximum selectable value, and not lower than 1/200 of the maximum selectable value. For example, if a maximum of 100 has been chosen, a stepsize between 0.5 and 20 is recommended.
• setCustomText(String[] custom): Sets an array of custom Strings to be drawn instead of the actual value in the center of the CircleDisplay. If set to null, the custom text will be reset and the value will be drawn. Make sure the length of the array corresponds with the maximum number of steps (maxvalue / stepsize).

Showing stuff:

• public void showValue(float toShow, float total, boolean animated): Shows the given value. A maximumvalue also needs to be provided. Set animated to true to animate the displaying of the value.

Selecting values:

• IMPORTANT for selecting values onTouch(): Make sure to call showValue(...) at least once before trying to select values by touching. This is needed to set a maximum value that can be chosen on touch. Calling showValue(0, 1000, false) before touching as an example will allow the user to choose a value between 0 and 1000, default 0.
• setTouchEnabled(boolean enabled): Set this to true to allow touch-gestures / selecting.
• setSelectionListener(SelectionListener l): Set a SelectionListener for callbacks when selecting values with touch-gestures.

Full example:

    CircleDisplay cd = (CircleDisplay) findViewById(R.id.circleDisplay);
    cd.setAnimDuration(3000);
    cd.setValueWidthPercent(55f);
    cd.setTextSize(36f);
    cd.setColor(Color.GREEN);
    cd.setDrawText(true);
    cd.setDrawInnerCircle(true);
    cd.setFormatDigits(1);
    cd.setTouchEnabled(true);
    cd.setSelectionListener(this);
    cd.setUnit("%");
    cd.setStepSize(0.5f);
    // cd.setCustomText(...); // sets a custom array of text
    cd.showValue(75f, 100f, true);

License

Copyright 2014 Philipp Jahoda

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.