Skip to content

Commit

Permalink
POL-57 Side sheet 디자인 구현
Browse files Browse the repository at this point in the history 
##### Modal Side Sheet width를 조절하는 방법이 1.12.0-alpha03 버전부터 지원됨에 따라 Material Library 버전 업그레이드
- [관련 이슈](material-components/material-components-android#3492)
- [문제가 해결된 커밋](material-components/material-components-android@3b278d7)

etc
- ImageButton 컴포넌트로 사용하던 아이콘 버튼을 Button 컴포넌트에 style을 입혀 Material 버튼 방식으로 변경
  • Loading branch information
@dev210202
dev210202 committed Jan 14, 2024
1 parent d44dd01 commit 42f8574
Show file tree
Hide file tree
Showing 13 changed files with 501 additions and 36 deletions.
2 changes: 1 addition & 1 deletion app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ dependencies {

implementation 'androidx.core:core-ktx:1.9.0'
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.9.0'
implementation 'com.google.android.material:material:1.12.0-alpha03'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
testImplementation 'junit:junit:4.13.2'
testImplementation 'org.mockito:mockito-core:3.11.2'
Expand Down
22 changes: 22 additions & 0 deletions app/src/main/java/jtot/dev/feature/main/MainActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,36 @@ package jtot.dev.feature.main

import android.content.Intent
import android.os.Bundle
import android.view.View
import com.google.android.material.sidesheet.SideSheetBehavior
import jtot.dev.R
import jtot.dev.base.BaseActivity
import jtot.dev.databinding.ActivityMainBinding
import jtot.dev.feature.play.PlayActivity

class MainActivity : BaseActivity<ActivityMainBinding>(R.layout.activity_main) {
private val standardSideSheetBehavior: SideSheetBehavior<View> by lazy {
SideSheetBehavior.from(binding.sideSheet)
}

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

binding.babAppbar.setOnMenuItemClickListener { menuItem ->
when (menuItem.itemId) {
R.id.item_main_today -> {
standardSideSheetBehavior.expand()
true
}

else -> false
}
}

binding.btnClose.setOnClickListener {
standardSideSheetBehavior.hide()
}

binding.fabPlay.setOnClickListener {
Intent(this, PlayActivity::class.java).apply {
}.run(::startActivity)
Expand Down
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/ic_close_24.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="#FF000000"
android:pathData="m256,760 l-56,-56 224,-224 -224,-224 56,-56 224,224 224,-224 56,56 -224,224 224,224 -56,56 -224,-224 -224,224Z"/>
</vector>
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/ic_folder_24.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="#FF000000"
android:pathData="M160,800q-33,0 -56.5,-23.5T80,720v-480q0,-33 23.5,-56.5T160,160h240l80,80h320q33,0 56.5,23.5T880,320v400q0,33 -23.5,56.5T800,800L160,800ZM160,720h640v-400L447,320l-80,-80L160,240v480ZM160,720v-480,480Z"/>
</vector>
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/ic_folder_create_24.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="#FF000000"
android:pathData="M560,640h80v-80h80v-80h-80v-80h-80v80h-80v80h80v80ZM160,800q-33,0 -56.5,-23.5T80,720v-480q0,-33 23.5,-56.5T160,160h240l80,80h320q33,0 56.5,23.5T880,320v400q0,33 -23.5,56.5T800,800L160,800ZM160,720h640v-400L447,320l-80,-80L160,240v480ZM160,720v-480,480Z"/>
</vector>
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/ic_menu_24.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="#FF000000"
android:pathData="M120,720v-80h720v80L120,720ZM120,520v-80h720v80L120,520ZM120,320v-80h720v80L120,320Z"/>
</vector>
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/ic_search_24.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="#FF000000"
android:pathData="M784,840 L532,588q-30,24 -69,38t-83,14q-109,0 -184.5,-75.5T120,380q0,-109 75.5,-184.5T380,120q109,0 184.5,75.5T640,380q0,44 -14,83t-38,69l252,252 -56,56ZM380,560q75,0 127.5,-52.5T560,380q0,-75 -52.5,-127.5T380,200q-75,0 -127.5,52.5T200,380q0,75 52.5,127.5T380,560Z"/>
</vector>
195 changes: 169 additions & 26 deletions app/src/main/res/layout/activity_main.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,180 @@
</data>


<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/cl_main"
<androidx.coordinatorlayout.widget.CoordinatorLayout

android:id="@+id/cl_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".feature.main.MainActivity">

<androidx.fragment.app.FragmentContainerView
android:id="@+id/fcv_container"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".feature.main.MainActivity">
app:navGraph="@navigation/nav_main_graph" />

<androidx.fragment.app.FragmentContainerView
android:id="@+id/fcv_container"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/nav_main_graph"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="@color/surface_container"
app:menu="@menu/menu_main_bottom_app_bar" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/primary"
android:src="@drawable/ic_play_arrow_24"
app:layout_anchor="@id/bab_appbar"
app:tint="@color/white" />

<FrameLayout
android:elevation="1dp"
android:layout_gravity="start"
style="@style/Widget.Material3.SideSheet.Modal"
android:id="@+id/side_sheet"
android:layout_marginEnd="36dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.sidesheet.SideSheetBehavior">

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bab_appbar"
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_sheet_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="@color/surface_container"
app:menu="@menu/menu_main_bottom_app_bar" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/primary"
android:src="@drawable/ic_play_arrow_24"
app:layout_anchor="@id/bab_appbar"
app:tint="@color/white" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
android:layout_height="match_parent">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<TextView
android:id="@+id/textView4"
style="@style/text.headline_small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="24dp"
android:layout_marginStart="24dp"
android:text="문서"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<Button
android:id="@+id/btn_close"
style="@style/IconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:padding="8dp"
app:icon="@drawable/ic_close_24"

app:iconSize="30dp"
app:layout_constraintBottom_toBottomOf="@+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/textView4" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constraintLayout3">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginHorizontal="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constraintLayout4">

<com.google.android.material.divider.MaterialDivider
android:id="@+id/materialDivider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button

android:layout_marginEnd="8dp"
android:id="@+id/button4"
style="@style/IconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="8dp"
android:padding="8dp"
app:icon="@drawable/ic_search_24"
app:iconSize="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:layout_marginEnd="8dp"
android:id="@+id/button2"
style="@style/IconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
app:icon="@drawable/ic_folder_create_24"
app:iconSize="30dp"
app:layout_constraintBottom_toBottomOf="@+id/button4"
app:layout_constraintEnd_toStartOf="@+id/button"
app:layout_constraintTop_toTopOf="@+id/button4" />

<Button
android:layout_marginEnd="8dp"
android:id="@+id/button"
style="@style/IconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
app:icon="@drawable/ic_menu_24"

app:iconSize="30dp"
app:layout_constraintBottom_toBottomOf="@+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/button2" />

<com.google.android.material.divider.MaterialDivider

android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

</FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>


</layout>
8 changes: 5 additions & 3 deletions app/src/main/res/layout/activity_play.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,14 @@
app:layout_constraintTop_toTopOf="parent"
tools:text="2024-01-01" />

<ImageButton
<Button
style="@style/IconButton"
android:id="@+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:background="@drawable/ic_edit_todo_36"
android:layout_marginEnd="16dp"
app:icon="@drawable/ic_edit_todo_36"
app:iconSize="36dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Expand Down
14 changes: 8 additions & 6 deletions app/src/main/res/layout/item_content_todo.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,18 @@
android:layout_height="wrap_content"
android:background="@drawable/background_todo_top">

<ImageButton


<Button
android:layout_margin="4dp"
android:id="@+id/btn_star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="@drawable/ic_star_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintTop_toTopOf="parent"
style="@style/IconButton"
app:icon="@drawable/ic_star_24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:id="@+id/tv_title"
Expand Down
Loading

0 comments on commit 42f8574

Please sign in to comment.