DESIGNING



action bar background color

Creating a custom style for action bar for your android application is one of the elementary and essential step all the android programmers must know.

I've summed up how to do styling of the action bar in 5 steps....

1. For demonstrating, how to apply the theme first of all include the action bar in your main activity...

MainActivity.java
package com.example.tut.tut_10_4;


import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;


public class MainActivity extends FragmentActivity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ActionBar actionBar = getActionBar();

        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        ActionBar.TabListener tabListener = new ActionBar.TabListener() {
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
               
            }

            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {

            }

            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {

            }
        };

        for (int i = 0; i < 3; i++) {
            actionBar.addTab(
                    actionBar.newTab()
                            .setText("Tab " + (i + 1))
                            .setTabListener(tabListener));
        }

    }
}
2. Then, include your CustomActionBarTheme for your application in the manifest file...

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tut.tut_10_4" >

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/CustomActionBarTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

</manifest>
3. Create a theme.xml file inside the value folder....

res/value/theme.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style

name="CustomActionBarTheme"
parent="@android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
<item name="android:actionBarDivider">@color/bg</item>

</style>
<style
name="MyActionBar"
parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse" >
<item name="android:background">@color/bg</item>

</style> <!-- ActionBar tabs styles -->

<style name="MyActionBarTabs"
parent="@android:style/Widget.Holo.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">
@drawable/actionbar_tab_indicator
</item>


</style>


</resources>

4. Then, inside drawable folder create a file with the name actionbar_tab_indicator.xml....

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

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tabsel"
/>
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tabind1" />

<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tabsel" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tabsel" />


<!-- STATES WHEN BUTTON IS PRESSED -->

<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tabsel" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tabind1" />

<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tabsel" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tabsel" />
</selector>

5. Last step, create tabsel.xml file inside drawable folder and copy the below code....

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

<item>
<shape android:shape="rectangle" >
<solid android:color="@color/bg" />

<padding android:bottom="0dp"
/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="@color/bg"
/>
</shape>
</item>

</selector>

6.res/values/colors.xml - define colors...
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="actionbar_text">#CCCCCC</color>
<color name="bg">#FF7519</color>
</resources>



Leave a Comment  
Download Code(88)





All rights reserved, the content is copyrighted to the author.

RELATED POST