Accordion effect over Layouts

Accordion effect over Layouts

Most of example for the accordion effect as created using Expandable List view so the working task is begin difficult to do
 Lets create a accordion effect over Linear Layout

 Create a simple android project create a sample XML data as follows

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:layout_gravity="center_horizontal"
        android:text="Lorem Ipsum" />

    <TextView
        android:id="@+id/txt_index1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:drawableRight="@drawable/down_dd_icon"
        android:background="#fccffc"
        android:padding="5dp"
        android:text="What is Lorem Ipsum?" />

    <LinearLayout
        android:id="@+id/LL_panel1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        android:visibility="gone" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the         1500s, when desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."/>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        />

    <TextView
        android:id="@+id/txt_index2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:drawableRight="@drawable/down_dd_icon"
        android:background="#fccffc"
        android:padding="5dp"
        android:text="Where does it come from?" />

    <LinearLayout
        android:id="@+id/LL_panel2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        android:visibility="gone" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a Sections 1.10.32 and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham."/>
    </LinearLayout>
   <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        />
 <TextView
        android:id="@+id/txt_index3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:drawableRight="@drawable/down_dd_icon"
        android:background="#fccffc"
        android:padding="5dp"
        android:text="Why do we use it?" />

    <LinearLayout
        android:id="@+id/LL_panel3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        android:visibility="gone" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is  like).
"/>
    </LinearLayout>


</LinearLayout>


On your MainActivity create the function with will handle the show hide and animation for the view to expand and collapse

 The following function hideOthers having 3 parameters first is a view on which you may click second one the the linearlayout whom you want to give accordion effect and
last thied one is the textview which will show the up and down arrows according to condition of view

  @SuppressLint("DefaultLocale")
    private void hideOthers(View layoutView, LinearLayout panel1,
                            TextView txt_lessoption) {

        int v;
        if (layoutView.getId() == txt_lessoption.getId()) {
            v = panel1.getVisibility();
            if (v != View.VISIBLE) {
                panel1.setVisibility(View.VISIBLE);
                txt_lessoption.setCompoundDrawablesWithIntrinsicBounds(0, 0,
                        R.drawable.up_dd_icon, 0);

            } else {
                txt_lessoption.setCompoundDrawablesWithIntrinsicBounds(0, 0,
                        R.drawable.down_dd_icon, 0);

            }
            hideThemAll(panel1);
            if (v != View.VISIBLE) {
                panel1.startAnimation(new ScaleAnimToShow(1.0f, 1.0f, 1.0f,
                        0.0f, 500, panel1, true));
            }

        } else {
            System.err.println("another panel open");
        }

    }
  The following function hide the open view with the animation 

 private void hideThemAll(LinearLayout panel1) {
        // if (openLayout == null){
        openLayout = panel1;
        // return;
        // }
        if (openLayout == panel1) {
            System.out.println("not null");
            panel1.startAnimation(new ScaleAnimToHide(1.0f, 1.0f, 1.0f, 0.0f,
                    500, panel1, true));
        }



    }

  Following function perform the hide animation to the clicked view

  public class ScaleAnimToHide extends ScaleAnimation {

        private View mView;

        private LayoutParams mLayoutParams;

        private int mMarginBottomFromY, mMarginBottomToY;

        private boolean mVanishAfter = false;

        public ScaleAnimToHide(float fromX, float toX, float fromY, float toY,
                               int duration, View view, boolean vanishAfter) {
            super(fromX, toX, fromY, toY);
            setDuration(duration);
            openLayout = null;
            mView = view;
            mVanishAfter = vanishAfter;
            mLayoutParams = (LayoutParams) view.getLayoutParams();
            int height = mView.getHeight();
            mMarginBottomFromY = (int) (height * fromY)
                    + mLayoutParams.bottomMargin - height;
            mMarginBottomToY = (int) (0 - ((height * toY) + mLayoutParams.bottomMargin))
                    - height;

            Log.v("CZ", "height..." + height + " , mMarginBottomFromY...."
                    + mMarginBottomFromY + " , mMarginBottomToY.."
                    + mMarginBottomToY);
        }

        @Override
        protected void applyTransformation(float interpolatedTime,
                                           Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            if (interpolatedTime < 1.0f) {
                int newMarginBottom = mMarginBottomFromY
                        + (int) ((mMarginBottomToY - mMarginBottomFromY) * interpolatedTime);
                mLayoutParams.setMargins(mLayoutParams.leftMargin,
                        mLayoutParams.topMargin, mLayoutParams.rightMargin,
                        newMarginBottom);
                mView.getParent().requestLayout();
                // Log.v("CZ","newMarginBottom..." + newMarginBottom +
                // " , mLayoutParams.topMargin..." + mLayoutParams.topMargin);
            } else if (mVanishAfter) {
                mView.setVisibility(View.GONE);
            }
        }
    }
  Following function perform the open layout with animation to the clicked view

 public class ScaleAnimToShow extends ScaleAnimation {

        private View mView;

        private LayoutParams mLayoutParams;

        private int mMarginBottomFromY, mMarginBottomToY;

        private boolean mVanishAfter = false;

        public ScaleAnimToShow(float toX, float fromX, float toY, float fromY,
                               int duration, View view, boolean vanishAfter) {
            super(fromX, toX, fromY, toY);
            openLayout = view;
            setDuration(duration);
            mView = view;
            mVanishAfter = vanishAfter;
            mLayoutParams = (LayoutParams) view.getLayoutParams();
            mView.setVisibility(View.VISIBLE);
            int height = mView.getHeight();
            // mMarginBottomFromY = (int) (height * fromY) +
            // mLayoutParams.bottomMargin + height;
            // mMarginBottomToY = (int) (0 - ((height * toY) +
            // mLayoutParams.bottomMargin)) + height;

            mMarginBottomFromY = 0;
            mMarginBottomToY = height;

            Log.v("CZ", ".................height..." + height
                    + " , mMarginBottomFromY...." + mMarginBottomFromY
                    + " , mMarginBottomToY.." + mMarginBottomToY);
        }

        @Override
        protected void applyTransformation(float interpolatedTime,
                                           Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            if (interpolatedTime < 1.0f) {
                int newMarginBottom = (int) ((mMarginBottomToY - mMarginBottomFromY) * interpolatedTime)
                        - mMarginBottomToY;
                mLayoutParams.setMargins(mLayoutParams.leftMargin,
                        mLayoutParams.topMargin, mLayoutParams.rightMargin,
                        newMarginBottom);
                mView.getParent().requestLayout();
                // Log.v("CZ","newMarginBottom..." + newMarginBottom +
                // " , mLayoutParams.topMargin..." + mLayoutParams.topMargin);
            }
        }

    }

   Write the below code on your onClick function for the Text Views or button or any View
  here txt_index1..etc are my variable name for the text-view's
 
 @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.txt_index1:
                hideOthers(v,LL_panel1,txt_index1);
                break;
            case R.id.txt_index2:
                hideOthers(v,LL_panel2,txt_index2);
                break;
            case R.id.txt_index3:
                hideOthers(v,LL_panel3,txt_index3);
                break;
            default:
                break;
        }
    }

For output See below pictures





Thanks ...

Comments

Post a Comment

Popular posts from this blog

Crypto JS Encryption & Decryption in Android

Hi, today I explain how to do encryption in android using java script. Create sample.html file on the assets folder and add the following html code on it. <html> <head> <script language="javascript" src="aes.js"> </script> </head> <body> </body> </html>  Here I add a javascript file , in this file there is a code for encryption and decryption    Create a javascript file from the below code and save it on our assets folder with .js extension and access this one on our activity class.   /* CryptoJS v3.1.2 code.google.com/p/crypto-js (c) 2009-2013 by Jeff Mott. All rights reserved. code.google.com/p/crypto-js/wiki/License */ var CryptoJS=CryptoJS||function(u,p){var d={},l=d.lib={},s=function(){},t=l.Base={extend:function(a){s.prototype=this;var c=new s;a&&c.mixIn(a);c.hasOwnProperty("init")||(c.init=function(){c.$super.init.apply(this,argumen...
Read more

Android Video download using AsyncTask

Hi, Today I go to explain how to download any video and save it on device using asynctask. Here I write a taskhandler class for this one Create an interface which will handle the result of a downloaded video path from your device. public interface VideoInterface {    public void VideoResponse(String response,String filename); } Now below code is for the Taskhandle for the video downloading import java.io.BufferedInputStream; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.URL; import java.net.URLConnection; import android.app.ProgressDialog; import android.content.Context; import android.os.AsyncTask; import android.view.WindowManager; import android.widget.ImageView; import android.widget.TextView; import com.package_name .activities.R; import com.package_name .VideoInterface; public class VideoTaskHandler extends AsyncTask<St...
Read more

Android Interview Material

Image
Q1] What is Retrofit? Ans:- Retrofit is a REST client for Android, through which you can make easy to use interfaces which can turn any Android app into a powerful one. Retrofit is developed by Square Inc. Retrofit turns your REST API into a Java interface. Retrofit can perform Async and sync requests with automatic JSON parsing without any effort. Q2] What is Volley? Ans:- Volley is a networking library it offers great features like synchronous requests, asynchronous requests, prioritization, making multiple requests at the same time, ordered requests, and of course caching. Q3] Difference between retrofit and volley? Retrofit Volley Retrofit can parse many other types of responses automatically like: Boolean – Web API response needs to be a boolean. Integer – Web API response needs to be an integer. Date– Web API response should be a Long format date. String – Web API response needs to be in String format. Object – Web API response needs ...
Read more