Wednesday, January 15, 2014

New UI features and design guidelines for Android 4.4 KitKat

Android Design in Action: New in Android 4.4

Example of ViewAnimator

android.widget.ViewAnimator is a subclass of FrameLayout container that will perform animations when switching between its views.





<LinearLayout 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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/prev"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="previous" />

        <Button
            android:id="@+id/next"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="next" />
    </LinearLayout>

    <ViewAnimator
        android:id="@+id/viewanimator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button 3" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center" >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="- Button 4 -" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="LinearLayout 4" />
        </LinearLayout>
    </ViewAnimator>

</LinearLayout>



package com.example.androidviewanimator;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewAnimator;

public class MainActivity extends Activity {
 
 Button buttonPrev, buttonNext;
 ViewAnimator viewAnimator;
 
 Animation slide_in_left, slide_out_right;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  buttonPrev = (Button)findViewById(R.id.prev);
  buttonNext = (Button)findViewById(R.id.next);
  viewAnimator = (ViewAnimator)findViewById(R.id.viewanimator);
  
  slide_in_left = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
  slide_out_right = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
  
  viewAnimator.setInAnimation(slide_in_left);
  viewAnimator.setOutAnimation(slide_out_right);
  
  buttonPrev.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    viewAnimator.showPrevious();
   }});
  
  buttonNext.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    viewAnimator.showNext();
   }});
 }

}

Example to implement Android TextSwitcher

android.widget.TextSwitcher is a specialized ViewSwitcher that contains only children of type TextView. A TextSwitcher is useful to animate a label on screen. Whenever setText(CharSequence) is called, TextSwitcher animates the current text out and animates the new text in.


Example of TextSwitcher
Example code to implement TextSwitcher.

package com.example.androidtextswitcher;

import com.example.androidviewanimator.R;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity {

 Button buttonNext;
 TextSwitcher textSwitcher;

 Animation slide_in_left, slide_out_right;

 String[] TextToSwitched = { "Sunday", "Monday", "Tuesday", "Wednesday",
   "Thursday", "Friday", "Saturday" };
 int curIndex;

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

  buttonNext = (Button) findViewById(R.id.next);
  textSwitcher = (TextSwitcher) findViewById(R.id.textswitcher);

  slide_in_left = AnimationUtils.loadAnimation(this,
    android.R.anim.slide_in_left);
  slide_out_right = AnimationUtils.loadAnimation(this,
    android.R.anim.slide_out_right);

  textSwitcher.setInAnimation(slide_in_left);
  textSwitcher.setOutAnimation(slide_out_right);
  
  textSwitcher.setFactory(new ViewFactory(){

   @Override
   public View makeView() {
    TextView textView = new TextView(MainActivity.this);
    textView.setTextSize(30);
    textView.setTextColor(Color.RED);
    textView.setGravity(Gravity.CENTER_HORIZONTAL);
    textView.setTypeface(Typeface.DEFAULT_BOLD);
    textView.setShadowLayer(10, 10, 10, Color.BLACK);
    return textView;
   }});

  curIndex = 0;
  textSwitcher.setText(TextToSwitched[curIndex]);

  buttonNext.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View arg0) {
    if(curIndex == TextToSwitched.length-1){
     curIndex = 0;
     textSwitcher.setText(TextToSwitched[curIndex]);
    }else{
     textSwitcher.setText(TextToSwitched[++curIndex]);
    }
   }
  });
 }

}



<LinearLayout 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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <TextSwitcher
        android:id="@+id/textswitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/next"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="next" />

</LinearLayout>