I'd like to put an indeterminate Progress Dialog material-compliant in my app. I found two ways to achieve it:
1- Using material-dialogs: https://github.com/afollestad/material-dialogs
2- Using the build-in dialogs of material-design-library: https://github.com/navasmdc/MaterialDesignLibrary#dialog
Using any of these solutions I get something pretty much like this: a dialog with a progressbar in it.
What I'd like to get is just the circular progress bar, without the surrounding light-grey view and without any text. A lot of apps proved us that the user knows that when something's spinning around he just needs to wait: there's no need to write it in letters. What I mean is pretty much something like this, but material.
I don't think this is such a strange question (or is it?) but I wasn't able to find any good answer online. Does anyone of you know how to achieve this?
Thank you
[Edit] I must say that in the gitHub issues of the material-dialogs library this seems to be discussed but the developer closes it fast by saying that it would mean not to follow the guidelines: https://github.com/afollestad/material-dialogs/issues/277
You can use this code,work fine in devices >= 19 (Kitkat)
progress = ProgressDialog.show(Splash.this, null, null, true);
progress.setContentView(R.layout.elemento_progress_splash);
progress.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
progress.show();
element progress splash.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:orientation="vertical"
android:background="#null"
>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/ColorTipografiaAdeudos"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Comprobando sus datos"
android:layout_below="#+id/progressBar1"
android:layout_centerHorizontal="true"
android:id="#+id/textView6"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#color/ColorFuente"
android:layout_gravity="center_horizontal" />
</RelativeLayout>
To sum up our combined with the author efforts:
The main objective was to get a dialog appearance effect (specifically background dimming) for the progress indicator of a type "material progress wheel" with the transparent background of the dialog itself.
How we've gone about it (one of the possible ways):
This library is used as the material progress wheel.
A separate layout file is created (e.g., progress_wheel.xml) containing the progress wheel layout <com.pnikosis.materialishprogress.ProgressWheel>.... If you find yourself in a situation when the wheel's dimensions do not change as per your layout settings, wrap it with a FrameLayout with wrap_content dimensions.
Inflate this layout with a layout inflater to get a view, e.g. dialogView.
Create the dialog:
Dialog progressDialog = new Dialog(context);
progressDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
progressDialog.setContentView(dialogView);
progressDialog.show();
Call this function on dialogView to make the dialog background transparent:
public static void clearParentsBackgrounds(View view) {
while (view != null) {
final ViewParent parent = view.getParent();
if (parent instanceof View) {
view = (View) parent;
view.setBackgroundResource(android.graphics.Color.TRANSPARENT);
} else {
view = null;
}
}
}
Related
Background
In the following screenshot from Gmail, there is some sort of error bar shown just underneath the action bar / app bar. This bar shows permanently, and it pushes the remaining content down rather than overlaying it.
Questions
Is there a name for this type of UI component/control?
Is there something built-in or in the support libraries that I can use to add one of these to an activity of my own?
Material design has an example of this under the App Errors section. It refers to the control as:
Container/component specific error with action
However, I also found an example in the Android Unified Email app, which refers to the control as Tip View:
ConversationTipView.java
conversation_tip_view.xml
I adapted the source code from the above to make my own:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tip_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e5e5e5"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
>
<TextView
android:id="#+id/tip_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="#android:color/primary_text_light"
android:textSize="16sp"
/>
<Button
android:id="#+id/tip_view_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right|end"
android:text="#string/preference_accessibility_service_enable"
style="#style/Widget.AppCompat.Button.Borderless.Colored"/>
/>
</LinearLayout>
If it is a Snackbar like #Karan says you can make it appear on the top like this:
Snackbar snack = Snackbar.make(parentLayout, str, Snackbar.LENGTH_LONG);
View view = snack.getView();
FrameLayout.LayoutParams params =(FrameLayout.LayoutParams)view.getLayoutParams();
params.gravity = Gravity.TOP;
view.setLayoutParams(params);
snack.show();
This shows an animation of Snackbar sliding from bottom, then switching to top. If you want to avoid this try this library(I haven't tried this myself): https://github.com/AndreiD/TSnackBar
Add a view inside of your current layout as per your design and make visibility gone, and make it visible when required from your activity/fragment.
when this will appear in the screen it pushes the remain content down from the current position.
For elevation you can use CARDVIEW.
hopefully it will help you;
I am developing an Android app. In my app , I am showing progress dialog. I can show it very easily. But the problem is as in screenshot below.
As you can see above the circle is aligned to left. I want to center it. I searched solutions online. But all solutions are complicated. For example I have to create custom dialog extending dialog class. But I think it is not worth to do it. Besides, I think android has the built in easy way to do it.
This is my code to show dialog:
public void showLoginLoadingPopUp()
{
loadingDialog = new ProgressDialog(this);
loadingDialog.setTitle("Loading please wait . . .");
loadingDialog.show();
}
As you can see, the code is so simple. I also want simple code to align circle to center of dialog without customizing dialog class.
Example loadingDialog.setTextAlign(center).
But I cannot find any function to do it. What would be the easiest way to do it ?
you have used setTitle() instead of that use setMessage().
public void showLoginLoadingPopUp()
{
loadingDialog = new ProgressDialog(this);
loadingDialog.setMessage("Loading please wait . . .");
loadingDialog.show();
}
Thats it.
Progress dialog can be upgraded with custom layout, which displays required result
ProgressDialog progressDialog = ProgressDialog.show(this, null, null, true, false);
progressDialog.setContentView(R.layout.progress_layout);
And with layout XML file
<?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" >
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
Hope this helps!!!
I've been looking for something like Pinterest menu whenever item in GridView is pressed. I know it's too broad question. But little strike on question will provide a correct way to achieve these.
Que:
How one can implement customise context menu like Contacts+ or Pinterest Context menu on GridView item?
Tried:
ArcMenu : But they are replacement of Slider Menu or Pop up Menu for overall Application. I want menu which can be created onFly for GridView Item.
Satellite Menu : Same as ArcMenu, replacement of Slider Menu or Pop up Menu for overall Application.
Please enlighten me to achieve behaviour like these.
I think instead of Context Menu you can use PopupWindow for your requirement.
//Custom popup view
View view= layoutInflater.inflate(R.layout.popupview, null);
PopupWindow popupWindow = new PopupWindow(
view,
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
//Display popup window on clicking anything
//Displays pop up window near button with offsets 10 and -10
popupWindow.showAsDropDown(button, 10, -10);
For more info
http://developer.android.com/reference/android/widget/PopupWindow.html
http://android-er.blogspot.in/2012/03/example-of-using-popupwindow.html
Use quick action 3D view. It is the menu which is used in twitter application.
For source: https://github.com/lorensiuswlt/NewQuickAction3D
I'm using a modified version of ArcMenu (just small and mainly visual modifications) for something similar. And it's perfectly adaptable to gridview (i'm using it with StaggeredGridView onitemclick).
You only have to define it in the xml inside the gridview item with Visibility:gone and then in your gridview adapter or in the activity set it to visible when the item is touched or clicked...
don't know why you say it's for overall app, it can be used as an item element also.
You can check out this library which I created:
https://github.com/reyanshmishra/PinMenu
You can clone it and import it as a module to your app and do something like this:
In your XML layout:
<?xml version="1.0" encoding="utf-8"?>
<com.reyanshmishra.pinmenu.PinMenuHolder xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:pin_holder_draw_over_view="true"
app:pin_holder_overlay_color="#90ffffff">
<com.reyanshmishra.pinmenu.PinMenu
android:id="#+id/one"
android:layout_width="48dp"
android:layout_height="48dp"
android:elevation="5dp"
android:padding="5dp"
android:scaleType="centerInside"
android:src="#drawable/ic_close_black_24dp"
app:pin_background_color="#color/white"
app:pin_name="Cancel"
app:pin_selected_color="#BD081C" />
<com.reyanshmishra.pinmenu.PinMenu
android:id="#+id/three"
android:layout_width="48dp"
android:layout_height="48dp"
android:elevation="5dp"
android:padding="5dp"
android:scaleType="centerInside"
android:src="#drawable/share_variant"
app:pin_background_color="#color/white"
app:pin_name="Share"
app:pin_selected_color="#BD081C" />
<com.reyanshmishra.pinmenu.PinMenu
android:id="#+id/four"
android:layout_width="48dp"
android:layout_height="48dp"
android:elevation="5dp"
android:padding="5dp"
android:scaleType="centerInside"
android:src="#drawable/dots_horizontal"
app:pin_background_color="#color/white"
app:pin_name="More"
app:pin_selected_color="#BD081C" />
</com.reyanshmishra.pinmenu.PinMenuHolder>
Now in Java:
PinDialog mPinDialog = new PinDialog(this);
mPinDialog.setContentView(R.layout.layout_pin_menu);
mPinDialog.setPinSelectListener(new PinSelectListener() {
#Override
public void pinSelected(PinMenu pinMenu) {
Toast.makeText(mContext, "" + pinMenu.getPinName(), Toast.LENGTH_SHORT).show();
}
});
mPinDialog.addToRecyclerView(mRecyclerView);
It's still under development so it just supports recyclerview. For depth of the implementation, you can just skim through the classes of the library. I don't think I can put all the code here.
The result it something like this:
I always create custom dialog without title to make it centered (both vertical and horizontal) using android:windowNoTitle in styles.xml or requestWindowFeature(Window.FEATURE_NO_TITLE) but some of my dialogs are not center horizontal, for example this dialog:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="20dp"
android:gravity="center"
android:background="#drawable/dialog_bg" >
<include
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="#layout/loading_s"/>
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:gravity="center_vertical"
android:text="#string/loading"
android:textColor="#color/dialog_text"
android:textSize="#dimen/dialog_title_text_size" />
</LinearLayout>
This is how to create dialog:
#Override
public Dialog onCreateDialog(Bundle savedInstanceState)
{
View v = LayoutInflater.from(getActivity()).inflate(R.layout.dlg_progress, null);
Dialog dlg = new Dialog(getActivity(), R.style.My_Dialog_Style); //My_Dialog_Style contains android:windowNoTitle = true
dlg.setContentView(v);
dlg.setCanceledOnTouchOutside(false);
dlg.setCancelable(true);
return dlg;
}
And here is how it appears on screen
If I remove android:windowNoTitle attribute this dialog show correctly so the problem only occurs when using dialog without title.
Does anyone know why this happen and how to make dialog always center on screen?
have you tried looking at this thread?
How to align custom dialog centre in android ?
android:layout_gravity="center"
It looks like its just a layout change, or try using relativeLayout or LinearLayout instead of FrameLayout
When you use Builder and set a custom view with setView, it should not be necessary to remove the Dialog's title and the dialog should be centered.
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
LayoutInflater inflater = getActivity().getLayoutInflater();
builder.setView(inflater.inflate(R.layout.dlg_progress, null));
return builder.create();
}
This is very similar to how it is done in the docs: Creating a Custom Layout
I believe you're running lower the dialog's minimum width attribute. It can be found as
<item type="dimen" name="dialog_min_width_major">65%</item>
in Android's framework. It varies depending on which values folder you're looking at, so it differs depending on density, orientation, etc.
You may be able to overwrite this value in your style. If you set it to something that is definitely smaller than your dialog(10%), it may work properly. If not, read on.
If you notice in your view tree panel, it shows your LinearLayout nested inside 3 FrameLayouts. My guess is that the deepest FrameLayout has its width set to wrap_content, so it's not filling the parent layout and is only as big as your LinearLayout. I can't be sure, though, because the dimensions are chopped off in your picture.
Why it changes when you remove the title? I don't know. You can hack it by adjusting the padding/layout params in onMeasure, but it seems like there should be a cleaner way to do it.
Still don't know why removing title make Dialog not centered horizontally but when I set min_width attr of LinearLayout = dialog minWidth this problem gone away.
I'm making a simple custom dialog for my android app, displaying only a seek bar. However, the complications of this simple task are driving me nuts.
My layout for the dialog is as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp">
<SeekBar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialogVolumeSlider"
android:layout_width="225dp"
android:layout_height="wrap_content"/>
</LinearLayout>
The dialog is created in code:
Dialog d = new Dialog(this);
d.setContentView(R.layout.custom_dialog);
return d;
Instead of a simple box wrapping the seekbar, I get this phantom space coming from somewhere:
What's the issue here? I've tried modifying
d.getWindow().getAttributes().height
but this creates additional problems as well.
Thanks for any help!!
EDIT: Stranger things happen when I assigned a fixed "50dp" to my LinearLayout's layout_height:
By default a Dialog will leave space for a title even if you don't set one (with d.setTitle()) .
You can either set a title to fill the space or request that the Dialog not have a title.
Here is an example of how to request the no title setting.
Dialog d = new Dialog(this);
d.requestWindowFeature(Window.FEATURE_NO_TITLE);
d.setContentView(R.layout.custom_dialog);
With no title, your SeekBar will appear as you expect.
Try putting a fixed Height on your parent linear layout. Something like:
android:layout_height="50px"