how to implement umano/AndroidSlidingUpPanel lib
Asked Answered
B

1

1

My App has a map fragment . And on clicking marker , an slide up animation shows from bottom to half of screen . And it slide down on clicking marker again .

I want : Slide up menu should be clickable or drag gable so that it can move to top of screen . to be more clear , i mean either on clicking or dragging this slide up menu which is on half of screen , should go to top of screen .

So far i done : On clicking marker, call the slide up animation to half of screen. : enter image description here

Animation code : slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
            android:interpolator="@android:anim/accelerate_decelerate_interpolator"
            android:propertyName="yFraction"
            android:valueType="floatType"
            android:valueFrom="1.0"
            android:valueTo="0.58"
            android:duration="@android:integer/config_mediumAnimTime"/>
    <objectAnimator
            android:interpolator="@android:anim/accelerate_decelerate_interpolator"
            android:propertyName="alpha"
            android:valueType="floatType"
            android:valueFrom="0.58"
            android:valueTo="1.0"
            android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
            android:interpolator="@android:anim/accelerate_decelerate_interpolator"
            android:propertyName="yFraction"
            android:valueType="floatType"
            android:valueFrom="0.58"
            android:valueTo="1.0"
            android:duration="@android:integer/config_mediumAnimTime"/>
    <objectAnimator
            android:interpolator="@android:anim/accelerate_decelerate_interpolator"
            android:propertyName="alpha"
            android:valueType="floatType"
            android:valueFrom="1"
            android:valueTo="0"
            android:duration="@android:integer/config_mediumAnimTime"/>
</set>

The code in Activity which calling this Animation on Marker click :

 public void toggleList() {
        Fragment f = getFragmentManager().findFragmentByTag(LIST_FRAGMENT_TAG);

        if (f != null) {
            getFragmentManager().popBackStack();
        } else {
            getFragmentManager()
                    .beginTransaction()
                    .setCustomAnimations(R.anim.slide_up,
                            R.anim.slide_down,
                            R.anim.slide_up,
                            R.anim.slide_down)
                    .add(R.id.list_fragment_container, BaseMapSlidingFragment
                                    .instantiate(this, BaseMapSlidingFragment.class.getName()),
                            LIST_FRAGMENT_TAG
                    )
                    .addToBackStack(null).commit();
            googleMap.getUiSettings().setAllGesturesEnabled(false);
            if(animCheck == false){
                animCheck = true;
                }else
            {
                    animCheck= false;
            }


        }}

menu_Sliding.up.xml

<?xml version="1.0" encoding="utf-8"?>

<com.trickyandroid.fragmenttranslate.app.view.SlidingRelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#7c7c7c">

    <ListView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

</com.trickyandroid.fragmenttranslate.app.view.SlidingRelativeLayout>

Custom_View :

  **package com.trickyandroid.fragmenttranslate.app.view;
    import android.content.Context;
    import android.util.AttributeSet;
    import android.view.ViewTreeObserver;
    import android.widget.RelativeLayout;
    /**
     * Created by paveld on 4/13/14.
     */
    public class SlidingRelativeLayout extends RelativeLayout {
        private float yFraction = 0;
        public SlidingRelativeLayout(Context context) {
            super(context);
        }
        public SlidingRelativeLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
        public SlidingRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
        private ViewTreeObserver.OnPreDrawListener preDrawListener = null;
        public void setYFraction(float fraction) {
            this.yFraction = fraction;
            if (getHeight() == 0) {
                if (preDrawListener == null) {
                    preDrawListener = new ViewTreeObserver.OnPreDrawListener() {
                        @Override
                        public boolean onPreDraw() {
                            getViewTreeObserver().removeOnPreDrawListener(preDrawListener);
                            setYFraction(yFraction);
                            return true;
                        }
                    };
                    getViewTreeObserver().addOnPreDrawListener(preDrawListener);
                }
                return;
            }
            float translationY = getHeight() * fraction;
            setTranslationY(translationY);
        }
        public float getYFraction() {
            return this.yFraction;
        }
    }**

Now how to get this menu to top of screen on clicking slide up menu which is on the half of screen ?

Bluh answered 25/11, 2015 at 9:27 Comment(1)
I suggest you use a different library than Umano. It has less limitations, better performance, and easier implementation github.com/drxeno02/androidprojects-book2-slidingdrawerCroquet
P
1

I suggest you to use AndroidSlidingUpPanel library, that can be found here. There is no point for you to write the same thing again.

It has what you need and much more. It is easy to use and modify (I am using it in my project).

How to use

  • Include com.sothree.slidinguppanel.SlidingUpPanelLayout as the root element in your activity layout.
  • The layout must have gravity set to either top or bottom.
  • Make sure that it has two children. The first child is your main layout. The second child is your layout for the sliding up panel.
  • The main layout should have the width and the height set to match_parent.
  • The sliding layout should have the width set to match_parent and the height set to either match_parent, wrap_content or the max desireable height.
  • By default, the whole panel will act as a drag region and will intercept clicks and drag events. You can restrict the drag area to a specific view by using the setDragView method or umanoDragView attribute.
Prevenient answered 26/11, 2015 at 13:27 Comment(10)
Hey , i know this Library would help me thats why i written it but my issue is , this slide up menu (shown in a image ) is a fragment . And this Fragment already consist of a 1 custom view . I will Attach the fragment xml . Now ,how can i use this SlideupPanel on the same fragment or can do othr way ?Bluh
i might be confuse in putting words : but to be say in simple words is : I want menu to be slide from bottom of screen to half of it (Which is achieved thru the custom layout i had attached ) . Now , i want to apply this SlideUpPanel to this menu fragment , so that i can drag it as well . This i am unable to figure about how to do ?Bluh
Hey, it looks like you are not using Umano's SlidingUpPanel. By using Umano sliding up panel, you should keep just the views in the sliding up panel (not the fragment), and when the user presses on the marker on the map, just change / modify the views in the sliding up panel according to the marker that was pressed. Your sliding panel could probably have a container to host the fragment aswell, altough I am not totaly sure about that. If you intend to use Umano's sliding up panel, you should restructure your code from scratch (at the moment ur using another sliding up panel?).Prevenient
Thanx , i will try all the modification you suggested and see if it work for me or not . But thanx for helping me.Bluh
Try it and follow the suggestions on the github page of the project. The logic for it to work will be different (since the panel has to be attached to the layout of the activity - so when the user will select a maker, you have to make a call to the activity, and change the panel there). If you will have any further problems, just ask, i'll try to help.Prevenient
one Query : should i use the fragment in same layout where Map fragment is ? should i do like , Map Fragment is first child and sliding layout which is right now a fragment should be second layout ? or Should i use the sliding menu in frame layout so that it would come on map on clicking marker ?Bluh
Your activity layout, has to have two parts, one where the main screen is (MAP), and another part, where your sliding panel layout is. That is in the same layout. So your activites layout, could have two 'containers' in which you would put your fragments. So when you start your activity, you show your map fragment into first container, and when you click on a marker, you call your activity to put the second fragment into the second container. Check this umano demo of the layout to get the basic ideaPrevenient
Let us continue this discussion in chat.Prevenient
@young_08, if you have any further questions / help, lets talk in the chat room, I am wiling to help you resolve the issue ;)Prevenient
Hey @young_08, join the chat ;)Prevenient

© 2022 - 2024 — McMap. All rights reserved.