I'm a beginner in Android and I'm trying to achieve something similar to Google Maps App. When I press on a marker I want a new fragment with details to appear on top of my SupportMapFragment, like this:
How can I achieve that?
Is that a default layout for that fragment?
Is that even a fragment or just a modified info window?
yes you can easily achieve it using this lib, its support 2 layouts when minimized and stretched, I have implemented similar behavior following google maps app as getting data like below and setting it in layout
here is link
and sample usage is
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="68dp"
sothree:umanoShadowHeight="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Main Content"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:text="The Awesome Sliding Up Panel"
android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
I figured it out. What I need is called a Bottom Sheet Dialog. Here is a very useful guide that I used as source of inspiration.
Step 1
Implement Material Components Library in `app.gradle`:
implementation 'com.google.android.material:material:1.3.0'
Step 2
In res->layout create a layout of your choice. Mine looks like this:
<androidx.constraintlayout.widget.ConstraintLayout 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="200dp"
android:layout_gravity="bottom">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Rent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The layout is aligned to bottom.
Step 3
Define a method that instantiate the BottomSheetDialog:
private void showBottomSheetDialog() {
final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(getContext());
bottomSheetDialog.setContentView(R.layout.MY_LAYOUT_NAME);
AppCompatButton btn = bottomSheetDialog.findViewById(R.id.btn_view);
bottomSheetDialog.show();
}
Step 4
This step is extra, just if you want to see how to call the BottomSheetDialog by pressing on a GoogleMap marker.
Make sure that the class that handles the MapSupportFragment implements OnMapReadyCallback, GoogleMap.OnMarkerClickListener and (if you need clusters of markers) ClusterManager.OnClusterItemClickListener. Override the necessary methodes:
#Override
public boolean onMarkerClick(Marker marker) {
showBottomSheetDialog();
return false;
}
If you need clusters, in #onMapReady() dont't forget to add:
map.setOnCameraIdleListener(clusterManager);
map.setOnMarkerClickListener(clusterManager);
clusterManager.setOnClusterItemClickListener(this);
Voila!
Related
I am learning Android these days, and I am having some trouble implementing something. When I click on the image icon, I want a menu to appear from below. The screenshot is as below. (Sorry it's in chinese....)
There's awesome library on github to get your task done.
All you need to do is setup your layout in two part as describe in below code
part 1: Your main activity(main frame)
part 2: bottom Panel which will be shown when user swipe/click on button.
You must check how to set "anchor point true" in library document.
<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoDragView="#+id/dragView"
sothree:umanoPanelHeight="68dp"
sothree:umanoParalaxOffset="10dp">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<RelativeLayout
android:id="#+id/panel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--This is bottom layout.-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FF00"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#0000FF"
android:text="Button 1" />
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#0000FF"
android:text="Button 1" />
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#0000FF"
android:text="Button 1" />
</LinearLayout>
</RelativeLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
I think what you are trying to do here is to replicate the action sheet of iOS in android. There is this library which does exactly what you are looking for, https://github.com/baoyongzhang/android-ActionSheet . You can either have it as it as it is provided by author or you can clone it and suit your need accordingly. I would prefer if you could clone it as a module in your app that way you have limitless way to re-design it. If you need help on that let us know
You can simply follow the below link , it will implement what u need :
http://trickyandroid.com/fragments-translate-animation/
This will be done through Transition Fragment Animation .
i had gone through research about for couple of days but didn't get it resolved. Problem in this Question is similar to mine but I couldn't solve my issue using this either.
I had tried to get the circular reveal effect just like whatsapp where the revealed view will be inflated over the top of other views. In my case when I apply the animation on a layout already present in the layout.xml of current java class then its work fine but the problem is that the revealing layout which in my case is LInearLayout will push the other contents(which are under it) down and make place for it.
My layout in this case is as follow,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<io.codetail.widget.RevealFrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/reveal_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/icon_camera" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Gallery" />
</LinearLayout>
<!-- Other 2 icons here-->
</LinearLayout>
</io.codetail.widget.RevealFrameLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter Name" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="OK" />
LinearLayout/>
my reveal layout will push the EditText and button down to make place for it but i want to reveal over the top of them..
Then I tried to put the revealing view code in another reveal-layout.xml file and inflate that layout to a View(LinearLayout in my case) created in javacode. And then try to apply the revealing effect on this LinearLayout but it gives me this "cannot start this animator on a detached view" exception.
My revealing-layout.xml looks like
<io.codetail.widget.RevealFrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/reveal_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/icon_camera" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Gallery" />
</LinearLayout>
<!-- Other 2 icons here-->
</LinearLayout>
</io.codetail.widget.RevealFrameLayout>
In button click i call function revealView();
which looks as below,
public void revealView()
{
int cx = (mRevealView.getLeft() + mRevealView.getRight());
int cy = mRevealView.getTop();
int radius = Math.max(mRevealView.getWidth(), mRevealView.getHeight());
// and all animations here, the animator is working fine so i did not put the code here
}
If i initialize mRevealView in my MainActivity onCreate() methoed as, mRevealView=(LinearLayout)findviewbyid(R.id.reveal_items) and inflate and assign view to it then the animator will work fine on this view. But when i try to create new layout like,
mRevealView=new LinearLayout(this) and set its parameters etc everything then it will gives this error when i apply animator on it.
Cannot start this animation on a detached view.
What I am doing wrong here can anybody suggest me.
Try to put your reveal code in a ViewTreeObserver of intended reveal-layout, something like this:
boolean reveal = false;
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
reveal = true;
}
});
LinearLayout layout = (LinearLayout) findViewById(R.id.reveal_items);
layout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if(reveal) {
reveal = false;
// start reveal animation here
// ...
}
// for SDK >= 16
ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
});
To achieve a similar effect like whatsapp using the Circular Effect like whatsapp library you mentioned i first set my parent view as FrameLayout. This parent Framelayout includes two childrens first is LinearLayout and second is FrameLayout(Here comes the code you want to display on top of view written in LinearLayout). Write all your code which you want display on the screen in the first LinearLayout and the reveal effect code in second FrameLayout as i mentioned. Its simply the use of FrameLayout property. You are good to go.
You can use the same java code provided in the discription of the library.
I'm trying to develope a Walkthroughs that looks like skillpages app, but I don't know how to put a static fragment with buttons a ViewPager creating the filling of button flotating over the image, someone can help me please
Use http://developer.android.com/reference/android/widget/PopupWindow.html with transparent background.Position the popup window at the bottom of the screen.
Have a look at this code:https://github.com/chiragjain/Emoticons-Keyboard
It uses popupwindow to display emoticons keyboard.
Have you tried something like this?
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
<Button />
<Button />
</LinearLayout>
</FrameLayout>
I'm using a NavigationDrawer as main menu in my app. Some of my fragments use the SlidingPaneLayout.
At the moment, I show the NavigationDrawer on the right and the SlidingPaneLayouton the left, always a little bit visible.
But I would like to have the NavigationDrawer on the left side and the SlidingPaneLayout on the right side (like in Hangouts) always a little bit visible.
Question:
I know how to get the NavigationDrawr to the other side, but I can't find out how (if possible) to move the SlidingPaneLayout to the right side? So that it slides in from the right...
my solution
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/sliding_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/fragment_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_marginRight="0dp"
android:orientation="vertical" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/card_toast_container" />
<FrameLayout
android:id="#+id/fragment_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- marginLeft: set it to width - 150 in your code!!! -->
<FrameLayout
android:id="#+id/fragment_slider"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginLeft="0dp" />
</android.support.v4.widget.SlidingPaneLayout>
and use some wrapping methods like for example following, for easier and more readable code:
public boolean isSliderMenuShown()
{
return !mSlidingLayout.isOpen();
}
public static void openSlider(boolean isSliderLeft, MySlidingPaneLayout slidingLayout)
{
slidingLayout.closePane();
}
public static void closeSlider(boolean isSliderLeft, MySlidingPaneLayout slidingLayout)
{
slidingLayout.openPane();
}
Set this to view inside navigation drawer:
android:layout_gravity="left"
you can try keeping it open in the start with:
SlidingPaneLayout sp = (SlidingPaneLayout) findViewById(R.id.spl);
sp.openPane();
Also keep your main content on the left and menu on the right
After my research and test, android.support.v4.widget.SlidingPaneLayout can't swipe out from right to left. The only effect is swiping out from left to right.
No matter whether android:layout_gravity= is start left end or right.
You can achieve that by adding the layout direction for you Slidingpanel layout
layout = (SlidingPaneLayout) findViewById(R.id.sliding_pane_layout);
layout.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
before that make sure you have added a property android:supportsRtl="true" for your manifest file.
Step-1
In order to support RTL in your app, you first need to add android:supportsRtl="true" to the element in your manifest file.
Step-2
Add RTL support in SlidingPaneLayout
android:layoutDirection="rtl"
Step-3
Add LTR support in child views of SlidingPaneLayout
android:layoutDirection="ltr"
<SlidingPane
android:id="#+id/slidingPanelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl">
<include
layout="#layout/left_drawer"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layoutDirection="ltr" />
<include
layout="#layout/view_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr"
/>
</SlidingPane>
Note: add LTR support in both left_drawer.xml, view_container.xml
I have full screen RelativeLayout that contains the following:
1. FrameLayout, full screen, displaying content.
2. LinearLayout, act as a control menu, stay on top of the content #1, must be able to slide or fade in/out on request(I actually have two of these. One at the top of the screen, another at the bottom).
I have the view display correctly, the menu controller slide/fade in and out when menu button pressed. But when I slide and fade the view out, the click action remain. How do I remove this action?
I tried to call menuLayout.setVisibility(View.GONE); but the action remains.
I read some issue with TranslateAnimation but I cannot get it to work.
Can someone tell me how do I fix this? Example would be appreciated.
XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99000000"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:id="#+id/contentFrame"
>
<ViewSwitcher
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewSwitch">
<include layout="#layout/main_car" />
</ViewSwitcher>
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="43dp"
android:background="#drawable/um_top_bar"
android:layout_alignParentTop="true"
android:id="#+id/topMenu"
android:gravity="top"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/um_btn_home"
android:id="#+id/homeMainBtn" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/exp_menu_btn"
android:id="#+id/menuMainBtn" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF000000"
android:layout_alignParentBottom="true"
android:id="#+id/bottomMenu"
android:gravity="top"
>
<include layout="#layout/menu_bottom" />
</LinearLayout>
Ok, I got it to work at last. For anyone who may face the same problem, here's what I did.
I place empty layer and separate all menu content into separate XML file.
Here's the code:
/** Resetting bottom menu content */
private void resetBottomMenu(boolean isOpen){
bottomMenu.removeAllViews();
bottomMenu.addView(loadBottomMenu(isOpen));
// Control event handler goes here.
}
/** Load bottom menu content from XML */
private LinearLayout loadBottomMenu(boolean isOpen){
LinearLayout result = null;
if(isOpen){
result = (LinearLayout)View.inflate(this.getApplicationContext(), R.layout.menu_bottom_open, null);
}else{
result = (LinearLayout)View.inflate(this.getApplicationContext(), R.layout.menu_bottom, null);
}
return result;
}
Every time I want to slide menu in, I called resetBottomMenu then start animation on bottomMenu. If I want to close the menu, I start animation then resetBottomMenu.
It's important to remove child view in that Layout since that will remove the click action.
P.S. I'm not sure if this is the best way of doing it but I can confirm that it works. I have three menu that need to be fade/slide and they work perfectly now :)