Author: Subhankar29

This author has written 16 articles
Read more about the article Share Images on Pinterest from Phimpme Android Application

Share Images on Pinterest from Phimpme Android Application

After successfully establishing Pinterest authentication in Phimpme our next goal was to share the image on the Pinterest website directly from Phimpme, without using any native Android application. Adding Pinterest Sharing option in Sharing Activity in Phimpme To add various sharing options in Sharing Activity in the Phimpme project, I have applied a ScrollView for the list of the different sharing options which include: Facebook, Twitter, Pinterest, Imgur, Flickr and Instagram. All the App icons with the name are arranged in a TableLayout in the activity_share.xml file. Table rows consist of two columns. In this way, it is easier to add more app icons for future development. <ScrollView   android:layout_width="wrap_content"   android:layout_height="@dimen/scroll_view_height"   android:layout_above="@+id/share_done"   android:id="@+id/bottom_view">   <LinearLayout       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:orientation="vertical">       <TableLayout Adding Pinterest app icon on the icons_drawable array. This array is then used to inflate the icon on the list view. private int[] icons_drawables = {R.drawable.ic_facebook_black, R.drawable.ic_twitter_black,R.drawable.ic_instagram_black, R.drawable.ic_wordpress_black, R.drawable.ic_pinterest_black); Adding Pinterest text on the titles_text array. This array is then used to inflate the names of the various sharing activity. private int[] titles_text = {R.string.facebook, R.string.twitter, R.string.instagram,       R.string.wordpress, R.string.pinterest); Prerequisites to share Image on Pinterest To share an Image on Pinterest a user has to add a caption and Board ID. Our first milestone was to get the input of the Board ID  by the user. I have achieved this by taking the input in a Dialog Box. When the user clicks on the Pinterest option, a dialog box pops and then the user can add their Board ID. private void openPinterestDialogBox() {   AlertDialog.Builder captionDialogBuilder = new AlertDialog.Builder(SharingActivity.this, getDialogStyle());   final EditText captionEditText = getCaptionDialog(this, captionDialogBuilder);   captionEditText.setHint(R.string.hint_boardID);   captionDialogBuilder.setNegativeButton(getString(R.string.cancel).toUpperCase(), null);   captionDialogBuilder.setPositiveButton(getString(R.string.post_action).toUpperCase(), new DialogInterface.OnClickListener() {       @Override       public void onClick(DialogInterface dialog, int which) {           //This should be empty it will be overwrite later           //to avoid dismiss of the dialog on the wrong password       }   });   final AlertDialog passwordDialog = captionDialogBuilder.create();   passwordDialog.show();   passwordDialog.getButton(AlertDialog.BUTTON_POSITIVE).setOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View v) {           String captionText = captionEditText.getText().toString();           boardID =captionText;           shareToPinterest(boardID);           passwordDialog.dismiss();       }   }); } A user can fetch the Board ID by following the steps: Copy the Board URL from the Pinterest main page. Paste the URL in the dialog box of the website: https://www.nutt.net/how-do-i-get-pinterest-board-id/ Copy the Board ID from the website and then past it in the AlertDialog Box. Board ID is necessary because it specifies where the image needs to be posted. Creating custom post function for Phimpme The image is posted using a function in PDKClient class. PDKClient is found in the PDK module which we get after importing Pinterest SDK. Every image is posted on Pinterest is called a Pin. So we will call createPin function. I have made my custom createPin function so that it also accepts Bitmaps as a parameter. In the Pinterest SDK it only accepts image URL to share, The image should already be on the internet to be shared. For this reason, we to add a custom create Pin function to accept Bitmaps as an option. public void createPin(String note, String boardId, Bitmap image, String link, PDKCallback callback) {   if (Utils.isEmpty(note)…

Continue ReadingShare Images on Pinterest from Phimpme Android Application
Read more about the article Adding Pinterest Integration in Phimpme Android

Adding Pinterest Integration in Phimpme Android

After establishing Facebook and Twitter share in Phimpme, our next goal was to integrate more social networking sites. Pinterest is an ideal website for us as it is widely used among various photography enthusiasts. Our goal was to share the image on the Pinterest website without the use of any other native android application. Note: First, we added Phimpme app in the developer section https://developers.pinterest.com/apps/. This step is crucial as it generates APP ID and it is necessary for authentication. Adding Pinterest option in Accounts Activity in Phimpme In accounts activity, we have added a list of accounts that we have integrated in a Recyclerview. Currently, we have integrated Facebook and Twitter. We need to add Pinterest App icon and Pinterest option in the Recyclerview. To add Pinterest app icon I downloaded the icon from iconfinder in SVG format. Using SVG format allows icon to resize itself according to the screen sizes of the users. We saved the icon file name as ic_pinterest_black.xml Pinterest icon SVG: <vector android:height="24dp" android:viewportHeight="32.0"   android:viewportWidth="32.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">   <path android:fillColor="#231F20" android:pathData="M16,0.27C7.16,0.27 0,7.43 0,16.27c0,6.55 3.94,12.18 9.58,14.65c-0.05,-1.12 -0.01,-2.46 0.28,-3.67c0.31,-1.3 2.06,-8.72 2.06,-8.72s-0.51,-1.02 -0.51,-2.53c0,-2.37 1.37,-4.14 3.08,-4.14c1.46,0 2.16,1.09 2.16,2.4c0,1.46 -0.93,3.65 -1.41,5.68c-0.4,1.7 0.85,3.08 2.53,3.08c3.03,0 5.07,-3.89 5.07,-8.51c0,-3.51 -2.36,-6.13 -6.66,-6.13c-4.85,0 -7.88,3.62 -7.88,7.66c0,1.39 0.41,2.38 1.05,3.14c0.29,0.35 0.34,0.49 0.23,0.89C9.51,20.37 9.33,21.08 9.26,21.36c-0.11,0.4 -0.44,0.55 -0.8,0.4c-2.23,-0.91 -3.28,-3.36 -3.28,-6.11c0,-4.55 3.83,-9.99 11.44,-9.99c6.11,0 10.13,4.42 10.13,9.16c0,6.28 -3.49,10.97 -8.63,10.97c-1.73,0 -3.35,-0.93 -3.91,-1.99c0,0 -0.93,3.69 -1.13,4.4c-0.34,1.23 -1,2.46 -1.61,3.43C12.9,32.04 14.43,32.27 16,32.27c8.84,0 16,-7.16 16,-16S24.84,0.27 16,0.27z"/> </vector> We made an array of all the accounts list in the Accounts Activity. I added Pinterest in the array list. This array list is inflated in the Accounts Activity. public static String[] accountName = {"Facebook", "Twitter", "Drupal", "NextCloud", "Wordpress", "Pinterest"}; To add the icon the recyclerview, we have to get the resource id from the drawable folder and then set is in the recyclerview. We have done it dynamically so that we don’t have to fetch the id of every accounts icons. Integer id = getContext().getResources().getIdentifier(context.getString(R.string.ic_) +               (accountName[position].toLowerCase()) + "_black"       , context.getString(R.string.drawable)       , getContext().getPackageName()); holder.accountAvatar.setImageResource(id); Importing Pinterest SDK in Phimpme project To import the Pinterest SDK in the project, please download the Pinterest SDK from the link: http://assets.pinterest.com/sdk/android-pdk.tar. Go to File->import new module->Import Gradle Project. Build the project, if there is any error resolve the error and then build Gradle again. compile project(‘:pdk’) Add APP ID in the manifest file of the project We need to add the APP ID that was generated while making the app the Pinterest in the manifest folder of the Phimpme Android. In the case of Phimpme, we have added the APP ID in the intent filter in the Accounts Activity. This is necessary for the interaction of the Phimpme with the Pinterest website. <activity   android:name=".accounts.AccountActivity"   android:screenOrientation="portrait"   android:theme="@style/Theme.AppCompat.NoActionBar">   <intent-filter>       <action android:name="android.intent.action.VIEW" />       <category android:name="android.intent.category.DEFAULT" />       <category android:name="android.intent.category.BROWSABLE" />       <data android:scheme="pdk4910600717739247160" />   </intent-filter> </activity> Establishing Pinterest authentication in Accounts Activity First, we need to import all the necessary class from the Pinterest SDK. These class includes callback functions, PDKClient which manages the interface between the Phimpme app and the Pinterest website. We need to pass the APP ID in the PDKClient…

Continue ReadingAdding Pinterest Integration in Phimpme Android
Read more about the article Adding ActionMenuView to place Navigation Buttons in Phimpme Android

Adding ActionMenuView to place Navigation Buttons in Phimpme Android

In the previous version of Phimpme a user had to use the traditional popup view to navigate the image to the Edit Activity or to the share activity or move and copy the image. We implemented an additional toolbar on the bottom of the screen to have quick access to the buttons for the said features. First implementation with popup view In the first version, we were using popup view to navigate the image while viewing it from the gallery. This is a traditional but rather confusing way for any new user to figure how to choose the edit option or share the image from the gallery.                                                    Adding ActionMenuView on the bottom of the screen Let’s add action menu view to the xml file. To place the ActionMenuView at the bottom of the screen we set android:background to true. By default the color of the bottom action bar to be default color of the application. We want to make the color of the bottom bar to be transparent in order to see the image behind it. To set the color of the bottom bar translucent we append #59 with the color hex code. For example-  android:background=”#59000000” <android.support.v7.widget.ActionMenuView        android:id="@+id/toolbar_bottom"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:layout_alignParentBottom="true"        android:background="#59000000"        android:elevation="4dp"/> Add items in the menu to be displayed on the bottom bar Add menu.xml in res->menu. We need to add items in the menu.xml in order inflate in the bottom bar. <menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/action_edit"        android:orderInCategory="200"        app:showAsAction="always"        android:icon="@drawable/ic_mode_edit_white"        android:title="Edit"/>    <item        android:id="@+id/action_copy"        android:orderInCategory="150"        app:showAsAction="always"        android:icon="@drawable/ic_content_copy_white"        android:title="Copy"/>    <item        android:id="@+id/action_move"        android:orderInCategory="100"        app:showAsAction="always"        android:icon="@drawable/ic_folder_open_white"        android:title="Move"/>    <item        android:id="@+id/action_details"        android:orderInCategory="110"        app:showAsAction="always"        android:icon="@drawable/ic_info_white"        android:title="Move"/> </menu> Inflating Bottom ActionMenuView In your main activity get the id of the ActionMenuView and typecast it: ActionMenuView bottomBar = (ActionMenuView) findViewById(R.id.toolbar_bottom); Inflate the bottomBar with the menu.xml Menu bottomMenu = bottomBar.getMenu(); getMenuInflater().inflate(R.menu.menu_bottom_view_pager, bottomMenu); ActionMenuView shares the same onOptionItemSelected function with toolbar of the application. We will send the each item from the action menu bar onOptionItemSelected in a for loop. The loop will run till bottomMenu.size. This enables onClick of the navigation button. for (int i = 0; i < bottomMenu.size(); i++){            bottomMenu.getItem(i).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener(){                @Override                public boolean onMenuItemClick(MenuItem item) {                    return onOptionsItemSelected(item);                }            });        } Conclusion While using two toolbars on the application we use ActionMenuView for the second toolbar which is at the bottom. ActionMenuView evenly spaces the button on the bottom toolbar. Link: https://github.com/fossasia/phimpme-android Resources http://www.vogella.com/tutorials/AndroidActionBar/article.html https://developer.android.com/reference/android/widget/Toolbar.html

Continue ReadingAdding ActionMenuView to place Navigation Buttons in Phimpme Android

Adding Stickers Feature on Phimpme Android App with ViewFlipper and Scrollview

For any image editing application stickers play an important role in editing an image. Phimpme is no different. There can be many different kinds of stickers. As Phimpme is an Open Source application. The user can add their own stickers to be implemented on Phimpme. But this gives a long and non-exhaustive list of stickers that the user has to go through. Sorting the stickers into different categories is one way of doing it. It provides quick access to the desired sticker a user wants to add to her or his photo. In order to achieve this, I am using ViewFlipper and Scrollview. Categorizing the types of Stickers. How it is done in Phimpme? Currently, there are six different categories for stickers. Namely: Facial, Hearts, Objects, Comments, Wishes, Animals. The following code is used to store the category name: public static final String[] stickerPath = {"stickers/type1", "stickers/type2", "stickers/type3", "stickers/type4", "stickers/type5", "stickers/type6"}; public static final String[] stickerPathName = {"Facial", "Hearts", "Objects", "Comments", "Wishes", "Animals"};   We need to populate the sticker fragment with the different categories. This is done by overriding onBinderHolder() function and using ImageHolder to handle onClickListener. private ImageClick mImageClick = new ImageClick(); Getting the position of the stickerPathName and setting it in stickerFragment. @Override    public void onBindViewHolder(ViewHolder holder, int position) {        ImageHolder imageHoler = (ImageHolder) holder;        String name = stickerPathName[position];        imageHoler.text.setText(name);        imageHoler.text.setTag(stickerPath[position]);        imageHoler.text.setOnClickListener(mImageClick);    }   Adding Stickers to the different categories. Now that we have different categories, we can assign different types of stickers to specific categories. We are using RecyclerView.Adapter<ViewHolder>, which implements onCreateViewHolder() method. onCreateViewHolder method is created every time we need a new view, hence RecyclerView comes handy in such situation rather than a normal list. First, we need to define the xml file where each sticker will be displayed in the form of ImageView. This ImageView has specific maxHeight and maxWidth for a uniform view. The xml file name is: view_sticker_item.xml <ImageView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/img"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:maxHeight="50dp"    android:maxWidth="50dp"    android:paddingLeft="5dp"    android:paddingRight="5dp"    android:scaleType="centerInside" /> After we set up view_sticker_item.xml, we have to inflate it. @Override    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewtype) {        View v = null;        v = LayoutInflater.from(parent.getContext()).inflate(                R.layout.view_sticker_item, parent, false);        ImageHolder holder = new ImageHolder(v);        return holder;    }   I have saved all the images in the assets folder and distributed it among type1, type2, type3, type4, type5 and type6. One thing is to be kept in mind that the images should be in png format. PNG format images are only pixelated on the required areas. So that it does not hamper the background of the image. Displaying stickers Displaying sticker are done by overriding onBindViewHolder again. It accepts two parameters: ViewHolder holder and int position. ImageHolder is used to set the image of the sticker and then handling it by onClickListner(). @Override    public void onBindViewHolder(ViewHolder holder, int position) {        ImageHolder imageHoler = (ImageHolder) holder;        String path = pathList.get(position);        ImageLoader.getInstance().displayImage("assets://" + path,                imageHoler.image, imageOption);        imageHoler.image.setTag(path);        imageHoler.image.setOnClickListener(mImageClick);    }   public void addStickerImages(String folderPath) {        pathList.clear();        try {            String[] files = mStirckerFragment.getActivity().getAssets()                    .list(folderPath);            for (String name…

Continue ReadingAdding Stickers Feature on Phimpme Android App with ViewFlipper and Scrollview

Integrating an Image Editing Page in Phimpme Android

The main aim of the Phimpme is to develop image editing and sharing application as an alternative to proprietary solutions like Instagram. Any user can choose a photo from the gallery or click a picture from the camera and upload it on the various social media platform including Drupal and wordpress. As most of the image editor applications in the app store currently my team and I discussed and listed down the basic functionality of the Image editing activity. We have listed down the following features for image Editing activity: Filters. Stickers Image tuning Choosing the Image Editing Application There are number of existing Open Source projects that we went through to check how they could be integrated into Phimpme. We looked into those projects which are licensed under the  MIT Licence. As per the MIT Licence the user has the liberty to modify the use the code, modify it, merge, publish it without any restrictions. Image-Editor Android is one such application which has MIT Licence. The Image-Editor Android has extensive features for manipulating and enhancing the image. The features are as follows: Edit Image by drawing on it. Applying stickers on the image. Applying filters. Crop. Rotating the image. Text on the image. It is an ideal application to be implemented in our project. The basic flow of the application First, getting the image either by gallery or camera. The team has implemented leafPic and openCamera. Second, redirecting the image from the leafPic gallery to the Image editing activity by choosing edit option from the popup menu. Populating the Menu in the popup menu in XML: <menu> tag is the root node, which contains ites in the popup menu. The following code is used to populate the menu: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">    <item android:id="@+id/action_edit"          android:icon="@drawable/ic_edit"          android:title="@string/Edit"          android:showAsAction="ifRoom"/>    <item android:id="@+id/action_use_as"          android:icon="@drawable/ic_use_as"          android:title="@string/useAs" /> </menu> Setting up the Image Editing Activity Image-Editor Android application contains two main sections. MainActivity (To get the image). imageeditlibrary(To edit the image) We need to import imageeditlibrary module. Android studios gives easy method to import a module from any other project using GUI. This can be done as follows: File->new->import module then choosing the module from the desired application. Things to remember after importing any module from any other project: Making sure that the minSdkVersion and targetSdkVersion in the gradle of the imported module and the current working project is same. In Phimpme the minSdkVersion is 16 and tagetSdkVersion is 25, which is used as standard SDK version. Importing all the classes in the used in the imageeditlibrary module before using them in the leadPic gallery. Sending Image to Image Editing Activity This includes three tasks: Handling onclick listeners. Sending the image from the leafPic Activity Receiving the the image in EditImageActivity. Handling onClick Listener: public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) { case R.id.action_edit: // setOnclick listener here.  } } Sending Image to EditImageActivity: First we need to get the path of the image to be send. For this we need FileUtils class to…

Continue ReadingIntegrating an Image Editing Page in Phimpme Android