[Android Studio] TableLayout을 이용해 원형 메뉴 만들기

 

안드로이드 스튜디오에서 자주 사용되는 원형메뉴를 만들어보자!

 

 

3x2 레이아웃에 각각의 원형 메뉴마다 text를 달아주는 형태로 제작한다.

검정색 네모 박스는 TableRow를 나타낸다. 그러므로 해당 xml 파일에서는 

TableRow가 두 번 사용된다.

 

예쁜 메뉴를 만들기 위해서 포토샵을 이용해 각각 메뉴버튼을 만든 후

android:background="@drawable/png파일명" 하는 것이 쉽고 깔끔하다.

 

 

Step1. 포토샵으로 작업한 png파일을 drawable 폴더에 넣어놓는다.

민들어 놓은 png 파일이 없다면 아래 첨부파일을 통해 이미지를 다운 받고 drawable 폴더에 복사해넣는다.

icon.zip

0.04MB

 

drawable폴더가 어디있는지 모르겠다면 해당 프로젝트가 있는 폴더에 들어가서 상단 오른쪽에 검색한다.

 

Step2. XML 파일 작성

해당 레이아웃을 적용시킬 xml파일에 소스코드를 붙혀넣는다.

 

밑의 소스코드는 acitivity_sitelink라는 새로운 xml파일에 레이아웃을 적용시킨것이다.

다른 xml파일에 소스코드를 적용시키기 위해서 해당 xml 파일에 소스코드를 붙혀넣는다.

 

단 8번째 줄에 activiry파일(java)파일 연동에 주의한다.

tools:context=".해당xml파일의 java파일명"

 

activity_sitelink.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".Activity.SitelinkActivity">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="@color/colorPrimaryDark">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="FUN"
            android:textColor="#ffffff"
            android:textSize="25dp" />
    </LinearLayout>
 
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:stretchColumns="0,1,2"
        android:paddingVertical="10dp">
 
        <!--첫번째 Row-->
        <TableRow>
            <TableLayout android:layout_width="120dp"
                android:paddingHorizontal="4dp">
                <ImageButton
                    android:id="@+id/weather"
                    android:padding="25dp"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:layout_weight="1"
                    android:background="@drawable/weather"
                    android:gravity="center"/>
                <TextView
                    android:layout_height="match_parent"
                    android:layout_width="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="날씨"
                    android:gravity="center"
                    android:textSize="15dp"/>
            </TableLayout>
 
            <TableLayout
                android:layout_width="120dp"
                android:paddingHorizontal="4dp">
                <ImageButton
                    android:id="@+id/webtoon"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:layout_weight="1"
                    android:background="@drawable/webtoon"
                    android:gravity="center"
                    android:padding="25dp" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="웹툰"
                    android:layout_marginTop="10dp"
                    android:textSize="15dp" />
            </TableLayout>
 
            <TableLayout android:layout_width="120dp"
                android:paddingHorizontal="4dp">
                <ImageButton
                    android:id="@+id/music"
                    android:padding="25dp"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:layout_weight="1"
                    android:background="@drawable/music"
                    android:gravity="center"/>
                <TextView
                    android:layout_height="match_parent"
                    android:layout_width="wrap_content"
                    android:text="음악"
                    android:layout_marginTop="10dp"
                    android:gravity="center"
                    android:textSize="15dp"/>
            </TableLayout>
        </TableRow>
 
        <!--두번쨰 Row-->
        <TableRow
            android:layout_marginTop="20dp">
            <TableLayout android:layout_width="120dp"
                android:paddingHorizontal="4dp">
                <ImageButton
                    android:id="@+id/shopping"
                    android:padding="20dp"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:layout_weight="1"
                    android:background="@drawable/shopping"
                    android:gravity="center"/>
                <TextView
                    android:layout_height="match_parent"
                    android:layout_width="wrap_content"
                    android:text="쇼핑"
                    android:gravity="center"
                    android:layout_marginTop="10dp"
                    android:textSize="15dp"/>
            </TableLayout>
 
            <TableLayout android:layout_width="120dp"
                android:paddingHorizontal="4dp">
                <ImageButton
                    android:id="@+id/movie"
                    android:padding="20dp"
                    android:layout_width="match_parent"
                    android:layout_height="120dp"
                    android:layout_weight="1"
                    android:background="@drawable/movie"
                    android:gravity="center"/>
                <TextView
                    android:layout_height="match_parent"
                    android:layout_width="wrap_content"
                    android:text="영화"
                    android:gravity="center"
                    android:layout_marginTop="10dp"
                    android:textSize="15dp"/>
            </TableLayout>
 
            <TableLayout android:layout_width="120dp"
                android:paddingHorizontal="4dp">
                <ImageButton
                    android:id="@+id/travel"
                    android:padding="20dp"
                    android:layout_width="match_parent"
                    android:layout_height="120dp"
                    android:layout_weight="1"
                    android:background="@drawable/trip"
                    android:gravity="center"/>
                <TextView
                    android:layout_height="match_parent"
                    android:layout_width="wrap_content"
                    android:text="여행"
                    android:gravity="center"
                    android:layout_marginTop="10dp"
                    android:textSize="15dp"/>
            </TableLayout>
        </TableRow>
    </TableLayout>
</LinearLayout>

 

acitivity_sitelink.xml 결과화면

 

 

Step3. XML 파일의 java파일 작성

해당 버튼을 눌렀을 때 url을 타고 해당하는 사이트로 접속할 수 있도록 한다.

 

3-1. AndroidMainfest.xml에 선언하기

AndroidMainfest의 <application /> .. </appication> "..."부분 즉, application 태그 안에 java파일을 선언해준다.

<activity android:name=".java파일명" />

 

AndroidMaingest.xml

<activity android:name=".Activity.SitelinkActivity" />

 

3-2. java파일 수정하기

제일 윗줄에 package 명령어 이후로 다음 소스코드를 붙혀넣는다.

만약 javja파일의 이름이 다르다면

public class 해당자바파일명 extends AppComatActivity {...}로 수정해준다.

 

SitelinkActivity.java

import androidx.appcompat.app.AppCompatActivity;
 
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;
 
import com.example.myapplication.R;
 
public class SitelinkActivity extends AppCompatActivity {
 
    private ImageButton btnWeather;
    private ImageButton btnWebtoon;
    private ImageButton btnMusic;
    private ImageButton btnShopping;
    private ImageButton btnMovie;
    private ImageButton btnTravel;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sitelink);
 
        //날씨
        btnWeather = findViewById(R.id.weather);
        btnWeather.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://weather.naver.com/"));
                startActivity(intent);
            }
        });
        //웹툰
        btnWebtoon = findViewById(R.id.webtoon);
        btnWebtoon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://comic.naver.com/index.nhn"));
                startActivity(intent);
            }
        });
        //음악
        btnMusic = findViewById(R.id.music);
        btnMusic.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://music.naver.com/"));
                startActivity(intent);
            }
        });
        //쇼핑
        btnShopping = findViewById(R.id.shopping);
        btnShopping.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://shopping.naver.com/"));
                startActivity(intent);
            }
        });
        //영화
        btnMovie= findViewById(R.id.movie);
        btnMovie.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://movie.naver.com/"));
                startActivity(intent);
            }
        });
        //여행
        btnTravel = findViewById(R.id.travel);
        btnTravel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://flight.naver.com/flights/"));
                startActivity(intent);
            }
        });
 
    }
}