Skip to content
BranchesTags

Repository files navigation

SimpleMaterialStyle


Simple way to use Material.io

Version 2.2.3Version 2.2.3Version 2.2.3Version 2.3.0++ ReadMoreTextInputLayout

Content List

Download

Add maven jitpack.io and dependencies in build.gradle (Project) :

// build.gradle projectallprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
// build.gradle app/moduledependencies {
...
implementation 'com.github.gzeinnumer:SimpleMaterialStyle:version'
implementation 'com.google.android.material:material:1.2.1'
}

Feature List

  • TextView
  • TextInputLayout
  • TextInputEditText
  • Divider
  • ButtonOutLined
  • ButtonText
  • ButtonIcon
  • ButtonContained
  • AutoCompleteTextView
  • TakeFotoIcon
  • ImagePreview
  • RadioGroup
  • RadioButton
  • CheckBox
  • ButtonNavigation
  • HomeBackIcon
  • TitleActionBar
  • ActionBarMenuIcon
  • ActionBarMenuText
  • SearchSpinner
  • Corner
  • Popup
  • Dialog (DOCS)

Tech stack and 3rd library

Usage

First Step. Use MaterialComponents in style.xml with change parent of AppTheme :

<stylename="AppTheme"parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>

Add This Line to res/color.xml. Important

<?xml version="1.0" encoding="utf-8"?>
<resources>
<colorname="colorPrimary">#6200EE</color>
<colorname="colorPrimaryDark">#3700B3</color>
<colorname="colorAccent">#03DAC5</color>
</resources>

If you want to change default font, add custom_font.ttf to your res directory res->font. Than add this style to your style.xml/themes.xml

<!-- Base application theme. --><!-- Change Base Font -->
<stylename="Theme.MyLibsTesting"parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<itemname="android:fontFamily">@font/test_font</item>
</style>
<!-- Change TextView Font -->
<stylename="BaseTextView">
<itemname="android:fontFamily">@font/test_font</item>
</style>
<stylename="BaseTextView.Bold"parent="BaseTextView">
<itemname="android:fontFamily">@font/test_font</item>
</style>
<stylename="BaseTextView.Italic"parent="BaseTextView">
<itemname="android:fontFamily">@font/test_font</item>
</style>
<stylename="BaseTextView.Bold.Italic"parent="BaseTextView">
<itemname="android:fontFamily">@font/test_font</item>
</style>
<!-- Change Button Font -->
<stylename="MyButtonText"parent="Widget.MaterialComponents.Button.TextButton">
<itemname="android:fontFamily">@font/test_font</item>
</style>
<stylename="MyButtonOutlined"parent="Widget.MaterialComponents.Button.OutlinedButton">
<itemname="android:fontFamily">@font/test_font</item>
</style>
<stylename="MyButtonContained">
<itemname="android:fontFamily">@font/test_font</item>
</style>
<stylename="MyButtonIcon"parent="Widget.MaterialComponents.Button.Icon">
<itemname="android:fontFamily">@font/test_font</item>
</style>

Notes. You can custom all style, example :

Default from SimpleMaterialStyle :

<TextViewstyle="@style/MyTextHeader"android:text="MyTextHeader" />
<TextViewstyle="@style/MyTextContent"android:text="MyTextContent" />

Own Custom :

<TextViewstyle="@style/MyTextHeader"android:text="MyTextHeader" />
<TextViewstyle="@style/MyTextContent"android:text="MyTextContent"android:textColor="@android:color/holo_red_dark"android:textSize="36sp" />

Preview:

DefaultCustom

MyAppbarLayout.

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/apb"style="@style/MyAppbarLayout">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/tb"style="@style/MyMaterialToolbar">
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content">
<ImageButtonandroid:id="@+id/btn_back"style="@style/MyCostumToolbarImage"android:src="@drawable/mygzn_keyboard_arrow_left"android:tag="CostumToolbarImage" />
<TextViewandroid:id="@+id/tv_toolbar"style="@style/MyCostumToolbarTitle"android:text="MyCostumToolbarTitle" />
<ImageButtonandroid:id="@+id/btn_popup"style="@style/MyOptionMenu"android:src="@drawable/mygzn_more_vert" />
</LinearLayout>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>

Preview:

MyTopHeader.

<TextViewandroid:id="@+id/tv_title"style="@style/MyTopHeader"android:text="MyTopHeader : MainActivity" />

Preview:

MyTextHeader.

<TextViewstyle="@style/MyTextHeader"android:text="MyTextHeader" />

Preview:

MyTextContent.

<TextViewstyle="@style/MyTextContent"android:text="MyTextContent" />

Preview:

MyTextInputLayoutOutlinedBox.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyTextInputLayoutOutlinedBox"android:hint="MyTextInputLayoutOutlinedBox"app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/ed_1"style="@style/MyTextInputEditText"android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Preview:

MyTextInputLayoutOutlinedBoxNext.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyTextInputLayoutOutlinedBoxNext"android:hint="MyTextInputLayoutOutlinedBoxNext">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/ed_2"style="@style/MyTextInputEditText" />
</com.google.android.material.textfield.TextInputLayout>

Preview:

MyTextInputLayoutOutlinedBoxNext.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyTextInputLayoutOutlinedBoxNext"android:hint="MyTextInputLayoutOutlinedBoxNext*"android:textColorHint="@color/red_500">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/ed_7"style="@style/MyTextInputEditText" />
</com.google.android.material.textfield.TextInputLayout>

Preview:

MyTextInputLayoutFilledBox.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyTextInputLayoutFilledBox"android:hint="MyTextInputLayoutFilledBox">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/ed_3"style="@style/MyTextInputEditText" />
</com.google.android.material.textfield.TextInputLayout>

Preview:

MyTextInputLayoutFilledBoxNext.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyTextInputLayoutFilledBoxNext"android:hint="MyTextInputLayoutFilledBoxNext"app:startIconDrawable="@drawable/mygzn_home">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/ed_4"style="@style/MyTextInputEditText" />
</com.google.android.material.textfield.TextInputLayout>

Preview:

MyTextInputLayoutOutlinedBoxNext.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyTextInputLayoutOutlinedBoxNext"android:hint="MyTextInputLayoutOutlinedBoxNext"app:counterEnabled="true"app:counterMaxLength="20"app:errorEnabled="true"app:helperText="Helper Text"app:helperTextEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/ed_5"style="@style/MyTextInputEditText" />
</com.google.android.material.textfield.TextInputLayout>

Preview:

MyTextInputLayoutFilledBox.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyTextInputLayoutFilledBox"android:hint="MyTextInputLayoutFilledBox*"android:textColorHint="@color/red_500">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/ed_6"style="@style/MyTextInputEditText" />
</com.google.android.material.textfield.TextInputLayout>

Preview:

MyButtonOutlined.

<LinearLayoutstyle="@style/MyParentButton"android:gravity="end"android:orientation="vertical">
<Buttonstyle="@style/MyButtonOutlined"android:text="MyButtonOutlined" />
</LinearLayout>

Preview:

MyButtonText.

<LinearLayoutstyle="@style/MyParentButton"android:gravity="end"android:orientation="vertical">
<Buttonstyle="@style/MyButtonText"android:text="MyButtonText" />
</LinearLayout>

Preview:

MyButtonContained.

<LinearLayoutstyle="@style/MyParentButton"android:gravity="end"android:orientation="vertical">
<Buttonstyle="@style/MyButtonContained"android:text="MyButtonContained" />
</LinearLayout>

Preview:

MyButtonIcon.

<LinearLayoutstyle="@style/MyParentButton"android:gravity="end"android:orientation="vertical">
<Buttonstyle="@style/MyButtonIcon"android:text="MyButtonIcon"app:icon="@drawable/mygzn_add" />
</LinearLayout>

Preview:

MyAutoCompleteTextViewFilledBox.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyAutoCompleteTextViewFilledBox"android:hint="MyAutoCompleteTextViewFilledBox">
<AutoCompleteTextViewandroid:id="@+id/material_spinner_1"style="@style/MyAutoCompleteTextView" />
</com.google.android.material.textfield.TextInputLayout>
val items =listOf("Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune")
val myAdapter =ArrayAdapter(applicationContext, R.layout.mygzn_list_item, items)
material_spinner_1.setAdapter(myAdapter)

Preview:

OnClick:

MyAutoCompleteTextViewOutlineBox.

<com.google.android.material.textfield.TextInputLayout
style="@style/MyAutoCompleteTextViewOutlineBox"android:hint="MyAutoCompleteTextViewOutlineBox">
<AutoCompleteTextViewandroid:id="@+id/material_spinner_2"style="@style/MyAutoCompleteTextView" />
</com.google.android.material.textfield.TextInputLayout>
val items =listOf("Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune")
val myAdapter =ArrayAdapter(applicationContext, R.layout.mygzn_list_item, items)
material_spinner_2.setAdapter(myAdapter)

Preview:

OnClick:

MySpinner.

<LinearLayoutstyle="@style/MyParentSpinner">
<TextViewstyle="@style/MyTextContent"android:layout_weight="1"android:text="Dialog" />
<Spinnerandroid:id="@+id/material_spinner_4"style="@style/MySpinner"android:layout_weight="1"android:prompt="@string/app_name"android:spinnerMode="dialog" />
</LinearLayout>
val items =listOf("Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune")
val myAdapter =ArrayAdapter(applicationContext, R.layout.mygzn_list_item, items)
material_spinner_4.adapter = myAdapter

Preview:

OnClick:

MySpinner.

<LinearLayoutstyle="@style/MyParentSpinner">
<TextViewstyle="@style/MyTextContent"android:layout_weight="1"android:text="Dropdown" />
<androidx.appcompat.widget.AppCompatSpinner
android:id="@+id/material_spinner_5"style="@style/MySpinner"android:layout_weight="1"android:prompt="@string/app_name"android:spinnerMode="dropdown" />
</LinearLayout>
val items =listOf("Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune")
val myAdapter =ArrayAdapter(applicationContext, R.layout.mygzn_list_item, items)
material_spinner_5.adapter = myAdapter

Preview:

MyImageFoto.

<LinearLayoutandroid:id="@+id/img_1"style="@style/MyImageFoto"android:layout_width="match_parent">
<TextViewstyle="@style/MyTextRequired"android:layout_gravity="center" />
<ImageViewstyle="@style/MyTakeImage"android:src="@drawable/mygzn_take_image" />
<TextViewstyle="@style/MyImageFotoText" />
</LinearLayout>

Preview:

MyImageFoto.

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center">
<LinearLayoutandroid:id="@+id/img_2"style="@style/MyImageFoto">
<ImageViewstyle="@style/MyTakeImage"android:src="@drawable/mygzn_take_image" />
<TextViewstyle="@style/MyImageFotoText" />
</LinearLayout>
<LinearLayoutandroid:id="@+id/img_3"style="@style/MyImageFoto">
<ImageViewstyle="@style/MyTakeImage"android:src="@drawable/mygzn_take_image" />
<TextViewstyle="@style/MyImageFotoText" />
</LinearLayout>
<LinearLayoutandroid:id="@+id/img_4"style="@style/MyImageFoto">
<ImageViewstyle="@style/MyTakeImage"android:src="@drawable/mygzn_take_image" />
<TextViewstyle="@style/MyImageFotoText" />
</LinearLayout>
</LinearLayout>

Preview:

MyImageFoto.

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="@dimen/space_between_photo_preview"android:gravity="center">
<ImageViewstyle="@style/MyImageFotoPreview" />
<ImageViewstyle="@style/MyImageFotoPreview"android:src="@drawable/mygzn_gzeinnumer_crop" />
</LinearLayout>

Preview:

MyDivider.

<Viewstyle="@style/MyDivider" />

Preview:

MyRadioGroup.

<RadioGroupandroid:id="@+id/rg"style="@style/MyRadioGroup"android:checkedButton="@+id/first">
<RadioButtonandroid:id="@+id/first"style="@style/MyRadioButton"android:text="MyRadioButton" />
<RadioButtonandroid:id="@+id/second"style="@style/MyRadioButton"android:text="MyRadioButton" />
</RadioGroup>

Preview:

MyRadioGroup.

<TextViewstyle="@style/MyRadioGroupText"android:text="MyRadioGroupText" />
<RadioGroupandroid:id="@+id/rg_1"style="@style/MyRadioGroup"android:checkedButton="@+id/first_1"android:orientation="horizontal">
<RadioButtonandroid:id="@+id/first_1"style="@style/MyRadioButton"android:text="MyRadioButton" />
<RadioButtonandroid:id="@+id/second_1"style="@style/MyRadioButton"android:text="MyRadioButton" />
</RadioGroup>

Preview:

MyRadioGroup.

<TextViewstyle="@style/MyTextHeader"android:text="MyTextHeader" />
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_vertical">
<TextViewstyle="@style/MyTextContent"android:layout_gravity="center|left"android:layout_marginTop="3dp"android:layout_weight="1"android:text="MyTextContent" />
<RadioGroupandroid:id="@+id/rg_2"style="@style/MyRadioGroup"android:layout_weight="1"android:checkedButton="@+id/first_2"android:orientation="horizontal">
<RadioButtonandroid:id="@+id/first_2"style="@style/MyRadioButton"android:text="MyRadioButton" />
<RadioButtonandroid:id="@+id/second_2"style="@style/MyRadioButton"android:text="MyRadioButton" />
</RadioGroup>
</LinearLayout>

Preview:

MyEditText.

<TextViewstyle="@style/MyTextEditText"android:text="MyTextEditText" />
<EditTextstyle="@style/MyEditText"android:backgroundTint="@color/colorPrimary"android:hint="MyEditText" />

Preview:

MyEditText_Horizontal.

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical">
<TextViewstyle="@style/MyTextContent"android:text="MyTextContent" />
<EditTextstyle="@style/MyEditText_Horizontal"android:layout_weight="1"android:hint="MyEditText_Horizontal" />
</LinearLayout>

Preview:

MyCheckBox.

<TextViewstyle="@style/MyCheckBoxText"android:text="MyCheckBoxText" />
<com.google.android.material.checkbox.MaterialCheckBox
style="@style/MyCheckBox"android:text="MyCheckBox" />

Preview:

MyCheckBox_Horizontal.

<LinearLayoutstyle="@style/MyParentCheckBox">
<TextViewstyle="@style/MyTextContent"android:text="MyTextContent" />
<com.google.android.material.checkbox.MaterialCheckBox
style="@style/MyCheckBox_Horizontal"android:text="MyCheckBox_Horizontal" />
</LinearLayout>

Preview:

MyCheckBox.

<LinearLayoutstyle="@style/MyParentCheckBox">
<TextViewstyle="@style/MyTextContent"android:text="MyTextContent" />
<com.google.android.material.checkbox.MaterialCheckBox
style="@style/MyCheckBox_Horizontal"android:text="MyCheckBox_Horizontal" />
</LinearLayout>

Preview:

MyBottomNavigationView.

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/btn_nav"style="@style/MyBottomNavigationView"app:menu="@menu/mygzn_bottom_nav" />

Preview:

MyParentTypeCardEdge.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns: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:focusableInTouchMode="true"android:orientation="vertical"tools:ignore="HardcodedText">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/apb"style="@style/MyAppbarLayout">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/tb"style="@style/MyMaterialToolbar">
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content">
<ImageButtonandroid:id="@+id/btn_back"style="@style/MyCostumToolbarImage"android:src="@drawable/mygzn_keyboard_arrow_left"android:tag="CostumToolbarImage" />
<TextViewandroid:id="@+id/tv_toolbar"style="@style/MyCostumToolbarTitle"android:text="MyCostumToolbarTitle" />
<ImageButtonandroid:id="@+id/btn_popup"style="@style/MyOptionMenu"android:src="@drawable/mygzn_more_vert" />
</LinearLayout>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayoutstyle="@style/MyParentTypeCardEdge"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1">
<!-- Your Widget -->
</LinearLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/btn_nav"style="@style/MyBottomNavigationView"app:menu="@menu/mygzn_bottom_nav" />
</LinearLayout>
btn_popup.setOnClickListener {
val popup =PopupMenu(this, btn_popup)
val inflater:MenuInflater= popup.menuInflater
inflater.inflate(R.menu.mygzn_bottom_nav, popup.menu)
popup.setOnMenuItemClickListener { item ->when (item?.itemId) {
R.id.id_next -> startActivity(Intent(applicationContext, MainActivity::class.java))
}
false
}
popup.show()
}

Preview:

Version

  • 0.0.3
    • First Release
  • 0.0.6
    • Font Style
  • 0.0.7
    • Icon Foto
  • 0.0.8
    • Add More Style
  • 0.0.9
    • Color
  • 0.1.0
    • Add More Style
  • 0.1.2
    • Add More Style
  • 0.1.3
    • Add More Style
  • 0.1.4
    • Add More Style
  • 0.1.5
    • Bug Fixing
  • 2.0.0
    • Support SDK 16
  • 2.1.0
    • New Style
  • 2.2.0
    • New Style
  • 2.2.1
    • Bug Color
  • 2.2.2
    • Bug Color
  • 2.2.3
    • Bug Color
  • 2.2.4
    • TextInputLayout New Style
  • 2.3.0
    • TextInputLayout TextAutoComplete New Style
  • 2.3.2
    • TextInputLayout Focus Hint Color
  • 2.3.3
    • SearchViewDialog 3.1.2
  • 2.3.4
    • More Simple
  • 2.3.5
    • ImageView
  • 2.3.6
    • AutoCompleteTextView

Contribution

You can sent your constibution to branchopen-pull.

Copyright 2020 M. Fadli Zein

About

Simple way to use Material.io

github.com/gzeinnumer#my-library-list

Topics

androidandroid-studiobuttonjavajava-librarykotlinkotlin-librarymaterial-componentsmaterial-designmaterial-uistyletextxml

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages