I noticed something very useful in Google apps.
When we have dialog with big content, divider line is showing in order to emphasize ability to scroll, like in this two pictures:
But, I have no idea how to implement such behaviour using known utils.
Best example is while choosing phone ring, at the start there is only divider on the bottom, but when we start scrolling two dividers appear.
QUESTION
How to implement appearing and disappearing behaviour in dialog?
If you have custom layout like this
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:id="#+id/views_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
you can inflate View and find ScrollView by
v.findViewById(R.id.scroll_container)
and set scroll TOP and BOTTOM indicators if you have TITLE above and BUTTONS below your custom view
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
final int indicators = View.SCROLL_INDICATOR_TOP | View.SCROLL_INDICATOR_BOTTOM;
scrollView.setScrollIndicators(indicators, View.SCROLL_INDICATOR_TOP | View.SCROLL_INDICATOR_BOTTOM);
}
The behaviour that you want to achieve comes with a Dialog with Scrollable Content. Please read this document to get an idea of that.
In this case, you need to create your own custom layout xml with ListView and couple of buttons. And you need to keep this entire layout under ScrollView.
The following is just a dummy code to help you with:
Edited the dummy code with the actual one::
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ListView"/>
</LinearLayout>
MainActivity.class:
LayoutInflater inflater= LayoutInflater.from(this);
view=inflater.inflate(R.layout.layout, null);
ListView listView = (ListView)view.findViewById(R.id.ListView);
String[] items = { "Milk", "Butter", "Yogurt", "Toothpaste", "Ice Cream" };
ArrayAdapter adapter_dest = new ArrayAdapter(this,android.R.layout.simple_list_item_1,items);
listView.setAdapter(adapter_dest);
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Custom Dialog")
.setCancelable(false)
.setView(view)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
});
AlertDialog alert = builder.create();
alert.show();
Hope this helps!
Looking at Android source code the solution is really simple. Just add this code to your custom view:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
final int indicators = (hasTopPanel() ? View.SCROLL_INDICATOR_TOP : 0)
| (hasBottomPanel() ? View.SCROLL_INDICATOR_BOTTOM : 0);
view.setScrollIndicators(indicators, View.SCROLL_INDICATOR_TOP | View.SCROLL_INDICATOR_BOTTOM);
}
Related
I am working on an app (in Java) where the Action bar has an Options Menu of items/options (onCreateOptionsMenu resulting in the three vertical dots on the top right of the screen), so that when the user clicks on the three vertical dots, the menu expands showing the list of items/options. I want one of these items, when clicked, to open up an EditText view to enable the user to enter some text. I've spent quite some time researching this but I've not been able to find how it's done. Can somebody please provide the outline of how to achieve this or perhaps point me to an example.
Many thanks
create a dialog_layout.xml file and add below code
<?xml version="1.0" encoding="utf-8"?>
<EditText
android:id="#+id/editTextDialog"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/edit_text_background"
android:hint="#string/about_routine_dialog_image"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:textColor="#3C3B3B"
android:inputType="number"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end">
<Button
android:id="#+id/buttonDialogSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/submit"/>
</LinearLayout>
then run below function calling showDialog when user click on that particular menu-item:
public void showDialog() {
Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.dialog_layout);
final EditText editText = dialog.findViewById(R.id.editTextDialog);
Button buttonDialog = dialog.findViewById(R.id.buttonDialogSubmit);
buttonDialog.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
String text = editText.getText().toString(); //your text from editText
dialog.dismiss();
//do your work here
}
});
dialog.setCanceledOnTouchOutside(false);
dialog.show();
}
I am trying to show icons in BottomSheeet but only text shows. I read lot of threads on SO but none of them seem to help or are old.
Seeking help on latest android version. Appreciate any help.
List<MenuItem> bottomSheetMenuItems = new ArrayList<>(optionsList.size());
Drawable drawable = getResources().getDrawable(android.R.drawable.ic_dialog_email,
getContext().getTheme());
MenuItem bottomSheetMenuItem = new BottomSheetMenuItem(
getContext(),
someId,
"Test",
drawable);
bottomSheetMenuItem.setChecked(true).setChecked(true);
bottomSheetMenuItems.add(bottomSheetMenuItem);
BottomSheet bottomSheet = new BottomSheet
.Builder(getContext())
.setTitle("Test Title")
.setMenuItems(bottomSheetMenuItems)
.create();
bottomSheet.show();
For icons, you would have to create an xml for bottomsheet.
XML example
<LinearLayout app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:id="#+id/intervalBottomSheet"
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:background="?attr/colorPrimary"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:src="#drawable/ic_remove_red_eye_black_24dp" />
<TextView
android:text="MenuItem" />
Java code
final BottomSheetDialog mBottomSheetDialog = new BottomSheetDialog(getActivity());
View sheetView = getActivity().getLayoutInflater().inflate(R.layout.bottomsheet_interval, null);
mBottomSheetDialog.setContentView(sheetView);
mBottomSheetDialog.show();
If your menu items are dynamic and not constant, you could use a recyclerview in the bottomsheetdialog.
With that in mind, you'll need to do this to load the icons
ImageView img= (ImageView) findViewById(R.id.image);
img.setImageResource(R.drawable.my_image);
I am trying to populate an Alert Dialog (with a layout file having an EditText & Button) within a fragment of Activity.
The components are not being found by calling findViewById() in the fragment's corresponding class. I have written this code inside the class :
AlertDialog.Builder builder=new AlertDialog.Builder(context);
View v=getLayoutInflater().inflate(R.layout.layout_alert_dialog,null);
final EditText txtAddNew=v.findViewById(R.id.txtAddNew); //null
final TextView txtErr = v.findViewById(R.id.txtErr); //null
Button btnAdd=v.findViewById(R.id.btnAdd); //null
I think the problem raises from this line of code:
View v=getLayoutInflater().inflate(R.layout.layout_alert_dialog,null);
The alertDialog XML code is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/txtAddNew"
android:hint="Category name"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtErr"
/>
<Button
android:id="#+id/btnAdd"
android:text="Add Category" />
</LinearLayout>
Can anyone find what the actual problem is? Thanks!
Yes, that's correct
Do something like this :
LayoutInflater layout = LayoutInflater.from(this);
final View view = layout.inflate(R.layout.dialog_layout, null);
final AlertDialog dialog = new AlertDialog.Builder(this).create();
dialog.setView(view);
dialog.show();
You can do it like below.
AlertDialog.Builder alertBuilder = new AlertDialog.Builder(getActivity());
alertBuilder.setView(getLayoutInflater().inflate(R.layout.layout_alert_dialog,null));
AlertDialog alertDialog = alertBuilder.create();
EditText txtAddNew = alertDialog.findViewById(R.id.txtAddNew);
TextView txtErr = alertDialog.findViewById(R.id.txtErr);
Button btnAdd = alertDialog.findViewById(R.id.btnAdd);
alertDialog.show();
Try using dialog.setContentView(v)
See the difference between setView(v) and setContentView(v) here:
What is difference between Dialog.setContentView( View ) & AlertDialog.setView( View )
How to make single choice list dialog right to left? More specifically I use rtl language and want the radio button to be placed and aligned at right side. Should I implement a custom dialog, a custom adapter or there is much simpler solution?
Any help or suggestions is appreciated.
Building dialog code:
final String items[] = {"1", "2"};
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("title")
.setSingleChoiceItems(new ArrayAdapter<String>(this,
R.layout.rtl_list_item,
R.id.text, items),
0,
new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialog, int which) {
}
});
builder.create().show();
Now create your layout file, Your custom xml in your layout folder will be as
layout/rtl_list_item.xml
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|right"
android:textDirection="rtl"
android:textAlignment="gravity"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:drawableRight="?android:attr/listChoiceIndicatorSingle"
/>
I'm using a custom dialog that I've created in a separate xml file in my project, and I'm coloring the main window a blueish tint,
but the main header still remains the default white color.
Is there no way to change the font color, size, background for the header?
Is the only thing I can change in the header the text?
xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:background="#3edfbc"
android:orientation="vertical">
<TextView
android:id="#+id/textaligmentManager_loader_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="Initlizing Wifi"
android:textAppearance="?android:attr/textAppearanceLarge" />
<com.github.ybq.android.spinkit.SpinKitView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/barcodeScanning_spinkit"
style="#style/SpinKitView.Large.FoldingCube"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/textaligmentManager_loader_textview"
android:padding="20dp"
android:layout_centerHorizontal="true"
app:SpinKit_Color="#ffffff" />
</RelativeLayout>
dialog:
Dialog dialog = new Dialog(Scanning_Barcode_Activity.this);
dialog.setContentView(R.layout.aligment_manager_loader_layout);
dialog.setTitle("Loading");
dialog.setCancelable(false);
//set up text
loaderScreenMainText = (TextView) dialog.findViewById(R.id.textaligmentManager_loader_textview);
loaderScreenMainText.setText("Loading Wifi");
//progressBar = (ProgressBar) dialog.findViewById(R.id.barcodeScanning_spinkit);
//DoubleBounce doubleBounce = new DoubleBounce();
//progressBar.setIndeterminateDrawable(doubleBounce);
//now that the dialog is set up, it's time to show it
dialog.show();
You can use AlertDialog which is a subclass of Dialog class. Here you can define a custom layout containing everything such as title, body and buttons. No extra title section will appear. Here is a demo:
AlertDialog.Builder builder = new AlertDialog.Builder(Scanning_Barcode_Activity.this);
builder.setCancelable(false);
LayoutInflater inflater = LayoutInflater.from(Scanning_Barcode_Activity.this);
View dialogView = inflater.inflate(R.layout.aligment_manager_loader_layout, null);
TextView loaderScreenMainText = (TextView) dialogView.findViewById(R.id.textaligmentManager_loader_textview);
loaderScreenMainText.setText("Loading Wifi");
builder.setView(dialogView);
AlertDialog dialog = builder.create();
dialog.show();
Design your custom layout in such a way that the layout itself contains the header part. And then skip this code:
dialog.setTitle("Loading");
Instead add this statement:
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
You can also use AlertDialog. In that case requestWindowFeature() method is not required.
android.support.v7.app.AlertDialog.Builder builder = new android.support.v7.app.AlertDialog.Builder(Scanning_Barcode_Activity.this);
LayoutInflater inflater = LayoutInflater.from(Scanning_Barcode_Activity.this);
View customView = inflater.inflate(your_layout, null);
builder.setCancelable(false);
loaderScreenMainText = (TextView) customView.findViewById(R.id.textaligmentManager_loader_textview);
loaderScreenMainText.setText("Loading Wifi");
builder.setView(customView);
AlertDialog dialog = builder.create();
dialog.show();
There are plenty of stylish open source libraries that you can use for customizing header parts.
Here I'm sharing my newly developed open source library : PanterDialog
Hope it will help you.