Suppose I have a Button like what is in the following:
I want once this button is clicked a ImageView(popup message) appears in the top of this button, something like this:
But I do not know how put a View as an overlay on top of another View, Just I know this can be achieved by FrameLayout . Please suppose I want to embed this capability into the Button (in the other phrases I want to create a custom button with a method called showPopup(...) like Textview's setError(...))
Can any one please help me? Thanks
How about taking a look at the Quick Action Dialog?
It is an old article (We're talking Android 2.2 territory), but should still work for the latest devices and OS.
The example uses a contextual popup with buttons, but should be easily modifiable to just show text or whatever you want. There is an example further in that shows use alongside a button.
You can also use RelativeLayout. you can define as on top of other views that way.
Notice that if you define two views, the last one is stacked on the first
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
You can use a popupWindow
PopupWindow popupWindow = new PopupWindow(context);
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View popupView = layoutInflater.inflate(R.layout.popup_view_layout, null);
Imageview popupImage = popupView.findViewById(R.id.imageView);
popupWindow.setContentView(popupView);
popupWindow.setBackgroundDrawable(null);
int popupY = button.getTop() - button.getHeight();
int popupX = button.getLeft();
popupWindow.showAtLocation(keyView, Gravity.NO_GRAVITY, popupX, popupY);
The popup_view_layout can look like this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:minWidth="20dp"
android:visibility="gone"
app:srcCompat="#drawable/yourImage" />
</FrameLayout>
For more information click here or check this question's answers.
Related
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 need to implement a pull-down view that has a "handle" in right-most part of the ActionBar. It should be full width and open with an animation when the handle is clicked, and additionally the handle itself should be draggable. minSdkVersion is 8
Regarding the pull-down functionality itself, I found that SlidingDrawer isn't going to fit the bill, since it has been deprecated as of API v17, and it can only be opened from bottom to top. The control SlidingTray seems to overcome that issue. I haven't tested it thoroughly but but it seems to work as expected.
Now to the main issue. Is it even possible to display the view in such a manner? I have tried to set a custom view for the ActionBar, where the inflated XML looks something like this:
<?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="wrap_content" >
<my.package.drawer.SlidingTray
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:content="#+id/content"
android:handle="#+id/handle" >
<ImageView
android:id="#+id/handle"
android:layout_width="88dp"
android:layout_height="44dp"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</my.package.drawer.SlidingTray>
</RelativeLayout>
Now, the SlidingTray view itself is functioning as expected when I put it in the activity/fragment layout (can drag the handle and click it to open/close the tray), but when inflating the layout above inside the ActionBar, and upon pressing/dragging the handle, the Tray only moves a few pixels before stopping - it doesn't go beyond the ActionBar bounds. This is the main issue - can the view go beyond the ActionBar itself (over the activity displayed below), and if so - how?
Since no one answered, I'll post how I resolved the issue.
After some inspecting with hierarchyviewer, I saw that the ActionBar was in a LinearLayout and as such, it wouldn't be possible to extend a child of it outside of the ActionBar bounds. So I decided to get the root (decor) view and attach the modified version of SlidingDrawer there. Here is the excerpt:
ViewGroup decor = (ViewGroup) getWindow().getDecorView();
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View drawerContainer = inflater.inflate(R.layout.sliding_drawer, null);
drawer = (SlidingDrawer) drawerContainer.findViewById(R.id.drawer);
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
decor.addView(drawerContainer, params);
Since adding a view this way displays it behind the Status bar, I also added a container view with top padding of 25dp so that the handle and content are displayed beneath it.
Note: if you are using the SlidingMenu library, you need to do this in onPostCreate(), because the library also does this and will place your view behind all of the other content.
I'm created a custom AlertDialog, but
it have a default black border. How can I hide it?
My layout
props - match_parent,
style - #android:style/Theme.Translucent.NoTitleBar.Fullscreen
UPD
#Override
protected Dialog onCreateDialog(int id) {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
LayoutInflater inflater = getLayoutInflater();
View dialoglayout = inflater.inflate(R.layout.dialog_layout, (ViewGroup) getCurrentFocus());
switch (id) {
case IDD_RESULT:
builder.setView(dialoglayout);
return builder.create();
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog_layout_root"
style="#android:style/Theme.Translucent.NoTitleBar.Fullscreen"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_bg"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
The border is due to the fact that you might have set your custom layout (probably inflated) as the content view of the dialog.
I think AlertDialogs are composed by (at least) 3 layouts, one for the title, one for the content and one last for the buttons. So the little border you see might be the layout for the buttons.
I don't know how to make it disappear, anyway if you want custom dialogs without thoses borders, you can create a class that extends Activity, and use the #android:style/Theme.Dialog to make it look like a dialog. Then you can fully manage what your activity do/not shows.
What you are able to see is the default Style for any AlertDialog which normally varies from Device to Device. I tried a few times to change it, but I was not successful. So what I did is, I used the super Class Dialog and created my own AlertDialog.
Here is a link to my answer,
https://stackoverflow.com/a/11608468/603744
Since you are using your own layout, I believe that it will be of the same value.
I have activity and a lot of widgets on it, some of them have animations and because of the animations some of the widgets are moving (translating) one over another. For example the text view is moving over some buttons . . .
Now the thing is I want the buttons to be always on the front. And when the textview is moving I want to move behind the buttons.
I can not achieve this I tried everything I know, and "bringToFront()" definitelly doesn't work.
note I do not want to control the z-order by the order of placing element to layout cause I simply can't :), the layout is complex and I can not place all the buttons at the begging of the layout
You can call bringToFront() on the view you want to get in the front
This is an example:
yourView.bringToFront();
With this code in xml
android:translationZ="90dp"
I've been looking through stack overflow to find a good answer and when i couldn't find one i went looking through the docs.
no one seems to have stumbled on this simple answer yet:
ViewCompat.setTranslationZ(view, translationZ);
default translation z is 0.0
An even simpler solution is to edit the XML of the activity. Use
android:translationZ=""
bringToFront() is the right way, but, NOTE that you must call bringToFront() and invalidate() method on highest-level view (under your root view), for e.g.:
Your view's hierarchy is:
-RelativeLayout
|--LinearLayout1
|------Button1
|------Button2
|------Button3
|--ImageView
|--LinearLayout2
|------Button4
|------Button5
|------Button6
So, when you animate back your buttons (1->6), your buttons will under (below) the ImageView. To bring it over (above) the ImageView you must call bringToFront() and invalidate() method on your LinearLayouts. Then it will work :)
**NOTE: Remember to set android:clipChildren="false" for your root layout or animate-view's gradparent_layout. Let's take a look at my real code:
.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:hw="http://schemas.android.com/apk/res-auto"
android:id="#+id/layout_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/common_theme_color"
android:orientation="vertical" >
<com.binh.helloworld.customviews.HWActionBar
android:id="#+id/action_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_actionbar_height"
android:layout_alignParentTop="true"
hw:titleText="#string/app_name" >
</com.binh.helloworld.customviews.HWActionBar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/action_bar"
android:clipChildren="false" >
<LinearLayout
android:id="#+id/layout_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
<ImageView
android:id="#+id/imgv_main"
android:layout_width="#dimen/common_imgv_height"
android:layout_height="#dimen/common_imgv_height"
android:layout_centerInParent="true"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:id="#+id/layout_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Some code in .java
private LinearLayout layoutTop, layoutBottom;
...
layoutTop = (LinearLayout) rootView.findViewById(R.id.layout_top);
layoutBottom = (LinearLayout) rootView.findViewById(R.id.layout_bottom);
...
//when animate back
//dragedView is my layoutTop's child view (i added programmatically) (like buttons in above example)
dragedView.setVisibility(View.GONE);
layoutTop.bringToFront();
layoutTop.invalidate();
dragedView.startAnimation(animation); // TranslateAnimation
dragedView.setVisibility(View.VISIBLE);
GLuck!
Try FrameLayout, it gives you the possibility to put views one above another. You can create two LinearLayouts: one with the background views, and one with foreground views, and combine them using the FrameLayout. Hope this helps.
If you are using ConstraintLayout, just put the element after the other elements to make it on front than the others
i have faced the same problem.
the following solution have worked for me.
FrameLayout glFrame=(FrameLayout) findViewById(R.id.animatedView);
glFrame.addView(yourView);
glFrame.bringToFront();
glFrame.invalidate();
2nd solution is by using xml adding this attribute to the view xml
android:translationZ=""
You can try to use the bringChildToFront, you can check if this documentation is helpful in the Android Developers page.
There can be another way which saves the day. Just init a new Dialog with desired layout and just show it. I need it for showing a loadingView over a DialogFragment and this was the only way I succeed.
Dialog topDialog = new Dialog(this, android.R.style.Theme_Translucent_NoTitleBar);
topDialog.setContentView(R.layout.dialog_top);
topDialog.show();
bringToFront() might not work in some cases like mine. But content of dialog_top layout must override anything on the ui layer. But anyway, this is an ugly workaround.
You can use BindingAdapter like this:
#BindingAdapter("bringToFront")
public static void bringToFront(View view, Boolean flag) {
if (flag) {
view.bringToFront();
}
}
<ImageView
...
app:bringToFront="#{true}"/>
The order of the overlapping views really depends of 4 things:
The attribute android:elevation which is measured in dp/sp
The attribute android:translationZ which is also measured in dp/sp.
In Constraint Layout, the order in which you put the views in your Component Tree is also the order to be shown.
The programmatically order that you set through methods like view.bringToFront() in your kotlin/java code.
The numerals 1 and 2 compite with each other and take preference over the points 3 and 4: if you set elevation="4dp" for View 1 and translationZ="2dp" for View 2, View 1 will always be on top regardless of the numerals 3 and 4.
Thanks to Stack user over this explanation, I've got this working even on Android 4.1.1
((View)myView.getParent()).requestLayout();
myView.bringToFront();
On my dynamic use, for example, I did
public void onMyClick(View v)
{
((View)v.getParent()).requestLayout();
v.bringToFront();
}
And Bamm !
You can use elevation attribute if your minimum api level is 21. And you can reorder view to the bottom of other views to bring it to front. But if elevation of other views is higher, they will be on top of your view.
If you are using a LinearLayout you should call myView.bringToFront() and after you should call parentView.requestLayout() and parentView.invalidate() to force the parent to redraw with the new child order.
Arrange them in the order you wants to show. Suppose, you wanna show view 1 on top of view 2. Then write view 2 code then write view 1 code. If you cant does this ordering, then call bringToFront() to the root view of the layout you wants to bring in front.
Try to use app:srcCompat instead of android:src
You need to use framelayout. And the better way to do this is to make the view invisible when thay are not require. Also you need to set the position for each and every view,So that they will move according to there corresponding position
You can set visibility to false of other views.
view1.setVisibility(View.GONE);
view2.setVisibility(View.GONE);
...
or
view1.setVisibility(View.INVISIBLE);
view2.setVisibility(View.INVISIBLE);
...
and set
viewN.setVisibility(View.VISIBLE);
I looked online and was not able to find a working example of the PopupWindow class. The code examples I found online either compile but do not work, or are using methods which have since been removed (such as Activity.getViewInflate()).
Is there a simple working example that displays a PopupWindow?
I created a working example based on this Google Groups post.
To create a simple working PopupWindow, you'll need to do the following:
Create a layout XML which describes the View that will be rendered within the PopupWindow.
Invoke the PopupWindow by inflating the layout XML, and assign the appropriate "parent view" to the pop-up.
popup_example.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="Test Pop-Up"
/>
</LinearLayout>
Java code:
LayoutInflater inflater = (LayoutInflater)
this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
PopupWindow pw = new PopupWindow(
inflater.inflate(R.layout.popup_example, null, false),
100,
100,
true);
// The code below assumes that the root container has an id called 'main'
pw.showAtLocation(this.findViewById(R.id.main), Gravity.CENTER, 0, 0);
AFAIK only the AbsoluteLayout works(pls confirm), as seen on http://sree.cc/google/android/android-popup-window . I've shown the popup right, but LinearLayout was not showing all elements. But AbsoluteLayout is deprecated!
FrameLayout also works, but organizing views is a nightmare since the official documentation says it is only good for holding one view.
Also, to be able to receive touch events, you need to do this: setBackgroundDrawable(new BitmapDrawable());
as further explained at Android popup window dismissal
You are getting the invisibility because you didn't set the Background color of the layout to whom you are inflated.set it as android:background="#778899",and definitely you can see the things