Styling Sherlock actionbar – Change actionbar color

Just few step to change the style of Sherlock actionbar. Here it goes like this

1)make your application theme something like shown below

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyCustomTheme" parent="Theme.Sherlock">
     <-- This one is for below android 3.x device-->
     <item name="actionBarStyle">@style/ActionBar</item>
     <-- This one is for android 3.x or greater device-->
     <item name="android:actionBarStyle">@style/ActionBar</item>
     <style>

</resources>

2) Define style for action bar

 <!-- style for actionbar(Equivalent to titlebar) -->
    <style name="ActionBar" parent="Widget.Sherlock.ActionBar">
        <item name="background">@drawable/actionbar_bg_top</item> -----------(1)
        <item name="android:background">@drawable/actionbar_bg_top</item>
       
        <item name="android:titleTextStyle">@style/customTextAppearance.Sherlock.Widget.ActionBar.Title</item> ----(2)
        <item name="titleTextStyle">@style/customTextAppearance.Sherlock.Widget.ActionBar.Title</item>
    </style>
<!-- define text style of Action bar Title -->
 <style name="customTextAppearance.Sherlock.Widget.ActionBar.Title" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
        <item name="android:textSize">14dp</item>
        <item name="android:textColor">#083647</item>
        <item name="android:shadowColor">#4ccfff</item>
        <item name="android:shadowDy">3</item>
    </style>

equation 1–> define the background color of action bar. @drawable/actionbar_bg_top may be in the form of nine patch image or color
equation 2 –>define the style of Text that appear as title in Sherlock actionbar

3)Use the theme on application in android manifest file


<application
       
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyCustomTheme" >
        <activity
            android:name=".YourMainActivtiy"
           
            android:configChanges="orientation"
            android:label="app" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application

That’s all for changing color of actionbar in Sherlock action bar
here is the affect
device-2013-02-15-143813

Enjoy android styling 🙂

Styling ActionBarSherlock – change icon of overflow menu button

I Needed to change the overflow menu button according to my application theme. so I spent few hours on how to style these things in Sherlock action bar.
So I am sharing my knowledge as it might be useful to someone in somewhere.

Just few steps

1)make your application theme something like shown below

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyCustomTheme" parent="Theme.Sherlock">
    <item name="actionOverflowButtonStyle">@style/customOverflowButtonStyle</item>
        <item name="android:actionOverflowButtonStyle">@style/customOverflowButtonStyle</item>
    </style>
 <!-- overflow button style -->
 <style name="customOverflowButtonStyle" parent="Widget.Sherlock.ActionButton.Overflow">
 <item name="android:src">@drawable/ic_your_menu_moreoverflow_with</item>
    </style>
</resources>

2)Use the theme on application in android manifest file


<application
       
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyCustomTheme" >
        <activity
            android:name=".YourMainActivtiy"
           
            android:configChanges="orientation"
            android:label="app" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application

That’s all for changing overflow menu icon in Sherlock action bar
Changes looks like
device-2013-02-15-143813
Enjoy android styling 🙂

Styling ActionBarSherlock – change icon of homeupIndicator

Changing home up indicator in action bar Sherlock is very easy. just few lines of code
Here is the step

1)make your application theme something like shown below

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyCustomTheme" parent="Theme.Sherlock">
    <item name="homeAsUpIndicator">@drawable/ic_your_new_home_up_indicator</item>
    <item name="android:homeAsUpIndicator">@drawable/ic_your_new_home_up_indicator</item>
    </style>
</resources>

2)Use the theme on application in android manifest file


<application
       
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyCustomTheme" >
        <activity
            android:name=".YourMainActivtiy"
           
            android:configChanges="orientation"
            android:label="app" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application

That’s all for changing home up icon in Sherlock action bar

hope, Someone will find my post helpful 🙂

Android HorizontalScrollView with center lock

During the development of News app , i needed a view which should slide horizontally and auto highlight the selected item in center of device screen. Something like Pulse app does in their news detail page where they have a quick access to news of browsing category. From user perceptive it was very handy feature so that user have quick access on current browsed category.
So i decide to use Android HorizontalScrollview with some modification.
Here is, how i implemented it on my news app.

1) create a custom java class extending HorizontalScrollView and define the function which center the current selected item. Something like this.


public class CenterLockHorizontalScrollview extends HorizontalScrollView {
	Context context;
	int prevIndex = 0;

	public CenterLockHorizontalScrollview(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.context = context;
		this.setSmoothScrollingEnabled(true);

	}

	public void setAdapter(Context context, CustomListAdapter mAdapter) {

		try {
			fillViewWithAdapter(mAdapter);
		} catch (ZeroChildException e) {

			e.printStackTrace();
		}
	}

	private void fillViewWithAdapter(CustomListAdapter mAdapter)
			throws ZeroChildException {
		if (getChildCount() == 0) {
			throw new ZeroChildException(
					"CenterLockHorizontalScrollView must have one child");
		}
		if (getChildCount() == 0 || mAdapter == null)
			return;

		ViewGroup parent = (ViewGroup) getChildAt(0);

		parent.removeAllViews();

		for (int i = 0; i < mAdapter.getCount(); i++) {
			parent.addView(mAdapter.getView(i, null, parent));
		}
	}

	public void setCenter(int index) {

		ViewGroup parent = (ViewGroup) getChildAt(0);

		View preView = parent.getChildAt(prevIndex);
		preView.setBackgroundColor(Color.parseColor("#64CBD8"));
		android.widget.LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
				LinearLayout.LayoutParams.WRAP_CONTENT,
				LinearLayout.LayoutParams.WRAP_CONTENT);
		lp.setMargins(5, 5, 5, 5);
		preView.setLayoutParams(lp);

		View view = parent.getChildAt(index);
		view.setBackgroundColor(Color.RED);

		int screenWidth = ((Activity) context).getWindowManager()
				.getDefaultDisplay().getWidth();

		int scrollX = (view.getLeft() - (screenWidth / 2))
				+ (view.getWidth() / 2);
		this.smoothScrollTo(scrollX, 0);
		prevIndex = index;
	}

}

2)Create xml file in res/layout

<RelativeLayout 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" >

    <com.krish.horizontalscrollview.CenterLockHorizontalScrollview
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
    </com.krish.horizontalscrollview.CenterLockHorizontalScrollview>

    <LinearLayout
        android:id="@+id/bottomLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/scrollView"
        android:orientation="horizontal"
        android:weightSum="2" >

        <Button
            android:id="@+id/btnPrev"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Prev" />

        <Button
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Next" />
    </LinearLayout>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/bottomLayout"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:textColor="#FF0000"
        android:padding="@dimen/padding_medium" />

</RelativeLayout>



3)Use the CenterLockHorizontalScrollview in your activity as follows.

public class HorizontalScrollViewActivity extends Activity {
	CenterLockHorizontalScrollview centerLockHorizontalScrollview;
	CustomListAdapter customListAdapter;
	Button btnPrev, btnNext;
	int currIndex = 0;
	private TextView text;
	ArrayList<String> list = new ArrayList<String>() {

		{
			add("Manchester city");
			add("Manchester United");
			add("Chelsea");
			add("Liverpool");
			add("TottenHam");
			add("Everton");
			add("WestHam");
			add("Arsenal");
			add("West Broom");
			add("New Castle");
			add("Norich City");
			add("Swansea city");
			add("stroke city");

		}
	};

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_horizontal_scroll_view);
		btnNext = (Button) findViewById(R.id.btnNext);
		btnPrev = (Button) findViewById(R.id.btnPrev);
		text=(TextView)findViewById(R.id.text);
		centerLockHorizontalScrollview = (CenterLockHorizontalScrollview) findViewById(R.id.scrollView);
		customListAdapter = new CustomListAdapter(this,
				R.layout.news_list_item, list);
		centerLockHorizontalScrollview.setAdapter(this, customListAdapter);
		btnNext.setOnClickListener(onClickListener);
		btnPrev.setOnClickListener(onClickListener);

	}

	OnClickListener onClickListener = new OnClickListener() {

		@Override
		public void onClick(View v) {
			if (v.getId() == R.id.btnPrev) {
				if (currIndex != 0) {
					currIndex--;
					centerLockHorizontalScrollview.setCenter(currIndex);
					text.setText(list.get(currIndex==0?0:currIndex-1));
				}
			} else if (v.getId() == R.id.btnNext) {

				if (currIndex < list.size()) {
					centerLockHorizontalScrollview.setCenter(currIndex);
					currIndex++;
					text.setText(list.get(currIndex-1));
				}
			}

		}
	};

}

4)Expected out

device-2012-12-09-234522

source with and demo project can also be found on my github account.