본격적인 예제에 들어가기 전에, 안드로이드에서 액션 바(Action Bar)가 무엇인지 먼저 알아두면 좋습니다. 액션 바는 웹사이트나 문서의 헤더처럼 화면 상단에 위치하는 UI 요소로, 앱의 제목과 주요 기능 버튼을 담는 역할을 합니다. 모든 화면에서 동일한 액션 바를 공통으로 사용할 수도 있고, 특정 액티비티마다 서로 다른 스타일의 액션 바를 적용할 수도 있습니다.
이 글에서는 안드로이드에서 직접 디자인한 커스텀 액션 바를 만드는 방법을 단계별로 살펴보겠습니다.
프로젝트 생성 및 기본 설정
1단계 − Android Studio에서 새 프로젝트를 생성합니다. 메뉴에서 File ⇒ New Project를 선택하고, 새 프로젝트를 만들 때 필요한 정보를 모두 입력합니다.
2단계 − res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?> <LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity"> <TextView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Custom Action Bar" android:textSize = "20sp"/> </LinearLayout>
3단계 − src/MainActivity.java 파일에 아래 코드를 추가합니다.
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setCustomView(R.layout.custom_action_bar);
//getSupportActionBar().setElevation(0);
View view = getSupportActionBar().getCustomView();
TextView name = view.findViewById(R.id.name);
name.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "You have clicked tittle", Toast.LENGTH_LONG).show();
}
});
}
}
커스텀 액션 바 레이아웃 만들기
4단계 − res 폴더에 액션 바 전용 레이아웃 파일인 custom_action_bar.xml을 아래와 같이 생성합니다.
<?xml version = "1.0" encoding = "utf-8"?> <LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:app = "https://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:gravity = "center_vertical" android:padding = "10dp" android:weightSum = "1"> <LinearLayout android:layout_width = "0dp" android:layout_height = "match_parent" android:layout_weight = "0.6"> <ImageView android:layout_width = "wrap_content" android:layout_height = "match_parent" android:src = "@drawable/ic_face_red_400_24dp" /> <TextView android:id = "@+id/name" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginLeft = "10dp" android:text = "Instagram" android:textSize = "20sp" android:textColor = "#000" android:textStyle = "bold" app:fontFamily = "@font/allan_bold" /> </LinearLayout> <LinearLayout android:layout_width = "0dp" android:layout_height = "match_parent" android:layout_marginRight = "10dp" android:layout_weight = "0.4" android:gravity = "end"> <ImageView android:layout_width = "wrap_content" android:layout_height = "match_parent" android:src = "@drawable/ic_local_post_office_red_400_24dp" /> <ImageView android:layout_width = "wrap_content" android:layout_height = "match_parent" android:layout_marginLeft = "20dp" android:src = "@drawable/ic_send_red_400_24dp" /> </LinearLayout> </LinearLayout>
참고 − 위 커스텀 레이아웃은 프로젝트나 애플리케이션의 요구 사항에 맞게 자유롭게 수정하여 사용하시면 됩니다.
앱 실행하기
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 스마트폰이 컴퓨터에 연결되어 있다고 가정하겠습니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 
아이콘을 클릭합니다. 실행 대상 목록에서 본인의 모바일 기기를 선택하면, 해당 기기의 기본 화면에서 결과를 확인할 수 있습니다.
액션 바 그림자 제거하기
액션 바 버튼의 그림자(섀도우) 효과를 없애고 싶다면, MainActivity의 onCreate() 메서드에 아래와 같이 setElevation(0) 코드를 추가합니다.
this.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); getSupportActionBar().setDisplayShowCustomEnabled(true); getSupportActionBar().setCustomView(R.layout.custom_action_bar); getSupportActionBar().setElevation(0); View view = getSupportActionBar().getCustomView();
앱을 다시 실행하면 그림자가 제거된 결과 화면을 확인할 수 있습니다.