Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Android Controls

like image 259
dev_android Avatar asked Jan 21 '26 00:01

dev_android


1 Answers

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

like image 197
Sergey Glotov Avatar answered Jan 23 '26 15:01

Sergey Glotov