CODEWITHSUNDEEP
androidcontrols
dev_android
dev_android

Reputation: 8818

What is the name of this controls in android and how to implement this?

Android Controls

Upvotes: 3

Views: 226

Answers (1)

Sergey Glotov
Sergey Glotov

Reputation: 20346

It is non-standard control.

I've implemented it. I've done it in easy way and just draw all that I need on ImageView.

My code looks like this. It can be further improved (e.g. move sizes or definition of colors in xml layout), but you can get the idea from it. And it doesn't take into account different sizes and densities of devices' screens.

/**
* Padding between circles displaying position
*/
private static final int PADDING = 20;
/**
 * Radius of circles displaying position
 */
private static final int RADIUS = 4;
// Color of the selected element's indicator
private int activeColor;
// Color of the not selected element's indicator
private int inactiveColor;

// Call this in View constructor or in activity onCreate()
Resources res = getResources();
activeColor = res.getColor(R.color.sliderActiveColor);
inactiveColor = res.getColor(R.color.sliderInactiveColor);

/**
 * Draws position of current element.
 * Call it on fling events.
 * @param currentPosition Current element position
 */
protected void drawPosition(int currentPosition) {
    // Control height
    final int height = 20;
    // Control width
    final int bmpWidth = 200;

    // Count of all elements
    int count = viewFlipper.getChildCount();

    // Calculate first element position on canvas  
    float initialPosition = bmpWidth / 2 - (count - 1) * (PADDING / 2 + RADIUS);
    final int shift = PADDING + 2 * RADIUS;

    Bitmap bitmap = Bitmap.createBitmap(bmpWidth, height, Config.ARGB_8888);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setStyle(Style.FILL);
    Canvas c = new Canvas(bitmap);

    for (int i = 0; i < count; i++) {
        // Draw circle for each element, current element with different color
        if (i == currentPosition) {
            paint.setColor(activeColor);
        } else {
            paint.setColor(inactiveColor);
        }
        c.drawCircle(initialPosition + i * shift, PADDING / 2, RADIUS, paint);
    }

    // Draw on ImageView
    sliderImage.setImageBitmap(bitmap);
}

And the result:

Fling indicator

Upvotes: 2

Related Questions