작성일자 글쓴이 thkmon

[Android] 안드로이드 하단바, 하단버튼 붙이는 방법

[Android] 안드로이드 하단바, 하단버튼 붙이는 방법

안드로이드 웹뷰를 사용하는 액티비티 하단에 버튼 4개를 붙여본다.

1. 우선 drawable-hdpi 폴더 안에 이미지 파일(png 파일) 5개를 추가한다.

ex) 프로젝트폴더\app\src\main\res\drawable-hdpi

(1) button_home_android.png

홈 버튼 이미지. 크기는 가로 45px, 세로 45px 로 한다.

(2) button_back_android.png

뒤로가기 버튼 이미지. 크기는 가로 45px, 세로 45px 로 한다.

(3) button_forward_android.png

앞으로가기 버튼 이미지. 크기는 가로 45px, 세로 45px 로 한다.

(4) button_refresh_android.png

새로고침 버튼 이미지. 크기는 가로 45px, 세로 45px 로 한다.

(5) menu_background_black.png

배경 이미지. 순수 검은색 배경이면 된다. 가로 5px, 세로 60px로 한다.

2. drawable-hdpi 폴더 안에 버튼 xml 파일 4개를 만든다.

ex) 프로젝트폴더\app\src\main\res\drawable-hdpi

(1) menu_home.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android“>
    <item android:state_selected=”true” android:drawable=”@drawable/button_home_android” /><!– selected –>
    <item android:state_pressed=”true” android:drawable=”@drawable/button_home_android” /><!– selected –>
    <item android:state_focused=”true” android:drawable=”@drawable/button_home_android” /><!– focused –>
    <item android:drawable=”@drawable/button_home_android” /><!– default –>
</selector>

(2) menu_back.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android“>
    <item android:state_selected=”true” android:drawable=”@drawable/button_back_android” /><!– selected –>
    <item android:state_pressed=”true” android:drawable=”@drawable/button_back_android” /><!– selected –>
    <item android:state_focused=”true” android:drawable=”@drawable/button_back_android” /><!– focused –>
    <item android:drawable=”@drawable/button_back_android” /><!– default –>
</selector>

(3) menu_forward.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android“>
    <item android:state_selected=”true” android:drawable=”@drawable/button_forward_android” /><!– selected –>
    <item android:state_pressed=”true” android:drawable=”@drawable/button_forward_android” /><!– selected –>
    <item android:state_focused=”true” android:drawable=”@drawable/button_forward_android” /><!– focused –>
    <item android:drawable=”@drawable/button_forward_android” /><!– default –>
</selector>

(4) menu_refresh.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android“>
    <item android:state_selected=”true” android:drawable=”@drawable/button_refresh_android” /><!– selected –>
    <item android:state_pressed=”true” android:drawable=”@drawable/button_refresh_android” /><!– selected –>
    <item android:state_focused=”true” android:drawable=”@drawable/button_refresh_android” /><!– focused –>
    <item android:drawable=”@drawable/button_refresh_android” /><!– default –>
</selector>

3. 이제 웹뷰(WebView)를 사용하는 액티비티(Activity) 파일의 레이아웃 파일명을 알아내야 한다.

해당 액티비티(Activitty) 파일에서 setContentView 라는 메서드를 찾아보면 레이아웃 파일명을 알 수 있다.

public class TestActivity extends Activity {

    (중략)

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

        // 기존코드 예시

        setContentView(R.layout.webview_container);

​

        (중략)
    }

    (중략)

}

이어서 해당 액티비티의 레이아웃 파일을 수정한다.

(ex : 프로젝트폴더\app\src\main\res\layout\webview_container.xml)

[AS-IS]

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android“
    android:layout_width=”fill_parent” android:layout_height=”fill_parent”
    android:scrollbars=”vertical”
    android:scrollbarAlwaysDrawVerticalTrack=”true”>
    <LinearLayout android:orientation=”vertical”
        android:layout_width=”fill_parent” android:background=”@color/default_background_color”
        android:layout_height=”fill_parent” android:scrollbars=”vertical”
    android:scrollbarAlwaysDrawVerticalTrack=”true”>
   
        <WebView android:id=”@+id/webView” android:layout_width=”fill_parent”
            android:layout_height=”fill_parent” android:layout_weight=”1″
            android:scrollbars=”vertical”
            android:scrollbarAlwaysDrawVerticalTrack=”true”   
            android:scrollbarStyle=”insideOverlay” />

    </LinearLayout>
</LinearLayout>

 

[TO-BE]

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android“
    android:layout_width=”fill_parent” android:layout_height=”fill_parent”
    android:scrollbars=”vertical”
    android:scrollbarAlwaysDrawVerticalTrack=”true”>
    <LinearLayout android:orientation=”vertical”
        android:layout_width=”fill_parent” android:background=”@color/default_background_color”
        android:layout_height=”fill_parent” android:scrollbars=”vertical”
    android:scrollbarAlwaysDrawVerticalTrack=”true”>
   
        <WebView android:id=”@+id/webView” android:layout_width=”fill_parent”
            android:layout_height=”fill_parent” android:layout_weight=”1″
            android:scrollbars=”vertical”
            android:scrollbarAlwaysDrawVerticalTrack=”true”   
            android:scrollbarStyle=”insideOverlay” />

        <LinearLayout android:id=”@android:id/tabs”
            android:layout_width=”fill_parent” android:layout_height=”wrap_content”
            android:background=”@drawable/menu_background_black”>


            <ImageButton
                android:id=”@+id/menuHome”
                android:layout_width=”wrap_content”
                android:layout_height=”wrap_content”
                android:layout_weight=”1″
                android:background=”@drawable/menu_background_black”
                android:src=”@drawable/menu_home”></ImageButton>

​
            <ImageButton android:background=”@drawable/menu_background_black”
                android:src=”@drawable/menu_back” android:id=”@+id/menuBack”
                android:layout_width=”wrap_content” android:layout_weight=”1″
                android:layout_height=”wrap_content”></ImageButton>

​
            <ImageButton android:background=”@drawable/menu_background_black”
                android:src=”@drawable/menu_forward” android:id=”@+id/menuFoward”
                android:layout_width=”wrap_content” android:layout_weight=”1″
                android:layout_height=”wrap_content”></ImageButton>

​
            <ImageButton android:background=”@drawable/menu_background_black”
                android:src=”@drawable/menu_refresh” android:id=”@+id/menuRefresh”
                android:layout_width=”wrap_content” android:layout_weight=”1″
                android:layout_height=”wrap_content”></ImageButton>
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

​ 

4. 다음으로 웹뷰(WebView)를 갖고 있는 액티비티(Activity) 파일의 코드를 수정해야 한다. (ex : public class TestActivity extends Activity)

해당 액티비티 상단에 버튼 변수를 정의한다.

public class TestActivity extends Activity {

   

    // 기존코드 예시

    public WebView webview = null;

   

    // 하단바 버튼 추가

    public ImageButton menuHome, menuBack, menuForward, menuRefresh;

   

    (중략)

}

5. 해당 액티비티 onCreate 메서드를 작성한다. 각 버튼에 클릭 리스너를 세팅한다.

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

    // 기존코드 예시

    setContentView(R.layout.webview_container);

    (중략)

   

    // 하단바 버튼 추가
    menuHome = (ImageButton) findViewById(R.id.menuHome);
    menuBack = (ImageButton) findViewById(R.id.menuBack);
    menuForward = (ImageButton) findViewById(R.id.menuFoward);
    menuRefresh = (ImageButton) findViewById(R.id.menuRefresh);


    menuHome.setOnClickListener(this);
    menuBack.setOnClickListener(this);
    menuForward.setOnClickListener(this);
    menuRefresh.setOnClickListener(this);

    (중략)

    // 기존코드 예시

    webview = (WebView) findViewById(R.id.webView);

    webview.postUrl(“http:// 홈페이지주소”, null);
}

6. 해당 액티비티 onClick 메서드를 작성한다. 버튼 클릭시 기능을 구현한다.

@Override
public void onClick(View v) {
    int id = v.getId();

    // 하단바 버튼 추가
    if (id == R.id.menuBack) {
        if (webview.canGoBack()) {
            webview.goBack();
        } 


    } else if (id == R.id.menuFoward) {
        if (webview.canGoForward()) {
            webview.goForward();
        } 


    } else if (id == R.id.menuRefresh) {
        webview.reload();

    } else if (id == R.id.menuHome) {
        webview.loadUrl(“http:// 홈페이지주소”);
    }
}