articles

Home / DeveloperSection / Articles / Sliding effect in Android

Sliding effect in Android

Manoj Pandey5146 26-Jun-2014

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.


Updated 07-Sep-2019

Leave Comment

Comments

Liked By