본문 바로가기
안드로이드

안드로이드 Action Bar 만들기

by Dokon Jang 2015. 11. 2.
반응형

안드로이드 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);
    }
}
 

 

반응형

댓글10

  • 1 2016.01.18 18:57

    너무 헷갈리네요
    답글

  • scas 2016.01.18 18:58

    전체소스 보여줄거면 부분부분의 소스를 없애서 난독성을 없애주심이 좋을듯합니다
    답글

  • 사냥꾼 2016.02.29 17:14

    잘따라했습니다. 감사합니다.
    답글

  • sungbo 2016.03.16 10:26

    좋은 내용이 였습니다. 책을 좀 본후 보니.. 쉽게 따라했습니다.
    답글

  • 1 2016.07.20 23:18

    좋은 내용 감사합니다.
    답글

  • 감사합니다맨 2016.07.27 09:30

    고마워요 설명도 쉽고 따라하기 너무 좋게 만들어 주셨어요 : )
    정말 수고하셨습니다!
    자주 방문 할게요! ^^*
    답글

  • 초보자 2016.10.05 11:52

    너무 잘 쓰셨네요.
    감사합니다.
    부분 전체 기재 아이디어도 너무 좋습니다.
    뭔가 명확하고 빈틈없이 설명하실 줄 아는 분을 만나서 너무 반가웠습니다.
    시중의 책들을 보면 짜증이 나서 못 보겠던데..
    답글

  • kyu 2017.09.21 12:41

    잘 따라해 보았습니다. 홈버튼 ← 아이콘 말고 다른것으로 변경하려면 어디서 변경해야하는지 알려주실수 있으신지요?
    답글

  • 다이아 2018.03.30 21:03

    리스트뷰를 extends 하고 있습니다. implements 로 할 수있는 방법은 없습니까? ㅠㅠ
    답글