Develop Reference

How to customise android dialogs to material theme?

I wanted to customise android Dialog to make it look like a floating dialog as below which is suggested in https://material.google.com/components/dialogs.html#dialogs-simple-dialogs
I tried creating a DialogFragment in which onCreateDialog returns a Dialog with a view whose root is a CardView.But couldn't get the expected result.Can I have some suggestions on how to achieve this?
My layout looks like this,
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center|top"
card_view:cardElevation="5dp"
card_view:cardPreventCornerOverlap="false">
//Contents come here
</android.support.v7.widget.CardView>
and in code,
public Dialog onCreateDialog(Bundle savedInstanceState) {
Dialog dialog = new Dialog(getActivity());
View view = LayoutInflater.from(getActivity()).inflate(R.layout.dialog_font_selection,null,false);
dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(view);
float width = (I am getting screen width here) * .80f;
dialog.getWindow().setLayout((int) width, ViewGroup.LayoutParams.WRAP_CONTENT);
return dialog;
}`
but the result looks like this,
Instead of getting elevation I was getting a black shade

AlertDialog.Builder mydialog = new AlertDialog.Builder( context);
mydialog.setTitle("Set backup accounts");
mydialog.setItems(CharSequence[] items, OnClickListener);
mydialog.show();
mydialog.setContentView(R.layout.mydialogLayout);
This in your activity/fragment. And so declare your layout as follow:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/myID1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
After that, if you want to handle the clicks just do that:
TextView myView1 = (TextView) mydialog.findViewById(myID1);
myView1.setOnClickListener(...);

MaterialAlertDialogBuilder is now available for Android:
material.io/develop/android/components/dialog

Android AlertDialog not wraping content in KK

I've created a multi purpose AlertDialog with one WebView in it. In all the devices that I've tested the dialog size is ok, that it, the height is always wrapping to the content. Unfortunately, on a Nexus 5 with 4.4.2 it's not showing properly. Sometimes it wraps, other don't.
Here is a screenshot of what I mean on a emulated Nexus 5.
Here is the xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="horizontal"
tools:ignore="DisableBaselineAlignment"
android:id="#+id/alertdialog_title"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:fitsSystemWindows="true"
android:id="#+id/alertdialog_icon"
android:layout_margin="12dp"
android:layout_gravity="center"
android:background="#drawable/info"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="3"
android:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textColor="#color/white"
android:textStyle="bold"
tools:ignore="HardcodedText"
android:layout_gravity="center"
android:id="#+id/alertdialog_titletext"
android:layout_marginTop="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="12dp"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Large"
style="#android:style/TextAppearance.Large"/>
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#color/orange"
android:orientation="vertical"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
tools:ignore="DisableBaselineAlignment"
android:id="#+id/alertdialog_content">
</LinearLayout>
</LinearLayout>
And the code for creating the AlertDialog
void showAlertDialog(String title, String message, final int messageType) {
int padding = (int) getResources().getDimension(R.dimen.all_margins);
LayoutInflater inflater = getLayoutInflater();
AlertDialog.Builder alertDialog = new AlertDialog.Builder(this);
View layout = inflater.inflate(R.layout.alertdialog, null);
LinearLayout alertDialogContent = (LinearLayout) layout.findViewById(R.id.alertdialog_content);
ImageView alertDialogIcon = (ImageView) layout.findViewById(R.id.alertdialog_icon);
TextView alertDialogTitle = (TextView) layout.findViewById(R.id.alertdialog_titletext);
alertDialogTitle.setTypeface(fontBold);
alertDialogIcon.setBackgroundDrawable(getResources().getDrawable(R.drawable.info));
alertDialogTitle.setText(title);
alertDialogTitle.setTextColor(getResources().getColor(R.color.orange));
WebView webview = new WebView(this);
ScrollView scrollPane = new ScrollView(this);
webview.loadDataWithBaseURL(null, message, "text/html", "utf-8", null);
scrollPane.setPadding(padding, padding, padding, padding);
scrollPane.addView(webview);
alertDialogContent.addView(scrollPane);
alertDialog.setView(layout);
alertDialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
// Do something
}
});
if (messageType == 0 || messageType == 3) {
alertDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
// Do something
}
});
}
AlertDialog alert = alertDialog.create();
alert.show();
boolean tabletSize = getResources().getBoolean(R.bool.isTablet);
if (tabletSize) {
DisplayMetrics metrics = getResources().getDisplayMetrics();
alert.getWindow().setLayout((int) (metrics.widthPixels * 0.8), ViewGroup.LayoutParams.WRAP_CONTENT);
}
}
What should I change to the AlertDialog always wraps it's content??

It is the ScrollView default behaviour to get all the available space (that's my direct experience). I came across this issue some days ago, My solution was to measure the content of the ScrollView, and forcing its height. Something like (my situation was a LinearLayout as direct child of theScrollViewthat containsTextView`s - pseudo-code)
int height = 0;
for (view I am going to add in the LL) {
view.measure(0, 0);
height += view.getMeasuredHeight();
}
after this measure operation, I retrieve the root layout of the view hierarchy (FrameLayout in my case), and I forced its params.height to the calculated

AlertDialog custom view is not appearing

I'm building a simple AlertDialog with custom layout from XML. Here is how it's supposed to look (taken from Eclipse): It's simply 4 columns:
Here is the xml of the image above:
<?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="horizontal"
android:weightSum="1.0" >
<ImageView
android:id="#+id/colorpicker_dialog_color1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#FFF"
android:tag="0xFFF" />
<ImageView
android:id="#+id/colorpicker_dialog_color2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#FFDD66"
android:tag="0xFFDD66" />
<ImageView
android:id="#+id/colorpicker_dialog_color3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#66CCFF"
android:tag="0x66CCFF" />
<ImageView
android:id="#+id/colorpicker_dialog_color4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#B6C0D2"
android:tag="0xB6C0D2" />
</LinearLayout>
Here is the code of the costume Alert Dialog:
public void showColorPickerDialog() {
LayoutInflater inflater = LayoutInflater.from(this);
View layout = inflater
.inflate(R.layout.color_picker_dialog, null);
ImageView clr1 = (ImageView) layout
.findViewById(R.id.colorpicker_dialog_color1);
clr1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// .. code
}
});
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("cccc");
builder.setView(layout)
.setCancelable(true)
.setPositiveButton("ok",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.dismiss();
}
}).show();
}
The problem is that in my dialog I dont see any column.

Try using Views instead of ImageViews in your layout. The problem using ImageViews in your case is that since you do not specify the src attribute for the ImageView, it will display a 0x0-sized image, which leaves your views invisible.

Android: Dialog not full screen OR AlertDialog without weird background in Android 2.3

I'm developing an Android application where I have Dialogs with custom layout. At first I decided to use AlertDialog without title and without buttons, since I have my own Buttons in my custom layout. This works fine in Android 4.4, but not in Android 2.3.
This is how it's seen in Android 4.4:
This is how it's seen in Android 2.3:
Please notice the weird gray background behind my Dialog.
In SO I saw that some people solved it using Dialog instead of AlertDialog. I tried it and it really fixed it, but now my Dialog fills the whole screen:
And I don't want that, I want the Dialog to have some margin like the AlertDialog has.
This is my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dialog_background"
android:orientation="vertical" >
<TextView
android:id="#+id/adTitleTextView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_marginTop="1dp"
android:background="#drawable/background_green"
android:gravity="center"
android:textColor="#FFFFFFFF"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#FFFFFFFF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:paddingBottom="15dp"
android:paddingTop="10dp"
android:textColor="#FFFFFFFF" />
<LinearLayout
android:id="#+id/adButtonBar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<Button
android:id="#+id/adNegativeButton"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/selector_button_alert_dialog"
android:textColor="#FFFFFFFF"
android:textSize="14sp" />
<Button
android:id="#+id/adNeutralButton"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/selector_button_alert_dialog"
android:textColor="#FFFFFFFF"
android:textSize="14sp" />
<Button
android:id="#+id/adPositiveButton"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/selector_button_alert_dialog"
android:textColor="#FFFFFFFF"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
This is how I create my Dialog:
Dialog mDialog = new Dialog( this, android.R.style.Theme_Dialog );
mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
View content = getLayoutInflater().inflate( R.layout.alert_dialog_layout, null);
((TextView)content.findViewById(R.id.adTitleTextView)).setText( title );
((TextView) content.findViewById( R.id.adBodyTextView )).setText( message );
mDialog.setContentView( content );
Button b = (Button) content.findViewById(R.id.adPositiveButton);
b.setText( posText );
b.setOnClickListener( this );
b = (Button) content.findViewById(R.id.adNegaveButton);
b.setText( negText );
b.setOnClickListener( this );
mDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
mDialog.show();
And this is how I create the AlertDialog:
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder( ctx );
alertDialogBuilder.setView( content );
final AlertDialog mDialog = alertDialogBuilder.create();
mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
...
Anybody knows how can I remove that weird background from AlertDialog in Android 2.3 OR how to make Dialog not to fill the whole screen?
Thank you!

I finally found a solution for this, although I don't like it much. I'm solving the Dialog not full screen issue.
Basically, I set the width programmatically and, if the height exceeds a certain value, I set it too:
content.getLayoutParams().width = (int) (screenWidth * 0.95);
content.post(new Runnable() {
#Override
public void run() {
int newMaxHeight = content.findViewById(R.id.adTitleTextView).getHeight() +
content.findViewById(R.id.adBodyContainer).getHeight() +
content.findViewById(R.id.adButtonBar).getHeight();
if( newMaxHeight > screenHeight * 0.92 ){
content.getLayoutParams().height = (int) (screenHeight * 0.92);
content.findViewById(R.id.adBodyContainer).getLayoutParams().height =
(int) (screenHeight * 0.92) - content.findViewById(R.id.adTitleTextView).getHeight()
- content.findViewById(R.id.adButtonBar).getHeight();
}
}
});
With this code I can limit the maximum width and height of the Dialog. If anybody finds a better solution, please post it here.

Try this :
dialog.getWindow().setLayout(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

Android problem: Custom dialog layout is used instead of main.xml for root activity

I was following this guide to make a custom AlertDialog. I want to make a dialog with buttons and a title like an AlertDialog, but also with an EditText box, which a regular AlertDialog can't use. So I made the following custom layout containing the EditText box in a file called add_player_dialog.xml in res/layout, which will be called by AlertDialog.Builder's setView():
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/add_player_dialog_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
>
<EditText
android:id="#+id/player_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:textSize="20sp"
/>
</LinearLayout>
Then in the activity (not the root activity, btw) that starts the dialog, I have the following in a switch in onCreateDialog():
Context mContext = getApplicationContext();
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.add_player_dialog,
(ViewGroup) findViewById(R.id.add_player_dialog_layout));
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Enter player's name")
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
Toast.makeText(getApplicationContext(), "yes", Toast.LENGTH_SHORT).show();
}
})
.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
})
.setView(layout);
AlertDialog alert = builder.create();
The problem is that the activity that is first used when the application is launched uses add_player_dialog.xml for its layout, not main.xml. How do I avoid this?
=================
EDIT: I have found a programmatic way to accomplish this, if anyone is interested:
import android.R.drawable;
EditText et = new EditText(this);
et.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
et.setBackgroundResource(drawable.editbox_background);
et.setTextSize(20);
=================
If you're interested, here is main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="40dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="center"
>
<Button
android:id="#+id/new_game_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/new_game_button"
/>
<Button
android:id="#+id/continue_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/continue_button"
/>
</LinearLayout>
</LinearLayout>

Did you try/have
setContentView(R.layout.main);
in the onCreate method?
If so, sorry, hopefully someone else can better chime in.

Try deleting gen/R.java and letting the build system regenerate it, I have seen that sometimes when you add IDs it gets out of sync and needs to be forcefully regenerated.