Sunday, 22 January 2017

Animate a view with TranslateAnimation in android

TranslateAnimation class inherited from Animation class, is basically an animation that controls the position of an object.
The public constructors are:

-    TranslateAnimation(Context context, AttributeSet attrs)
     Constructor used when a TranslateAnimation is loaded from a resource.

-   TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
    Constructor to use when building a TranslateAnimation from code

-   TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int                         fromYType, float fromYValue, int toYType, float toYValue)
    Constructor to use when building a TranslateAnimation from code

In this post I will show you how to move your view from one point to another on your screen with the help of TranslateAnimation class.
There are basically two ways to use this class which are as follows:

1. You can simple call the constructor, mentioned above to apply your transition as follows:

                        TranslateAnimation animation = new TranslateAnimation(0, 0, 100, 0);  
                        animation.setDuration(1000);                                                                     
                        yourImageView.startAnimation(animation);                                              

(called constructor:
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
fromXDelta       float: Change in X coordinate to apply at the start of the animation
toXDelta               float: Change in X coordinate to apply at the end of the animation
fromYDelta       float: Change in Y coordinate to apply at the start of the animation
toYDelta               float: Change in Y coordinate to apply at the end of the animation)

2. You can use the following method: (Recommended)


public void moveViewToCenter( View view ) {                                                       
                                                                                                                                    
    RelativeLayout root = (RelativeLayout) findViewById( R.id.rootLayout );        
    DisplayMetrics dm = new DisplayMetrics();                                                       
    this.getWindowManager().getDefaultDisplay().getMetrics( dm );                      
    int statusBarOffset = dm.heightPixels - root.getMeasuredHeight();                   
                                                                                                                                  
    int originalPos[] = new int[2];                                                                              
    view.getLocationOnScreen( originalPos );                                                             
                                                                                                                                       
    int xDest = dm.widthPixels/2;                                                                                  
    xDest -= (view.getMeasuredWidth()/2);                                                                     
    int yDest = dm.heightPixels/2 - (view.getMeasuredHeight()/2) - statusBarOffset;   
                                                                                                                                              
    TranslateAnimation anim = new TranslateAnimation( 0, xDest - originalPos[0] , 0, yDest - originalPos[1] );                                                                                                        
    anim.setDuration(1000);                                                                                      
    anim.setFillAfter( true );                                                                                      
    view.startAnimation(anim);                                                                                  
                                                                                                                                   
}                                                                                                                               

While using the above method just place your view(to be moved) in a full screen layout. By doing so you won't have to worry about overlapping and clipping other views.
The method moveViewToCenter gets the View's absolute coordinates and calculates how much distance it has to move from its current position to reach the center of the screen. The statusBarOffset variable measures the status bar height.

This is how you can use TranslateAnimation and move your views.
That's all.


Thursday, 12 January 2017

Handling Screen Configuration changes

Handling the screen orientation changes on your android device is sometimes the most irritating and frustrating part in your development cycle. So in this post i will try to remove that frustration and will tell you what exactly happens during the screen orientation process.

When we rotate our device and the screen changes orientation, android system usually destroys our application’s existing activities or fragments and restarts the running activity/fragment(onDestroy() is called, followed by onCreate()). Android System do this so that our application can reload all the resources based on the new configuration.

To work around this thing, Android gives us the option to save our app’s state before destroying all of our activities and fragments, and also to restore that state when recreating them. Thus, proper handling of orientation changes centers around saving this state and also avoiding memory leaks.
So to properly handle a restart, it is important that our activity restores its previous state through the normal activity lifecycle, in which Android calls onSaveInstanceState() before it destroys our activity so that we can save our data about the application state. We can then restore the state during onCreate() or onRestoreInstanceState().

While it may seem a bit hectic to implement this all, handling screen orientation changes properly provides you with several benefits as well:
- You will be able to easily use alternate layouts in portrait and landscape orientations, and you will be able to handle many exceptional states such as low memory situations and interruptions from incoming phone calls without any extra code.

Implementation:
The first thing that you should do is set the android:configChanges flag on your Activity in AndroidManifest.xml as shown below:

<activity
    android:name=".YourActivity"
    android:label="@string/activity_one"
    android:configChanges="orientation|screenSize|keyboardHidden" />

This flag signals to the Android platform that you are going to manually handle your screen orientation, screenSize and keyboard appearance/disappearance changes for this Activity.

Now, when one of these above mentioned configurations change, YourActivity does not restart. Instead, the YourActivity receives a call to onConfigurationChanged() method. This method has a Configuration object that specifies the new device configuration. By reading fields in the Configuration, you can determine the new configuration and make appropriate changes by updating the resources used in your interface. At the time this method is called, your activity's Resources object is updated to return resources based on the new configuration, so you can easily reset elements of your UI without the system restarting your activity.

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);

    // Checks the orientation of the screen
    if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
        // Do your stuff in landscape mode
        Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
    } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
       // Do your stuff in portrait mode 
       Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
    }
}

The Configuration object represents all of the current configurations, not just the ones that have changed.
If you don't need to update your application based on these configuration changes, you can instead not implement onConfigurationChanged(). In this case, all of the resources used before the configuration change are still used and you've only avoided the restart of your activity.

Note: When you declare your activity to handle a configuration change, you are responsible for resetting any elements for which you provide alternatives. If you declare your activity to handle the orientation change and have images that should change between landscape and portrait, you must re-assign each resource to each element during onConfigurationChanged().

That's all.
Share and comment if any issues.
References: https://developer.android.com/guide/topics/resources/runtime-changes.html

Thursday, 5 January 2017

Android: DateTimePicker

This post is regarding how to use/implement DateTimePicker in your android app.
DateTimePicker in android is a UI control which is very useful in your app and gives a nice feel to your app if your app contains some date or time related usage.

https://developer.android.com recommend that you use DialogFragment to host each time or date picker. The DialogFragment manages the dialog lifecycle for you and allows you to display the pickers in different layout configurations, such as in a basic dialog on your handsets or as an embedded part of the layout on large screens.
So let's start with the implementation of this UI control which is as simple as follows:

-Create a Time Picker
Create a static class to show your TimePicker by extending DialogFragment as follows:

public static class TimePickerFragment extends DialogFragment
                            implements TimePickerDialog.OnTimeSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        // Create a new instance of TimePickerDialog and return it
        return new TimePickerDialog(getActivity(), this, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }

    public void onTimeSet(TimePicker view, int hour, int minute) {
        // Do something with the time chosen by the user
        // Your selected time will be (hour:minute)          
    }
}

-Show the time picker
Now add a button to your layout xml file as follows:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/pick_time"
    android:onClick="showTimePickerDialog" />

-When you will click this button, the system will call the following method:

public void showTimePickerDialog(View v) {
    DialogFragment newFragment = new TimePickerFragment();
    newFragment.show(getSupportFragmentManager(), "timePicker");
}

That's all. After this you will be able to see a TimePicker from where you can select your time. After selecting the time you can get your selected time (callback) in the onTimeSet() method of your TimePicker class that you just created above.    

-Create a Date Picker
Create a static class to show your DatePicker by extending DialogFragment as follows:

public static class DatePickerFragment extends DialogFragment
                            implements DatePickerDialog.OnDateSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current date as the default date in the picker
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        // Create a new instance of DatePickerDialog and return it
        return new DatePickerDialog(getActivity(), this, year, month, day);
    }

    public void onDateSet(DatePicker view, int year, int month, int day) {
        // Do something with the date chosen by the user
        // Your selected date will be (day/month/year)    
    }
}

-Show the date picker
Now add another button to your layout xml file as follows:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/pick_date"
    android:onClick="showDatePickerDialog" />

-When you will click this button, the system will call the following method:

public void showDatePickerDialog(View v) {
    DialogFragment newFragment = new DatePickerFragment();
    newFragment.show(getSupportFragmentManager(), "datePicker");
}


That's all. After this you will be able to see a DatePicker from where you can select your date. After selecting the date you can get your selected date (callback) in the onDateSet() method of your DatePicker class that you just created above.

Share and comment if any issues.