Creating snapchat like button for android app

Question

Hi I'm creating a camera app and my first activity is similar to snapchat.

I've followed the android camera dev tutorial (https://developer.android.com/guide/topics/media/camera.html).

But unfortunately it didn't cover a specific type of button that I want (snapchat like button).

I want to have buttons like snapchat.

Here's my current view xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <FrameLayout
        android:id="@+id/camera_preview"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

    <Button
        android:id="@+id/button_capture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_vertical|center_horizontal"
        android:text="capture" />

    </FrameLayout>

</LinearLayout>

And my mainactivity java:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Remove title bar
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);

    // Remove notification bar
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.activity_main);

    // Create an instance of Camera
    mCamera = getCameraInstance(getApplicationContext());

    // Create our Preview view and set it as the content of our activity.
    mPreview = new CameraPreview(this, mCamera);
    FrameLayout preview = (FrameLayout) findViewById(R.id.camera_preview);
    preview.addView(mPreview);

    // Add a listener to the Capture button
    Button captureButton = (Button) findViewById(R.id.button_capture);
    captureButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // get an image from the camera
            mCamera.takePicture(null, null, mPicture);
        }
    });

}

I believe the problem stem from after rendering the xml layout, the tutorial add

preview.addView(mPreview);

Over the layout which I believe the camera preview is drawn over the button.

I've only thought of two solution to this.

One is programmatically add a button after preview.addView(mPreview); line. Or if there's somekind of z-index that I can set on the xml code for the button?

And the snapchat button is an image button? I guess my overall question is how I can create buttons like snapchat app.

Thank you for your time.

[this](http://stackoverflow.com/questions/6759036/how-to-send-view-to-back-how-to-control-the-z-order-programmatically) seems a reasonable solution to me — Ayoub, Feb 05 '14 at 13:15

score 1 · Answer 1 · answered Oct 15 '15 at 06:47

Add captureButton programmatically to FrameLayout the same way that you added mPreview to the layout.

// Add mPreview to the layout first
// so we can build on top of it
FrameLayout preview = (FrameLayout) findViewById(R.id.camera_preview);
preview.addView(mPreview);

// Then captureButton will go on top of mPreview
Button captureButton = new Button(this);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
    FrameLayout.LayoutParams.WRAP_CONTENT,
    FrameLayout.LayoutParams.WRAP_CONTENT,
    Gravity.CENTER_VERTICAL | Gravity.RIGHT
);
captureButton.setLayoutParams(params);
preview.addView(captureButton);

The order of appearance is very important with a FrameLayout because you cannot set the z-index of views manually. The z-index is set automatically based on the order of appearance. The first view to be added to FrameLayout will be the bottom layer (mPreview). Consecutive layers will build on top of the view that came before it.

As for making the button semi-transparent, I recommend creating a drawable and doing something like

Drawable cameraButton = getResources().getDrawable(R.drawable.drawableName);
cameraButton.setAlpha(170);
captureButton.setBackground(cameraButton);

Creating snapchat like button for android app

1 Answers1