Develop Reference

How do I create a help overlay like you see in a few Android apps and ICS?

I am wanting to create help overlays like the ones you see when ICS loads for the first time or in apps like ES File Explorer or Apex Launcher (there are more, but I can't think of them right now). Is this just a relative layout with one view sitting on top of the other? I haven't been able to find any sample code for doing such a thing. Anyone know how this is done or have any ideas?

Let's assume you ordinarily would call setContentView(R.layout.main), but on first run, you want to have this overlay.
Step #1: Create a FrameLayout in Java code and pass that to setContentView().
Step #2: Use LayoutInflater to inflate R.layout.main into the FrameLayout.
Step #3: Use LayoutInflater to inflate the overlay into the FrameLayout.
Step #4: When the user taps the button (or whatever) to dismiss the overlay, call removeView() to remove the overlay from the FrameLayout.
Since the overlay is a later child of the FrameLayout, it will float over top of the contents of R.layout.main.

"Coach mark" is "Help overlay" in UX talk :-)
coach_mark.xml is your coach mark layout
coach_mark_master_view is the id of the top most view (root) in coach_mark.xml
public void onCoachMark(){
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setContentView(R.layout.coach_mark);
dialog.setCanceledOnTouchOutside(true);
//for dismissing anywhere you touch
View masterView = dialog.findViewById(R.id.coach_mark_master_view);
masterView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
dialog.dismiss();
}
});
dialog.show();
}
Adding sample of coach_mark.xml (to this excellent solution given by Oded Breiner), so its easy for ppl to copy & paste to see working example quickly.
Sample of coach_mark.xml here, change the -> drawable/coach_marks to your image:
coach_mark.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/coach_mark_master_view">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/coach_marks_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:src="#drawable/coach_marks" />
</RelativeLayout>
</LinearLayout>
And optionally use this theme to remove padding:
<style name="WalkthroughTheme" parent="Theme.AppCompat">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>

You can do that pretty quickly. You add, for exemple a LinearLayout where you put a picture with alpha which correspond to your help information and what do you want to draw like an overlay. In you xml of your activity you put this layout in a RelativeLayout after the layout of your activity with the Gone visibility. When you want to draw the help information, you just neeed to set this visibility to visible.
I hope, I'm clear, if you have any question,I'm be please to answer them.

See my another answer how programmatically show an overlay layout on top of the current activity. Activity's layout.xml does not need to know anything about the overlay skin. You can put overlay semi-transparent, cover only part of the screen, one or more textview and buttons on it...
How to overlay a button programmically?
create res/layout/paused.xml RelativeLayout template or use any layout toplevel
create a function to show overlay skin
key is to get handle to layout.xml, use LayoutInflater class to parse xml to view object, add overlay view to current layout structure
My example uses a timer to destroy overlay object by completely removing it from the view structure. This is probably what you want as well to get rid of it without a trace.
My goal was that main activities are not aware of any overlay skin, overlays come and go, many different overlays, still able to use overlay1.xml text files as a template, and content should programmatically be updated. I do pretty much what CommonsWare told us my post shows the actual program code to get started.
disclaimer: OPs "Thanks for your input. This is how I pictured it being done. I have to give credit to the answer below" comment does not mean my answer but CommonsWare answer. Stackoverflow have changed post orderings.

How to resize AlertDialog on the Keyboard display

I have a AlertDialog box with approximately 10 controls (text and TextView) on it. These controls are in a ScrollView with AlertDialog, plus I got 2 buttons positive and negative. The issue I have is when the soft keyboard pops up the two buttons are hidden behind the keyboard.
I was looking for something like redraw function on my inner View or the dialog box. Below is the screen shot of what I am talking about.

If your dialog was an activity using one of the Dialog themes you could effect this behavior by setting the adjustResize flag for the windowSoftInputMode parameter of the activity.
I'm using:
android:windowSoftInputMode="adjustResize|stateHidden"
I think you can still use this flag with regular dialogs, but I'm not sure how to apply it. You may have to create your AlertDialog with a custom theme that inherits the right parent theme and also sets that flag, or you might have to use ContextThemeWrappers and stuff.
Or maybe you can just use Window#setSoftInputMode.
alertDialog.getWindow().setSoftInputMode(
WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);

I've found a best way to handle this. Because this is a dialog, So the code
alertDialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
doesn't work very well.
Besides this code, you must set a dialog style for this dialog. The style should like below:
<style name="DialogStyle" parent="#android:style/Theme.Black.NoTitleBar.Fullscreen">
<item name="android:windowFullscreen">false</item>
......
......
</style>
NOTICE that the attribute parent is Theme.Black.NoTitleBar.Fullscreen like an activity's style. and the attribute android:windowFullScreen should be false.
Now, the dialog will be resized when the soft keyboard toggles.

Nothing worked for me except adjustPan
as per the documentation
The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.
So just simply use it in your onCreate() or onCreateView() method like:
getDialog().getWindow().setSoftInputMode(
WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
Or simply put android:windowSoftInputMode="adjustPan" in manifest for the Activiry in which we are playing with dialogs
and use android:windowSoftInputMode="adjustResize|stateHidden" in each edittext which will help the user to navigate to next textbox easily.
Point to remember
Never use MATCH_PARENT to make the dialog full screen as adjustPan will not work here. If anyone wants to make the dialog to fit the screen, just use points till 0.96 (not more than this) for the height, so the keyboard will properly reach to the edittext. I did like below :
#Override
public void onStart()
{
super.onStart();
Dialog dialog = getDialog();
if (dialog != null)
{
//int height = ViewGroup.LayoutParams.MATCH_PARENT;
int width = ViewGroup.LayoutParams.MATCH_PARENT;
Display display = getActivity().getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
//int width = (int)(size.x * 0.96);
int h = (int)(size.y * 0.96);
dialog.getWindow().setLayout(width, h);
}
}
Look, If I will use the total height (MATCH_PARENT) then soft_keyboard will squize the dialog. But if I will use points for the height (here 0.96 which is almost near to match_parent), then it will properly work.
Hope it will help someone :)

maybe you don't need to resize Dialog
add android:imeOptions="actionNext" to EditText(all but last) (it will add "Next" button to the keyboard - go to next EditText)
and add android:imeOptions="actionDone" to last EditText ("Done" button - hide keyboard)
now user should be able to click buttons
if you're creating textboxes in code use EditText#setImeOptions function
HTH

Are you forced to have it as a popup? The popup looks so large, that you may just want to have it as a separate activity. In general, popups are used to provide a brief question or statement with a few options, not a full blown data entry form. Since you can't see much behind the large popup, you're not exposing any underlying controls anyways.

to show keyboard immediately and adjust size:
editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
dialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
}
}
});

To those who are in the same situation as me.
in my case, the problem was activity having these attributes in style
<style name="SomeStyleName">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
If windowTranslucentStatus and windowTranslucentNavigation both are true,
the keyboard came up as it overlay dialog.
So I override those values to false, only for materialAlertDialog. (maybe AlertDialog or Dialog in your case)
<style name="SomeStyleName">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="materialAlertDialogTheme">#style/TranslucentMaterialAlertDialogTheme</item>
</style>
<style name="TranslucentMaterialAlertDialogTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">false</item>
</style>

Android: How do I prevent the soft keyboard from pushing my view up?

I have a vertical sliding drawer at the bottom of my app. When the soft keyboard opens, it pushes the tab for the drawer up, so it sits atop the keyboard. I actually want it to remain at the bottom of the screen, becoming hidden when the keyboard is shown.
Anyone else run into this issue? Know how to fix it?

You can simply switch your Activity's windowSoftInputModeflag to adjustPan in your AndroidMainfest.xml file inside your activity tag.
Check the official documentation for more info.
<activity
...
android:windowSoftInputMode="adjustPan">
</activity>
If your container is not changing size, then you likely have the height set to "match parent". If possible, set the parent to "Wrap Content", or a constraint layout with constraingts to top and bottom of parent.
The parent container will shrink to fit the available space, so it is likely that your content should be inside of a scolling view to prevent (depending on the phone manufacturer and the layout choosen...)
Content being smashed together
Content hanging off the screen
Content being inacccessable due to it being underneath the keyboard
even if the layout it is in is a relative or constraint layout, the content could exhibit problems 1-3.

None of the answers worked for me, but this did the trick, add this attribute to the activity tag in your AndroidManifest.xml:
<activity
...
android:windowSoftInputMode="adjustNothing">
</activity>

In my case, the reason the buttons got pushed up was because the view above them was a ScrollView, and it got collapsed with the buttons pushed up above the keyboard no matter what value of android:windowSoftInputMode I was setting.
I was able to avoid my bottom row of buttons getting pushed up by the soft keyboard by setting android:isScrollContainer="false" on the ScrollView that sits above the buttons.

You can try to add this attribute dynamically, by putting the following code in the onCreate method of your activity:
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
This worked for me, but that:
android:windowSoftInputMode="adjustPan"
didnt.

These answers here didn't help me. So I tried this:
android:windowSoftInputMode="adjustResize"
This worked like a charm, Now the header of my app doesn't disappear. Its smoother.

To do this programatically in a fragment you can use following code
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
Place this in onResume()

This one worked for me
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING);

Just a single line to be added...
Add android:windowSoftInputMode="stateHidden|adjustPan" in required activity of your manifest file.
I just got solved :) :)

For future readers.
I wanted specific control over this issue, so this is what I did:
From a fragment or activity, hide your other views (that aren't needed while the keyboard is up), then restore them to solve this problem:
rootView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Rect r = new Rect();
rootView.getWindowVisibleDisplayFrame(r);
int heightDiff = rootView.getRootView().getHeight() - (r.bottom - r.top);
if (heightDiff > 100) { // if more than 100 pixels, its probably a keyboard...
//ok now we know the keyboard is up...
view_one.setVisibility(View.GONE);
view_two.setVisibility(View.GONE);
}else{
//ok now we know the keyboard is down...
view_one.setVisibility(View.VISIBLE);
view_two.setVisibility(View.VISIBLE);
}
}
});

So far the answers didn't help me as I have a button and a textInput field (side by side) below the textView which kept getting hidden by the keyboard, but this has solved my issue:
android:windowSoftInputMode="adjustResize"

For xamarin users add this code to Activity attribute of the MainActivity class,
WindowSoftInputMode =Android.Views.SoftInput.AdjustNothing
or you can add this code Window.SetSoftInputMode(Android.Views.SoftInput.AdjustNothing) to the OnCreate method of MainActivity class.

This was the best which worked for me
android:windowSoftInputMode="adjustNothing"
Try it!

Add following code to the 'activity' of Manifest file.
android:windowSoftInputMode="adjustResize"

android:windowSoftInputMode="stateHidden|adjustNothing"
This code works.

Well i have watched these answers but in my case i fell into the same issue and got refuge through a very handy and easiest solution that involves putting a very small innocent attribute in your Scrollview tag residing in your xml file. That is
android:isScrollContainer="false"
Good luck!

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
This one is working for me.

I have solved my issue by adding
android:windowSoftInputMode="adjustNothing"
In manifest file add.
and making the Recyclerviews constraint isScrollContainer to false .
android:isScrollContainer="false"

Try to use this:
android:windowSoftInputMode="stateHidden|adjustPan"

For Scroll View:
if after adding android:windowSoftInputMode="stateHidden|adjustPan" in your Android Manifest and still does not work.
It may be affected because when the keyboard appears, it will be into a scroll view and if your button/any objects is not in your scroll view then the objects will follow the keyboard and move its position.
Check out your xml where your button is and make sure it is under your scroll View bracket and not out of it.
Hope this helps out. :D

In my case I needed the keyboard to stay hidden and just after the click of the button my layout needs to be adjusted, so I just added this command in the manifest and it got super right.
android:windowSoftInputMode="stateHidden|adjustResize"

When you want to hide view when open keyboard.
Add this into your Activity in manifest file
android:windowSoftInputMode="stateHidden|adjustPan"

None of them worked for me, try this one
private void scrollingWhileKeyboard() {
drawerlayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Rect r = new Rect();
try {
drawerlayout.getWindowVisibleDisplayFrame(r);
int screenHeight = drawerlayout.getRootView().getHeight();
int keypadHeight = screenHeight - r.bottom;
if (keypadHeight > screenHeight * 0.15) {
tabLayout.setVisibility(View.GONE);
} else {
tabLayout.setVisibility(View.VISIBLE);
}
} catch (NullPointerException e) {
}
}
});
}

I was struggling for a while with this problem. Some of the solutions worked however some of my views where still being pushed up while others weren't... So it didn't completely solve my problem. In the end, what did the job was adding the following line of code to my manifest in the activity tag...
android:windowSoftInputMode="stateHidden|adjustPan|adjustResize"
Good luck

The activity's main window will not resize to make room for the soft keyboard. Rather, the contents of the window will be automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing.
android:windowSoftInputMode="adjustPan"
This might be a better solution for what you desired.

This code may help you. Use it in your oncreate method.
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);

Include in your manifest file under activity which you want to display .But make sure not using Full screen Activity
android:windowSoftInputMode="adjustPan"

#manifest in your activity:
android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

There are two ways of solving this problem.
Go to the AndroidManifist.xml, and in the name of your activity, add this line
android:windowSoftInputMode="adjustPan"
As in the below code, I have added to the Register Activity.
<activity android:name=".Register"
android:windowSoftInputMode="adjustPan">
In the second way, go to your activity, and in your onCreate method, add this code.
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);

Android soft keyboard covers EditText field

Is there a way to make the screen scroll to allow the text field to be seen?

I had same issues. Try following code:
android:windowSoftInputMode="adjustPan"
add it to your manifest.xml in the activity tag of the activity that holds the input. example:
<activity
android:name=".Activities.InputsActivity"
...
android:windowSoftInputMode="adjustPan"
/>

Are you asking how to control what is visible when the soft keyboard opens? You might want to play with the windowSoftInputMode. See developer docs for more discussion.

I had the same issue where the softkeyboard was on top of the EditText views which were placed on the bottom of the screen. I was able to find a solution by adding a single line to my AndroidManifest.xml file's relevant activity.
android:windowSoftInputMode="adjustResize|stateHidden"
This is how the whole activity tag looks like:
<activity
android:name="com.my.MainActivity"
android:screenOrientation="portrait"
android:label="#string/title_activity_main"
android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>
Here the most important value is the adjustResize. This will shift the whole UI up to give room for the softkeyboard.

Why not try to add a ScrollView to wrap whatever it is you want to scroll. Here is how I have done it, where I actually leave a header on top which does not scroll, while the dialog widgets (in particular the EditTexts) scroll when you open soft keypad.
<LinearLayout android:id="#+id/HeaderLayout" >
<!-- Here add a header or whatever will not be scrolled. -->
</LinearLayout>
<ScrollView android:id="#+id/MainForm" >
<!-- Here add your edittexts or whatever will scroll. -->
</ScrollView>
I would typically have a LinearLayout inside the ScrollView, but that is up to you. Also, setting Scrollbar style to outsideInset helps, at least on my devices.

All you need to do is
android:isScrollContainer="true"
source: http://www.davidwparker.com/2011/08/25/android-fixing-window-resize-and-scrolling/

Sorry for reviving an old thread but no one mentioned setting android:imeOptions="flagNoFullscreen" in your EditText element

android:windowSoftInputMode="adjustPan"
android:isScrollContainer="true"
works for android EditText, while it not works for webview or xwalkview. When soft keyboard hide the input in webview or xwalkview you have use android:windowSoftInputMode="adjustResize"

I believe that you can make it scroll by using the trackball, which might be achieved programmatically through selection methods eventually, but it's just an idea. I know that the trackball method typically works, but as for the exact way to do this and make it work from code, I do not sure.
Hope that helps.

add this single line to your relative activity where key board cover edit text.inside onCreat()method of activity.
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);

just add
android:gravity="bottom" android:paddingBottom="10dp"
change paddingBottom according to your size of edittext

I know this is old but none of the above solutions worked for me. After extensive debugging, I figured out the issue.
The solution is setting the android:windowTranslucentStatus attribute to false in my styles.xml

If EditText Field is been covered by the KeyBoard Use the following code:
EditText= findViewById(R.id.edittext)
EditText?.getParent()?.requestChildFocus(EditText,EditText)
If you want the Cursor to be in the Focused EditText than use EditText.requestFocus() after the EditText?.getParent()?.requestChildFocus(EditText,EditText) which helps to get the focus and Cursor in the Focused EditText.

The above solution work perfectly but if you are using Fullscreen activity(translucent status bar) then these solutions might not work.
so for fullscreen use this code inside your onCreate function on your Activity.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN , WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN );
getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.TYPE_STATUS_BAR);
}
Example:
protected void onCreate(Bundle savedInstanceState) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN , WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN );
getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.TYPE_STATUS_BAR);
}
super.onCreate(savedInstanceState);

Edit your AndroidManifest.xml
android:windowSoftInputMode="adjustResize"
Add this to your root view of Layout file.
android:fitsSystemWindows="true"
That's all.

I had the same issue and searching the people said to add adjustPan, while in my case adjustResize worked.
<activity
android:name=".YOUR.ACTIVITY"
...
android:windowSoftInputMode="adjustResize"
/>

Apply the Android "Dialog" theme and sizing it properly

I have an activity that I would like to occur in a dialog. Is there anyway to do this from code, instead of in the manifest? I tried to do this, but it seemed to have no effect.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(R.style.Theme_Dialog);
}
Also, the activity contains a webview and when it starts out as a dialog it's got a small amount of content and the dialog is only like 100px tall. When content fills in it scrolls inside a tiny 100px tall window in the dialog. How do I make the dialog take up more vertical space?

You can easily accomplish this via XML. Just use an XML named 'themes.xml', and place it in the values folder.
Here's a basic example, which implements a custom background:
<resources>
<style name="my_theme" parent="#android:style/Theme.Dialog">
<item name="android:windowBackground">#drawable/custom_background</item>
</style>
</resources>
You'll also need to add the following line to the desired activity section of the manifest:
android:theme="#style/my_theme"
PS: I realize this is an old thread, but hopefully it helps someone nonetheless :)

I'm not aware of a way to set the dialog theme from code.
The dialog is basically as big as it needs to be to contain the content, so if you want it to be bigger you need to make some component in your view larger. Perhaps you can set the hieght of the webview to something larger. Note, use dpi, not px!

that's the solution, you can apply a theme via code, thanks to this guy :)
wasn't aware of this constructor myself
https://stackoverflow.com/a/1975508/371749