How to implement virtual moveable joystick?

I am trying to implement virtual joystick with which the camera can be rotated in left-right direction and the characted can be navigated in forward/backward direction.

However I want to keep joystick floating. As in, the joystick should appear wherever user click on the screen.

This is what I could implement - In the left half of the screen, touch anywhere and you can access joystick only for left-right camera movement.
In the right half, touch anywhere and you can access joystick for fwd/bkwd navigation.

Question - How do I combine all 4 controls in one joystick and keep it afloat.

Never worked with touch input, but it seems to me that you should define a limited circular area which accepts touch input. The difference between the touch and the center of your virtual joystick gives you all the information you’d need to treat the area as a 2-axis joystick.

I use this for my game, it’s worth the price.