Android - OpenGL-ES-2.0 alpha blending with ZOrderOnTop

Question

My problem is the following: I am displaying a GLSurfaceView with ZOrderOnTop set to true and with a simple Yellow background.

<com.example.MyGLSurfaceView
    android:id="@+id/glid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFF00" /> <!-- yellow background --!>

In the MyGLSurfaceView I set up the view as following:

setEGLContextClientVersion(2);
setEGLConfigChooser(8, 8, 8, 8, 0, 0);
getHolder().setFormat(PixelFormat.TRANSLUCENT);
setPreserveEGL();

setZOrderOnTop(true);
setRenderer(renderer); // variable was initialized

What I am trying to achieve is: To animate 2 texture on each other. 1st texture has 1f alpha, the second is animation from 0f to 1f over time (5000 ms in this case). For the simplicity of the example, I made the textures full white (1st) and full black (2nd), both with alpha values 255 in the file.

My onSurfaceCreated method (The calls are from the GLES20 class using static import):

@Override
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
    glClearColor(1f, 0f, 1f, 1f);// Pink clear color

    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    ...
}

I set the clear color to pink for testing purposes. I'm also using a vertex and fragment shader, which were also loaded in onSurfaceCreated. The vertex shader is quite irrelevant in this case (I think) so this is my fragment shader:

precision mediump float;

uniform sampler2D u_TextureUnit;
uniform float u_alpha;

varying vec2 v_TextureCoordinates;

void main()
{
    gl_FragColor = texture2D(u_TextureUnit, v_TextureCoordinates);
    gl_FragColor[3] *= u_alpha; 
}

I set the alpha value I desire to uniform. The drawing of the objects:

glClear(GL_COLOR_BUFFER_BIT);
glUniform1f(uAlphaLocation, 0f);
... //drawing white rectangle
glUniform1f(uAlphaLocation, percent);
//percent varies from 0f - 1f based on progress of the animation
... //drawing black rectangle translated right a bit so they overlap

I get the following outputs: At 0f percent:

Mid-animation:

At 1f percent/End of animation:

You can see the yellow color at the overlap of the 2 rectangle. I guess it comes from the background of the view and has something to do with ZOrderOnTop being true. Color code of the yellow part is 115, 115, 66. The right part of the 2nd rectangle: 115, 49, 66

When I use setZOrderOnTop(false) and remove the background of the GLSurfaceView it just works fine:

I've be trying to use another blending functions but none of them worked correctly.

What I'd like to have, is to have a background for GLSurfaceView (obviously I would set clear color to transparent then) and to have a correct alpha blending. Is this achievable? Any help appreciated.