How can i position my views like this? onLayout

Question

Im trying to position my views (just the dots pattern) like in this photo with no success. can someone please help me figure out how i should do it using onLayout? Thanks.

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    final int count = getChildCount();
    int curWidth, curHeight, curLeft, curTop, maxHeight;

    //get the available size of child view
    int childLeft = this.getPaddingLeft();
    int childTop = this.getPaddingTop();
    int childRight = (int) getResources().getDimension(R.dimen.circle_width) - this.getPaddingRight();
    int childBottom = (int) getResources().getDimension(R.dimen.circle_width) - this.getPaddingBottom();
    int childWidth = childRight - childLeft;
    int childHeight = childBottom - childTop;

    maxHeight = 0;
    curLeft = childLeft;
    curTop = childTop;
    //walk through each child, and arrange it from left to right
    for (int i = 0; i < count; i++) {
        View child = getChildAt(i);
        if (child.getVisibility() != GONE) {
            //Get the maximum size of the child
            child.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.AT_MOST),
                    MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.AT_MOST));
            curWidth = child.getMeasuredWidth();
            curHeight = child.getMeasuredHeight();

            //wrap is reach to the end
            if (curLeft + curWidth >= childRight) {
                curLeft = childLeft;
                curTop += maxHeight;
                maxHeight = 0;
            }

            //do the layout
            child.layout(curLeft, curTop, curLeft + curWidth, curTop + curHeight);

            //store the max height
            if (maxHeight < curHeight)
                maxHeight = curHeight;
            curLeft += curWidth;
        }
    }
}

score 0 · Answer 1 · answered Mar 27 '17 at 18:51

0

firstly you shouldn't do that inside onLayout, its called multiple times and you probably don't need this. why not preparing inside constructor or if dots just draw inside onDraw, will be more efficient than adding lot of Views with only simple bitmap. maybe show some screen what you have, is there should be any animation?

answered Mar 27 '17 at 18:51

snachmsm

17,866
3
32
74

the layout supposed to be a pattern lock. i just need to draw this 3 dots and connect between them when i want to approve my action like in this photo. the photo is actually the wanted result after i do the pattern. – Lior Dahan Mar 27 '17 at 19:00
do you want a static image without interaction with `MotionEvent`s or whole drawing lines through other dots animation/interaction? – snachmsm Mar 27 '17 at 19:21
its supposed do function like a LockPattern. when i press on image the color should be white (i change the drawable) and draw a line in a V pattern to approve my action. i want the user to be able to draw the line only between the dots. – Lior Dahan Mar 28 '17 at 09:00
so you have to override [onInterceptTouchEvent and/or dispatchTouchEvent](http://stackoverflow.com/questions/9586032/android-difference-between-onintercepttouchevent-and-dispatchtouchevent) and using overriden `onDraw` method [draw your lines on `Canvas`](http://stackoverflow.com/questions/16650419/draw-in-canvas-by-finger-android) according to `MotionEvent`s position. It's bigger case, solid piece of code needed to work. For sure `onLayout` isn't best place to put drawing code – snachmsm Mar 28 '17 at 09:10

Remario · Answer 2 · 2017-03-27T19:04:43.387

0

Its easy actually you can build it in XML layout. In it's simplest representation it just three dot view that are vertically displaced from each other. Define a Linear Layout with vertical orientation with weight sum = 3 , layout three view with weight = 1. Then use layout margin to shift each view relative to each other. A perfect layout for such a scenario would be Contraint Layout which is more flexible.

Here is a great tutorial to incorporate custom gesture handling,http://fieldguide.gizmodo.com/how-to-add-customized-gesture-controls-to-your-android-1705180921

edited Mar 27 '17 at 19:04

answered Mar 27 '17 at 18:53

Remario

3,813
2
18
25

also do not perform graphical such as that in onLayout, try constructors. – Remario Mar 27 '17 at 18:54
can i implement Pattern Lock on a XML layout? i need to approve action with this pattern. – Lior Dahan Mar 27 '17 at 18:57
what you mean exactly layout wise, if yes then certainly. – Remario Mar 27 '17 at 19:02
you could add super powers to it, by enabling gestures on screen – Remario Mar 27 '17 at 19:03
simple swipe gestures like a pattern – Remario Mar 27 '17 at 19:03
okay, i built a layout like i needed to. now im trying to figure out how to implement the gesture detecture and draw the line between the views and how to set the correct pattern. any ideas? – Lior Dahan Mar 28 '17 at 08:12

How can i position my views like this? onLayout

2 Answers2