Adding EditText With Google Input Option While Sharing In Phimpme App

In Phimpme Android App an user can share images on multiple platforms. While sharing we have also included caption option to enter description about the image. That caption can be entered by using keyboard as well Google Voice Input method. So in this post, I will be explaining how to add edittext with google voice input option. Let’s get started Step-1 Add EditText and Mic Button in layout file <ImageView       android:layout_width="20dp"       android:id="@+id/button_mic"       android:layout_height="20dp"       android:background="?android:attr/selectableItemBackground"       android:background="@drawable/ic_mic_black"       android:scaleType="fitCenter" /> </RelativeLayout> Caption Option in Share Activity in Phimpme In Phimpme we have material design dialog box so right now I am using getTextInputDialogBox(). It will prompt the material design dialog box to enter caption to share image on multiple platform. Step-2 Now we can get caption from edittext easily using the following code. if (!captionText.isEmpty()) {   caption = captionText;   text_caption.setText(caption);   captionEditText.setSelection(caption.length()); } else {   caption = null;   text_caption.setText(caption); } Step - 3 (Now add option Google Voice input option) To use google input option I have added a global function in Utils class. To use that method just call that method with proper arguments. public static void promptSpeechInput(Activity activity, int requestCode, View parentView, String promtMsg) {   Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);   intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);   intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault());   intent.putExtra(RecognizerIntent.EXTRA_PROMPT, promtMsg);   try {       activity.startActivityForResult(intent, requestCode);   } catch (ActivityNotFoundException a) {       SnackBarHandler.show(parentView,activity.getString(R.string.speech_not_supported));   } } Just pass the request code to receive the speech text in onActvityResult() method and passs promt message which will be visible to user. Step - 4 (Set text to caption ) if (requestCode == REQ_CODE_SPEECH_INPUT && data!=null){       ArrayList<String> result = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);       String voiceInput = result.get(0);       text_caption.setText(voiceInput);       caption = voiceInput;       return; } Now we can set the text in caption string right now I am adding text in existing caption i.e If the user enter some text using edittext and after that user clicked on mic button then the extra text will be added after the previous text. So this is how I have used Google voice input method and made the function globally. Resources: Stack overflow example : https://stackoverflow.com/questions/18049157/how-to-programmatically-initiate-a-google-now-voice-search Another post on Google Voice input : https://www.androidhive.info/2014/07/android-speech-to-text-tutorial/

Continue ReadingAdding EditText With Google Input Option While Sharing In Phimpme App

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