Skip to content

gzeinnumer/SimpleMaterialStyle

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
.idea
.idea
 
 
app
app
 
 
assets
assets
 
 
gradle/wrapper
gradle/wrapper
 
 
sms
sms
 
 
.gitattributes
.gitattributes
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
build.gradle
build.gradle
 
 
gradle.properties
gradle.properties
 
 
gradlew
gradlew
 
 
gradlew.bat
gradlew.bat
 
 
settings.gradle
settings.gradle
 
 

Repository files navigation

SimpleMaterialStyle


Simple way to use Material.io
Version 2.2.3 Version 2.2.3 Version 2.2.3 Version 2.3.0++ ReadMore TextInputLayout

Content List

Download

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

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

// build.gradle app/module
dependencies {
  ...
  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

  • Material.io (docs)

Usage

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

<style name="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>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="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 -->
<style name="Theme.MyLibsTesting" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="android:fontFamily">@font/test_font</item>
</style>

<!-- Change TextView Font -->
<style name="BaseTextView">
    <item name="android:fontFamily">@font/test_font</item>
</style>

<style name="BaseTextView.Bold" parent="BaseTextView">
    <item name="android:fontFamily">@font/test_font</item>
</style>

<style name="BaseTextView.Italic" parent="BaseTextView">
    <item name="android:fontFamily">@font/test_font</item>
</style>

<style name="BaseTextView.Bold.Italic" parent="BaseTextView">
    <item name="android:fontFamily">@font/test_font</item>
</style>

<!-- Change Button Font -->
<style name="MyButtonText" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:fontFamily">@font/test_font</item>
</style>

<style name="MyButtonOutlined" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="android:fontFamily">@font/test_font</item>
</style>

<style name="MyButtonContained">
    <item name="android:fontFamily">@font/test_font</item>
</style>

<style name="MyButtonIcon" parent="Widget.MaterialComponents.Button.Icon">
    <item name="android:fontFamily">@font/test_font</item>
</style>

Notes. You can custom all style, example :

Default from SimpleMaterialStyle :

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

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

Own Custom :

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

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

Preview:
Default Custom

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">

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

            <ImageButton
                android:id="@+id/btn_back"
                style="@style/MyCostumToolbarImage"
                android:src="@drawable/mygzn_keyboard_arrow_left"
                android:tag="CostumToolbarImage" />

            <TextView
                android:id="@+id/tv_toolbar"
                style="@style/MyCostumToolbarTitle"
                android:text="MyCostumToolbarTitle" />

            <ImageButton
                android: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.

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

Preview:

MyTextHeader.

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

Preview:

MyTextContent.

<TextView
    style="@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.

<LinearLayout
    style="@style/MyParentButton"
    android:gravity="end"
    android:orientation="vertical">

    <Button
        style="@style/MyButtonOutlined"
        android:text="MyButtonOutlined" />

</LinearLayout>

Preview:

MyButtonText.

<LinearLayout
    style="@style/MyParentButton"
    android:gravity="end"
    android:orientation="vertical">

    <Button
        style="@style/MyButtonText"
        android:text="MyButtonText" />

</LinearLayout>

Preview:

MyButtonContained.

<LinearLayout
    style="@style/MyParentButton"
    android:gravity="end"
    android:orientation="vertical">

    <Button
        style="@style/MyButtonContained"
        android:text="MyButtonContained" />

</LinearLayout>

Preview:

MyButtonIcon.

<LinearLayout
    style="@style/MyParentButton"
    android:gravity="end"
    android:orientation="vertical">

    <Button
        style="@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">

    <AutoCompleteTextView
        android: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">

    <AutoCompleteTextView
        android: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.

<LinearLayout style="@style/MyParentSpinner">

    <TextView
        style="@style/MyTextContent"
        android:layout_weight="1"
        android:text="Dialog" />

    <Spinner
        android: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.

<LinearLayout style="@style/MyParentSpinner">

    <TextView
        style="@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.

<LinearLayout
    android:id="@+id/img_1"
    style="@style/MyImageFoto"
    android:layout_width="match_parent">

    <TextView
        style="@style/MyTextRequired"
        android:layout_gravity="center" />

    <ImageView
        style="@style/MyTakeImage"
        android:src="@drawable/mygzn_take_image" />

    <TextView style="@style/MyImageFotoText" />

</LinearLayout>

Preview:

MyImageFoto.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/img_2"
        style="@style/MyImageFoto">

        <ImageView
            style="@style/MyTakeImage"
            android:src="@drawable/mygzn_take_image" />

        <TextView style="@style/MyImageFotoText" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/img_3"
        style="@style/MyImageFoto">

        <ImageView
            style="@style/MyTakeImage"
            android:src="@drawable/mygzn_take_image" />

        <TextView style="@style/MyImageFotoText" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/img_4"
        style="@style/MyImageFoto">

        <ImageView
            style="@style/MyTakeImage"
            android:src="@drawable/mygzn_take_image" />

        <TextView style="@style/MyImageFotoText" />

    </LinearLayout>
</LinearLayout>

Preview:

MyImageFoto.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/space_between_photo_preview"
    android:gravity="center">

    <ImageView style="@style/MyImageFotoPreview" />

    <ImageView
        style="@style/MyImageFotoPreview"
        android:src="@drawable/mygzn_gzeinnumer_crop" />

</LinearLayout>

Preview:

MyDivider.

<View style="@style/MyDivider" />

Preview:

MyRadioGroup.

<RadioGroup
    android:id="@+id/rg"
    style="@style/MyRadioGroup"
    android:checkedButton="@+id/first">

    <RadioButton
        android:id="@+id/first"
        style="@style/MyRadioButton"
        android:text="MyRadioButton" />

    <RadioButton
        android:id="@+id/second"
        style="@style/MyRadioButton"
        android:text="MyRadioButton" />
</RadioGroup>

Preview:

MyRadioGroup.

<TextView
    style="@style/MyRadioGroupText"
    android:text="MyRadioGroupText" />

<RadioGroup
    android:id="@+id/rg_1"
    style="@style/MyRadioGroup"
    android:checkedButton="@+id/first_1"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/first_1"
        style="@style/MyRadioButton"
        android:text="MyRadioButton" />

    <RadioButton
        android:id="@+id/second_1"
        style="@style/MyRadioButton"
        android:text="MyRadioButton" />
</RadioGroup>

Preview:

MyRadioGroup.

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">

    <TextView
        style="@style/MyTextContent"
        android:layout_gravity="center|left"
        android:layout_marginTop="3dp"
        android:layout_weight="1"
        android:text="MyTextContent" />

    <RadioGroup
        android:id="@+id/rg_2"
        style="@style/MyRadioGroup"
        android:layout_weight="1"
        android:checkedButton="@+id/first_2"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/first_2"
            style="@style/MyRadioButton"
            android:text="MyRadioButton" />

        <RadioButton
            android:id="@+id/second_2"
            style="@style/MyRadioButton"
            android:text="MyRadioButton" />
    </RadioGroup>
</LinearLayout>

Preview:

MyEditText.

<TextView
    style="@style/MyTextEditText"
    android:text="MyTextEditText" />

<EditText
    style="@style/MyEditText"
    android:backgroundTint="@color/colorPrimary"
    android:hint="MyEditText" />

Preview:

MyEditText_Horizontal.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical">

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

    <EditText
        style="@style/MyEditText_Horizontal"
        android:layout_weight="1"
        android:hint="MyEditText_Horizontal" />
</LinearLayout>

Preview:

MyCheckBox.

<TextView
    style="@style/MyCheckBoxText"
    android:text="MyCheckBoxText" />

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

Preview:

MyCheckBox_Horizontal.

<LinearLayout style="@style/MyParentCheckBox">

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

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

</LinearLayout>

Preview:

MyCheckBox.

<LinearLayout style="@style/MyParentCheckBox">

    <TextView
        style="@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"?>
<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: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">

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

                <ImageButton
                    android:id="@+id/btn_back"
                    style="@style/MyCostumToolbarImage"
                    android:src="@drawable/mygzn_keyboard_arrow_left"
                    android:tag="CostumToolbarImage" />

                <TextView
                    android:id="@+id/tv_toolbar"
                    style="@style/MyCostumToolbarTitle"
                    android:text="MyCostumToolbarTitle" />

                <ImageButton
                    android: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>

    <LinearLayout
        style="@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 branch open-pull.

Copyright 2020 M. Fadli Zein

About

Simple way to use Material.io

github.com/gzeinnumer#my-library-list

Topics

android kotlin java material-design xml text material-ui style button kotlin-library material-components android-studio java-library

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases 29

Stule Autocomplate Latest
Jun 4, 2022
+ 28 releases

Packages

No packages published

Languages