Using ZBar in own activity and show preview on activity

Hi I am using the ZBar lib for my QR code scanning. I have got it to work according to the example provided (Add project to workspace and add Library for my project), but I am looking to embed it within my own activity for processing once I get the reading without switch between the full screen camera and my activity. Currently my code as below, appreciate if somebody can shed lights how I can achieve what I want in the screenshot. Thanks.

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data)
    {    
        if (requestCode == 111)
        {           
            if (resultCode == Activity.RESULT_OK) 
            {
                String barcode = data.getStringExtra(ZBarConstants.SCAN_RESULT);

                //Do something with it
            } 
            else if(resultCode == Activity.RESULT_CANCELED) 
            {

            }
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
    {
        // Inflate the layout for this fragment
        View view =  inflater.inflate(R.layout.fragment_qr_code, container, false);

        mContext = getActivity();

        bttScan = (Button) view.findViewById(R.id.bttScan);

        bttScan.setOnClickListener(new View.OnClickListener() 
        {
            @Override
            public void onClick(View v) 
            {            
                Intent intent = new Intent(getActivity(), ZBarScannerActivity.class);
                intent.putExtra(ZBarConstants.SCAN_MODES, new int[]{Symbol.QRCODE});

                startActivityForResult(intent, 111);
            }
        });   

        return view;
   }

Please check out https://github.com/journeyapps/zxing-android-embedded. That's a sample on ContinuousCaptureActivity.java, that should do the trick.