Develop Reference

Place a TextInput above the Android keyboard without it drawing a black rectangle?

In my Android app I have an Activity where a user can add some text to an image. When the button to initiate this is pressed a TextInput appears at the bottom of the screen with the "Save" button overlayed.
The relevant config looks like this:
<activity
android:name=".ImageEditorActivity"
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="#string/title_activity_image_editor"
android:parentActivityName=".MainActivity"
android:windowSoftInputMode="adjustResize|stateHidden"
android:theme="#style/FullscreenTheme">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="myApp.MainActivity" />
</activity>
The activity xml looks like this - I have trimmed out a couple of extra buttons that don't related to this feature:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0099cc"
tools:context=".ImageEditorActivity"
android:id="#+id/fullscreen_content">
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginTop="50dp"
android:isScrollContainer="true" >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/edit_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"></ImageView>
<EditText
android:id="#+id/image_comment"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:paddingLeft="8dp"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="2"
android:hint="notes"
android:text=""
android:textColor="#android:color/black"
android:background="#android:color/white"
android:layout_alignParentBottom="true"
android:visibility="invisible"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<Button
android:id="#+id/image_comment_save_button"
android:layout_width="100dp"
android:layout_height="45dp"
android:layout_marginBottom="2dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Save"
android:visibility="invisible"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="parent"
/>
</RelativeLayout>
</ScrollView>
<Button
android:id="#+id/note_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/add_note"
app:layout_constraintBottom_toTopOf="parent"></Button>
The activity is started with the path to an image, which it then loads into the image. When the note button is pressed it shows the textbox.
noteButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
writeNotes();
}
});
private void writeNotes() {
InputMethodManager methodMan = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
if (noteBox.getVisibility() == View.VISIBLE) {
String text = noteBox.getText().toString();
if ( 0 < text.trim().length() ) {
Bitmap image = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
writeOnImage(image, text);
imageView.setImageBitmap(image);
saveImage(image, lastTaken);
exifData.put(ExifInterface.TAG_USER_COMMENT, text);
}
noteBox.setVisibility(View.INVISIBLE);
noteSaveButton.setVisibility(View.INVISIBLE);
methodMan.hideSoftInputFromWindow(noteBox.getWindowToken(), 0);
}
else {
noteBox.setText("");
noteBox.setVisibility(View.VISIBLE);
noteSaveButton.setVisibility(View.VISIBLE);
noteBox.requestFocus();
methodMan.toggleSoftInput(InputMethodManager.SHOW_FORCED, 0);
}
}
The problem is that when the keyboard opens, there is a big black rectangle over it, that completely obscures the EditText and the Save button. This only happens on my phone, which is on 7.1.1, the emulator variants I have tried seem to work normally. Interestingly although they are obscured, they still work - if I type something on the keyboard and then press where the Save button should be, it saves the text as expected.
This screenshot shows the problem in action:
By changing the settings around the config file, I have found situations where the black rectangle is not shown, but in every case I have found that also hides the EditText component and even after the keyboard is closed I never see it again, leaving the activity in a weird state where there is no way to press the Save button.
If the keyboard is open the whole time the black rectangle only appears once the EditText has focus, prior to that the keyboard looks normal.
The closest thing I can find in previous questions suggests that android:inputType="textNoSuggestions" might help but it doesn't seem to make any difference - this doesn't seem to be a suggestion box, just an arbitrary black rectangle.
What do I need to do to stop my keyboard drawing a pointless black rectangle right over my input box or, if I am approaching this the wrong way somehow, what do I need to do to have an input box that allows the user to see the text that they are writing and then save it when they are content that it is complete?

The problem turned out to be related to the Android software buttons at the bottom of the screen, rather than the keyboard itself- for some reason they were causing the layout to measure the screen incorrectly whenever the keyboard was opened.
The solution was to add android:fitsSystemWindows="true" to the FrameLayout at the root of the view.

UI flicker while pressing back in android

I am creating a UI for my company which has a edit-text at top and a frame layout at bottom. this frame-layout contains a mic image and animation on pressing of which it goes through 3 main state like listening.thinking and idle state.
So in short, user can provide query either by typing in edit text or by providing command by voice.
My problem occurs when user click on edit-text to provide text command. When user do so the android keyboard comes up and user insert text but after entering text if user press back button the ,the whole UI comes up before going down. This all happens very quickly and to a user it gives bad impression. It feels like UI is getting stuck but this is how by default android is handling it.
Is there a way by which I can stop this flickering or make this move smoothly.?
Currently I am making this frame layout invisible when user start editing and visible when user has finished editing but this also does not help.
I know by not providing complete code it is not a good way of asking a doubt.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
style="#style/main_style_mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:id="#+id/dialog"
style="#style/main_style_dialog"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="360dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ScrollView
>
<!--will dynamically add here widgets and edit text button as required>
<LinearLayout
android:id="#+id/linearLayout"
style="#style/main_style_scrollViewlinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</LinearLayout>
</ScrollView>
</LinearLayout>
</RelativeLayout>
<FrameLayout
android:id="#+id/mainControlLL"
style="#style/main_style_mainControlLL"
android:layout_width="fill_parent"
android:layout_height="wrap_content" > // Act as parent container for mic image and text view
<FrameLayout> //contains text view which gets displayed on top of mic image
<TextView/>
</FrameLayout>
<FrameLayout
android:id="#+id/mic_btn_layout"
style="#style/main_style_mic_btn_layout"
android:layout_width="wrap_content"
android:layout_height="118dp" >// contains mic images
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipChildren="false" >// contains mic image for listening state
<ImageView/>
<ImageButton />
<ImageButton/>
<ImageView />
</FrameLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical|center" >//contain mic images for thinking state
<ImageButton />
<ImageButton />
<ImageView />
</RelativeLayout>
<ImageButton />//contains mic image for idle state
</FrameLayout>
</FrameLayout>
</RelativeLayout>
And in my manifest I have
android:windowSoftInputMode="stateAlwaysHidden|adjustResize" and
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|locale"
Please let me know how i can correct my UI behavior.

You should put your activity state on a stack, since you are using fragments(more on this here) and override the onBackPressed() function and restore your fragment state there.
#Override
public void onBackPressed()
{
// restore fragment/activity state here
super.onBackPressed();
}

Below is API which I have modified to stop flickering.
#Override
public boolean onKeyPreIme(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_UP) {
this.clearFocus();
//Fix- Ui Flicker
// this.setFocusable(false);
// this.setFocusableInTouchMode(false);
return false;
}
return super.dispatchKeyEvent(event);
}
In above API I commented the piece of code shown above.
But Can some one explain why it was causing the jumping(going up) of UI. It was only disabling the focus of view.

progress fill on button click [duplicate]

I have a Button that is defined in a RelativeLayout as follows:
<Button
android:id="#+id/search_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
android:text="#string/search" />
I would like to add a ProgressBar behind the Button that occupies the exact same space as the Button, so that when the button is disabled (translucent), you can see the progress bar behind it. How would I do this?

To do this I had to define the button in my main.xml first, followed by the progress bar as follows:
<Button
android:id="#+id/search_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
android:text="#string/search" />
<ProgressBar
android:id="#+id/cooldown_bar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/search_button"
android:layout_below="#id/current_location"
android:layout_marginBottom="6dp"
android:layout_marginLeft="9dp"
android:layout_marginRight="9dp"
android:layout_marginTop="1dp"
android:indeterminate="false"
android:progressDrawable="#drawable/progress_bar" />
Then, once I had initialized all the GUI components, I had to bring the button back in front of the progress bar with:
searchButton.bringToFront();
The end result
Button when enabled:
Button when disabled with progress bar:

put this right before the button inside the relative layout in your xml:
<ProgressBar
android:id="#+id/descriptive_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
/>
by using all of the same layotu and padding attributes we can make sure the View will be in the same spot and roughly the same size (height could be different because of wrap_content) I think if you put the progress bar first in the layout file then the button should appear on top.
But also you can enforce whatever policy you want with view.setVisibility(visibility-ness)just make sure whenever you make one visible you make the other invisible.
that way in-case I am wrong about how they stack by default based on their position in the file (which I could be, I didn't verify it just now) and in the event you don't want to move the progress bar to bellow the button in the file, you could still achieve the same thing from the users perspective.

How would I go about moving my blue bar Image to cover all of the gray area?

As the image shows, the blue image here does not completely move to the top. I would like to be able to move this blue bar to be on the border of the black bar above, but the small gray area is there and I cannot move it in the graphical layout.
EDIT: here is the XML
<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:background="#F3F3F3" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="124dp"
android:background="#drawable/roundedcorner"
android:ems="10"
tools:ignore="TextFields" >
<requestFocus />
</EditText>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/bluebars" />
</RelativeLayout>
EDIT: My temporary solution I programmatically changed how my image is aligned.
ImageView iv;
iv = (ImageView)findViewById(R.id.imageView1);
iv.getLayoutParams().height = 265;
I call this the temporary solution because this is what I'll work with until I find a better way (I'm a newb to RelativeLayout) and this fix might cause problems on bigger/smaller devices. So it is not recommended, but it'll do until I find a better way.

Put this in Application Tag in your menifest file.
android:theme="#android:style/Theme.Light.NoTitleBar"
And Remove this If you have added in your code:
this.requestWindowFeature(Window.FEATURE_NO_TITLE);

Try this in the onCreate() of your activity.
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
This should hide the titlebar as Aleks G mentioned.
Make sure to do this before setContentView()

AlertDialog style buttons for an Activity

I have an activity with a Save and Cancel button at the bottom.
In AlertDialog, the buttons are displayed inside a styled container view of some sort.
How could I give the buttons in my Activity that same appearance? Specifically, how could I apply the style of the button container view in the AlertDialog to say a LinearLayout in my Activity containing the buttons?
Thanks

There are solutions given elsewhere that work. In short, you can simply use style attributes in your xml to achieve this. For instance, style="?android:attr/buttonBarStyle" and style="?android:attr/buttonBarButtonStyle" will do the job (for API 11+). Here is an example of two buttons horizontally put together.
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:measureWithLargestChild="true"
android:orientation="horizontal"
android:paddingTop="0dip" >
<Button
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text= "Ok" />
<Button
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
The only thing that remains, is that there is a horizontal line right above the buttons in an alertDialog, which the above code will not create. If you want to have that horizontal line, it should be added manually in the xml, above the LinearLayout. This will give you the horizontal line:
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginBottom="0dp"
android:background="?android:attr/dividerVertical" />

I do some thing like this:
LinearLayout dialogLayout = (LinearLayout) ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.dialog_addeditrecord, null);
I then use the dialogLayout to call findViewById() to pull in the buttons and other views and setup OnClickListeners and such...
then to show the dialog:
builder = new AlertDialog.Builder(this);
builder.setView(dialogLayout);
builder.create().show();