안드로이드 Action Bar 만들기

안드로이드 Action Bar 만들기이며, ActionBar의 배경 및 타이틀, Action Button 추가 및 이벤트, Home icon 추가 및 이벤트에 대해서 알아보도록 하겠습니다.

 

Action Bar의 명칭은 아래의 URL을 참고하세요.

안드로이드 액션바(ActionBar) 명칭

 

1. ActionBar

ActionBar를 사용하기 위해서는 ActionBarActivity를 상속받아야 합니다.

[코드]

public class TestActivity extends ActionBarActivity

 

 

[전체코드]

public class TestActivity extends ActionBarActivity{

}

 

 

2. ActionBar의 타이틀과 배경색

- 위의 이미지와 같이 ActionBar의 타이틀과 배경색은 변경하는 코드입니다.

(ActionBar의 배경색은 기본적으로 검정색입니다.)

[코드]

// ActionBar에 타이틀 변경
getSupportActionBar().setTitle("TEST");
// ActionBar의 배경색 변경
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(0xFF339999));

 

 

[전체코드]

import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;

public class TestActivity extends ActionBarActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ActionBar에 타이틀 변경
        getSupportActionBar().setTitle("TEST");
        // ActionBar의 배경색 변경
        getSupportActionBar().setBackgroundDrawable(new ColorDrawable(0xFF339999));
    }
}

 

 

3. Action Button

 

- 위의 이미지과 같이 액션버튼이라는 Action Button을 추가하겠습니다.

 

(1) 리소스의 menu에 menu_test.xml파일을 생성합니다.

 

 

(2) menu_text.xml에 Action Menu 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=".MainActivity">
    <item android:id="@+id/action_button"
        android:title="액션버튼"
        app:showAsAction="always|withText"/>
</menu>

 

 

(3) Activity가 생성될 때 Action Button을 함께 생성합니다.

 - Action Button을 생성하기 위해서는 onCreateOptionsMenu 메소드를 Override 해야 합니다.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_test, menu);
    return true;
}

 

 

(4) Action Button에 이벤트를 지정합니다.

 - Action Button이 선택되었을 때 발생하는 이벤트를 구현하기 위해서는 onOptionsItemSelected 메소드를 Override해야 합니다.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    if (id == R.id.action_button) {
        Toast.makeText(this, "액션버튼 이벤트", Toast.LENGTH_SHORT).show();
        return true;
    }

    return super.onOptionsItemSelected(item);
}

 

 

[전체코드]

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

public class TestActivity extends ActionBarActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ActionBar에 타이틀 변경
        getSupportActionBar().setTitle("TEST");
        // ActionBar의 배경색 변경
        getSupportActionBar().setBackgroundDrawable(new ColorDrawable(0xFF339999));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_test, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.action_button) {
            Toast.makeText(this, "액션버튼 이벤트", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

 

 

※ Action Button 아이콘과 텍스트 함께 표시하기

  - 아이콘 표시 : android:icon="@drawable/ic_launcher"

  - 텍스트 표시 : app:showAsAction="always|withText"

<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=".MainActivity">
    <item android:id="@+id/action_button"
        android:icon="@drawable/ic_launcher"
        android:title="액션버튼"
        app:showAsAction="always|withText"/>
</menu>

 

 

※ Action Button 아이콘만 표시하기

  - 아이콘 표시 : android:icon="@drawable/ic_launcher"

  - 텍스트 표시 안함 : app:showAsAction="always"

<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=".MainActivity">
    <item android:id="@+id/action_button"
        android:icon="@drawable/ic_launcher"
        android:title="액션버튼"
        app:showAsAction="always"/>
</menu>

 

 

4. Home 버튼 만들기

- 위의 이미지에서와 같이 오른쪽에 Home 버튼을 추가해보겠습니다.

 

(1) Action Bar에 Home icon 추가 

 - Activity의 onCreate 메소드에 아래의 코드를 추가합니다.

// 홈 아이콘 표시
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

 

 

(2) Home icon 이베튼 처리

 - Action Button과 Home icon이 선택되었을 때 발생하는 이벤트를 구현하기 위해서는 onOptionsItemSelected 메소드를 Override해야 합니다.

 - Home icon의 ID는 android.R.id.home 입니다.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    if (id == android.R.id.home){
        Toast.makeText(this, "홈아이콘 이벤트", Toast.LENGTH_SHORT).show();
        return true;
    }
}

 

 

[전체 소스]

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

public class TestActivity extends ActionBarActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ActionBar에 타이틀 변경
        getSupportActionBar().setTitle("TEST");
        // ActionBar의 배경색 변경
        getSupportActionBar().setBackgroundDrawable(new ColorDrawable(0xFF339999));

        // 홈 아이콘 표시
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_test, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == android.R.id.home){
            Toast.makeText(this, "홈아이콘 이벤트", Toast.LENGTH_SHORT).show();
            return true;
        }

        if (id == R.id.action_button) {
            Toast.makeText(this, "액션버튼 이벤트", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}