Skip to content

Android library to create beautiful, clean and minimal UIs.

License

Notifications You must be signed in to change notification settings

JonathandelaSen/CleanUI

Repository files navigation

CleanUI

Android library to create beautiful, clean and minimal UIs.

ActionDialog Tasks with calendar

Instalation 🛠

Gradle

Add it in your root build.gradle at the end of repositories

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

Add the dependency

dependencies {
        implementation 'com.github.JonathandelaSen:CleanUI:1.0.0'
}

Features ✅

  • Toolbars
  • Settings views
  • Title sections
  • Action dialog
  • Calendars
  • Tasks to combine or not with calendars

Next 🚀

  • Chat

I will be glad to hear your suggestions 🙏

☝️ Tasks

Recycler view with two different type of tasks

Simple tasks with calendar

Minimal tasks with calendar

Simple tasks with calendar

Minimal tasks with calendar

	MinimalTask(
                title = "Everyone loves the pepperiness of onion curry rinsed with clammy thyme.",
                date = dateStart1,
                startTime = dateStart1,
                endTime = dateEnd1,
                topRightIcon = SimpleIconModel(
                    ResourcesCompat.getDrawable(
                        resources,
                        R.drawable.streamline_interface_setting_menu_horizontal,
                        null
                    ), null
                )
            )
	SimpleTask(
                title = "It is the only guarantee of life.",
                description = "Cum deus assimilant, omnes brabeutaes attrahendam talis, flavum adiuratores.",
                date = dateStart4,
                category = CategoryTaskModel(
                    "1",
                    CircleIconModel(
                        ResourcesCompat.getDrawable(
                            resources,
                            R.drawable.streamline_interface_religion_cross_1,
                            null
                        ), null, null
                    )
                ),
                topRightIcon = SimpleIconModel(
                    ResourcesCompat.getDrawable(
                        resources,
                        R.drawable.ic_options,
                        null
                    ), null
                ),
                accentButton = AccentButtonModel(
                    text = "#Daily",
                    textSize = 12f,
                    textStyle = TextStyle.NORMAL,
                    tintColor = R.color.app_colorAccent
                )
            )
private fun setList(list: List<TaskAbstract>) {
        if (rvAdapter == null) {
            rvAdapter = RvAdapterTasks(list, object : RvAdapterTasks.TaskInteractionListener {
                override fun onItemClickListener() {
                    Toast.makeText(this@CalendarActivity,"On item click", Toast.LENGTH_SHORT).show()
                }

                override fun onTopRightIconListener() {
                    Toast.makeText(this@CalendarActivity,"On top right icon click", Toast.LENGTH_SHORT).show()
                }

                override fun onCategoryListener() {
                    Toast.makeText(this@CalendarActivity,"On category click", Toast.LENGTH_SHORT).show()
                }

                override fun onActionButtonListener() {
                    Toast.makeText(this@CalendarActivity,"On action button click", Toast.LENGTH_SHORT).show()
                }

            })
            val llManager = LinearLayoutManager(this)
            rv.layoutManager = llManager
            rv.adapter = rvAdapter
            return
        }
        rvAdapter?.updateTasks(list)
    }

☝️ Calendars

TopHorizontalCalendarWithHeader

<devjdelasen.com.cleanui.calendar.top.TopHorizontalCalendarWithHeader
        android:id="@+id/topHorizontalCalendar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:background="@color/clean_ui_white"
        app:top_calendar_accent_color="@color/app_red"
        app:top_calendar_divider_color="@color/app_colorSeconday"
        app:top_calendar_hide_divider="false"
        app:top_calendar_hide_toolbar="false"
        app:top_calendar_main_text_color="@color/clean_ui_title_default"
        app:top_calendar_subtext_color="@color/clean_ui_icon_light"
        app:top_calendar_title_color="@color/app_colorSeconday"
        app:top_calendar_type="both"
        />

Combine calendar with tasks

topHorizontalCalendar?.init(object :
            TopHorizontalCalendarWithHeader.TopHorizontalCalendarInteractionListener {
            override fun onDaySelected(daySelected: Int, monthSelected: Int, yearSelected: Int, tasks: List<TaskAbstract>) {
                Toast.makeText(
                    this@CalendarActivity,
                    "$daySelected - ${monthSelected + 1} - $yearSelected",
                    Toast.LENGTH_SHORT
                ).show()
                setList(tasks)
            }

            override fun getTasks(
                monthSelected: Int,
                yearSelected: Int
            ): List<TaskAbstract> {
                return getRandomTasks(monthSelected)
            }
        })

☝️ ActionDialog

SimpleToolbar SimpleToolbar

val dialog = ActionDialog(title = "Sed ut perspiciatis",
                subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                buttonText = "Button",
                buttonColor = R.color.app_colorAccent,
                buttonSecondaryColor = R.color.app_colorSeconday,
                gradientOrientation = GradientDrawable.Orientation.TL_BR,
                cancelable = true,
                context = this)
            dialog.setListeners(onButtonClickListener = View.OnClickListener {
                dialog.dismiss()
            })
            dialog.showDialog()

☝️ Toolbar

SimpleToolbar

These are a few possible combinations

Center title Left title, no divider & tint icon Changed title text styles
SimpleToolbar SimpleToolbar SimpleToolbar
Changed divider color Full icons
SimpleToolbar SimpleToolbar

Center title

<devjdelasen.com.cleanui.SimpleToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:simple_toolbar_title="No tint icon"
        app:simple_toolbar_title_to_left="false"
        app:simple_toolbar_left_icon="@drawable/ic_back_arrow"
        app:simple_toolbar_left_color="@color/clean_ui_title_default"
        app:simple_toolbar_right1_icon="@drawable/ic_chat_gradient"
        app:simple_toolbar_hide_divider="false"
        android:layout_marginBottom="20dp"
        />

Left title, no divider & tint icon

<devjdelasen.com.cleanui.SimpleToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:simple_toolbar_hide_divider="true"
        app:simple_toolbar_title="No divider and tint icon"
        app:simple_toolbar_title_to_left="true"
        app:simple_toolbar_left_icon="@drawable/ic_back_arrow"
        app:simple_toolbar_left_color="@color/clean_ui_title_default"
        app:simple_toolbar_right1_icon="@drawable/ic_geo"
        app:simple_toolbar_right1_color="@color/clean_ui_colorPrimary"
        android:layout_marginBottom="20dp"
        />

Changed title text styles

<devjdelasen.com.cleanui.SimpleToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:simple_toolbar_title="Changed size, text style and color"
        app:simple_toolbar_title_color="@color/clean_ui_colorPrimary"
        app:simple_toolbar_right1_icon="@drawable/ic_options"
        app:simple_toolbar_title_style="italic"
        app:simple_toolbar_text_size="16"
        android:layout_marginBottom="20dp"
        />

Changed divider color

<devjdelasen.com.cleanui.SimpleToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:simple_toolbar_title="Changed divider color"
        app:simple_toolbar_title_color="@color/clean_ui_subtitle_dark"
        app:simple_toolbar_left_icon="@drawable/ic_chat_gradient"
        app:simple_toolbar_divider_color="@color/clean_ui_icon_light"
        android:layout_marginBottom="20dp"
        />

Full icons

<devjdelasen.com.cleanui.SimpleToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:simple_toolbar_title="All icons"
        app:simple_toolbar_divider_color="@color/clean_ui_icon_light"
        app:simple_toolbar_left_icon="@drawable/ic_back_arrow"
        app:simple_toolbar_right1_icon="@drawable/ic_chat_gradient"
        app:simple_toolbar_right2_icon="@drawable/ic_geo"
        app:simple_toolbar_right3_icon="@drawable/ic_done"
        app:simple_toolbar_left_color="@color/clean_ui_subtitle_dark"
        app:simple_toolbar_right1_color="@color/clean_ui_subtitle_dark"
        app:simple_toolbar_right2_color="@color/clean_ui_subtitle_dark"
        app:simple_toolbar_right3_color="@color/clean_ui_subtitle_dark"
        app:simple_toolbar_title_color="@color/clean_ui_subtitle_dark"
        app:simple_toolbar_title_to_left="true"
        android:layout_marginBottom="20dp"
        />

Set listeners

	simpleToolbar.setLeftClickListener(View.OnClickListener { TODO("Not yet implemented") })
        simpleToolbar.setRight1ClickListener(View.OnClickListener { TODO("Not yet implemented") })
        simpleToolbar.setRight2ClickListener(View.OnClickListener { TODO("Not yet implemented") })
        simpleToolbar.setRight3ClickListener(View.OnClickListener { TODO("Not yet implemented") })

Programmatically

	simpleToolbarProgrammatically.setIcons(null, null, null, null)
        simpleToolbarProgrammatically.setTitle("From the code", false)
        //simpleToolbarProgrammatically.getTitle() //Don't use it to set the text
        simpleToolbarProgrammatically.setLeftIcon(ContextCompat.getDrawable(this, R.drawable.ic_chat_gradient))
        simpleToolbarProgrammatically.setRight1Icon(ContextCompat.getDrawable(this, R.drawable.ic_options), R.color.app_colorPrimary)

☝️ Settings

Combine these components to get your settings UI

Section check box Section action Section subtext
SimpleToolbar SimpleToolbar SimpleToolbar

SettingsRowAction

            <devjdelasen.com.cleanui.TitleSection
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFF"
                android:layout_marginTop="12dp"
                app:title_section_title="Users"
                app:title_section_title_style="normal"
                app:title_section_title_color="@color/app_colorPrimary"
                >

                <devjdelasen.com.cleanui.settingsRow.SettingsRowAction
                    android:id="@+id/settingsBlocks"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:settings_row_title="Blocks"
                    />

            </devjdelasen.com.cleanui.TitleSection>

SettingsRowCheckBox

            <devjdelasen.com.cleanui.TitleSection
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFF"
                android:layout_marginTop="12dp"
                app:title_section_title="Notifications"
                app:title_section_title_style="normal"
                app:title_section_title_color="@color/app_colorPrimary"
                >


                <devjdelasen.com.cleanui.settingsRow.SettingsRowCheckBox
                    android:id="@+id/settingsDisplayNotis"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:settings_row_title="Display notifications"
                    />

                <devjdelasen.com.cleanui.settingsRow.SettingsRowCheckBox
                    android:id="@+id/settingsSound"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:settings_row_title="Sound on"
                    />

            </devjdelasen.com.cleanui.TitleSection>

SettingsRowSubtext

            <devjdelasen.com.cleanui.TitleSection
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFF"
                android:layout_marginTop="12dp"
                app:title_section_title="About"
                app:title_section_title_style="normal"
                app:title_section_title_color="@color/app_colorPrimary"
                >

                <devjdelasen.com.cleanui.settingsRow.SettingsRowSubtext
                    android:id="@+id/settingsVersion"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:settings_row_title="Version"
                    app:settings_row_subtitle="v2.15.8"
                    />

                <devjdelasen.com.cleanui.settingsRow.SettingsRowAction
                    android:id="@+id/settingsTerms"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:settings_row_title="Terms and conditions"
                    />

                <devjdelasen.com.cleanui.settingsRow.SettingsRowAction
                    android:id="@+id/settingsPrivacyPolicy"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:settings_row_title="Privacy policy"
                    />

            </devjdelasen.com.cleanui.TitleSection>

Programmatically

    	settingsSubtextProgrammatically.setTitle(title = "From code")
        settingsSubtextProgrammatically.setSubtext(subtext = "Subtext", subtextColor = resources.getColor(R.color.app_colorPrimary, null))
        settingsActionProgrammatically.setTitle(title = "From code", titleColor = resources.getColor(R.color.clean_ui_title_default, null))
        settingsCheckboxProgrammatically.setTitle(title = "From code", titleColor = resources.getColor(R.color.clean_ui_title_default, null), titleTextSize = 14f, titleTextStyle = TextStyle.BOLD)

☝️ Other

TitleSection

            <devjdelasen.com.cleanui.TitleSection
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFF"
                android:layout_marginTop="12dp"
                android:layout_marginBottom="12dp"
                app:title_section_title="Title section"
                app:title_section_title_style="bold"
                app:title_section_title_color="@color/app_colorPrimary"
                >

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Just a long text inside a TitleSection view. You can add here any view you like."
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginBottom="12dp"
                    />

            </devjdelasen.com.cleanui.TitleSection>

Author

👨🏻‍💻 Jonnie