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


    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Kotlin Multiplatform Mobile Developer

    Touchlab
    Remote
    • Full Time
    apply now

    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

,

Compose Beyond Material Design

In the implementation of Jetpack compose at our organization, one of the issues that popped up was how to implement a Design system that is not adapted from material design but true to what our…
Watch Video

Compose Beyond Material Design

Frank Tamre

Compose Beyond Material Design

Frank Tamre

Compose Beyond Material Design

Frank Tamre

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