Wednesday, 9 April 2014

Actionbar Tutorials Part 06----Using Split ActionBar

Split action bar provides a separate bar at the bottom of the screen to display all action items when the activity is running on a narrow screen (such as a portrait-oriented handset).

Separating the action items this way ensures that a reasonable amount of space is available to display all your action items on a narrow screen, while leaving room for navigation and title elements at the top.

To enable split action bar when using the support library, you must do two things:

1.Add uiOptions="splitActionBarWhenNarrow" to each <activity> element or to the <application>  element.  This attribute is understood only by API level 14 and higher (it is ignored by older versions).

2.To support older versions, add a <meta-data> element as a child of each <activity> element
that declares the same value for "android.support.UI_OPTIONS".

Example Program:

ScreenShots:
activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ram.splitactionbar.MainActivity"
    tools:ignore="MergeRootFrame" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World.........."
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Under menu folder create main.xml file and insert following code.
main.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.ram.demo.MainActivity" >

    <item
        android:id="@+id/item_lock"
        android:icon="@drawable/ii1"
        android:orderInCategory="100"
        android:title="lock"
        app:showAsAction="always"/>
    <item
        android:id="@+id/item_settings"
        android:icon="@drawable/ii2"
        android:orderInCategory="100"
        android:title="settings"
        app:showAsAction="always"/>
    <item
        android:id="@+id/item3_camera"
        android:icon="@drawable/ii3"
        android:orderInCategory="100"
        android:title="camera"
        app:showAsAction="always"/>

</menu>

MainActivity.java:
package com.ram.splitactionbar;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // TODO Auto-generated method stub

        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub

        switch (item.getItemId()) {
        case R.id.item_settings:
            Toast.makeText(getApplicationContext(), "settings selected",
                    Toast.LENGTH_LONG).show();
            break;

        case R.id.item_lock:
            Toast.makeText(getApplicationContext(), "lock selected",
                    Toast.LENGTH_LONG).show();
            break;
        case R.id.item3_camera:
            Toast.makeText(getApplicationContext(), "camera selected",
                    Toast.LENGTH_LONG).show();
            break;
        }

        return super.onOptionsItemSelected(item);
    }
}

 AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ram.splitactionbar"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.ram.splitactionbar.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light"
            android:uiOptions="splitActionBarWhenNarrow" >
            <meta-data
                android:name="android.support.UI_OPTIONS"
                android:value="splitActionBarWhenNarrow" />


            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>


Actionbar Tutorials Part 05----Setting icons on the ActionBar and Listening action

ScreenShots:


download icons from this website : Icon Finder and store them in drawable folder.

activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
      >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world..."
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Under menu folder create main.xml file and insert following code.

main.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.ram.demo.MainActivity" >

    <item
        android:id="@+id/item_lock"
        android:icon="@drawable/ii1"
        android:orderInCategory="100"
        android:title="lock"
        app:showAsAction="always"/>
    <item
        android:id="@+id/item_settings"
        android:icon="@drawable/ii2"
        android:orderInCategory="100"
        android:title="settings"
        app:showAsAction="always"/>
    <item
        android:id="@+id/item3_camera"
        android:icon="@drawable/ii3"
        android:orderInCategory="100"
        android:title="camera"
        app:showAsAction="always"/>

</menu>

MainActivity.java:
package com.ram.demo;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // TODO Auto-generated method stub

        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub

        switch (item.getItemId()) {
        case R.id.item_settings:
            Toast.makeText(getApplicationContext(), "settings selected",
                    Toast.LENGTH_LONG).show();
            break;

        case R.id.item_lock:
            Toast.makeText(getApplicationContext(), "lock selected",
                    Toast.LENGTH_LONG).show();
            break;
        case R.id.item3_camera:
            Toast.makeText(getApplicationContext(), "camera selected",
                    Toast.LENGTH_LONG).show();
            break;
        }

        return super.onOptionsItemSelected(item);
    }
}


AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ram.demo"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.ram.demo.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>


Wednesday, 2 April 2014

Actionbar Tutorials Part 04----Custom View in The ActionBar

screenshots:

activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ram.customviewintheactionbar.MainActivity"
    tools:ignore="MergeRootFrame" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

customview.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="CustomView"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ff0000" />

    <Button
        android:id="@+id/button_clickHere"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Click here" />

</RelativeLayout>

MainActivity.java:
package com.ram.customviewintheactionbar;

import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

@SuppressLint("NewApi")
public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        android.support.v7.app.ActionBar actionBar = getSupportActionBar();

        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

        LayoutInflater inflater = getLayoutInflater();

        View v = inflater.inflate(R.layout.customview, null);

        actionBar.setCustomView(v);

        Button clickHereButton = (Button) v.findViewById(R.id.button_clickHere);
        clickHereButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                Toast.makeText(getApplicationContext(),
                        "click Here button is working", Toast.LENGTH_LONG)
                        .show();
            }
        });

    }

}