Customizing Horizontal Progress bar of a Action-Bar

If you are thinking of overriding the Action-Bar horizontal progress-bar in your application, and you don’t have any idea how to do it then this blog might be useful.Here are the steps for overriding horizontal progress-bar.

First of all, Define theme for your application. In my case it looks like

<resources>
 <style name="AppTheme" parent="Theme.Sherlock" />
     <style name="Theme.ESPN" parent="AppTheme">
     <item name="actionBarStyle">@style/ActionBar</item>
  </style>
<resources>

Secondly, you have to override the style for action-bar as horizontal progress-bar is a property of action-bar.

    <style name="ActionBar" parent="Widget.Sherlock.ActionBar">
        <item name="progressBarStyle">@style/ActionBarHorizontalProgressStyle</item>
        <item name="android:progressBarStyle">@style/ActionBarHorizontalProgressStyle</item></style>

Thirdly, override Widget.Sherlock.ProgressBar.Horizontal style for customizing Horizontal progressbar.

    <style name="ActionBarHorizontalProgressStyle" parent="Widget.Sherlock.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_holo_light</item>
        <item name="android:minHeight">16dip</item>
        <item name="android:maxHeight">16dip</item>
    </style>
Note: progress_horizontal_holo_light.xml can be obtained from android-holo-colors

After all those effort you can see customized white color horizontal progress-bar on top of action-bar.
Actionbar

Make your Action bar beautiful

Android has been supporting Action-bar since android Honeycomb devices and later on it is made compatible to lower end devices also.Open source developer, Jake Wharton made us very much easy by developing action bar library .Here i am explaining how to make a stylish action-bar with rounder corner on rectangular edges something similar to the Facebook android app, which gives a little fancy look to default action-bar.
Actionbar
Here are the steps

1) First of all create a layer-list with a two layer color. First color for the basement color i mean for bottom 1 dip color. and and second layer for the color of action-bar. The corner tag is responsible for the action-bar to be rounded on rectangular edge.




<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <solid android:color="#000000" />

           
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#33085ea7" />

            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="4dp"
                android:topRightRadius="4dp" />
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape>
            <solid android:color="#085ea7" />

            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="4dp"
                android:topRightRadius="4dp" />
        </shape>
    </item>
    <item android:bottom="2dp">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#3da0f5" />

                    <corners
                        android:bottomLeftRadius="0dp"
                        android:bottomRightRadius="0dp"
                        android:topLeftRadius="4dp"
                        android:topRightRadius="4dp" />
                </shape>
            </item>
            <item android:top="1dp">
                <shape>
                    <gradient
                        android:angle="270"
                        android:endColor="#0176d9"
                        android:startColor="#0083f6" />

                    <corners
                        android:bottomLeftRadius="0dp"
                        android:bottomRightRadius="0dp"
                        android:topLeftRadius="4dp"
                        android:topRightRadius="4dp" />
                </shape>
            </item>
        </layer-list>
    </item>

</layer-list>

1) Now make custom theme for your application.


<resources>
 <style name="AppTheme" parent="Theme.Sherlock" />
     <style name="Theme.Nepalkhabar" parent="AppTheme">
        <item name="android:windowBackground">@android:color/white</item>
        <item name="actionBarStyle">@style/ActionBar</item>
        <item name="android:actionBarStyle">@style/ActionBar</item>
      
    </style>

  
    <style name="ActionBar" parent="Widget.Sherlock.ActionBar">
        <item name="background">@drawable/actionbar_bg</item>
        <item name="android:background">@drawable/actionbar_bg</item>
    </style>
</resources>

Then use this theme on your application from manifest file.
And another thing, for toggling action bar menu with a smooth animation here i have used ImageSwithcer in this project and i added a simple custom animation.You can find the whole source code of a project in my git-hub account HERE

NOTE : Don’t forget to add Sherlock action bar while building the project.

All my projects disappeared from Project Explorer of Eclipse : Eclipse bug and its Solutions

I am an android developer and i use Eclipse IDE for android and java related development. I love eclipse very much as it has many handy features that enables fast developments. But sometime it gives trouble which may take your time too. Very recently i faced an amazing problem “All the projects disappear from eclipse project explorer”. This problem may arise due to the corruptions of meta data file of a work space(i guess but not sure).

I got this problem (Empty project list) after unusual shutdown of an eclipse. After exploring some time in Google i found the solutions for it.
Here is the steps to overcome this eclipse bug.
Solutions

  • Close Eclipse.
  • open your terminal
  • go to /home/user/workspace/.metadata/.plugins
  • execute command rm -rf org.eclipse.core.resources
  • Start Eclipse
  • go to File->Import then General->Existing Projects into Workspace
    Click the “Select root directory” field and browse to each subfolder in your workspace folder, and import.
  • .

    That’s all.

    After this you can see all the projects from workspace to eclipse projects explorer.
    Hope this will help someone somewhere at some point of time.

    android supporting multiple screen

    For supporting multiple screen,you need to create different layout for diff screen size. Support all screen you need to create following layout and put them each folder. Here is the different folder structure that you need to create.

    Low density Small screens QVGA 240×320 (120dpi):

    layout-small-ldpi (240x320)  
    layout-small-land-ldpi (320x240)
    

    Low density Normal screens WVGA400 240×400 (x432) (120dpi):

    layout-ldpi  (240 x 400 )
    layout-land-ldpi  (400 x 240 )
    

    Medium density Normal screens HVGA 320×480 (160dpi):

    layout-mdpi (320 x 480 )
    layout-land-mdpi (480 x 320 )
    

    Medium density Large screens HVGA 320×480 (160dpi):

    layout-large-mdpi (320 x 480 )
    layout-large-land-mdpi (480 x 320)
    

    Tablet ( 240 dpi ):

    layout-sw600dp for tablet 7inch
    layout-sw720dp for tablet 10inch
    or
    layout-large  (600 x 1024) 
    layout-large-land  (1024 x 600)
    High density Normal screens WVGA800 480x800 (x854) (240 dpi):
    
    layout-hdpi (480 x 800)
    layout-land-hdpi (800 x 480)
    Xoom (medium density large but 1280x800 res) (160 dpi):
    
    layout-xlarge (800 x 1280)
    layout-xlarge-land (1280 x 800)
    

    Also you should add following lines in .manifest file:

    <supports-screens                                 
        android:smallScreens="true"                    
        android:normalScreens="true"         
        android:largeScreens="true"            
        android:xlargeScreens="true"             
        android:anyDensity="true" />
    

    Its all that you need do. Now your app will run smoothly in all devices.

    Android Expandable Layout

    If you are looking for expandable panel in android something similar to description of app in Google Play. Then here is how implemented it.

    1) First you make a custom layout which is capable of handling all the expand and collapse animation exactly similar to Google Play app description action.

    package com.krish.animation.demo;
    
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.View;
    import android.view.animation.Animation;
    import android.view.animation.Transformation;
    import android.widget.LinearLayout;
    
    public class ExpandablePanel extends LinearLayout {
    
        private final int mHandleId;
        private final int mContentId;
    
        // Contains references to the handle and content views
        private View mHandle;
        private View mContent;
    
        // Does the panel start expanded?
        private boolean mExpanded = false;
        // The height of the content when collapsed
        private int mCollapsedHeight = 0;
        // The full expanded height of the content (calculated)
        private int mContentHeight = 0;
        // How long the expand animation takes
        private int mAnimationDuration = 0;
    
        // Listener that gets fired onExpand and onCollapse
        private OnExpandListener mListener;
    
        public ExpandablePanel(Context context) {
            this(context, null);
        }
    
        /**
         * The constructor simply validates the arguments being passed in and
         * sets the global variables accordingly. Required attributes are 
         * 'handle' and 'content'
         */
        public ExpandablePanel(Context context, AttributeSet attrs) {
            super(context, attrs);
            mListener = new DefaultOnExpandListener();
    
            TypedArray a = context.obtainStyledAttributes(
                        attrs, R.styleable.ExpandablePanel, 0, 0);
    
            // How high the content should be in "collapsed" state
            mCollapsedHeight = (int) a.getDimension(
                        R.styleable.ExpandablePanel_collapsedHeight, 0.0f);
    
            // How long the animation should take
            mAnimationDuration = a.getInteger(
                        R.styleable.ExpandablePanel_animationDuration, 500);
    
            int handleId = a.getResourceId(
                        R.styleable.ExpandablePanel_handle, 0);
    
            if (handleId == 0) {
                throw new IllegalArgumentException(
                    "The handle attribute is required and must refer "
                        + "to a valid child.");
            }
    
            int contentId = a.getResourceId(
                            R.styleable.ExpandablePanel_content, 0);
            if (contentId == 0) {
                throw new IllegalArgumentException(
                            "The content attribute is required and must " +
                            "refer to a valid child.");
            }
    
            mHandleId = handleId;
            mContentId = contentId;
    
            a.recycle();
        }
    
        // Some public setters for manipulating the
        // ExpandablePanel programmatically
        public void setOnExpandListener(OnExpandListener listener) {
            mListener = listener; 
        }
    
        public void setCollapsedHeight(int collapsedHeight) {
            mCollapsedHeight = collapsedHeight;
        }
    
        public void setAnimationDuration(int animationDuration) {
            mAnimationDuration = animationDuration;
        }
    
        /**
         * This method gets called when the View is physically
         * visible to the user
         */
        @Override
        protected void onFinishInflate() {
            super.onFinishInflate();
    
            mHandle = findViewById(mHandleId);
            if (mHandle == null) {
                throw new IllegalArgumentException(
                    "The handle attribute is must refer to an"
                        + " existing child.");
            }
    
            mContent = findViewById(mContentId);
            if (mContent == null) {
                throw new IllegalArgumentException(
                    "The content attribute must refer to an"
                        + " existing child.");
            }
    
    	    // This changes the height of the content such that it
            // starts off collapsed
            android.view.ViewGroup.LayoutParams lp = 
                                        mContent.getLayoutParams();
            lp.height = mCollapsedHeight;
            mContent.setLayoutParams(lp);
    
    		// Set the OnClickListener of the handle view
            mHandle.setOnClickListener(new PanelToggler());
        }
    
        /**
         * This is where the magic happens for measuring the actual
         * (un-expanded) height of the content. If the actual height
         * is less than the collapsedHeight, the handle will be hidden.
         */
        @Override
        protected void onMeasure(int widthMeasureSpec,
                                                int heightMeasureSpec) {
            // First, measure how high content wants to be
            mContent.measure(widthMeasureSpec, MeasureSpec.UNSPECIFIED);
            mContentHeight = mContent.getMeasuredHeight();
            Log.v("cHeight", mContentHeight+"");
            Log.v("cCollapseHeight", mCollapsedHeight+"");
    
            if (mContentHeight < mCollapsedHeight) {
                mHandle.setVisibility(View.GONE);
            } else {
                mHandle.setVisibility(View.VISIBLE);
            }
    
            // Then let the usual thing happen
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    
        /**
         * This is the on click listener for the handle.
         * It basically just creates a new animation instance and fires
         * animation.
         */
        private class PanelToggler implements OnClickListener {
            public void onClick(View v) {
                Animation a;
                if (mExpanded) {
                   a = new ExpandAnimation(mContentHeight, mCollapsedHeight);
                   mListener.onCollapse(mHandle, mContent);
                } else {
                   a = new ExpandAnimation(mCollapsedHeight, mContentHeight);
                   mListener.onExpand(mHandle, mContent);
                }
                a.setDuration(mAnimationDuration);
                mContent.startAnimation(a);
                mExpanded = !mExpanded;
            }
        }
    
        /**
         * This is a private animation class that handles the expand/collapse
         * animations. It uses the animationDuration attribute for the length 
         * of time it takes.
         */
        private class ExpandAnimation extends Animation {
            private final int mStartHeight;
            private final int mDeltaHeight;
    
            public ExpandAnimation(int startHeight, int endHeight) {
                mStartHeight = startHeight;
                mDeltaHeight = endHeight - startHeight;
            }
    
            @Override
            protected void applyTransformation(float interpolatedTime, 
                                                     Transformation t) {
                android.view.ViewGroup.LayoutParams lp = 
                                              mContent.getLayoutParams();
                lp.height = (int) (mStartHeight + mDeltaHeight *
                                                       interpolatedTime);
                mContent.setLayoutParams(lp);
            }
    
            @Override
            public boolean willChangeBounds() {
                return true;
            }
        }
    
        /**
         * Simple OnExpandListener interface
         */
        public interface OnExpandListener {
            public void onExpand(View handle, View content); 
            public void onCollapse(View handle, View content);
        }
    
        private class DefaultOnExpandListener implements OnExpandListener {
            public void onCollapse(View handle, View content) {}
            public void onExpand(View handle, View content) {}
        }
    }
    

    2) add some attribute that are needed in res/values/attrs.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
      <declare-styleable name="ExpandablePanel">
        <attr name="handle" format="reference" />
        <attr name="content" format="reference" />
        <attr name="collapsedHeight" format="dimension" />
      </declare-styleable>
    </resources>
    

    3) And finally use this custom layout like this

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:example="http://schemas.android.com/apk/res/com.krish.animation.demo"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
       
        android:scrollbars="none" >
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >
    
            <com.krish.animation.demo.ExpandablePanel
                android:id="@+id/foo"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                example:animationDuration="500"
                example:collapsedHeight="100dip"
                example:content="@+id/value"
                example:handle="@+id/expand" >
    
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" >
    
                    <TextView
                        android:id="@id/value"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text=" put some long text to test" />
    
                    <Button
                        android:id="@id/expand"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_below="@id/value"
                        android:text="More" />
                </RelativeLayout>  
                </com.krish.animation.demo.ExpandablePanel>
        </LinearLayout>
    
    </ScrollView>
    
    

    This article is fully inspired from the stackoverflow answer android Expandable layout

    if you found any problem with code above then you can find the source code in my gihub Android ExpandableLayout

    Hope someone will find this article helpful in the future.

    Originally posted on TechCrunch:

    Opera is that company that everyone knows about but never really stopped to understand why it is so important. The Norway-based company has always been an ankle-biter, pushing the envelope and calling out the big guys for injustices put upon web developers and Internet surfers. It’s not a sexy position to be in, but Opera has always stood its ground.

    Opera-LogoToday, Opera has announced that it will be slowly abandoning its own web-rendering “Turbo” engine in lieu of WebKit, the core development platform used by Chrome and Safari. In a way, today is a sad day. The company might have fallen on its own sword for the greater good, one final time.

    By never having the pole position in the “browser war,” Opera had the freedom to try new things and make noise about the issues that really matter, including being able to choose your default browser on the…

    View original 838 more words

    Android Styling Sherlock actionbar – Change style of Spinner

    Here i am going to share small android stuff about styling Spinner in Sherlock ActionBar. Here it goes like this.

    1) The following style define the spinner looks not style of drop down. It only style the spinner (what you see spinner)

     <!-- spinner background -->
        <style name="customSpinerStyle" 
            parent="@style/Widget.Sherlock.Spinner.DropDown.ActionBar">
            <item name="android:background">
               @drawable/abs_holo_light_selector</item>
            <item name="android:popupBackground">
               @color/pop_bg</item>
        </style>
    
    

    where “abs_holo_light_selector” is selector should be place in drawable folder. The selector look like this

    
    
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/spinner_disabled" 
            android:state_enabled="false"/>
        <item android:drawable="@drawable/spinner_pressed" 
            android:state_pressed="true"/>
        <item android:drawable="@drawable/spinner_focused"
             android:state_focused="true"                  
             android:state_pressed="false"/>
        <item android:drawable="@drawable/spinner_default"/>
    
    </selector>
    
    
    

    where spinner_disabled,spinner_pressed,spinner_focused and spinner_default are nine-patch image something like shown below and you can make your own so here i am attaching only one nine-patch image spinner_pressed.9

    and where @color/pop_bg is color of background of popup(dropdown background)

    2)The following style the dropdown item

     <!-- dropdown selector and divider(spinner+popmenu) -->
            <item name="dropDownListViewStyle">
             @style/Custom.Widget.Sherlock.Light.ListView.DropDown</item>
            <item name="android:dropDownListViewStyle">
              @style/Custom.Widget.Sherlock.Light.ListView.DropDown</item>
    

    where style Custom.Widget.Sherlock.Light.ListView.DropDown(style list divider of spinner item and selector of list) is define as

     <style name="Custom.Widget.Sherlock.Light.ListView.DropDown" 
            parent="Sherlock.__Widget.Holo.ListView">
            <item name="android:divider">
                @drawable/abs__list_divider_holo_dark</item>
            <item name="android:listSelector">
               @drawable/abs__list_selector_holo_light</item>
        </style>
    

    3) The following style is used for changing text style of spinner

     <item name="spinnerItemStyle">
              @style/Custom.Widget.Sherlock.TextView.SpinnerItem</item>
     <item name="android:spinnerItemStyle">
              @style/Custom.Widget.Sherlock.TextView.SpinnerItem</item>
    
    

    where style Custom.Widget.Sherlock.TextView.SpinnerItem is defined as

     <style name="Custom.Widget.Sherlock.TextView.SpinnerItem" parent="Widget.Sherlock.TextView.SpinnerItem">
            <item name="android:textAppearance">
                @style/Custom.TextAppearance.Sherlock.Widget.TextView.SpinnerItem</item>
            <item name="android:paddingLeft">8dp</item>
            <item name="android:paddingRight">8dp</item>
        </style>
    
        <style name="Custom.TextAppearance.Sherlock.Widget.TextView.SpinnerItem"  parent="TextAppearance.Sherlock.Widget.TextView.SpinnerItem">
            <item name="android:textSize">14dp</item>
            <item name="android:textColor">#FFFFFF</item>
            <item name="android:shadowColor">#4ccfff</item>
            <item name="android:shadowDy">3</item>
            <item name="android:textStyle">normal</item>
        </style> 
           
    
    

    finally put all these style together in your application theme something like this and use it as application theme

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <style name="customSpinerStyle" 
            parent="@style/Widget.Sherlock.Spinner.DropDown.ActionBar">
            <item name="android:background">
               @drawable/abs_holo_light_selector</item>
            <item name="android:popupBackground">
               @color/pop_bg</item>
        </style>
    
     <!-- dropdown selector and divider(spinner+popmenu) -->
            <item name="dropDownListViewStyle">
             @style/Custom.Widget.Sherlock.Light.ListView.DropDown</item>
            <item name="android:dropDownListViewStyle">
              @style/Custom.Widget.Sherlock.Light.ListView.DropDown</item>
    <item name="spinnerItemStyle">
              @style/Custom.Widget.Sherlock.TextView.SpinnerItem</item>
     <item name="android:spinnerItemStyle">
              @style/Custom.Widget.Sherlock.TextView.SpinnerItem</item>
    
    </resources>
    
    

    Thats it,How i style Sherlock actionbar spinner item. (some image file are missing above assuming that you can take it own :-) )
    here The above style affect on highlighted area shown in image below.device-2013-02-15-143813