ArCore Augmented Images will be place horizontal on the wall

Question

I am trying to make something like this: https://www.youtube.com/watch?v=sX1aOBlwGWc

I can render an image in AR. But it always placed with the wrong orientation. What I actually want to achieve is that an image is overlayed over the current poster, picture, banner.

This is my code:

My config:

config.focusMode = Config.FocusMode.AUTO
config.updateMode = Config.UpdateMode.LATEST_CAMERA_IMAGE
config.planeFindingMode = Config.PlaneFindingMode.VERTICAL            

My code after an image is recognised.

ViewRenderable.builder()
     .setView(context, R.layout.ar_layout)
     .build()
     .thenAccept {
          addNodeToScene(arFragment, image, it)
     }

private fun addNodeToScene(fragment: ArFragment, image: AugmentedImage, renderable: ViewRenderable) {
    val node = Node()
    node.renderable = renderable
    val pose = image.centerPose
    val anchorNode = AnchorNode(image.createAnchor(pose))
    anchorNode.addChild(node)
    fragment.arSceneView.scene.addChild(anchorNode)
    Toast.makeText(fragment.context, "Added", Toast.LENGTH_SHORT).show()
}

the ar_layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="50dp"
        android:layout_height="75dp"
        android:src="@drawable/poster" />
</LinearLayout>

I found some tutorials on how you need to implement it in Unity. But that is not how I want to do it. Can someone help me figure this out?

What I got at this point:

Answer 1

I figured it out by creating my own cube (flat cube) and adding the image as a texture.

fun renderImage(arFragment: ArFragment, anchor: Anchor) {
    Texture.builder().setSource(BitmapFactory.decodeResource(arFragment.resources, R.raw.sample_image))
            .build()
            .thenAccept {
                MaterialFactory.makeOpaqueWithTexture(arFragment.context, it)
                        .thenAccept { material ->
                            val modelRenderable = ShapeFactory.makeCube(
                                    Vector3(0.84f, 0.01f, 1.12f),
                                    Vector3(0.0f, 0.0f, 0.0f),
                                    material)
                            addNodeToScene(arFragment, anchor, modelRenderable)
                        }
            }
}

private fun addNodeToScene(fragment: ArFragment, anchor: Anchor, renderable: Renderable) {
    val node = Node()
    node.renderable = renderable
    val anchorNode = AnchorNode(anchor)
    anchorNode.addChild(node)

    fragment.arSceneView.scene.addChild(anchorNode)
    Toast.makeText(fragment.context, "Added", Toast.LENGTH_SHORT).show()
}