Using Universal Image Loader to Display Image on Phimpme Android Application

In Phimpme Android application we needed to load image on the sharing Activity fast so that there won’t be any delay that is visible by a user in the loading of any activity. We used Universal Image Loader to load the image on the sharing Activity to load Image faster. Getting Universal Image Loader To get Universal Image Loader in your application go to Gradle(app)-> and then add the following line of code inside dependencies: dependencies{ compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.4' } Initialising Universal Image Loader and Displaying Image To display image on using Universal Image Loader we need to convert the image into a URI from a file path: saveFilePath = getIntent().getStringExtra(EXTRA_OUTPUT); Uri uri = Uri.fromFile(new File(saveFilePath)); How an image should be displayed We need to display the image in such a way that it covers the whole image view in the sharing Activity. The image should be zoomed out. The quality of the image should not be distorted or reduced. The image should look as it is. The image should be zoomable so that the user can pinch to zoom in and zoom out. For the image to adjust the whole Image View we set ImageScaleType.EXACTLY_STRETCHED. We will also set cacheInMemory to true and cacheOnDisc to true.   private void initView() {   saveFilePath = getIntent().getStringExtra(EXTRA_OUTPUT);   Uri uri = Uri.fromFile(new File(saveFilePath));   ImageLoader imageLoader = ((MyApplication)getApplicationContext()).getImageLoader();   DisplayImageOptions options = new DisplayImageOptions.Builder()           .cacheOnDisc(true)           .imageScaleType(ImageScaleType.EXACTLY_STRETCHED)           .cacheInMemory(true)           .bitmapConfig(Bitmap.Config.RGB_565)           .build();   imageLoader.displayImage(uri.toString(), shareImage, options); } Image Loader function in MyApplication class: private void initImageLoader() {   File cacheDir = com.nostra13.universalimageloader.utils.StorageUtils.getCacheDirectory(this);   int MAXMEMONRY = (int) (Runtime.getRuntime().maxMemory());   // System.out.println("dsa-->"+MAXMEMONRY+"   "+(MAXMEMONRY/5));//.memoryCache(new   // LruMemoryCache(50 * 1024 * 1024))   DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()           .cacheInMemory(true)           .cacheOnDisk(true)           .build();   ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(           this).memoryCacheExtraOptions(480, 800).defaultDisplayImageOptions(defaultOptions)           .diskCacheExtraOptions(480, 800, null).threadPoolSize(3)           .threadPriority(Thread.NORM_PRIORITY - 2)           .tasksProcessingOrder(QueueProcessingType.FIFO)           .denyCacheImageMultipleSizesInMemory()           .memoryCache(new LruMemoryCache(MAXMEMONRY / 5))           .diskCache(new UnlimitedDiskCache(cacheDir))           .diskCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default           .imageDownloader(new BaseImageDownloader(this)) // default           .imageDecoder(new BaseImageDecoder(false)) // default           .defaultDisplayImageOptions(DisplayImageOptions.createSimple()).build();   this.imageLoader = ImageLoader.getInstance();   imageLoader.init(config); } Image View in Sharing Activity XML file: In the Sharing Activity Xml resource, we need to specify the width of the image view and the height of the image view. In Phimpme Android application we are using ImageViewTouch so that we have features like touch to zoom in zoom out. The scale type of the imageView is centerCrop so that image which is loaded is zoomed out and focus is in the center of the image.   <org.fossasia.phimpme.editor.view.imagezoom.ImageViewTouch   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:id="@+id/share_image"   android:layout_below="@+id/toolbar"   android:layout_weight="10"   android:layout_alignParentStart="true"   android:scaleType="centerCrop"/> Conclusion To load image faster on any ImageView we should use Universal Image Loader. It helps load the activity faster and allows many features as discussed in the blog.   Github https://github.com/fossasia/phimpme-android Resources Github Link for Universal Image Loader: https://github.com/nostra13/Android-Universal-Image-Loader Documentation: https://github.com/nostra13/Android-Universal-Image-Loader/wiki

Continue ReadingUsing Universal Image Loader to Display Image on Phimpme Android Application

Displaying Proper Notification While Image is Being Uploaded in Phimpme

In this blog, I will explain how to display App Icon and appropriate text messages in the notification bar while the image is being uploaded on the various social media platform in Phimpme Android application. Displaying Application icon in the Notification Bar Whenever Phimpme application uses the notification the application icon should be present during the progress bar is showing and after the image has been uploaded to the social network website. In the notification bar there are two types of the icon that can be set: Small icon Large Icon In the small icon, we are putting the upload sign to tell the users that the image is being uploaded. In the large icon, I am putting the logo of the Phimpme application. This way when the user exits the application while there is an upload process going on, he or she will know that the upload process is from the Phimpme application. To set the app icon in the Notification bar: .setLargeIcon(BitmapFactory.decodeResource(ActivitySwitchHelper.getContext().getResources(),       R.mipmap.ic_launcher)) To set the small icon in the Notification bar: .setSmallIcon(R.drawable.ic_cloud_upload_black_24dp) Displaying appropriate account name while uploading the Image While uploading an Image the notification bar should show the appropriate Account Name in which the account is being uploaded. For example, if the image is being uploaded on Google Plus then the Notification should display “Uploading the image on Google Plus”. For this, we need to modify the NotificationHandler.make() function and make it accept String resource as a parameter. We can then modify setContentTitle() function to display the appropriate message. public static void make(@StringRes int title){ //Display Notification code over here } setContentTitle() function in Phimpme to display the appropriate function: mBuilder.setContentTitle(ActivitySwitchHelper.getContext().getString(R.string.upload_progress) + " " + ActivitySwitchHelper.getContext().getResources().getString(title)) Notification make() function after the changes: public static void make(@StringRes int title){   mNotifyManager = (NotificationManager) ActivitySwitchHelper.getContext().getSystemService(Context.NOTIFICATION_SERVICE);   mBuilder = new NotificationCompat.Builder(ActivitySwitchHelper.getContext());   mBuilder.setContentTitle(ActivitySwitchHelper.getContext().getString(R.string.upload_progress) + " " + ActivitySwitchHelper.getContext().getResources().getString(title))           .setLargeIcon(BitmapFactory.decodeResource(ActivitySwitchHelper.getContext().getResources(),                   R.mipmap.ic_launcher))           .setContentText(ActivitySwitchHelper.getContext().getString(R.string.progress))           .setSmallIcon(R.drawable.ic_cloud_upload_black_24dp)           .setOngoing(true);   mBuilder.setProgress(0, 0, true);   // Issues the notification   mNotifyManager.notify(id, mBuilder.build()); } Conclusion Notification makes any application more interactive and show live updates even when the application is in use. By following this method users can be aware of the upload functionality and in which account the image is beign uploaded. Github https://github.com/fossasia/phimpme-android Resources Google Developer page: https://developer.android.com/guide/topics/ui/notifiers/notifications.html Tutorial point page: https://www.tutorialspoint.com/android/android_notifications.htm  

Continue ReadingDisplaying Proper Notification While Image is Being Uploaded in Phimpme

Displaying essential features when the Phimpme Application starts

In this blog, I will explain how I implemented showcase View to display all the essential features of the Phimpme Android application when the application starts first. In this, the users will know which activity is used for what purpose.   Importing material design Showcase View I used material design showcase in Phimpme  Android application to take the benefit of the latest Android design and to add more text on the screen which is easily visible by the users. We need to add the following to our gradle. compile 'com.github.deano2390:MaterialShowcaseView:1.1.0' There is a very good repository in Github for material design Showcase view which we have used here. Implementing Material design showcaseView on the desired activity In Phimpme Android application we have three main activity on the home screen. Namely: Camera Gallery Accounts Activity Camera Activity and Gallery Activity is used to take pictures and select the picture respectively. Accounts Activity contains more than 10 accounts of various social media platforms and storage platform. When the application starts my aim is to display the function of all three activities in a showcase View. it is implemented in the following Steps: Step 1 Import all the module from the Material showcase view we have used in the gradle. import uk.co.deanwild.materialshowcaseview.MaterialShowcaseSequence; import uk.co.deanwild.materialshowcaseview.MaterialShowcaseView; import uk.co.deanwild.materialshowcaseview.ShowcaseConfig; Step 2 Get the reference all the buttons you want to show the features. These buttons will be highlighted when the showcase View is displayed. nav_home = (BottomNavigationItemView) findViewById(R.id.navigation_home); nav_cam = (BottomNavigationItemView) findViewById(R.id.navigation_camera); nav_acc = (BottomNavigationItemView) findViewById(R.id.navigation_accounts); Step 3 In Phimpme Android application I have used to display the features of three navigation buttons. So, to display the features of more than one button or View we have to use MaterialShowcaseSequence class to display the features of the buttons in a sequence, that is one after the other. In the onCreate activity, I am calling presentShowcaseSequence function. This function has a delay time. This delay time is required to wait for four seconds until the splash screen activity is over and the activity is started. private void presentShowcaseSequence() {   ShowcaseConfig config = new ShowcaseConfig();   config.setDelay(4000); // half second between each showcase view   MaterialShowcaseSequence sequence = new MaterialShowcaseSequence(this, SHOWCASE_ID);   sequence.setOnItemShownListener(new MaterialShowcaseSequence.OnSequenceItemShownListener() {       @Override       public void onShow(MaterialShowcaseView itemView, int position) {       }   });   sequence.setConfig(config); Step 4 Set the initial target Button. This target button will be pointed first when the app is launched for the first time. sequence.addSequenceItem(nav_home, getResources().getString(R.string.home_button), getResources().getString(R.string.ok_button));   Step 5 Add subsequent target buttons to display the features of that buttons. To add more subsequent target buttons we will use function addSequenceitem. To set the target we have specify the button which we want to focus in setTarget(Button). We need to display the text which will show the important features in regarding that activity in setContentText(text to be displayed). For a dismiss button we need to specify the a string in setDismissText(Dismiss button string) sequence.addSequenceItem(       new MaterialShowcaseView.Builder(this)               .setTarget(nav_cam)               .setDismissText(getResources().getString(R.string.ok_button))               .setContentText(getResources().getString(R.string.camera_button))               .build() ); sequence.addSequenceItem(       new MaterialShowcaseView.Builder(this)               .setTarget(nav_acc)               .setDismissText(getResources().getString(R.string.ok_button))               .setContentText(getResources().getString(R.string.accounts_button))               .build() ); sequence.start(); Sequence.start is used to display…

Continue ReadingDisplaying essential features when the Phimpme Application starts

Adding Voice Recognition in Description Dialog Box in Phimpme project

In this blog, I will explain how I added Voice Recognition in a dialog box to describe an image in Phimpme Android application. In Phimpme Android application we have an option to add a description for the image. Sometimes the description can be long. Adding Voice Recognition text to speech will ease the user's experience to add a description for the image. Adding appropriate Dialog Box In order to take input from the user to prompt the Voice Recognition function, I have added an image button in the description dialog box. Since the description dialog box will only contain an EditText and a button will have used material design to make it look better and add caption on top of it.   <LinearLayout   android:id="@+id/rl_description_dialog"   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:orientation="horizontal"   android:padding="15dp">   <EditText       android:id="@+id/description_edittxt"       android:layout_weight="1"       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:padding="15dp"       android:hint="@string/description_hint"       android:textColorHint="@color/grey"       android:layout_margin="20dp"       android:gravity="top|left"       android:inputType="text" />   <ImageButton       android:layout_width="@dimen/mic_image"       android:layout_height="@dimen/mic_image"       android:layout_alignRight="@+id/description_edittxt"       app2:srcCompat="@drawable/ic_mic_black"       android:layout_gravity="center"       android:background="@color/transparent"       android:paddingEnd="10dp"       android:paddingTop="12dp"       android:id="@+id/voice_input"/> </LinearLayout> Function to prompt dialog box We have added a function to prompt the dialog box from anywhere in the application. getDescriptionDialog() function is used to prompt the description dialog box. getDescriptionDialog() returns EditText which can be further be used to manipulate the text in the EditText. Please follow the following steps to inflate description dialog box in the activity. First, In the getDescriptionDialog() function we will inflate the layout by using getLayoutInflater function. We will pass the layout id as an argument in the function. public EditText getDescriptionDialog(final ThemedActivity activity, AlertDialog.Builder descriptionDialog){ final View DescriptiondDialogLayout = activity.getLayoutInflater().inflate(R.layout.dialog_description, null); Second, Get the TextView in the description dialog box. final TextView DescriptionDialogTitle = (TextView) DescriptiondDialogLayout.findViewById(R.id.description_dialog_title); Third, Present the dialog using cardview to make use of the material design. Then take an instance of the EditText. This EditText can be further used to input text from the user either by text or Voice Recognition. final CardView DescriptionDialogCard = (CardView) DescriptiondDialogLayout.findViewById(R.id.description_dialog_card); EditText editxtDescription = (EditText) DescriptiondDialogLayout.findViewById(R.id.description_edittxt); Fourth, Set onClickListener when the user clicks the mic image icon. This onClicklistener will prompt the voice Recognition in the activity. We need to specify the language for the speech to text input. In the case of Phimpme its English so “en-US”. We have set the maximum results to 15.   ImageButton VoiceRecognition = (ImageButton) DescriptiondDialogLayout.findViewById(R.id.voice_input); VoiceRecognition.setOnClickListener(new View.OnClickListener() {   @Override   public void onClick(View v) {       // This are the intents needed to start the Voice recognizer       Intent i = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);       i.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, "en-US");       i.putExtra(RecognizerIntent.EXTRA_MAX_RESULTS, 15); // number of maximum results..       i.putExtra(RecognizerIntent.EXTRA_PROMPT, R.string.caption_speak);       startActivityForResult(i, REQ_CODE_SPEECH_INPUT);   } }); Putting Text in the EditText After Voice Recognition prompt ends the onActivityResult function checks to see if the data is received or not. if (requestCode == REQ_CODE_SPEECH_INPUT && data!=null) { We get the spoken text from intent data.getString() and store it in ArrayList. To store the received data in a string we need to get the first string from the ArrayList. ArrayList<String> result = data       .getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS); voiceInput = result.get(0); Setting the received data in the the EditText editTextDescription.setText(voiceInput); Conclusion Using Voice recognition is a quick and simple way to add a…

Continue ReadingAdding Voice Recognition in Description Dialog Box in Phimpme project

Google Authentication and sharing Image on Google Plus from Phimpme Android

In this blog, I will be explaining how I implemented Google Authentication and sharing an Image on GooglePlus from Phimpme Android application. Adding Google Plus authentication in accounts activity in Phimpme Android In accounts Activity, we added Google Plus option. This is done by adding “Googleplus” in accountName.   public static String[] accountName = { "Facebook", "Twitter", "Drupal", "NextCloud", "Wordpress", "Pinterest", "Flickr", "Imgur", "Dropbox", "OwnCloud", "Googleplus"}; Add this to your Gradle Build. Please note that the version of Google:play-services in the grade should be same. In the case of Phimpme the version is 10.0.1, so all the services from Google should be 10.0.1. compile 'com.google.android.gms:play-services-auth:10.0.1 In onCreate we need to make the object of the GoogleSignInOptions. This is required to call methods: requestEmail() and build. GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)       .requestEmail()       .build(); Building GoogleApiClient with access to the Google Sign and the option specified by the gso. mGoogleApiClient = new GoogleApiClient.Builder(this)       .enableAutoManage(this , AccountActivity.this)       .addApi(Auth.GOOGLE_SIGN_IN_API, gso)       .build(); Signing in Google Authentication can take place through intent which calls logged in users on the phone. The user will choose an option to select the account he or she wants to authenticate the application. private void signInGooglePlus() {   Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);   startActivityForResult(signInIntent, RC_SIGN_IN); } Adding Google Plus account in the Realm Database HandleSignInResult() function is used to handle Sign in result. This result includes: Storing the received data in the Realm Database. Showing the appropriate username in the Accounts activity and handling login failed. Checking if login is successful or not If the login is successful a Toast message will pop up to show the appropriate message.   private void handleSignInResult(GoogleSignInResult result) {   if (result.isSuccess())       GoogleSignInAccount acct = result.getSignInAccount();//acct.getDisplayName()       Toast.makeText(AccountActivity.this, R.string.success, Toast.LENGTH_SHORT).show(); Creating Object to store the details in Realm Database. First, we need to begin realm transaction.Then add logged in username in the database. To display the username we will create the function setUserName(acct.getDisplayName()). And then finally commit everything to Realm database.         realm.beginTransaction();       account = realm.createObject(AccountDatabase.class,       accountName[GOOGLEPLUS]);       account.setUsername(acct.getDisplayName());       realm.commitTransaction();   } Adding Google Plus option in Sharing Activity. To add Google Plus option in the sharing Activity we first added Google Plus icon in the resource folder. The Google Plus icon is SVG(scalable vector) format so that we can manipulate it to apply any colour and size. <vector xmlns:android="http://schemas.android.com/apk/res/android"   android:width="24dp"   android:height="24dp"   android:viewportHeight="32.0"   android:viewportWidth="32.0">   <path       android:fillColor="#00000000"       android:pathData="M16,16m-16,0a16,16 0,1 1,32 0a16,16 0,1 1,-32 0" />   <path       android:fillColor="#000000"       android:pathData="M16.7,17.2c-0.4,-0.3 -1.3,-1.1 -1.3,-1.5c0,-0.5 0.2,-0.8 1,-1.4c0.8,-0.6 1.4,-1.5 1.4,-2.6c0,-1.2 -0.6,-2.5 -1.6,-2.9h1.6L18.8,8h-5c-2.2,0 -4.3,1.7 -4.3,3.6c0,2 1.5,3.6 3.8,3.6c0.2,0 0.3,0 0.5,0c-0.1,0.3 -0.3,0.6 -0.3,0.9c0,0.6 0.3,1 0.7,1.4c-0.3,0 -0.6,0 -0.9,0c-2.8,0 -4.9,1.8 -4.9,3.6c0,1.8 2.3,2.9 5.1,2.9c3.1,0 4.9,-1.8 4.9,-3.6C18.4,19 18,18.1 16.7,17.2zM14.1,14.7c-1.3,0 -2.5,-1.4 -2.7,-3.1c-0.2,-1.7 0.6,-3 1.9,-2.9c1.3,0 2.5,1.4 2.7,3.1C16.2,13.4 15.3,14.8 14.1,14.7zM13.6,23.2c-1.9,0 -3.3,-1.2 -3.3,-2.7c0,-1.4 1.7,-2.6 3.6,-2.6c0.4,0 0.9,0.1 1.2,0.2c1,0.7 1.8,1.1 2,1.9c0,0.2 0.1,0.3 0.1,0.5C17.2,22.1 16.2,23.2 13.6,23.2zM21.5,15v-2h-1v2h-2v1h2v2h1v-2h2v-1H21.5z" /> </vector> Sharing Image on Google Plus from Sharing Activity After creating the appropriate button, we need to send the image to Google Plus. We need to import the PlusShare files in the SharingActivity. import com.google.android.gms.plus.PlusShare; Share Image function To share the image on Google Plus we have used PlusShare function which comes in Google Plus…

Continue ReadingGoogle Authentication and sharing Image on Google Plus from Phimpme Android

Implementation of Colour Picker in Phimpme Android Application

In Phimpme Android Project, we have used Color Picker palette which has a various implementation in the project such as changing the theme color of the application, to choose the color for the text while editing an image. Making XML Layout to choose the specific color from the color palette The main aim was to provide Line of color, and the user can simply slide through the different colors. A single line should contain all the main colors. I took help of the Open Source project to arrange the layout of the colors. We will display the Color palette in a cardview. <RelativeLayout   android:id="@+id/container_edit_text"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:orientation="vertical"   android:padding="@dimen/big_spacing">   <uz.shift.colorpicker.LineColorPicker       xmlns:app="http://schemas.android.com/apk/res-auto"       android:id="@+id/color_picker_accent"       android:layout_width="match_parent"       android:layout_height="60dp"       app:orientation="horizontal"       app:selectedColorIndex="0" /> </RelativeLayout> Inflating the list with the colors We will inflate the list with all basic colors such as Red, Purple, Blue, Light Blue, Green, Yellow, Orange, Deep orange, Brown, Blue Gray. getAccentColors() function returns the specific color HEXCODE. A color code is six string length long code combination consisting of numbers and alphabets which are stored in the colors.xml resource file. For example, the color code for black is  #000000 and for white #FFFFFF.   public static int[] getAccentColors(Context context){   return new int[]{           ContextCompat.getColor(context, R.color.md_red_500),           ContextCompat.getColor(context, R.color.md_purple_500),           ContextCompat.getColor(context, R.color.md_deep_purple_500),           ContextCompat.getColor(context, R.color.md_blue_500),           ContextCompat.getColor(context, R.color.md_light_blue_500),           ContextCompat.getColor(context, R.color.md_cyan_500),           ContextCompat.getColor(context, R.color.md_teal_500),           ContextCompat.getColor(context, R.color.md_green_500),           ContextCompat.getColor(context, R.color.md_yellow_500),           ContextCompat.getColor(context, R.color.md_orange_500),           ContextCompat.getColor(context, R.color.md_deep_orange_500),           ContextCompat.getColor(context, R.color.md_brown_500),           ContextCompat.getColor(context, R.color.md_blue_grey_500),   }; } Implementation of ColorPicker to change the Text color in the Edit Image Activity Color Palette is implemented the followings steps:  First,                                                                                                                                        A dialog box is made. This dialog will help to display the color palette.  Second,                                                                                                                                We need to inflate the dialog box with color_picker_accent XML file we created  in the resource folder.  Third,                                                                                                                                    We set the dialog box with the line of colors.  Fourth,                          …

Continue ReadingImplementation of Colour Picker in Phimpme Android Application

Sharing Images on Twitter from Phimpme Android App Using twitter4j

As sharing an image to the social media platform is an important feature in Phimpme android. In my previous blog, I have explained how to authenticate the Android application with Twitter. In this blog, I will discuss how to upload an image directly on Twitter from the application after successfully logging to Twitter. To check if the application is authenticated to Twitter or not. When the application is successfully authenticated Twitter issues a Token which tells the application if it is connected to Twitter or not. In LoginActivity.java the function isActive returns a boolean value. True if the Twitter token is successfully issued or else false.   public static boolean isActive(Context ctx) {        SharedPreferences sharedPrefs = ctx.getSharedPreferences(AppConstant.SHARED_PREF_NAME, Context.MODE_PRIVATE);        return sharedPrefs.getString(AppConstant.SHARED_PREF_KEY_TOKEN, null) != null;    } We call isActive function from LoginActive class to check if the application is authenticated to Twitter or not. We call it before using the share function in sharingActivity: if (LoginActivity.isActive(context)) {                try {                    // Send Image function } catch (Exception ex) {                    Toast.makeText(context, "ERROR", Toast.LENGTH_SHORT).show();  } We have saved the image in the internal storage of the device and use saveFilePath to use the path of the saved image. In Phimpme we used HelperMethod class where our share function resides, and while the image is being shared an alert dialog box with spinner pops on the screen. Sending the image to HelperMethod class First, We need to get the image and convert it into Bitmaps. Since, the image captured by the phone camera is usually large to upload and it will take a lot of time we need to compress the Bitmap first. BitmapFactory.decodeFile(specify name of the file) is used to fetch the file and convert it into bitmap. To send the data we used FileOutStream to the set the path of the file or image in this case. Bitmap.compress method is used to compress the image to desired value and format. In Phimpme we are converting it into PNG.   Bitmap bmp = BitmapFactory.decodeFile(saveFilePath);                    String filename = Environment.getExternalStorageDirectory().toString() + File.separator + "1.png";                    Log.d("BITMAP", filename);                    FileOutputStream out = new FileOutputStream(saveFilePath);                    bmp.compress(Bitmap.CompressFormat.PNG, 90, out);                    HelperMethods.postToTwitterWithImage(context, ((Activity) context), saveFilePath, caption, new HelperMethods.TwitterCallback() {                        @Override                        public void onFinsihed(Boolean response) {                            mAlertBuilder.dismiss();                            Snackbar.make(parent, R.string.tweet_posted_on_twitter, Snackbar.LENGTH_LONG).show();                        } Post image function To post the image on Twitter we will use ConfigurationBuilder class. We will create a new object of the class and then attach Twitter consumer key, consumer secret key, Twitter access token, and twitter token secret. setOAuthConsumerKey() function is used to set the consumer key which is generated by the Twitter when creating the application in the Twitter development environment. Similarly, setOAuthConsumerSecret() function is used to set the consumer secret key. Specify the token key which generated after successfully connecting to twitter in setOAuthAcessToken() fuction and Token secret in setOAuthAcessTokenSecret() function.   ConfigurationBuilder configurationBuilder = new ConfigurationBuilder();       configurationBuilder.setOAuthConsumerKey(context.getResources().getString(R.string.twitter_consumer_key)); configurationBuilder.setOAuthConsumerSecret(context.getResources().getString(R.string.twitter_consumer_secret)); configurationBuilder.setOAuthAccessToken(LoginActivity.getAccessToken((context))); configurationBuilder.setOAuthAccessTokenSecret(LoginActivity.getAccessTokenSecret(context));        Configuration configuration = configurationBuilder.build(); final Twitter twitter = new TwitterFactory(configuration).getInstance(); Sending Image to twitter: The image is uploaded to twitter using statusUpdate class specified in Twitter4j API. Pass the image…

Continue ReadingSharing Images on Twitter from Phimpme Android App Using twitter4j

Integrating Twitter Authenticating using Twitter4j in Phimpme Android Application

We have used Twitter4j API to authenticate Twitter in Phimpme application. Below are the following steps in setting up the Twitter4j API in Phimpme and Login to Twitter from Phimpme android application. Setting up the environment Download the Twitter4j package from http://twitter4j.org/en/. For sharing images we will only need twitter4j-core-3.0.5.jar and twitter4j-media-support-3.0.5.jar files. Copy these files and save it in the libs folder of the application. Go to build.gradle and add the following codes in dependencies: dependencies { compile files('libs/twitter4j-core-3.0.5.jar') compile files('libs/twitter4j-media-support-3.0.5.jar') } Adding Phimpme application in Twitter development page Go to https://dev.twitter.com/->My apps-> Create new apps. Create an application window opens where we have to fill all the necessary details about the application. It is mandatory to fill all the fields. In website field, if you are making an android application then anything can be filled in website field for example www.google.com. But it is necessary to fill this field also. After filling all the details click on “Create your Twitter application” button. Adding Twitter Consumer Key and Secret Key This generates twitter consumer key and twitter secret key. We need to add this in our string.xml folder. <string name="twitter_consumer_key">ry1PDPXM6rwFVC1KhQ585bJPy</string> <string name="twitter_consumer_secret">O3qUqqBLinr8qrRvx3GXHWBB1AN10Ax26vXZdNlYlEBF3vzPFt</string> Twitter Authentication Make a new JAVA class say LoginActivity. Where we have to first fetch the twitter consumer key and Twitter secret key. private static Twitter twitter;    private static RequestToken requestToken;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_twitter_login);        twitterConsumerKey = getResources().getString(R.string.twitter_consumer_key);        twitterConsumerSecret = getResources().getString(R.string.twitter_consumer_secret);   We are using a web view to interact with the Twitter login page. twitterLoginWebView = (WebView)findViewById(R.id.twitterLoginWebView);        twitterLoginWebView.setBackgroundColor(Color.TRANSPARENT);        twitterLoginWebView.setWebViewClient( new WebViewClient(){            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url){                if( url.contains(AppConstant.TWITTER_CALLBACK_URL)){                    Uri uri = Uri.parse(url);                    LoginActivity.this.saveAccessTokenAndFinish(uri);                    return true;                }                return false;            }              If the access Token is already saved then the user is already signed in or else it sends the Twitter consumer key and the Twitter secret key to gain access Token. ConfigurationBuilder function is used to set the consumer key and consumer secret key. ConfigurationBuilder configurationBuilder = new ConfigurationBuilder();        configurationBuilder.setOAuthConsumerKey(twitterConsumerKey);     configurationBuilder.setOAuthConsumerSecret(twitterConsumerSecret);        Configuration configuration = configurationBuilder.build();        twitter = new TwitterFactory(configuration).getInstance(); It is followed by the following Runnable thread to check if the request token is received or not. If authentication fails, an error Toast message pops. new Thread(new Runnable() {            @Override            public void run() {                try {                    requestToken = twitter.getOAuthRequestToken(AppConstant.TWITTER_CALLBACK_URL);                } catch (Exception e) {                    final String errorString = e.toString();                    LoginActivity.this.runOnUiThread(new Runnable() {                        @Override                        public void run() {                            mAlertBuilder.cancel();                            Toast.makeText(LoginActivity.this, errorString, Toast.LENGTH_SHORT).show();                            finish();                        }                    });                    return;                }                LoginActivity.this.runOnUiThread(new Runnable() {                    @Override                    public void run() {                        twitterLoginWebView.loadUrl(requestToken.getAuthenticationURL());                    }                });            }        }).start(); Conclusion It offers seamless integration of Twitter in any application. Without leaving actual application, easier to authenticate. Further, it is used to upload the photo to Twitter directly from Phimpme Android application, fetch profile picture and username. Github https://github.com/fossasia/phimpme-android Resources To create app https://dev.twitter.com/ To download the Twitter4j Package: http://twitter4j.org/en/ Youtube tutorial: https://www.youtube.com/watch?v=_IsBi3cpvio Blog Post: http://www.theappguruz.com/blog/android-twitter-integration-tutorial  

Continue ReadingIntegrating Twitter Authenticating using Twitter4j in Phimpme Android Application

Controlling Camera Actions Using Voice Interaction in Phimpme Android

In this blog, I will explain how I implemented Google voice actions to control camera features on the Phimpme Android project. I will cover the following features I have implemented on the Phimpme project: Opening the application using Google Voice command. Switching between the cameras. Clicking a Picture and saving it through voice command. Opening application when the user gives a command to Google Now.                       When the user gives command “Take a selfie” or “Click a picture” to Google Now it directly opens Phimpme camera activity.  First                                                                                                                                        We need to add an intent filter to the manifest file so that Google Now can  detect Phimpme camera activity <activity   android:name=".opencamera.Camera.CameraActivity"   android:screenOrientation="portrait"   android:theme="@style/Theme.AppCompat.NoActionBar">   <intent-filter>       <action android:name="android.media.action.IMAGE_CAPTURE"/>       <category android:name="android.intent.category.DEFAULT"/>       <category android:name="android.intent.category.VOICE"/>   </intent-filter> </activity> category android:name=”android.intent.category.VOICE” is added to the IMAGE_CAPTURE intent filter for the Google Now to detect the camera activity. For the Google Now assistance to accept the command in the camera activity we need to add the following in the STILL_IMAGE_CAMERA intent filter in the camera activity. <intent-filter>   <action android:name="android.media.action.STILL_IMAGE_CAMERA"/>   <category android:name="android.intent.category.DEFAULT"/>   <category android:name="android.intent.category.VOICE"/> </intent-filter> So, now when the user says “OK Google” and “Take a Picture” the camera activity on Phimpme opens. Integrating Google Voice assistance in Camera Activity Second,                                                                                                                               After opening the camera application the Google Assistance should ask a question. The cameraActivity in Phimpme can be opened in two ways, such as: When opened from a different application. When given the command to Goole Now assistance. We need to check whether the camera activity is prompted from Google assistance or not to activate voice command. We will check it in onResume function. @Override public void onResume() { if (CameraActivity.this.isVoiceInteraction()) {     startVoiceTrigger();  } } If is.VoiceInteraction gives “true” then voice Assistance prompts.             Assistance to ask which camera to use Third,                                                                                                                              …

Continue ReadingControlling Camera Actions Using Voice Interaction in Phimpme Android

Implementing Stickers on an Image in Phimpme

One feature we implemented in the Phimpme photo editing application is to enable users to add stickers on top of the image. In this blog, I will explain how stickers are implemented in Phimpme. Features of Stickers Users can resize the stickers. Users can place the stickers wherever in the canvas. Step.1-Storing the Stickers in assets folder In Phimpme I stored the stickers in the assets folder. To distribute the stickers in different categories I made different folders according to the categories namely type1, type2, type3, type4 and so on.   Displaying stickers We used onBindViewHolder to Display the stickers in different categories like: Facial Express Objects Comments Wishes Emojis Hashtags String path will get the position of the particular type of stickers collection. This type is then loaded to the ImageLoader with the specific icon associating with the types.    @Override public void onBindViewHolder(mRecyclerAdapter.mViewHolder holder, final int position) {   String path = pathList.get(position);       ImageLoader.getInstance().displayImage("assets://" + path,holder.icon, imageOption);       holder.itemView.setTag(path);       holder.title.setText("");   int size = (int) getActivity().getResources().getDimension(R.dimen.icon_item_image_size_filter_preview);   LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(size,size);   holder.icon.setLayoutParams(layoutParams);   holder.itemView.setOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View v) {           String data = (String) v.getTag();           selectedStickerItem(data);       }   }); } Step.2- Applying a sticker on the image When a particular sticker is selected selectedStickerItem() function is called.This function calls StickerView class to add the Bitmap on the image. It sends the path of the sticker as a parameter.   public void selectedStickerItem(String path) {   mStickerView.addBitImage(getImageFromAssetsFile(path)); } In StickerView class the image of the sticker is then converted into a Bitmap. It creates an object(item) of StickerItem class. This object calls the init function, which handles the size of the sticker and the placement of the sticker on the image. public void addBitImage(final Bitmap addBit) {   StickerItem item = new StickerItem(this.getContext());   item.init(addBit, this);   if (currentItem != null) {       currentItem.isDrawHelpTool = false;   }   bank.put(++imageCount, item);   this.invalidate(); } Step.3-Resizing the Sticker in the canvas A bitmap or any image has two axes namely x and y. We can resize the image using matrix calculation. float c_x = dstRect.centerX(); float c_y = dstRect.centerY(); float x = this.detectRotateRect.centerX(); float y = this.detectRotateRect.centerY(); We then calculate the source length and the current length: float srcLen = (float) Math.sqrt(xa * xa + ya * ya); float curLen = (float) Math.sqrt(xb * xb + yb * yb); Then we calculate the scale. This is required to calculate the zoom ratio. float scale = curLen / srcLen; We need to rescale the bitmap. That is if the user rotates the sticker or zoom in or zoom out the sticker. A helpbox surrounds the stickers showing the actual size of the sticker. This helpbox which is rectangular shape helps in resizing the sticker. RectUtil.scaleRect(this.dstRect, scale);// Zoom destination rectangle // Recalculate the Toolbox coordinates helpBox.set(dstRect); updateHelpBoxRect();// Recalculate rotateRect.offsetTo(helpBox.right - BUTTON_WIDTH, helpBox.bottom       - BUTTON_WIDTH); deleteRect.offsetTo(helpBox.left - BUTTON_WIDTH, helpBox.top       - BUTTON_WIDTH); detectRotateRect.offsetTo(helpBox.right - BUTTON_WIDTH, helpBox.bottom       - BUTTON_WIDTH); detectDeleteRect.offsetTo(helpBox.left - BUTTON_WIDTH, helpBox.top       - BUTTON_WIDTH); Conclusion In Phimpme a user can now place the sticker on top of the image. Resize the sticker, that is Zoom…

Continue ReadingImplementing Stickers on an Image in Phimpme