Home > DeveloperSection > Articles > Sliding effect in Android

Sliding effect in Android


Android Android 
Ratings:
0 Comment(s)
 2642  View(s)
Rate this:

Sliding effect in AndroidSliding effect in Android


In this article, I am going to tell you about sliding effect in android.

Basically sliding is use to save the space of our screen window. Sliding hides content out of the screen and allows the user to drag a handle to bring the content on screen. The size of the Sliding defines how much space the content will occupy once slid out so Sliding should usually use match parent for both its dimensions. Inside an XML layout, Sliding must define the id of the handle and of the content.

Here I will tell you that how can create sliding effect in android application without any use sliding control like as SlidingDrawer control. 

Follow the steps which are given below and you can create a sliding effect in android application.

·         Open Eclipse

·         Select New Android Application Project

·         Enter Application Name as SlideTopToBottom

·         Click Next

·         Click Finish.

 

After completing my coding and designing the final output will be like this

 

Sliding effect in Android

Now go to the res/Layout/activity_main.xml and write the following code

 

<?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:background="#000"

    android:gravity="center_horizontal"

    android:orientation="vertical" >

 

<!--Transparent is a class which find your actions and slid    -->

<!-- Open Transparent class-->

    <com.example.slidetoptobottom.Transparent

        android:id="@+id/popup_window"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="@drawable/green"

        android:gravity="left"

        android:orientation="vertical"

        android:padding="30px" >

 

        <TextView

            android:id="@+id/tvCountry"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Select Country" />

 

<!-- Add the checkbox for to select the  country name -->

 

        <CheckBox

            android:id="@+id/cbAus"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Australia"

            android:textSize="17dp" />

 

        <CheckBox

            android:id="@+id/cbIndia"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="India"

            android:textSize="17dp" />

 

        <CheckBox

            android:id="@+id/cbNewzel"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Newzealand"

            android:textSize="17dp" />

 

        <CheckBox

            android:id="@+id/cbSouth"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="South Africa"

            android:textSize="17dp" />

<!-- Close Transparent class-->

 

    </com.example.slidetoptobottom.Transparent>

<!—ImageView is use for to show the icon for sliding-->

 

    <ImageView

        android:id="@+id/handle"

        android:layout_width="wrap_content"

        android:layout_height="40px"

        android:src="@drawable/sliding_Img" />

<!—Sliding_Img is a drawable image  -->

 

 

    <Button

        android:id="@+id/btnOK"

        android:layout_width="85dp"

        android:layout_height="37dp"

        android:background="@drawable/white"

        android:text="OK" />

 

</LinearLayout>

 

 

Now go to the MainActivity.java and follow the code

 

 

package com.example.slidetoptobottom;

 

import android.os.Bundle;

import android.app.Activity;

import android.graphics.Color;

import android.text.Layout;

import android.view.Menu;

import android.view.View;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

 

public class MainActivity extends Activity {

 

                                TextView tvCountry;

                int key = 0;

 

                @Override

                public void onCreate(Bundle savedInstanceState) {

                                super.onCreate(savedInstanceState);

                                setContentView(R.layout.activity_main);

                                tvCountry = (TextView) findViewById(R.id.tvCountry);

                                tvCountry.setTextColor(Color.BLACK);

                                final Transparent popup = (Transparent) findViewById(R.id.popup_window);

 

//First time visibility should be hide of window

 

                                popup.setVisibility(View.GONE);

 

                                final ImageView imgview = (ImageView) findViewById(R.id.handle);

                                imgview.setOnClickListener(new View.OnClickListener() {

 

                                                @Override

                                                public void onClick(View arg0) {

                                                                if (key == 0) {

                                                                                key = 1;

//In clicking then visibility will be show of the popup window. Popup is an object of Transport class.

                                                                                popup.setVisibility(View.VISIBLE);

                                                                               btn.setBackgroundResource(R.drawable.ic_launcher);

                                                                } else if (key == 1) {

                                                                                key = 0;

                                                                                popup.setVisibility(View.GONE);

                                                                               btn.setBackgroundResource(R.drawable.ic_action_search);

                                                                }

                                                }

                                });

                }

}

 

 

Now create a new class whose name should be Transparent.java.

In Transparent class write the following code

 

Transparent.java

 

package com.example.slidetoptobottom;

 

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.widget.LinearLayout;

 

public class Transparent extends LinearLayout {

                private Paint innerPaint, borderPaint;

 

                public Transparent(Context context, AttributeSet as) {

                                super(context, as);

                                init();

                }

 

                public Transparent(Context context) {

                                super(context);

                                init();

                }

 

                private void init() {

 

// set the color, border, alignment and width.

 

                                innerPaint = new Paint();

                                innerPaint.setARGB(111, 111, 111, 111);

                                innerPaint.setAntiAlias(true);

                                borderPaint = new Paint();

                                borderPaint.setARGB(255, 255, 255, 255);

                                borderPaint.setAntiAlias(true);

                                borderPaint.setStyle(Style.STROKE);

                                borderPaint.setStrokeWidth(20);

                }

 

                public void setInnerPaint(Paint innerPaint) {

                                this.innerPaint = innerPaint;

                }

 

                public void setBorderPaint(Paint borderPaint) {

                                this.borderPaint = borderPaint;

                }

//This method will be arrange the text in rectangle

                @Override

                protected void dispatchDraw(Canvas canvas) {

//create the rectangle

                                RectF drawRect = new RectF();

//set the layout of rectangle

                                drawRect.set(0, 0, getMeasuredWidth(),        getMeasuredHeight());

                                canvas.drawRoundRect(drawRect, 5, 5, innerPaint);

                                canvas.drawRoundRect(drawRect, 5, 5, borderPaint);

                                super.dispatchDraw(canvas);

                }

}

 

 

And now run your Android application -:

 

Sliding effect in Android

Sliding effect in Android

Thank you for reading this article. If this article related, you have any valuable questions, suggestion and comments then write in comment box.


Don't want to miss updates? Please click the below button!

Follow MindStick