Sunday, 15 December 2013

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