Develop Reference

How to design dialog to have Checkboxes and one EditText box?

I'm trying to design the dialog xml file. It's a bit hard to follow the Material Design guidelines. Basically I want the dialog window to allow users to multi-check the checkboxes and on the bottom to have an option to add custom option (one EditText). For example:
Choose the options
[x] Option1
[] Option2
[x] Option3
[] Option4
Add custom options:
__________
[Cancel] [Ok]
The code I have:
public void onClick(View view) {
AlertDialog.Builder mBuilder = new AlertDialog.Builder(AddData.this);
View mView = getLayoutInflater().inflate(R.layout.dialog_adding_data,null);
// More code here
mBuilder.show();
}
As I understand I'm using a custom dialog layout. But in the material design guidelines I didn't see an option to do something like that. Also I'm not sure how to to design the dialog_adding_data file. How can I design the dialog_adding_data so it will follow the material design guidelines and have the same functionality?

To achieve your UI requirements, you need to set a custom view to your dialog. The key point here is to use the following:
mBuilder.setView(mView);
If you are not using view/data binding, when referencing the views, make sure to use mView.findViewById and not findViewById like the following:
EditText editText = mView.findViewById(R.id.edit_text);
// Add your code logic, etc.
Concerning dialog_adding_data.xml that you have created, it will simply be like any other layout. Its hierarchy, depending on your exact needs, may look something like this:
<ScrollView>
<LinearLayout>
<CheckBox />
<CheckBox />
<!-- This one controls the EditText below. -->
<CheckBox android:text="Add custom options" />
<EditText />
</LinearLayout>
</ScrollView>
If the check boxes count are dynamic, then you might need to use a RecyclerView with 2 view types (one for a normal option, and the other for the custom options) instead.

Android Fragment/Dialog

I have 1 Class that are opened two different ways. One way is it's opened from a sliding drawer and another way is as a dialog. Below you can see both of them. However, you can see that the edittext does not look the same in both. How can I modify the dialog style to look like the fragment?
Here is how it is made:
final EditText editTextView = new EditText(a);
editTextView.setHint(R.string.hintNote);
editTextView.setTag(tag); editTextView.setId(_id);

You can add the style attribute to the layout XML. They will both then use the style specified:
style="#android:style/Widget.EditText"

Setting background to a dialog

I have a dialog that comes up in my app and I wanted to stray away from using the default dialog, to give something slightly more customized. In my dialog layout, I included the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/My_Custom_Background">
This does basically what I want it to, it changes the background as expected. However, this only applies to the layout of the contents of the dialog box: the dialog also has a title and the title part of the dialog box is still the default Android theme, then everything under it is customized as I wanted. Is there away to extend the custom background to the entire dialog box?

You need to remove the title bar
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.dialog);
Make sure to call requestWindowFeature() before the setContentView() otherwise you get a FATAL EXCEPTION

you can create your dialog as below
Dialog mDialog = new Dialog(mContext);
mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
mDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
mDialog.setContentView(R.layout.your_custom_dialog_layout);
mDialog.setCancelable(false);
mDialog.show();
and inside your custom layout, you can set the custom drawable as a background.

An alternate is to remove your dialog titlebar using this...
yourdialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
and design whole dialog with title inside your layout...

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.

Android: Issue with showing dialog from Theme.Light activity

I am trying To show a dialog from a PreferenceActivity, which is set to Theme.Light. The dialog shows with dark text on a dark background:
I assume it uses dark text because it is inheriting the text color from the parent activity, or something similar. I would like the dialog to either use white text on the dark background, or use a white background with dark text, as the PreferenceActivity does when set to Theme.Light.
This seems to be a known problem, the workarounds I have found involve creating and using a custom style that extends Theme.Dialog and using it to instantiate the dialog. Something like:
<style name="CustomDialog" parent="#android:style/Theme.Dialog">
<item name="android:textColor">?android:attr/textColorPrimaryInverseDisableOnly</item>
</style>
Dialog dialog = new Dialog(context, R.style.CustomDialog);
I tried this, but it made no difference. I also tried a number of different values for textColor, none of which modified the Dialog's text color. As a sanity check, I added:
<item name="android:background">#FFFF0000</item>
to the style, which resulted in a dialog with a red background (so I am sure that I am instantiating the dialog properly).
The closest I have come to a solution is just setting the dialog's background color to white, which gives the below dialog. But this is not a good solution, because some version or some device might not use the same behavior I am seeing when inverting text color:
So, is there a good way to set text color on a dialog displayed from a Theme.Light activity?

I assume that you use AlertDialog.Builder and set the list using one of the setSingleChoiceItems methods which doesn't use your own ListAdapter. Instead it creates its own instead with the wrong style. To fix this, you should call setSingleChoiceItems(ListAdapter adapter, int checkedItem, DialogInterface.OnClickListener listener) and provide such an adapter which would use a layout with the needed style.
Now, why this happens. The actual adapter creation happens in the file com.android.internal.app.AlertController, where the following line selects the layout for single choice lists:
int layout = mIsSingleChoice
? R.layout.select_dialog_singlechoice : R.layout.select_dialog_item;
Here is the aforementioned layout:
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/primary_text_light_disable_only"
android:gravity="center_vertical"
android:paddingLeft="12dip"
android:paddingRight="7dip"
android:checkMark="#android:drawable/btn_radio"
android:ellipsize="marquee"
/>
As you can see, the line which sets the text color contains not a reference to a theme, but a hardwired color. That's why when this thing gets inflated during the list creation, it will always use the same color, regardless of what style you want it to use. So the right action to overcome this problem is to use your own layout and your own ListAdapter.