BottomDrawer Lib을 사용하여 5분만에 Custom UI 구현하기 (BottomSheet)

원하는 UI 예시

 

 

0. 프로젝트에 라이브러리 포함시키기

프로젝트의 Build.gadle 에 하단에 아래와 같이 추가해주세요.

maven { url 'https://jitpack.io' }

allprojects {
    repositories {
        google()
        jcenter()
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies 를 추가해주세요.

implementation 'com.github.kr-OL:BottomDrawer:1.1.0'

(가능한 항상 최신버전을 사용해주세요. github.com/DevHyeon0312/BottomDrawerDemo에서 최신버전 확인 가능)

 

1. 플로팅 버튼을 클릭하면 하단에서 UI 등장

 

1. Activity.xml 생성

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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:background="#d8d8d8">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="20dp"
            android:clickable="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:srcCompat="@drawable/ic_baseline_add_circle_outline" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <include layout="@layout/layout_basic_bottom_sheet" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. Fragment.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bg_googledrive">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center"
        android:text="새로만들기"
        android:textSize="24sp"/>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="20dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />
            </LinearLayout>
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="20dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />
            </LinearLayout>

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="20dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/ic_baseline_folder_open" />
            </LinearLayout>
        </TableRow>
    </TableLayout>

</LinearLayout>

3. Fragment 코드 작성

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.bottomupdrawer.demo.databinding.FragmentGoogledriveBinding

class GoogleDriveFragment : Fragment() {
    private var _binding: FragmentGoogledriveBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentGoogledriveBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onDestroy() {
        super.onDestroy()
        _binding = null
    }
}

4. Activity 코드 작성

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.bottomupdrawer.demo.databinding.ActivityGoogledriveBinding
import lib.bottomupdrawer.BasicBottomSheet

class GoogleDriveActivity : AppCompatActivity() {
    lateinit var binding : ActivityGoogledriveBinding
    lateinit var bottomSheet: BasicBottomSheet

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityGoogledriveBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.floatingActionButton.setOnClickListener {
            bottomSheet.hidden(false)
        }

        val googleDriveFragment = GoogleDriveFragment()
        bottomSheet = BasicBottomSheet
            .Begin(this@GoogleDriveActivity)
            .hide(true)
            .addContents(googleDriveFragment)
            .hidden(true)
            .commit()
    }
}

 

2. 하단 UI에 있는 버튼 클릭시 UI 가 위로 up up up 

1. Activity.xml 작성

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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:background="#d8d8d8">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </androidx.constraintlayout.widget.ConstraintLayout>

    <include layout="@layout/layout_basic_bottom_sheet" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. Fragment.xml 작성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white">

    <TextView
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="24sp"
        android:textColor="@color/black"
        android:text="Button" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#c8c8c8"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"/>

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="200dp" />

</LinearLayout>

3. Fragment 코드 작성

import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.bottomupdrawer.demo.databinding.FragmentGooglemapBinding

class GoogleMapFragment : Fragment() {
    private var _binding: FragmentGooglemapBinding? = null
    private val binding get() = _binding!!


    interface OnClickListener {
        fun onClicked()
    }

    var listener: OnClickListener? = null


    override fun onAttach(context: Context) {
        super.onAttach(context)
        listener = context as? OnClickListener
        if (listener == null) {
            throw ClassCastException("$context must implement OnArticleSelectedListener")
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentGooglemapBinding.inflate(inflater, container, false)

        binding.button4.setOnClickListener {
            listener?.onClicked()
        }

        return binding.root
    }


    override fun onDestroy() {
        super.onDestroy()
        _binding = null
    }
}

4. Activity 코드 작성

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.bottomupdrawer.demo.databinding.ActivityGooglemapBinding
import lib.bottomupdrawer.BasicBottomSheet

class GoogleMapActivity : AppCompatActivity() , GoogleMapFragment.OnClickListener {
    lateinit var binding : ActivityGooglemapBinding
    lateinit var bottomSheet: BasicBottomSheet

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityGooglemapBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val googleMapFragment = GoogleMapFragment()

        bottomSheet = BasicBottomSheet
            .Begin(this@GoogleMapActivity)
            .hide(false)
            .peekHeight(100)
            .addContents(googleMapFragment)
            .commit()
    }

    override fun onClicked() {
        bottomSheet.expend(false)
    }
}

 

---

github.com/DevHyeon0312/BottomDrawerDemo

DevHyeon0312/BottomDrawerDemo

에서 라이브러리의 사용법과 전체 Demo 코드를 확인할 수 있습니다.

 

계속 업데이트 중입니다, 궁금하신점이나 원하는 사항 등은 언제든 알려주세요~

 

GitHub ⭐️ 클릭은 5분이 아니라, 5초면 됩니다! 귀찮으시더라도, 한번씩 눌러주시면 큰 힘이 될 것 같습니다 데헷.