Allocating ByteBuffer with allocate() or allocateDirect()

Question

I am trying to fill a ByteBuffer with some data to simulating the process of stitching to YUV_420_888 image's ByteBuffer. When I allocate it with allocate() and put data into it like this:

int width = 16;
int height = 16;
int combinedSize = width * height * 3 / 2;
ByteBuffer combinedBuffer = ByteBuffer.allocate(combinedSize);
for(int i = 0; i < height * 3 / 2; i++) {
    int curLine =  i * width;
    for(int j = 0; j < width / 2; j++) {
        combinedBuffer.put(curLine + j, (byte) 125);
    }
}

which means I want to fill the left part of the Bytebuffer with fixed value 125 and do nothing to the right part, I get correct Bytebuffer, but, when I just replace allocate with allocateDirect, my data is wrong, as is shown in the picture. The left on the picture shows the data I got using allocateDirect and the right shows the data I got using allocate. The format of it is YUV420. allocate() VS allocateDirect() Moreover, when I use array().length to get the size of the Bytebuffer,alloacte method got 384 which equals 16 * 16 * 3 / 2 but alloacteDirect got 391 which has 7 Bytes more.

I use ByteBuffer.array() to get the data and put it into a file. I want to know, do they have difference which can influence the data I put?