Archive

Archive for February, 2012

On off switcher android

February 18, 2012 Leave a comment

Its bit complicated but good to use.

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent" android:background="#FACC2E">

	<RelativeLayout android:id="@+id/onoffContainer"
		android:layout_width="wrap_content" android:layout_height="wrap_content"
		android:layout_centerInParent="true" android:layout_centerHorizontal="true">
		<ViewFlipper android:id="@+id/onoffSwitchContainer"
			android:layout_width="wrap_content" android:layout_height="25dip"
			android:layout_marginTop="10dip">

			<LinearLayout android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:background="@drawable/background_on_off">

				<Button android:id="@+id/onButton" style="@style/disable_button"
					android:text="ON" />

				<Button style="@style/enable_button" android:text="OFF" />
				
			</LinearLayout>

			<LinearLayout android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:background="@drawable/background_on_off">

				<Button style="@style/enable_button" android:text="ON" />

				<Button android:id="@+id/offButton" style="@style/disable_button"
					android:text="OFF" />
			</LinearLayout>
		</ViewFlipper>
	</RelativeLayout>
	
	
	<RelativeLayout android:id="@+id/onoffContainer2"
		android:layout_width="wrap_content" android:layout_height="wrap_content"
		android:layout_centerHorizontal="true"
		android:layout_below="@id/onoffContainer">
		
		<ViewFlipper android:id="@+id/onoffSwitchContainer2"
			android:layout_width="wrap_content" android:layout_height="25dip"
			android:layout_marginTop="10dip" android:background="@drawable/background_on_off1">

			<LinearLayout android:layout_width="wrap_content"
				android:layout_height="wrap_content" >

				<Button android:id="@+id/onButton2" style="@style/disable_button2" />

				<Button style="@style/enable_button2" android:text="OFF" />
				
			</LinearLayout>

			<LinearLayout android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:background="@drawable/background_on1">

				<Button style="@style/enable_button2" android:text="ON" />

				<Button android:id="@+id/offButton2" style="@style/disable_button2"/>
			</LinearLayout>
		</ViewFlipper>
	</RelativeLayout>
</RelativeLayout>

activity

package org.nishant.nair;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ViewFlipper;

public class OnOffSwittcherActivity extends Activity {
	/** Called when the activity is first created. */

	private ViewFlipper viewflip;
	boolean fromRight = false;
	boolean fromLeft = true;
	private Button onButton;
	private Button offButton;
	/////////////////////////////////////////////////////
	/////
	boolean fromRightImage = false;
	boolean fromLeftImage = true;
	private ViewFlipper viewflip2;
	private Button onButton2;
	private Button offButton2;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		viewflip = (ViewFlipper) findViewById(R.id.onoffSwitchContainer);
		onButton = (Button) findViewById(R.id.onButton);
		offButton = (Button) findViewById(R.id.offButton);

		viewflip2 = (ViewFlipper) findViewById(R.id.onoffSwitchContainer2);
		onButton2 = (Button) findViewById(R.id.onButton2);
		offButton2 = (Button) findViewById(R.id.offButton2);

		/*
		 * boolean values is used to control view to go left and right.
		 * viewflip.showNext() is used to show next view in viewflipper.
		 * viewflip.showPrevious() is used to show previous view in viewflipper.
		 */
		
		
		onButton.setOnClickListener(new OnClickListener() {

			public void onClick(View v) {
				// /when user clicks on ON button, ON view slides in
				if (fromLeft == true) {
					viewflip.setInAnimation(AnimationHelper.inFromLeftAnimation());
					viewflip.setOutAnimation(AnimationHelper.outToRightAnimation());
					viewflip.showNext();
					fromLeft = false;
					fromRight = true;
				}
			}
		});

		offButton.setOnClickListener(new OnClickListener() {

			public void onClick(View v) {
				// /when user clicks on OFF button, OFF view slides in
				if (fromRight == true) {
					viewflip.setInAnimation(AnimationHelper.inFromRightAnimation());
					viewflip.setOutAnimation(AnimationHelper.outToLeftAnimation());
					viewflip.showPrevious();
					fromLeft = true;
					fromRight = false;
				}
			}
		});

		onButton2.setOnClickListener(new OnClickListener() {

			public void onClick(View v) {
				// /when user clicks on ON button, ON view slides in
				if (fromLeftImage == true) {
					viewflip2.setInAnimation(AnimationHelper.inFromLeftAnimation());
					viewflip2.setOutAnimation(AnimationHelper.outToRightAnimation());
					viewflip2.showNext();
					fromLeftImage = false;
					fromRightImage = true;
				}
			}
		});

		offButton2.setOnClickListener(new OnClickListener() {

			public void onClick(View v) {
				// /when user clicks on OFF button, OFF view slides in
				if (fromRightImage == true) {
					viewflip2.setInAnimation(AnimationHelper.inFromRightAnimation());
					viewflip2.setOutAnimation(AnimationHelper.outToLeftAnimation());
					viewflip2.showPrevious();
					fromLeftImage = true;
					fromRightImage = false;
				}
			}
		});
	}
}

AnimationHelper class

package org.nishant.nair;

import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;

public class AnimationHelper {

	public static Animation inFromRightAnimation() {
		Animation inFromRight = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
		inFromRight.setDuration(200);
		inFromRight.setInterpolator(new AccelerateInterpolator());
		return inFromRight;
	}

	public static Animation outToLeftAnimation() {
		Animation outtoLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
		outtoLeft.setDuration(200);
		outtoLeft.setInterpolator(new AccelerateInterpolator());
		return outtoLeft;
	}
	// for the next movement

	public static Animation inFromLeftAnimation() {
		Animation inFromLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
		inFromLeft.setDuration(200);
		inFromLeft.setInterpolator(new AccelerateInterpolator());
		return inFromLeft;
	}

	public static Animation outToRightAnimation() {
		Animation outtoRight = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
		outtoRight.setDuration(200);
		outtoRight.setInterpolator(new AccelerateInterpolator());
		return outtoRight;
	}	
}

stlyes.xml (res/values/styles.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="enable_button">
		<item name="android:layout_width">40dip</item>
		<item name="android:layout_height">25dip</item>
		<item name="android:textColor">#f8f8f8</item>
		<item name="android:textStyle">bold</item>
		<item name="android:background">@drawable/background_enable_switch_button</item>
	</style>
	<style name="disable_button">
		<item name="android:layout_width">40dip</item>
		<item name="android:layout_height">25dip</item>
		<item name="android:textColor">#CCCCCC</item>
		<item name="android:textStyle">bold</item>
		<item name="android:background">@drawable/background_disable_switch_button</item>
	</style>
	
	<style name="enable_button2">
		<item name="android:layout_width">40dip</item>
		<item name="android:layout_height">25dip</item>
		<item name="android:textColor">#A4A4A4</item>
		<item name="android:textStyle">bold</item>
		<item name="android:background">@null</item>
	</style>
	<style name="disable_button2">
		<item name="android:layout_width">25dip</item>
		<item name="android:layout_height">25dip</item>
		<item name="android:background">@drawable/background_disable_switch_button1</item>
	</style>
</resources>

background_disable_switch_button.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape   xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
    <solid   android:color="#e8e8e8"/>
    <corners android:radius="3dip"/>
</shape>

background_disable_switch_button1.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape   xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
    <solid   android:color="#BDBDBD"/>
    <corners android:radius="20dip"/>
    <stroke android:width="0.5dp" android:color="#848484"/>
</shape>

background_enable_switch_button.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape   xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
    <solid   android:color="#303030"/>
    <corners android:radius="4dip"/>
</shape>

background_enable_switch_button1.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape   xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
    <solid   android:color="#303030"/>
    <corners android:radius="4dip"/>
</shape>

background_on_off.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	shape="rectangle">
	<corners android:radius="5dip" />
</shape>

background_on_off1.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	shape="rectangle">
	<corners android:radius="20dip"/>
	<solid android:color="#eeeeee"/>
</shape>

background_on1.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	shape="rectangle">
	<corners android:radius="20dip" />
	<solid android:color="#205691"/>
</shape>
Categories: Android
%d bloggers like this: