This is my code that gives a BottomSheet Dialog. After implementation it gives me a normal BottomSheet Dialog, how can i make this Bottom Sheet look like Google BottomSheet Dialog with rounded corners and something like a middle gray line at the top?
Even if it doesn't look exactly like the Bottomsheet Facebook and Google uses, I just want to have a rounded corner for this code.
What do I change or add in my code?
MainActivity.Java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
openDialog();
}
});
}
private void openDialog() {
View view = getLayoutInflater().inflate(R.layout.sheet_main, null);
dialog = new BottomSheetDialog(this);
dialog.setContentView(view);
TextView camera_sel = (TextView) view.findViewById(R.id.camera);
TextView gallery_sel = (TextView) view.findViewById(R.id.gallery);
camera_sel.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
takePhotoFromCamera();
dialog.dismiss();
}
});
gallery_sel.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
takePhotoFromGallery();
dialog.dismiss();
}
});
dialog.show();
}
sheet_main.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="horizontal"
android:padding="4dp">
<TextView
android:id="#+id/camera"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:drawablePadding="8dp"
android:drawableTop="#drawable/ic_camera"
android:gravity="center_horizontal"
android:padding="16dp"
android:text="Camera"
android:textSize="18sp" />
<TextView
android:id="#+id/gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:drawablePadding="8dp"
android:drawableTop="#drawable/ic_panorama"
android:gravity="center_horizontal"
android:padding="16dp"
android:text="Gallery"
android:textSize="18sp" />
</LinearLayout>
UPDATE:
I was able to achieve this by adding these to my style.xml and setting it on the theme used for my dialog activity. Thanks!
<style name="HomeTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="bottomSheetDialogTheme">#style/ThemeOverlay.Demo.BottomSheetDialog</item>
</style>
<style
name="ThemeOverlay.Demo.BottomSheetDialog"
parent="#style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">#style/Widget.Demo.BottomSheet</item>
</style>
<style name="Widget.Demo.BottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">#style/ShapeAppearanceOverlay.Demo</item>
</style>
<style name="ShapeAppearanceOverlay.Demo" parent="">
<item name="cornerSize">18dp</item>
<item name="cornerFamily">rounded</item>
</style>
My app displays an AlertDialog
page1WalkthroughDialogBuilder = new AlertDialog.Builder(activity, R.style.Widget_AppCompat_Light_ActionBar);
page1WalkthroughDialogBuilder
.setCancelable(false)
.setView(page1WalkthroughDialogLayout)
.setPositiveButton(getString(R.string.goto_next), new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
page2Walkthrough.show();
dialog.cancel();
}
})
.setNegativeButton(getString(R.string.exit_dialog), new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
manager.beginTransaction().show(LaunchActivity.editProfileFragment).commit();
dialog.cancel();
}
});
page1Walkthrough = page1WalkthroughDialogBuilder.create();
that uses the following layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/rel_layout"
android:layout_height="match_parent"
android:background="#drawable/park_with_people"
mlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:textStyle="bold"
android:text="#string/welcome_hdr"
android:textSize="35sp"
android:layout_marginTop="10dp"
android:layout_marginStart="10dp" />
<uomini.com.wegrokstrasbourg.TextViewWithImages
android:id="#+id/body"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="#+id/heading"
android:text="#string/welcome_text"
android:textSize="20sp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp" />
</RelativeLayout>
Everything displays just fine except that the buttons have a white background:
How can I change the color of the background?
You should create a style and then apply it in the Builder constructor:
<style name="MyTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:background">#color/myColor</item>
</style>
and then :
AlertDialog alertDialog = new AlertDialog.Builder(getContext(), R.style.MyTheme)
...
...
.create();
What style is causing the grey bar in the bottom of an AlertDialog?
Either I need to change the rest of the dialog to match the color or vice versa. I've tried modifying #android:buttonStyle and #android:buttonBarStyle. That helps but there's still some grey peeking out from the edges of the region.
Here are my current styles:
<style name="MyAlertDialog" parent="#android:style/Theme.Dialog">
<item name="#android:background">#FF000000</item>
<item name="#android:buttonBarStyle">#style/MyButtonBar</item>
</style>
<style name="MyButtonBar" parent="#android:style/ButtonBar">
<item name="#android:background">#FF000000</item>
</style>
And it looks like this:
Here is a working solution, based on Rod_Algonquin's idea of using a custom layout.
private void showCustomAlert (String message)
{
// build dialog
LayoutInflater inflater = getLayoutInflater();
View alertView = inflater.inflate (R.layout.custom_dialog, null);
AlertDialog.Builder builder = new AlertDialog.Builder (this, R.style.CustomAlertDialog);
builder.setView (alertView);
final AlertDialog alert = builder.create();
// message
((TextView)alertView.findViewById (R.id.message)).setText (message);
// ok button
alertView.findViewById (R.id.cancel).setOnClickListener (new View.OnClickListener()
{
#Override public void onClick(View v) { alert.dismiss(); }
});
// show
alert.show();
}
Here is a layout that works with this code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FF000000">
<TextView android:id="#+id/alertTitle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:gravity="center"
android:background="#android:color/black"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Large"
android:text="#string/custom_alert_title" />
<TextView android:id="#+id/message"
style="#android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:background="#android:color/black"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Medium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:background="#android:color/black"
android:measureWithLargestChild="true">
<Button android:id="#+id/cancel"
style="?android:attr/buttonBarButtonStyle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:minHeight="50dp"
android:minWidth="100dp"
android:textSize="14sp"
android:text="#android:string/ok" />
</LinearLayout>
</LinearLayout>
Finally, here's the styles, from styles.xml, I referenced; you may not need them depending on your dialog coloring.
<style name="CustomAlertDialog" parent="#android:style/Theme.Dialog">
<item name="#android:background">#FF000000</item>
<item name="#android:buttonBarStyle">#style/CustomButtonBar</item>
</style>
<style name="CustomButtonBar" parent="#android:style/ButtonBar">
<item name="#android:background">#FF000000</item>
</style>
When I try to apply a standard theme to AlertDialog
AlertDialog.Builder builder = new AlertDialog.Builder(MyClass.this, AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
builder.setTitle("Change");
String[] info= this.getResources().getStringArray(R.array.info);
ArrayAdapter arrayAdapter = new ArrayAdapter(this, android.R.layout.select_dialog_singlechoice);
arrayAdapter.addAll(info);
builder.setSingleChoiceItems(arrayAdapter, ....
Result:
The note is that I have no problem with builder.setItems(...) since its text color is Black while the theme applied with builder.setSingleChoiceItems(...) has a White text color.
Any fast fix? Or any way to create a customized theme based on AlertDialog.THEME_DEVICE_DEFAULT_LIGHT ?
My customized style doesn't work as expected:
<style name="AlertDialogCustomTheme" android:parent="android:Theme.Dialog">
<item name="android:textColor">#7ABDFF</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<!--THE FOLLOWING ITEMS HAVE NOT EFFECT ... !! -->
<item name="android:layout_centerHorizontal">true</item>
<item name="android:layout_centerVertical">true</item>
<item name="android:textColorAlertDialogListItem">#A844BD</item>
<item name="android:itemBackground">#7ABDFF</item>
</style>
Update
#lopez answer is a complete solution, but I find a single line fix for my problem, a custom theme to be applied to the activity in manifest:
<style name="MyTheme">
<item name="android:textColorAlertDialogListItem">#android:color/black</item>
</style>
If anyone happens to read this, and is using the Suport library Alert Dialogs and wants to change the text color of list items then drop the android: part, like so:
<item name="textColorAlertDialogListItem">#color/your_color</item>
Personally, I use the android Dialog but I use a custom layout for that match the design of my application.
Here is an example:
new AlertDialog.Builder(context)
.setView(inflater.inflate(R.layout.dialog_delete_contact, null))
.setPositiveButton(context.getResources().getString(android.R.string.ok).toUpperCase(), new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
// YOUR TREATMENT
}
})
.setNegativeButton(context.getResources().getString(android.R.string.cancel).toUpperCase(), null)
.show();
Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/GrayLight"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/Black"
android:gravity="center"
android:orientation="horizontal"
tools:ignore="DisableBaselineAlignment" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:fitsSystemWindows="true"
android:padding="10dip"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginRight="20dp"
android:layout_weight="0.5"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/remove_contact"
android:textColor="#color/White"
android:textSize="20sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
tools:ignore="DisableBaselineAlignment" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:text="#string/ask_remove_contact"
android:textSize="15sp"
tools:ignore="HardcodedText" />
</LinearLayout>
Result in picture:
To avoid rewriting the code every time here is a utility class :
public class MyDialog {
public static Builder create(final Context context, final LayoutInflater layoutInflater, final String title, final String content) {
View view = layoutInflater.inflate(R.layout.generic_dialog, null);
((TextView)view.findViewById(R.id.textViewTitleDialog)).setText(title);
((TextView)view.findViewById(R.id.textViewContentDialog)).setText(content);
return new AlertDialog.Builder(context).setView(view);
}
}
And an example of using :
AlertDialog.Builder myDialog = MyDialog.create(this, getLayoutInflater(), "Quitter ECOLEMS", "Voulez-vous vraiment quitter l'application?");
myDialog.setPositiveButton("Oui", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
// YOUR TREATMENT
}
})
.setNegativeButton("Non", null)
.show();
I hope you have helped!
What works for me
<style name="AlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColor">#color/text</item>
<item name="android:background">#color/background</item>
<item name="android:textColorPrimary">#color/text</item>
<item name="textColorAlertDialogListItem">#color/text</item>
</style>
This is what worked for me for every color on my dialog:
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#00ffff</item>
<!-- Used for the title and text -->
<item name="android:textColor">#00ff00</item>
<item name="android:textColorAlertDialogListItem">#ffff00</item>
<item name="android:textColorSecondary">#ff00ff</item>
<!-- Used for the background -->
<item name="android:background">#3a3a3c</item>
</style>
AlertDialog.Builder builder = new AlertDialog.Builder(MyClass.this, AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
builder.setTitle("Change");
String[] info= this.getResources().getStringArray(R.array.info);
ArrayAdapter arrayAdapter = new ArrayAdapter(this, android.R.layout.select_dialog_singlechoice);
arrayAdapter.addAll(info);
builder.setSingleChoiceItems(arrayAdapter, ....**change this line to**
builder.setSingleChoiceItems(info,0,null);
I am trying to center the image that I am adding to my Alert Dialog in an Android app as follows:
android.app.AlertDialog.Builder appInfoDialog = new AlertDialog.Builder(this);
appInfoDialog.setIcon(R.drawable.image);
appInfoDialog.setTitle(" ");
appInfoDialog.setMessage("App Info...");
appInfoDialog.setCancelable(true);
AlertDialog dialog = appInfoDialog.create();
dialog.show();
But how can I center this image? Currently, it is left-aligned.
I cannot find a gravity or layout_align property for it!
You can not do this, but You can create Your own Dialog like this:
/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Dialog" parent="android:style/Theme.Dialog">
<item name="android:windowBackground">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
</style>
</resources>
/layout/custom_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip"
android:text="wpisz tekst by wyszukać piosenkę"
android:textColor="#5E636D" />
<EditText
android:id="#+id/value_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="40.0dip"
android:background="#drawable/input_text"
android:paddingLeft="10px" />
<Button
android:id="#+id/search_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dip"
android:text="szukaj" />
</RelativeLayout>
in method:
Dialog dialog = new Dialog(Start.this, R.style.Dialog);
dialog.setContentView(R.layout.custom_dialog);
Button button = (Button) dialog.findViewById(R.id.search_mini);
final EditText et = (EditText) dialog.findViewById(R.id.value_mini);
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
//do something
}
});
dialog.show();