Blog Infos
Author
Published
Topics
Author
Published
Posted by: Shivam Dhuria

For this tutorial, we will be styling an App with Material Theme.The application basically fetches a list of items from [Imgur Api] and displays it via a Recycler. For this guide however, we will just be working with the design of the App using everything material!

You can find the starting point for this tutorial on GithHub here.

 

 

Styles and Themes

There is no way to distinguish between a style and theme except that a theme is applied to a whole application or an activity while style is mostly applied to a View. However a style can be a part of theme.

Make Your Application Material ?

Go to res>values> and create a new file named “themes.xml”.

<?xml version="1.0" encoding="utf-8"?>
<resources>
//Top Level Theme
<style name="Theme.Zimgur.DayNight" parent="Theme.Zimgur" />
<style name="Theme.Zimgur" parent="Theme.MaterialComponents.DayNight.NoActionBar" />
</resources>
view raw themes hosted with ❤ by GitHub

I use Theme.MaterialComponents.DayNight.NoActionBar as I want app to be compatible with DarkMode as well.

Now in AndroidManifest.xml file, set the theme to the application.

<application
 ...
 android:theme="@style/Theme.Zimgur.DayNight" ...>

and remove any other theme from the manifest that might be there for specific activities.

Adding Material Components

Make sure you don’t set any color value to any of the Views such as TextView, ImageView etc as we want to be able to build a dynamic UI whose colors may change depending upon LIGHT or DARK theme.

Material Cards

I’ll wrap the album item_layout in a Material Card, provided by the Material Theme.

I have also added two ImageViews for profile Image and a cover Image.

Job Offers

Job Offers


    API Engineer

    American Express
    London
    • Full Time
    apply now

    Mobile Developer Android (m/w/d) Firebase

    REWE digital
    Köln / Cologne
    • Full Time
    apply now

    Android Engineer

    American Express
    Phoenix, USA
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

Jobs

Chips

Chip represents a complex entity in a small block, such as a contact. It is a rounded button that consists of a label, an optional chip icon, and an optional close icon. A chip can either be clicked or toggled if it is checkable.

I am adding a Chip Group which will be horizontally scrollable to which I’ll dynamically add chips. I’ll use these chips to specify #tags associated with the posts.

<HorizontalScrollView
    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/coverImage">

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:singleLine="true">

    </com.google.android.material.chip.ChipGroup>
</HorizontalScrollView>

After all this, The UI should look something like this.

Bottom App Bar and FAB

bottom app bar displays navigation and key actions at the bottom of mobile screens.

TabLayoutMediator(mTabLayout, mViewPager) { tab, position ->
tab.text = it[position].title
}.attach()
BottomSheet

Bottom sheets are anchored to the bottom edge of the screen and appear in front of other UI elements. Standard and modal bottom sheets are full-width on mobile can be partially or fully open.I use this to display various tags you browse.

Note: This blog mainly focuses on design, So it will be pretty much non functional.

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
//This view helps to put everything else outside focus
<View
android:id="@+id/scrim_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:background="?attr/scrimBackground"
android:visibility="gone" />
<FrameLayout
android:id="@+id/background_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_halfExpandedRatio="0.6"
app:behavior_hideable="true"
app:behavior_skipCollapsed="true"
//This is important.
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/nav_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:orientation="vertical"
app:layoutManager=
"androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Check BottomNavDrawerFragment.kt, to see how to configure this.

Dark Mode

Set a click listener to the FAB

setSafeOnClickListener {toggleTheme(isDarkTheme(this@MainActivity))}

Find the current theme

https://gist.github.com/af971c5805441014c33be7be8b9e6c3

and toggle the theme and save it in Shared Preferences.

private fun toggleTheme(isDark: Boolean): Boolean {
val mode = when (isDark) {
true -> LIGHT_MODE
false -> DARK_MODE
}
ThemeManager.applyTheme(mode)
preferenceManager.saveThemePreference(mode)
return true
}
view raw MainActivity.kt hosted with ❤ by GitHub

Create an object Theme Manager that’ll help to apply themes.

object ThemeManager {
const val LIGHT_MODE = "Light"
const val DARK_MODE = "Dark"
private const val AUTO_BATTERY_MODE = "Auto-battery"
private const val FOLLOW_SYSTEM_MODE = "System"
fun applyTheme(themePreference: String) {
when (themePreference) {
LIGHT_MODE -> setDefaultNightMode(MODE_NIGHT_NO)
DARK_MODE -> setDefaultNightMode(MODE_NIGHT_YES)
AUTO_BATTERY_MODE -> setDefaultNightMode(MODE_NIGHT_AUTO_BATTERY)
FOLLOW_SYSTEM_MODE -> setDefaultNightMode(MODE_NIGHT_FOLLOW_SYSTEM)
}
}
}
view raw ThemeManager.kt hosted with ❤ by GitHub

After adding all these Material elements, The end result should looks something like this.

I have added animations to the FAB and a Dialog Fragment which I have included in the code.

https://github.com/Shivamdhuria/zimgur/tree/MaterialTheme

In Part 2, we’ll be customising the theme and styling the app.

 

 

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog

NavigationRailView MaterialDesign 1.4.0 Stable ?

In this article, We will learn about NavigationRailView finally which hits the stable channel…
READ MORE
blog
During I/O 2021, Google announced the latest stage for Material Design, Material You (or…
READ MORE
blog

Android 12 review for developers

The Google I/O’21 conference took place, and we learned absolutely everything about the new…
READ MORE
blog

From Nothing to Material Transitions

Animations rarely change the core functionally of an app but you can’t deny they…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu