How to design a component in Android such as, for instance in the below image, when click on the "Select a session" button, a form filled in will appear below, and if you click again, such form will disappear?
I have just able to pop up a dialog when clicking on the component, however, what I want is to let the component appear right below the component like showing in the image.
Below is the link of how such a component looks like.
All of your links, tutorials or advice are welcome!
From the comments i got that you want to display a popup when an item is clicked but on that position.
Following code example will help. When you click on text View, it will show a popup at position where we have text View in the view
Hoping that will help.
textView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN){
// textView.setText("Touch coordinates : " +
// String.valueOf(event.getX()) + "x" + String.valueOf(event.getY()));
showDialog(event.getX(),event.getY());
}
return true;
}
});
}
public void showDialog(float x, float y)
{
Dialog dialog;
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
dialog = builder.create();
dialog.setTitle("my dialog");
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
WindowManager.LayoutParams wmlp = dialog.getWindow().getAttributes();
//wmlp.gravity = Gravity.TOP | Gravity.LEFT;
wmlp.x = (int) x; //x position
wmlp.y = (int) y; //y position
dialog.show();
}
What i got, the popup is in the middle because the text View is also in the middle
How to achieve this in android.https://www.google.com/design/spec/motion/choreography.html#choreography-creation This menu appears from the touch point, tying the element to the point of touch.
Error message in edittext comes in the bottom of the view
You can use PopupWindow and then use popupWindow.showAsDropDown(theView).
Edit:
Here is an example from my code:
LayoutInflater inflater = (LayoutInflater) TimeCheckActivity.this
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.timecheck_popup,
(ViewGroup) findViewById(R.id.popup_element));
popupWindow = new PopupWindow(layout, 320, 160, true);
popupWindow.setBackgroundDrawable(new BitmapDrawable());
popupWindow.setOutsideTouchable(true);
radioButton[1].setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(times.size()>1) {
popupText.setText(times.get(1).toString());
popupWindow.showAsDropDown((View) radioButton[1]);
}
return true;
}
});
I also have xml layout which has Textview ("popupText").
This is my popupwindow. but it is handling any touch events..
popup = new PopupWindow(popupView, 300, 300, true);
popup.showAsDropDown(v, -30, 0);
popup.setBackgroundDrawable(getResources().getDrawable(R.drawable.background));
popup.setOutsideTouchable(true);
popup.setTouchable(true);
popup.setFocusable(true);
popup.setTouchInterceptor(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
Log.d("TAG", "Touched in the window");
return false;
}
});
Please tell me the problem with this code..
For the sake helping whoever stumbles upon this thread...
Instead of setTouchInterceptor(), I have been using setOnClickListener() or setOnTouchListener(), which are not members of PopupWindow, true, but I simply call a LayoutInflater to get meeself the popup (View) and then set it as the PopupWindow layout. Proceed to do MAGIC with the View member functions as it better suits you.
Code sample:
LinearLayout viewGroup = (LinearLayout) context.findViewById(R.id.my_popup_layout_id);
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = layoutInflater.inflate(R.layout.popup_layout, viewGroup);
popup = new PopupWindow(context);
popup.setContentView(layout);
popup.setWidth(popupWidth);
popup.setHeight(popupHeight);
//popup.setFocusable(true);
popup.setOutsideTouchable(false);
popup.showAsDropDown(anchorViewOfYourChoice, OFFSET_X, OFFSET_Y);
I am new in android. Here is my question.
Is there pop up window can be moved in android? How to implement a popup window or other dialog that can be drugged. And can this pop up window not block other windows? When it pops up, I can still use other functions in main window.
Thank you in advance
Use PopupWindow Class for this purpose refer the following link:
http://www.mobilemancer.com/2011/01/08/popup-window-in-android/
here is sample code from my work , I make some comment to declare how its work
LayoutInflater inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
// your custom view
View popView = inflater.inflate(R.layout.pop_view, null);
// initialise your pop window
// take custom view , with specific width , height
PopupWindow popupWindow = new PopupWindow(popView, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, true);
ImageView imageview = (ImageView) popView.findViewById(R.id.imageview);
Button dismiss = (Button) popView.findViewById(R.id.disbutton);
imageview.setImageURI(imagePath);
// button used to open pop window
popupWindow.showAsDropDown(ChooseFile, 50, -30);
// here is the part related to move popwindow
popView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent event) {
int orgX = 0, orgY = 0;
int offsetX, offsetY;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
orgX = (int) event.getRawX();
orgY = (int) event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
offsetX = (int) event.getRawX() - orgX;
offsetY = (int) event.getRawY() - orgY;
// update popwindow postion , -1 set for width & height to make it fixed not changed
popupWindow.update(offsetX, offsetY, -1, -1);
break;
}
return true;
}
});
dismiss.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// if you want dismiss your pop window
popupWindow.dismiss();
}
});
}
I have a popup window displaying when I click an item in my list activity. The problem is that the back key doesn't close it. I tried catching the back key in my list activity but it doesn't register it...then I tried registering a onkeylistener to the view I'm passing to my popup window. Like this:
pop.setOnKeyListener(new View.OnKeyListener() {
#Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
boolean res=false;
if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
// do something on back.
Log.e("keydown","back");
if (pw.isShowing()) {
Log.e("keydown","pw showing");
pw.dismiss();
res = true;
}
} else {
res = false;
}
return res;
}
});
which is passed to a popup like this:
pw = new PopupWindow(
pop,
240,
70,
true);
But that listener doesn't fire neither. Can you help me? I'm out of ideas :)
This is because the popup window does not respond to onTouch or onKey events unless it has a background that != null. Check out some code I wrote to help with this. In the basic case you can to call PopupWindow#setBackgroundDrawable(new BitmapDrawable()) to force it to act the way you expect. You won't need your own onKey listener. You might also need to call PopupWindow#setOutsideTouchable(true) if you want it to go away when the user clicks outside of the window boundaries.
Extended esoteric answer:
The reason the background cannot be null is because of what happens in PopupWindow#preparePopup. If it detects background != null it creates an instance of PopupViewContainer and calls setBackgroundDrawable on that and puts your content view in it. PopupViewContainer is basically a FrameLayout that listens for touch events and the KeyEvent.KEYCODE_BACK event to dismiss the window. If background == null, it doesn't do any of that and just uses your content view. You can, as an alternative to depending on PopupWindow to handle that, extend your root ViewGroup to behave the way you want.
Do as per following it works fine:
PopupWindow pw;
LayoutInflater inflater = (LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.weight_popup, (ViewGroup)findViewById(R.id.linlay_weight_popup));
pw = new PopupWindow(layout,LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT, true);
pw.setBackgroundDrawable(new BitmapDrawable());
pw.setOutsideTouchable(true);
pw.showAsDropDown(btnSelectWeight);
For new projects it's better to use
popupWindow.setBackgroundDrawable(new ColorDrawable());
instead of
popupWindow.setBackgroundDrawable(new BitmapDrawable());
as BitmapDrawable is deprecated. Also, it's better than ShapeDrawable in this case. I noticed that when PopupWindow is a rectangle with rounded corners, ShapeDrawable fills corners with black.
A really simple solution is to write pw.setFocusable(true), but probably you don't want to do this because then the MapActivity won't handle touch events.
A better solution is to override the back key, e.g like this:
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// Override back button
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (pw.isShowing()) {
pw.dismiss();
return false;
}
}
return super.onKeyDown(keyCode, event);
}
Good luck!
For the new searchers, as creating a new BitmapDrawable is not allowed now(The constructor BitmapDrawable() is deprecated) , so that you have to change it to a new ShapeDrawable(), so that you will change :
pw.setBackgroundDrawable(new BitmapDrawable());
To :
pw.setBackgroundDrawable(new ShapeDrawable());
And the whole work will be like :
PopupWindow pw;
LayoutInflater inflater = (LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.weight_popup, (ViewGroup)findViewById(R.id.linlay_weight_popup));
pw = new PopupWindow(layout,LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT, true);
pw.setOutsideTouchable(true);
pw.setBackgroundDrawable(new ShapeDrawable());
pw.setTouchInterceptor(new OnTouchListener() { // or whatever you want
#Override
public boolean onTouch(View v, MotionEvent event)
{
if(event.getAction() == MotionEvent.ACTION_OUTSIDE) // here I want to close the pw when clicking outside it but at all this is just an example of how it works and you can implement the onTouch() or the onKey() you want
{
pw.dismiss();
return true;
}
return false;
}
});
pw.showAtLocation(layout, Gravity.CENTER, 0, 0);
just use this
mPopupWindow.setBackgroundDrawable(new BitmapDrawable(null,""));
which is not deprecated. i'd avoid new ShapeDrawable() as its going to render slowly as it tries to draw a shape when the screen needs to be redrawn.
I hope this will be help for you
pw.setTouchInterceptor(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
if (event.getAction() == MotionEvent.ACTION_DOWN) {
pw.dismiss();
}
return true;
}
});
you need add setBackgroundDrawable(new BitmapDrawable()) for your PopupWindow.
private void initPopupWindow() {
// TODO Auto-generated method stub
View view = getLayoutInflater().inflate(R.layout.main_choice, null);
ListView main_menu_listview = (ListView) view.findViewById(R.id.main_menu_listview);
ShowMainChoice madapter = new ShowMainChoice(context);
main_menu_listview.setAdapter(madapter);
int width = (int)getWindowManager().getDefaultDisplay().getWidth()/2;
popupWindow = new PopupWindow(view, width,WindowManager.LayoutParams.WRAP_CONTENT);
popupWindow.setBackgroundDrawable(new BitmapDrawable());//this is important，如果缺少这句将导致其他任何控件及监听都得不到响应
popupWindow.setOutsideTouchable(true);
popupWindow.setFocusable(true);
main_menu_listview.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {
// TODO Auto-generated method stub
Log.e("++++++>", arg2+"");
}
});
}
This problem is popupwindow底层的消息机制决定的，因为它是阻塞式的。Good luck
pw.setBackgroundDrawable(new ColorDrawable());
must wrote it before setContentView
This works for me.
Are you looking for the combination of the popupwindow dismiss and a good working of the BACK button, then you may consider the below solution.
Solution principle: all button clicks near your popup window will be intercepted, but any BACK button will not be intercepted. So, if you have anything in you popupwindow that takes action, then set an indication just before your call to dismiss(). In your setOnDismissListener() perform an extra action (like getActivity().popupBackStack()).
The advantage of this solution is that you can create your own CustomPopupWindow and implement this strategy. You can hide this implementation in your custom popup window.
Step 1: add near to your instantiation of your Popup Window:
boolean isClickHandled = false;
popupWindow.setOutsideTouchable(true);
popupWindow.setBackgroundDrawable(new ShapeDrawable());
popupWindow.setTouchInterceptor(new View.OnTouchListener() { // or whatever you want
#Override
public boolean onTouch(View v, MotionEvent event) {
isClickHandled = true;
return false;
}
});
If you have buttons inside your popupWindow, have the setOnClickListener.onClick set the isClickHandled = true and dismiss().
In your onDismissListener do something like:
popupWindow.setOnDismissListener(() -> {
popupWindow.dismiss();
if ( !isClickHandled) {
MainActivity.mainActivity.getSupportFragmentManager().popBackStack();
}
});