Hello friends, so here is a new Android Camera App Tutorial. In this tutorial we will create a simple Android Camera App. So lets begin.
Creating Project for Android Camera App Tutorial
- This is so simple open Android Studio and create a new project.
- Now finish the things and you will get your MainActivity.
- In this time we will try to make User Interface looks good.
Designing UI
- I am creating a simple Button at the bottom of the activity. As you can see below.
- I have used font-awesome for the camera icon. So lets first learn how can you add font awesome to your android project.
Adding Font Awesome to Your Android Project
- Get the font fontawesome-webfont.ttf file from here.
- Now go to your project -> app -> src -> main
- Create a new folder named assets
- Paste the fontawesome-webfont.ttf which you have downloaded.
Creating Main Activity Layout
- As you can see we have a single button at the bottom of our main activity.
- Over the button we will see the image that would be captured with our app.
- So we need an ImageView and a Button for this Android Camera App Tutorial’s main activity.
- Go to activity_main.xml
- And copy the following code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <RelativeLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/camera_button" android:id="@+id/btnCamera" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:background="@drawable/button" android:textColor="#ffd3ffe5" android:textStyle="bold" /> <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/capturedImage" android:layout_above="@+id/btnCamera"> </ImageView> </RelativeLayout> |
- As you can see in Button tag I have defined a string. So go to your strings.xml file and add the following code
1 2 3 | <string name="camera_button"> Take Picture</string> |
- The initial value is the camera icon which I got from font awesome cheatsheet.
- Now see the background property of our android button. I have given a drawable resource there. So Inside your drawable folder create a new xml file named button.xml
- Add the following code inside that file.
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/button_pressed" android:state_pressed="true" /> <item android:drawable="@color/button_pressed" android:state_focused="true" /> <item android:drawable="@color/button_normal" /> </selector> |
- Thats it for the layout part. Now lets move to the coding part.
Coding MainActivity.java
- Go to your MainActivity.java file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | public class MainActivity extends ActionBarActivity { private Button btnCamera; private ImageView capturedImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } |
- We have declared instances for our button and imageview.
- Lets initialize them first in our onCreate method.
1 2 3 4 5 6 7 8 9 10 11 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnCamera = (Button) findViewById(R.id.btnCamera); capturedImage= (ImageView) findViewById(R.id.capturedImage); } |
- Because we are using an external font we will need to set TypeFace for our button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" ); btnCamera = (Button) findViewById(R.id.btnCamera); capturedImage= (ImageView) findViewById(R.id.capturedImage); btnCamera.setTypeface(font); } |
- Now we will create a new method to open our camera.
1 2 3 4 5 6 | private void openCamera() { Intent intent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, 0); } |
- We will call our open camera method on button click.
- So add an onClickListener to your button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" ); btnCamera = (Button) findViewById(R.id.btnCamera); capturedImage= (ImageView) findViewById(R.id.capturedImage); btnCamera.setTypeface(font); btnCamera.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { openCamera(); } }); } |
- Finally we will override the onActivityResult method to get the image.
1 2 3 4 5 6 7 8 9 10 11 | @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { // TODO Auto-generated method stub super.onActivityResult(requestCode, resultCode, data); if(resultCode == RESULT_OK) { Bitmap bp = (Bitmap) data.getExtras().get("data"); capturedImage.setImageBitmap(bp); } } |
- The final code for MainActivity.java would be
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | package net.simplifiedcoding.androidcameraapp; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.Typeface; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.GridLayout; import android.widget.GridView; import android.widget.ImageView; import android.widget.TableLayout; public class MainActivity extends ActionBarActivity { private Button btnCamera; private ImageView capturedImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" ); btnCamera = (Button) findViewById(R.id.btnCamera); capturedImage= (ImageView) findViewById(R.id.capturedImage); btnCamera.setTypeface(font); btnCamera.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { openCamera(); } }); } private void openCamera() { Intent intent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, 0); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { // TODO Auto-generated method stub super.onActivityResult(requestCode, resultCode, data); if(resultCode == RESULT_OK) { Bitmap bp = (Bitmap) data.getExtras().get("data"); capturedImage.setImageBitmap(bp); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } |
- Now execute your project.
- Because It is using camera so the device must have camera, or I recommend you to run in your mobile phone.
- And yes you can download the source code for this android camera app tutorial from below.
[easy_media_download url=”https://dl.dropboxusercontent.com/s/rm3kruvvpeha7n9/android-camera-app-tutorial.zip?dl=0″ text=”Download Source”]
So thats all for this Android Camera App Tutorial friends. In the next tutorials we will create some more complex camera applications on android. 🙂
Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.
Hi Belal,
I want to say a big thank you for creating this new series. A lot I see on youtube are very old from years ago, I particularly love how u are using Volley in your tutorials. Thanks for that. Please do you have Skype? Please do email me. I would like to speak about possiple 1-to-1 training.
Thakms u so much.
Regards,
Don
connect with me on hangout google.com/+belalkhan or facebook/probelalkhan
Great man
i want to take image and upload to mysql database how to do??
Instead of uploading the image to mysql database upload the image to a drive and provide the link to database..this would reduce the transaction time with database……
sir …
i need help…. can you tell me … or can you provide me the report for camera application…
Hi
The sourcefile seams to be gone can you give me a note when it is back up
How to save image to phone after the camera intent? Any tutorial about it?
hi i have this error message
Error:(5, 29) No resource found that matches the given name (at ‘drawable’ with value ‘@color/button_pressed’).
can you help me please
hi
I have also same error message
Error:(5, 29) No resource found that matches the given name (at ‘drawable’ with value ‘@color/button_pressed’).
can you help me please.. its urgent
I also have this issue:
Cannot resolve symbol ‘@color/button_pressed’
Cannot resolve symbol ‘@color/button_normal’
Looks to be two problems:
Under app/src/main/res/values I have an XML file called ‘colors.xml’, while the code you provided references a ‘color.xml’ file.
Under my ‘colors.xml’ file, I only have colorPrimary, colorPrimaryDark, and colorAccent.
Should we just define our own colors for ‘button_pressed’ and ‘button_normal’, or do you mean for us to do something else?
Thanks
you are not creating a camera app here. You are simply passing an Intent to Phone’s default camera app
Hi there, great tutorial had a good time reading it that is why I was wondering where are the other tutorials that you said on the last part. Would really appreciate it if you can send the link to where those other tutorials are 🙂 …again thank you so much for the help!!
Dear Belal Khan,
I tried your code in one of my mi lolipop and samsung phone with lolipop. Both working fine , but in my Lenovo lolipop mobile it shows “Unfortunately, Camera Example has been stopped”. Why this problem in this particular
device. please advise a solution for same…
Thanks
Anes P A
great article. simple and on point. had no issues re doing the same