Full width Dialog, placed just above the soft keyboard - android

I want to achieve the following design: A dialog with custom layout, created programatically. It will contain an EditText and a Button. I want the soft keyboard to pop up when the dialog appears, and I want the dialog to fill the screen horizontally and to be placed right above the keyboard.
Here is what I've done right now:
final AlertDialog obsDialog = new AlertDialog.Builder(ProdutoDetalheActivity.this).create();
final View obsLayout = View.inflate(getApplicationContext(), R.layout.observation_layout, null);
Button obsButton = (Button) obsLayout.findViewById(R.id.observation_button);
obsEdit = (EditText) obsLayout.findViewById(R.id.observation_edit);
obsButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
text.setText(String.valueOf(obsEdit.getText()));
obsDialog.dismiss();
}
});
obsDialog.setView(obsLayout);
obsDialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT);
obsDialog.show();
obsEdit.requestFocus();
But this doesn't makes the dialog full width, nor calls the soft keyboard. And I still wonder how can I align the dialog with the keyboard.
I've tried these answers with no success.
Thanks in advance for any help!
[EDIT] I've brought the keyboard up by using the following code:
obsDialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT);
obsDialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
[EDIT] Below is a printscreen of the design I want to achieve:

As far as I know, you have to adjust the dialog size/position in the code if you do not want the default size/position.
In you case specifically, you can fist declare adjustResize for the activity's windowSoftInputMode in the AndroidManifest.xml.
After that, you can set your dialog gravity at bottom and set the width in the onStart of the dialog fragment:
...
getDialog().getWindow().setLayout(mWidth, mHeight);
WindowManager.LayoutParams lp = getDialog().getWindow().getAttributes();
lp.gravity = Gravity.BOTTOM;
lp.x = 0; lp.y = 0;
getDialog().getWindow().setAttributes(lp);
...
the mWidth and mHeight are initialized in onCreate, but I think you can do it in the onStart as well. To get the width, I used below code:
Point size = new Point();
WindowManager wm = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
display.getSize(size);
mWidth = size.x;
Hope this can meet your requirement. I used this to create a similar dialog, but I do not have a edit in the dialog. And I need it to be at the bottom of the screen.

Related

DialogFragment Center Horizontal

I tried to make my dialog fill in the whole screen. Here's the code:
public void onStart() {
super.onStart();
AlertDialog dialog = (AlertDialog)getDialog();
WindowManager.LayoutParams params = getDialog().getWindow().getAttributes();
params.width = ViewGroup.LayoutParams.MATCH_PARENT;
params.height = ViewGroup.LayoutParams.MATCH_PARENT;
dialog.getWindow().setAttributes(params);
}
The problem is that the height still seems to wrap the content. The width however looks fine. This would be okay, but besides the fact that the height isn't filling the whole screen, the dialog now isn't horizontally centered anymore, but starts at the top edge of the screen.
I already tried params.gravity = Gravity.CENTER without success.
Any ideas on that?

Change the width of the Dialog window of Android app dynamically

I am creating an Android application. In that application, I am using
a Dialog window to display HTML contents which come from the sever
side. I created the Dialog window using below method.
private void displayDialogWindow(String html) {
// here I have created new dialog window
dialog = new Dialog(cordova.getActivity(),
android.R.style.Theme_NoTitleBar);
dialog.getWindow().getAttributes().windowAnimations =
android.R.style.Animation_Dialog;
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(true);
// creates a new webview to display HTML and attached to
dialog to display
webview = new WebView(cordova.getContext());
webview.setLayoutParams(new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
webview.setWebChromeClient(new WebChromeClient());
webview.requestFocusFromTouch();
final String mimeType2 = "text/html";
final String encoding2 = "UTF-8";
webview.loadDataWithBaseURL("", html, mimeType2, encoding2, "");
dialog.setContentView(webview);
// get the screen size of the device
WindowManager wm = (WindowManager) ctx
.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
// set appropriate sizes to the dialog window whether there is
side menu or not
lp.copyFrom(dialog2.getWindow().getAttributes());
lp.width = width ;
lp.height = height - 100;
dialog.getWindow().setAttributes(lp2);
dialog.show();
}
Using above method I could successfully create a Dialog window.
And I am creating the Dialog window using a Thread,
Runnable runnable = new Runnable() {
public void run() {
displayDialogWindow(html);
}
};
But after display the Dialog window once, I want to change the width
of the Dialog window dynamically. (eg. when I click on another button
of my app, the width of the window should be decreased and come to the
original width when another button is pressed).
Can any one help me to change the width of the Dialog window dynamically?
I think that you have to "recreat" your dialog everytime you want to change it.
After yourDialog.show() method, you can insert this line:
yourDialog.getWindow().setLayout((6 * width)/7, LayoutParams.WRAP_CONTENT);
This allow you to resize your Dialog window and it's content.
Of course width and height are the size of your screen.

How to draw view on top of soft keyboard like WhatsApp?

I want to know how it's possible to add View on top of Keyboard like WhatsApp and Hangout. In chat screen, they insert emoticons view on top of the opened soft keyboard.
Does anyone know how to achieve this behavior?
Well, I have created a sample keyboard for chatting here...
Here, I use popup window for showing popup window and height of popup is calculated dynamically by height of keyboard
// Initially defining default height of keyboard which is equal to 230 dip
final float popUpheight = getResources().getDimension(
R.dimen.keyboard_height);
changeKeyboardHeight((int) popUpheight);
// Creating a pop window for emoticons keyboard
popupWindow = new PopupWindow(popUpView, LayoutParams.MATCH_PARENT,
(int) keyboardHeight, false);
and height is calculated using this function :
/**
* Checking keyboard height and keyboard visibility
*/
int previousHeightDiffrence = 0;
private void checkKeyboardHeight(final View parentLayout) {
parentLayout.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Rect r = new Rect();
parentLayout.getWindowVisibleDisplayFrame(r);
int screenHeight = parentLayout.getRootView()
.getHeight();
int heightDifference = screenHeight - (r.bottom);
if (previousHeightDiffrence - heightDifference > 50) {
popupWindow.dismiss();
}
previousHeightDiffrence = heightDifference;
if (heightDifference > 100) {
isKeyBoardVisible = true;
changeKeyboardHeight(heightDifference);
} else {
isKeyBoardVisible = false;
}
}
});
}
Using all these stuff i am able to make a perfect overlapping keyboard....
then i inflate popup window with viewpager and gridview for emoticons.
Also, i use spannable string for showing these emoticons in listview and chat window
After a heavy time of research and try-and-error, I've found another solution similar to the one of Chirag Jain above, but using a custom Dialog.
mDialogKeyboard = new Dialog(this,android.R.style.Theme_NoTitleBar);
mDialogKeyboard.setContentView(R.layout.your_custom_layout);
mDialogKeyboard.getWindow().setFlags(WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL,WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL);
mDialogKeyboard.getWindow().setFlags(WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH,WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH);
mDialogKeyboard.getWindow().setFlags(WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM,WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);
mDialogKeyboard.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
WindowManager.LayoutParams lp=mDialogKeyboard.getWindow().getAttributes();
lp.width=WindowManager.LayoutParams.MATCH_PARENT;
lp.height=mSoftKeyboardHeight;
lp.gravity=Gravity.BOTTOM | Gravity.LEFT;
lp.dimAmount=0;
Despite the fact that Chirag Jain answer seems to be more clean, I'll post this here for have an alternative method.
As far as I know you can draw on other applications, yes. I myself have designed such an app. As for drawing on an application such as the keyboard or any other application in specific, I guess, you'll have to define a layout with a height that's exactly that of the keyboard. So, that would vary from device to device. So, this isn't possible.
I still stick to my notion that WhatsApp merely dismisses the soft keyboard on pressing the smiley button and calls it's own fragment.
If you would still like to pursue this, here's how you draw a "window" over other applications. These should be it's layout parameters.
params = new WindowManager.LayoutParams(
WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY,
WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN,
PixelFormat.TRANSLUCENT);
Albeit, your width will change to an absolute pixel value since you'd like the activity to be over the keyboard only.
If I've misunderstood the question, please correct me.
what my thinking is they have created their own keypad for smiles, and on click of smile icon or keypad icon they are hiding smile keypad and showing the normal keypad. there are two scenarios in whats app case 1) if you don't focus 1st time of editext then you can not see the show keypad button,and the height of smile keypad is exactly same as normal keypad,we will get the keypad height only after our view layout is changed, means only after the keypad is shown, that means they are creating their own keypad.. 2) if you focus the edittext and click of smile button then it will show the option of show keypad button Please correct me if i am not right on this
I recently had to implement a view which would be above a soft keyboard. #Chirag Jain's solution is almost right, but it does not count with the system buttons in the bottom of the screen! This will make the keyboard height incorrect on some devices like NEXUS 6. This solution should work across all devices:
1) create layout which contains your view
<RelativeLayout
android:id="#+id/keyboard_info_container"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="#color/C12"
android:padding="10dp"
android:visibility="invisible">
....
</RelativeLayout>
2) Bind view
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootview = inflater.inflate(R.layout.notifications_email_settings_fragment, container, false);
ButterKnife.bind(this, rootview);
checkKeyboardHeight(rootview);
3) keyboard check and view margin settings
private void checkKeyboardHeight(final View parentLayout) {
parentLayout.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
int previousHeightDiffrence = 0;
int systemBarHigh = 999999;
#Override
public void onGlobalLayout() {
Rect r = new Rect();
parentLayout.getWindowVisibleDisplayFrame(r);
int screenHeight = parentLayout.getRootView()
.getHeight();
int keyboardHeight = screenHeight - (r.bottom);
if(systemBarHigh > keyboardHeight) {
systemBarHigh = keyboardHeight;
}
if (keyboardHeight > 250) {
int keyboardHightWithoutSystemBar = keyboardHeight - systemBarHigh;
// no need to update when the keyboard goes down
if (previousHeightDiffrence != keyboardHightWithoutSystemBar) { // if (Math.abs(previousHeightDiffrence - keyboardHeight) > 10) {
adjustKeyboard(keyboardHightWithoutSystemBar);
}
keyboardInfoContainer.setVisibility(View.VISIBLE);
isKeyBoardVisible = true;
previousHeightDiffrence = keyboardHightWithoutSystemBar;
} else {
isKeyBoardVisible = false;
if (keyboardInfoContainer != null) {
keyboardInfoContainer.setVisibility(View.INVISIBLE);
}
}
}
});
}
private void adjustKeyboard(int keyboardHeight) {
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) keyboardInfoContainer.getLayoutParams();
lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
lp.bottomMargin = keyboardHeight;
keyboardInfoContainer.requestLayout();
}
#jirkarrr, Why don't you add the keyboardInfoContainer like this:
WindowManager wm = getWindowManager();
WindowManager.LayoutParams lps = new WindowManager.LayoutParams();
lps.x = 0; lps.y = keyboardHeight;
wm.addView(keyboardInfoContainer, lps);
I do as your code, but it cannot show out the keyboardInfoContainer.
I use a popup to put view over the keyboard:
public void showPopUpKeyboard() {
mIsPopupVisible = true;
// Initialize a new instance of LayoutInflater service
LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
// Inflate the custom layout/view
View customView = inflater.inflate(R.layout.popup_in_keyboard, null);
mScrollView = (ScrollView) customView.findViewById(R.id.keyboard_layout_view);
// Initialize a new instance of popup window
mPopupWindow = new PopupWindow(
customView,
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT
);
setSizeForSoftKeyboard();
// Get a reference for the custom view close button
Button closeButton = (Button) customView.findViewById(R.id.ib_close);
// Set a click listener for the popup window close button
closeButton.setOnClickListener((View view) -> {
// Dismiss the popup window
mIsPopupVisible = false;
mPopupWindow.dismiss();
});
mPopupWindow.showAtLocation(mParentLayout, Gravity.CENTER, 0, 0);
}
Then I try to know keyboard's height:
mParentLayout.getViewTreeObserver().addOnGlobalLayoutListener(() -> {
Rect r = new Rect();
mParentLayout.getWindowVisibleDisplayFrame(r);
int heightDiff = mParentLayout.getRootView().getHeight() - (r.bottom - r.top);
if (heightDiff > 100) {
//enter your code here
if (mIsPopupVisible) {
keepKeyboard();
mIsPopupVisible = false;
mPopupWindow.dismiss();
}
} else {
//enter code for hid
}
});
You can check this tutorial and this example in GitHub

EditText not shown in custom FragmentDialog

I'm trying to show a simple prompt dialog fragment programatically. I've extended SherlockFragmentActivity, and coded a custom SherlockDialogFragment implementation in it.
(I'm using ActionbarSherlock library, but I think the problem doesn't have to do with it, and would also be observed using regular ActionBar and Fragments).
This is the overriden oncreateDialog method inside the custom FragmentActivity class:
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
//Skipped section. Setting positive, negative buttons, title, message on builder.
efPsw = new EditText(getActivity());
// Hacky margin stuff (yeah, I know it's dirty)
DisplayMetrics displaymetrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int smallestSide = Math.min(displaymetrics.heightPixels, displaymetrics.widthPixels);
int margin = (int)(0.5 * ((double) smallestSide));
efPsw.setTransformationMethod(PasswordTransformationMethod.getInstance());
FrameLayout fl = new FrameLayout(getActivity());
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(margin, 0, margin, 0);
fl.addView(efPsw, layoutParams);
builder.setView(fl);
return builder.create();
}
When I show the fragment, the inner framelayout is not shown (looks like an invisible rectangle that grows in height with each typed character). I'm not sure what am I doing wrong here, but certainly something must be wrong, since if I put the edittext in setView everything works fine (but without margin).
Thanks in advance.
it looks like you are making the margin half the smallest side, which in portrait mode would make your margin the entire screen. i would start by reducing the margin.
you can apply the margins directly to the EditText using the setLayoutParams() method. That would eliminate the FrameLayout.

AlertDialog Displays Landscape-Sized View with Orientation in Landscape

My app's main activity is set in the manifest to always be in portrait view. This works fine when I load the app onto the tablet.
However, when I use my menu button and click "Setup", which opens an AlertDialog that inflates an xml layout, the tablet will display the left 2/3 or so of the entire dialog. The rest of it goes offscreen to the right. This case only occurs if I install my app on the tablet while holding it in landscape mode or if I turn the tablet to landscape mode while the app is not running (even if I go back to Portrait and click on the app). The dialog even calls this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); to make sure it stays in portrait (even though the problem persists with this call or not).
In other words, the way the AlertDialog is being displayed in portrait view is that it is blowing up a landscape view (and thus some of it goes offscreen), even though the actual orientation of the AlertDialog is portrait, like it should be.
(I apologize if the wording above was confusing - ask me to clarify anything if needed.)
So why would the tablet do this? I've tested it on a few android mobile phones and this doesn't happen, so I don't understand why the tablet will do this.
SIDE NOTES:
This isn't even occurring for just this AlertDialog either.. my EULA that displays at the start of the app (another AlertDialog) also appears this way if I start the app in landscape mode.
I've even allowed the usability of landscape by getting rid of all calls to specify portrait/landscape mode, and the tablet is still expending the dialog off-screen when held in portrait view on just the tablet, but not the phones.
EDIT:
This code works well on the phone, but the tablet problem still persists. If I uncomment dialog.show(); below, the tablet and phone display the dimensions I want, but on blackness instead of the dimmed main screen. Any ideas?
Calling function does this:
showDialog(EXAMPLE_CASE);
Function that gets called by the calling function:
protected Dialog onCreateDialog(final int id) {
Dialog dialog;
AlertDialog.Builder builder = new AlertDialog.Builder(this);
Display display = getWindowManager().getDefaultDisplay();
int mwidth = display.getWidth();
int mheight = display.getHeight();
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
switch(id) {
// Example of what all my cases look like (there were way too many to copy)
case EXAMPLE_CASE:
builder.setTitle("Example")
.setMessage("Example message")
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialoginterface,int i) {
dialoginterface.dismiss();
showDialog(DIALOG_CHOICE);
}
})
.setCancelable(false);
dialog = builder.create();
break;
}
if (dialog != null) {
lp.copyFrom(dialog.getWindow().getAttributes());
lp.width = mwidth;
lp.height = mheight;
lp.x = mwidth;
//lp.y = mheight;
lp.dimAmount=0.0f;
//dialog.show();
dialog.getWindow().setAttributes(lp);
dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
dialog.setOnDismissListener(new OnDismissListener() {
#Override
public void onDismiss(DialogInterface dialog) {
removeDialog(id);
}
});
}
return dialog;
}
You could try getting the screen dimensions like this:
Display display = getWindowManager().getDefaultDisplay();
int mwidth = display.getWidth();
int mheight = display.getHeight();
And then alter the Dialog like this:
AlertDialog.Builder adb = new AlertDialog.Builder(this);
Dialog d = adb.setView(new View(this)).create();
// (That new View is just there to have something inside the dialog that can grow big enough to cover the whole screen.)
d.show();
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(d.getWindow().getAttributes());
lp.width = mwidth;
lp.height = myheight;
//change position of window on screen
lp.x = mwidth/2; //set these values to what work for you; probably like I have here at
lp.y = mheight/2; //half the screen width and height so it is in center
//set the dim level of the background
lp.dimAmount=0.1f; //change this value for more or less dimming
d.getWindow().setAttributes(lp);
//add a blur/dim flags
d.getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND | WindowManager.LayoutParams.FLAG_DIM_BEHIND);
Also, you say you are inflating a custom layout. Have you tried tinkering with the layout_height and layout_width of the views in that layout to see if that makes a difference?

Categories

Resources