SlidingPanelLayout not work well from right to left in android

Question

I am creating SlidingPanelLayout from right to left for the filter purpose.The panel work fine it come out from right side and does animation but when Animation is stop it directly go to left side full but I want the ratio is 70% means right side panel came out 70% of the total screen and when click again it goes to hind and full Activity is display.

When first time Animation is stop the side panel goes to left side in the screenshot .But I want it right side.

ScreenShot :

but i want to display it write side and when click again it will go right side and hide again.

activity_inventory.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e6e6e6"
    android:id="@+id/mainLayout"
    tools:context="com.example.softeng.jogi.InventoryActivity">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/backLayout"
        tools:ignore="NotSibling">

    </RelativeLayout>

    <include
        layout="@layout/filter"/>

    <com.rey.material.widget.FloatingActionButton
        android:id="@+id/button_bt_float_wave_color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        style="@style/LightFABWaveColor"
        android:layout_margin="8dp"/>

</RelativeLayout>

filter.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">

    <RelativeLayout
        android:id="@+id/filter_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#0072BA"
        android:visibility="invisible">

    </RelativeLayout>
</RelativeLayout>

filterAnimation.java

public class FilterAnimation implements Animation.AnimationListener
{
    Context context;

    RelativeLayout filterLayout, otherLayout;

    private Animation filterSlideIn, filterSlideOut, otherSlideIn, otherSlideOut;

    private static int otherLayoutWidth, otherLayoutHeight;

    private boolean isOtherSlideOut = false;

    private int deviceWidth;

    private int margin;

    public FilterAnimation(Context context)
    {
        this.context = context;

        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();

        deviceWidth = displayMetrics.widthPixels; // as my animation is x-axis related so i gets the device width and will use that width,so that this sliding menu will work fine in all screen resolutions
    }

    public void initializeFilterAnimations(RelativeLayout filterLayout)
    {
        this.filterLayout = filterLayout;

        filterSlideIn = AnimationUtils.loadAnimation(context, R.anim.filter_slide_in);

        filterSlideOut = AnimationUtils.loadAnimation(context, R.anim.filter_slide_out);

    }

    public void initializeOtherAnimations(RelativeLayout otherLayout)
    {
        this.otherLayout = otherLayout;

        otherLayoutWidth = otherLayout.getWidth();

        otherLayoutHeight = otherLayout.getHeight();


        otherSlideIn = AnimationUtils.loadAnimation(context, R.anim.other_slide_in);
        otherSlideIn.setAnimationListener(this);

        otherSlideOut = AnimationUtils.loadAnimation(context, R.anim.other_slide_out);
        otherSlideOut.setAnimationListener(this);
    }

    public void toggleSliding()
    {
        if(isOtherSlideOut) //check if findLayout is already slided out so get so animate it back to initial position
        {

            filterLayout.startAnimation(filterSlideOut);

            filterLayout.setVisibility(View.INVISIBLE);

            otherLayout.startAnimation(otherSlideIn);

        }
        else //slide findLayout Out and filterLayout In
        {
            otherLayout.startAnimation(otherSlideOut);

            filterLayout.setVisibility(View.VISIBLE);

            filterLayout.startAnimation(filterSlideIn);
        }
    }

    @Override
    public void onAnimationEnd(Animation animation)
    {
        if(isOtherSlideOut) //Now here we will actually move our view to the new position,because animations just move the pixels not the view
        {
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(otherLayoutWidth, otherLayoutHeight);

            otherLayout.setLayoutParams(params);

            isOtherSlideOut = false;
        }
        else
        {
            margin = (deviceWidth * 70) / 100; //here im coverting device percentage width into pixels, in my other_slide_in.xml or other_slide_out.xml you can see that i have set the android:toXDelta="80%",so it means the layout will move to 80% of the device screen,to work across all screens i have converted percentage width into pixels and then used it



            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(otherLayoutWidth, otherLayoutHeight);

            params.leftMargin = margin;

            params.rightMargin = -margin; //same margin from right side (negavite) so that our layout won't get shrink


            otherLayout.setLayoutParams(params);

            isOtherSlideOut = true;

            dimOtherLayout();
        }
    }

    @Override
    public void onAnimationRepeat(Animation animation)
    {

    }

    @Override
    public void onAnimationStart(Animation animation)
    {

    }

    private void dimOtherLayout()
    {
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f);

        alphaAnimation.setFillAfter(true);

        otherLayout.startAnimation(alphaAnimation);
    }

}

InventoryActivity.java

public class InventoryActivity extends AppCompatActivity implements View.OnClickListener {

    RelativeLayout filterLayout, findLayout;

    FilterAnimation filterAnimation;
    FloatingActionButton bffilter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_inventory);

        assert getSupportActionBar() != null;
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        filterLayout = (RelativeLayout)findViewById(R.id.filter_layout);

        findLayout = (RelativeLayout)findViewById(R.id.backLayout);

        bffilter = (FloatingActionButton)findViewById(R.id.button_bt_float_wave_color);
        bffilter.setOnClickListener(this);

        filterAnimation = new FilterAnimation(this);

        initializeAnimations();


    }

    private void initializeAnimations(){

        final ViewTreeObserver filterObserver = filterLayout.getViewTreeObserver();

        filterObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void onGlobalLayout() {

                filterLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);

                DisplayMetrics displayMetrics = getResources().getDisplayMetrics();

                int deviceWidth = displayMetrics.widthPixels;

                int filterLayoutWidth = (deviceWidth * 70) / 100;

                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(filterLayoutWidth, RelativeLayout.LayoutParams.MATCH_PARENT);

                filterLayout.setLayoutParams(params);

                filterAnimation.initializeFilterAnimations(filterLayout);
            }
        });


        final ViewTreeObserver findObserver = findLayout.getViewTreeObserver();
        findObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void onGlobalLayout() {
                findLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);

                filterAnimation.initializeOtherAnimations(findLayout);
            }
        });

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_inventory, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == android.R.id.home) {
            this.finish();
            onBackPressed();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }


    @Override
    public void onClick(View v) {

        int id = v.getId();

        switch (id){
            case R.id.button_bt_float_wave_color:
                filterAnimation.toggleSliding();
                break;
        }
    }
}

filter_slide_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">

    <translate
        android:fromXDelta="130%"
        android:toXDelta="30%"
        android:duration="1000" />

</set>

filter_slide_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">

    <translate
        android:fromXDelta="30%"
        android:toXDelta="130%"
        android:duration="1000"/>

</set>

other_slide_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">

    <translate
        android:fromXDelta="-70%"
        android:toXDelta="30%"
        android:duration="1000"
        android:fillEnabled="true"/>

</set>

other_slide_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator" >

    <translate
        android:fromXDelta="30%"
        android:toXDelta="-70%"
        android:duration="1000"/>

</set>

My Question : How I want to set right side panel to display and when click again it goes away. simply I my this code I want to remove the panel goes to full left see in the screenshot. the other part working fine.

ScreenShot :

Thanks in Advance.

Answer 1

I think I found the Solution. I am Creating the new Project.

Sliding.java

public class Sliding extends LinearLayout
{
    private Paint innerPaint, borderPaint ;
    public Sliding(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public Sliding(Context context) {
        super(context);
        init();
    }
    private void init() {
        innerPaint = new Paint();
        innerPaint.setARGB(0, 255, 255, 255); //gray
        innerPaint.setAntiAlias(true);
        borderPaint = new Paint();
        borderPaint.setARGB(255, 255, 255, 255);
        borderPaint.setAntiAlias(true);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setStrokeWidth(2);
    }
    public void setInnerPaint(Paint innerPaint) {
        this.innerPaint = innerPaint;
    }
    public void setBorderPaint(Paint borderPaint) {
        this.borderPaint = borderPaint;
    }
    @Override
    protected void dispatchDraw(Canvas canvas) {
        RectF drawRect = new RectF();
        drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());
        canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
        canvas.drawRoundRect(drawRect, 5, 5, borderPaint);
        super.dispatchDraw(canvas);
    }
}

Sliding2Activity.java

public class Sliding2Activity extends Activity {

    CheckBox c1,c2,c3;
    int key=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sliding2);

        final Sliding popup = (Sliding) findViewById(R.id.sliding1);
        popup.setVisibility(View.GONE);

        final FloatingActionButton btn=(FloatingActionButton)findViewById(R.id.show1);
        btn.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                if (key == 0) {
                    key = 1;
                    popup.setVisibility(View.VISIBLE);

                } else if (key == 1) {
                    key = 0;
                    popup.setVisibility(View.GONE);

                }
            }
        });

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_sliding2, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

activity_sliding2.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="right"
    android:orientation="horizontal">

    <com.rey.material.widget.FloatingActionButton
        android:id="@+id/show1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        style="@style/LightFABWaveColor"
        android:layout_margin="8dp"
        android:layout_gravity="bottom" />

   <com.example.softeng.panel.Sliding
        android:id="@+id/sliding1"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:background="#0072BA"
        android:gravity="left"
        android:orientation="vertical"
        android:padding="1px">

        <CheckBox
            android:id="@+id/check1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option1"
            android:textColor="#FFFFFF" />

        <CheckBox
            android:id="@+id/check2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option2"
            android:textColor="#FFFFFF" />

        <CheckBox
            android:id="@+id/check3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option3"
            android:textColor="#FFFFFF" />
    </com.example.softeng.panel.Sliding>



</LinearLayout>

ScreenShot :

Normal screen when Activity is running.

When Click on FloatinActionButton. The layout is change.

When you click again the output is screen one.