Tuesday, 10 January 2012

Custom Title Bar

For creating custom Title bar in android, For that Add styles.xml in the res/values folder.

The styles.xml file contains the following code.

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

    <style name="WindowTitleBackground" >   
        <item name="android:background">@android:color/transparent</item>       
    </style>
   
</resources>


Create colors.xml file in the res/values folder. Add colors that are needed for the application.

The colors.xml file contains the following code.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="orange">#ff5500</color>
<color name="white">#ffffff</color>
<color name="transparent">#00000000</color>
<color name="date_color">#999999</color>
<color name="black">#000000</color>
<color name="gray">#999999</color>
<color name="blue">#0066cc</color>
<color name="gold">#e6b121</color>
<color name="blueback">#99FFFF</color>
 <color name="articlecolor">#3399FF</color>
 <color name="article_title">#3399FF</color>
<color name="cachecolor">#8ad0e8</color>
<color name="red">#FF0000</color>
<color name="pink">#FF00FF</color>
<color name="green">#00FF00</color>
<color name="mycolor">#FF9900</color>
</resources>


Add themes.xml file in the res/values folder.
themes.xml file contains the following code.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="android:Theme">
        <item name="android:windowTitleSize">60px</item>
        <item name="android:windowTitleBackgroundStyle">@style/WindowTitleBackground</item>         
       
    </style>
</resources>


The created style will be added into the theme file.
After creating these files open android manifest file and apply the theme into the whole application or an activity.

manifest file code

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="cm.camera.table"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="4" />
   
        <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".LoadImage" android:label="@string/app_name" android:screenOrientation="portrait" android:theme="@style/MyTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>


The yellow highlighted code is the code for applying the created theme for an activity.

Create a layout for the custom title bar, the layout contain any android controls.

The below layout cobe is the sample layout for the custom title bar.

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="60px"
    android:layout_gravity="fill_horizontal"
    android:layout_width="fill_parent"
    android:background="#095C9B"
    android:orientation="horizontal">

        <Button  android:id="@+id/header_left_btn"
            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="5dp"
             android:layout_centerVertical="true"
             android:text=" Back"
             android:textColor="#000000"/>
       

        <TextView android:id="@+id/header_text"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_toRightOf="@+id/header_left_btn"
            android:layout_toLeftOf="@+id/header_right_btn"
            android:text="Header Text"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="#FFFFFF"
            android:gravity="center"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:singleLine="true" />
           
        <Button  android:id="@+id/header_right_btn"
            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
             android:layout_centerVertical="true"
             android:text=" Share"  
             android:textColor="#000000"/>
       
</RelativeLayout>


I used two buttons and one text view in the layout.

Add the following lines in the on create method.

        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,R.layout.header);


The onCreate method in the activity will look like the below.

@Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
        setContentView(R.layout.main);
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,R.layout.header);
    }


The yellow Highlighted line replaces the default title bar to the custom title bar.

Run the application, you will get the output like below.


5 comments:

  1. Big Thaaaanks to the point and Useful..

    You need to add the below text:

    create heade.xml in the res/layout

    ReplyDelete
  2. I’m glad to find so many useful and informative data on your website. wordpress themes

    ReplyDelete