Custom Title Bar Example

Hi Friends,

You have seen many apps which is having custom title bar with buttons or progress bar so, here i am going to explain you how to create a custom title bar in your application follow the mention below steps.

Example:

Code

res/value/styles.xml

<resources>

    <!--

        Base application theme, dependent on API level. This theme is replaced

        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.

    -->

    <style name="AppBaseTheme" parent="android:Theme.Light">

        <!--

            Theme customizations available in newer API levels can go in

            res/values-vXX/styles.xml, while customizations related to

            backward-compatibility can go here.

        -->

    </style>

    <!-- Application theme. -->

    <style name="AppTheme" parent="AppBaseTheme">

        <!-- All customizations that are NOT specific to a particular API-level can go here. -->

    </style>

     <style name="WindowTitleBackground" >    

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

    </style>

    

    

</resources>

Create a themes.xml file in 

res/value/themes.xml

<?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>

Change you manifest file

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="in.androiddevelopmentanddiscussion.customtitlebarexample"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="16" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="in.androiddevelopmentanddiscussion.customtitlebarexample.MainActivity"

            android:label="@string/app_name" 

            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>

Create custom title in res/layout/header.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="@color/red" >

       <Button

           android:id="@+id/header_left_btn"

           android:layout_width="wrap_content"

           android:layout_height="50dp"

           android:layout_marginLeft="5dp"

           android:text=" Back"

           android:textColor="#000000" />

        

        <TextView

            android:id="@+id/header_text"

            android:layout_width="0dp"

            android:layout_height="fill_parent"

            android:layout_weight="1"

            android:gravity="center"

            android:singleLine="true"

            android:text="Header Text"

            android:textColor="#FFFFFF"

            android:textSize="20sp"

            android:textStyle="bold" />

            

        <Button

            android:id="@+id/header_right_btn"

            android:layout_width="wrap_content"

            android:layout_height="50dp"

            android:layout_marginRight="5dp"

            android:text=" Share"

            android:textColor="#000000" />

</LinearLayout>

Create res/value/color.xml

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

<resources>

<color name="white">#ffffff</color>

<color name="transparent">#00000000</color>

<color name="black">#000000</color>

<color name="red">#FF0000</color>

   

</resources>

res/layout/activity_main.xml

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

    android:background="@color/white"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

</RelativeLayout>

MainActivity.java

package in.androiddevelopmentanddiscussion.customtitlebarexample;

import android.os.Bundle;

import android.app.Activity;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.Window;

import android.widget.Button;

import android.widget.Toast;

public class MainActivity extends Activity {

Button back,share;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);

setContentView(R.layout.activity_main);

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

 

back = (Button)findViewById(R.id.header_left_btn);

share = (Button)findViewById(R.id.header_right_btn);

 

back.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Toast.makeText(MainActivity.this, "This is a Back Button", Toast.LENGTH_SHORT).show();

}

});

 

share.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(MainActivity.this, "This is a Share Button", Toast.LENGTH_SHORT).show();

}

}); 

 

}

}

Download Full Project from here

 

Check Android Apps on Google Play

https://play.google.com/store/apps/developer?id=Metro%20App%20Solution&hl=en