[안드로이드] Material Tabs Custom 하는 방법

2021.12.16 - [안드로이드] - [안드로이드] Material tabs [Fixed tabs, Scrollable tabs] 쉽게 만드는 방법

[안드로이드] Material tabs [Fixed tabs, Scrollable tabs] 쉽게 만드는 방법

이번 시간에는 Material Tabs Custom 하는 방법을 알아보겠습니다.

이전에 했던 코드를 그대로 쓰고, 사용자가 직접 스타일을 변경할 수 있게 만들 것입니다.

1. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

implementation 'com.google.android.material:material:1.4.0'

2020.12.19 - [안드로이드] - [안드로이드]라이브러리 찾아 등록하는 방법

[안드로이드]라이브러리 찾아 등록하는 방법

 

2. 테마 수정 themes.xml

( res -> value -> themes)

style 태그 속성 parent를 아래 코드로 변경해주시면 됩니다.

<style name="Theme.MaterialExam" parent="Theme.MaterialComponents.Light.DarkActionBar">

 

2. 테마 스타일 추가 themes.xml

아래 코드를 추가하시면 됩니다.

    <style name="Widget.App.TabLayout" parent="Widget.MaterialComponents.TabLayout">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.TabLayout</item>
    </style>


    <style name="ThemeOverlay.App.TabLayout" parent="">
        <item name="colorPrimary">@color/black</item> <!-- 선택 색깔-->
        <item name="colorSurface">@color/pink_50</item> <!-- 바탕색깔-->
        <item name="colorOnSurface">@color/red700</item> <!-- 선택 안된 색깔-->
    </style>

2-1 색상

res -> values -> colors.xml 에 추가하시면 됩니다.

    <color name="red700">#D32F2F</color>
    <color name="pink_50">#FCE4EC</color>

 

 

3. 메인화면 구성 activity_main.xml

TabLayout 속성 style에 위에서 테마에 style 등록한 것을 적용시켰습니다.

<?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=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        style="@style/Widget.App.TabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        app:tabMode="fixed">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_alarm"
            android:text="tab1" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_add_alarm"
            android:text="tab2" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_alarm_off"
            android:text="tab3" />

    </com.google.android.material.tabs.TabLayout>
</LinearLayout>

3-1 아이콘

ic_alarm.xml

0.00MB

ic_add_alarm.xml

0.00MB

ic_alarm_off.xml

0.00MB

4. 실행화면

 

2021.12.15 - [안드로이드] - [안드로이드] Material Dialog Custom 쉽게 만드는 방법

[안드로이드] Material Dialog Custom 쉽게 만드는 방법

2021.12.14 - [안드로이드] - [안드로이드] Material Dialog [ Alert dialog , Simple dialog , Confirmation dialog ] 쉽게 만드는 방법

[안드로이드] Material Dialog [ Alert dialog , Simple dialog , Confirmation dialog ] 쉽게 만드는 방법

2021.12.13 - [안드로이드] - [안드로이드] Material Dropdown menu 쉽게 만드는 방법

[안드로이드] Material Dropdown menu 쉽게 만드는 방법