Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:44 minutes
  • Overview
  • Transcript

3.1 Create a Filter Interface

In this lesson, you’ll create a new Activity containing a GPUImageView, a View that can apply filters to an image, and display the modified image in real time. You’ll also create a menu resource with options for five commonly used image filters.

Related Links

3.1 Create a Filter Interface

Hello and welcome back. In this lesson we are going to be creating an activity where users can apply filters to the photos they take. Let's start by selecting File > New > Activity and the activity. I'll call this FilterActivity and press Finish. Now open the layout of the activity by going to activity_filter.xml. I am again gonna remove all these paddings because I want the photo to fill the screen completely. And now add a tag for GPUImageView and set its weight and height to match_parent. Set the value of its ID attribute to photo. This GPUImageView is gonna be the view inside which we will be displaying the photo the user has taken. It allows us to apply an image filter and view the result of the filter in real-time. As its name suggests it uses the GPU to perform most of the image processing. Go back to FilterActivity.java and add a member variable of type GPUImageView to it. Inside the onCreate method initialize it using the findViewById method. Make sure that you type cast the result of findViewById. We must now display the photo the user has taken inside this GPUImageView. To be able to do that we must send the file name of the photo from MainActivity to FilterActivity. So go to MainActivity.java. Here, after you close the file output stream, create a new Intent using MainActivity as the context and FilterActivity as the class. Call it putExtra method to add an extra to it. Let the name of the extra be FILENAME. And let its value be the absolute path of the photo file. And now call startActivity using this intent. With this code as soon as the users take a photo they will be taken to FIlterActivity. Back in FilterActivity.java we must retrieve the filename. So create a filename member variable here. We must initialize filename inside the onCreate method. So first call getIndent to fetch the intent that we created in MainActivity. And then call its getStringExtra method to get the value of the extra called FILENAME. Now that we have the filename we can pass it as an argument to the setImageMethod of GPUImageView. Note that you must convert it into a file object first. At this point we will be able to see the photo inside FilterActivity. Let us now create a menu that allows the user to apply various filters to the photo and then save the modified photo. So, right click on the Resources folder and select New > Android Resource File. Change the Resource Type to Menu and name the file filter_menu. Inside this file, the first thing we need to do is add the application namespace. Let's create a save button now. Create a new item tag and set its title to Save. The user will be pressing this button to save the photo after they have applied an image filter to it. The id of this button can be menu_ save. Next set the app:showAsAction attribute to always. This attribute will make it appear as a button in the action bar. The Android GPU image library allows you to apply several different filters to your photos. To see what filters are available, you can simply go to its source code on GitHub and open the Library folder. Then select the Source folder. Here you can see that there are several Java classes that have filter in their names. You can use any of these in your app. In this course I will be using five very commonly used filters. So back inside the menu file create a new item tag. This item is going to be for a Grayscale filter. So set its id to filter_grayscale. And our first filter option is ready. Copy this tag and paste it four times. The second filter is going to be a sepia filter. Set its id to filter_sepia. Next, I will use an emboss filter. Its id can be filter_emboss. Next, a toon filter. And the last filter is gonna be a haze filter. We must now associate this menu file with FilterActivity. So go back to FilterActivity.java. And override the onCreateOptionsMenu method. Here get a menu inflator instance and call it inflate method to inflate R.menu.filter_menu. And then return true. You can now run your app to see what FilterActivity looks like. As you can see, as soon as a photo is captured the user is taken to FilterActivity. And the filter options are available here. Of course none of these work just yet. You now know how to display photos using GPUImageView. In the next lesson, I'll show you how to actually apply the five filters we added to the menu. Thanks for watching.

Back to the top