Android UI Design - Part 1

Hello Friends,

I am going to tell you about today’s trend in Android App. Development. As you all are aware with the android and its’ development speed. i.e.  We all know about the speed of technology. If I say that within every 20 seconds there is a new technology arrives in the market, you can’t say no.

So, let’s start with the today’s Android App. Development (Advance Android App. Development).

First of all, We should start with Android App. Designs,

Designing is necessary for all app. Or it is an essential part of any app. Just because the user of app maybe don’t know about the coding and even they use your app from front side. To provide user friendly environment to your users you should take enough care about designing.

When we are going to design an app at that time lots of things one can keep in mind such as, user’s behavior the app. So, let’s start app. designing.

To designing an App. We have different types of layouts and widgets for different types of devices. Even we can create own widgets i.e. widgets is known as custom widgets.

Some factors are there on which, we have to think while designing app.

1. Design User Interface for each and every screen. i.e. UI should be flexible enough to set its‘ view for every screen. Such as, for each size of mobile and tablets our UI should remain same.
2. Design should be responsive.
3. Title for each different screen with its’ own toolbar.
4. App design should be like that if users are physically disabled, they can use our app. effectively.

Now, in this article I introduce Material design in front of you. You might have already known about material design. Material design was introduced when Lollipop version API 22 introduced. And it became successful. Google developed Material Design in the year 2014. When Material Design came, it gave lots of new Themes, Widgets, Animations, Drawables etc. and even you can customize themes, animations etc.

In this tutorial I am going to tell you, how to develop material design theme for your app.? How to work with different widgets using this custom theme such as, Navigation drawer, CardLayout, RecyclerView etc.? 

In this article we are going to learn about some basic steps to develop material design theme.
So, Let’s start,

Step – 1: Download Android Studio (if you have not)
Step – 2: Here, I want to tell you about some color terminologies,

• colorPrimary – Generally, This color is displayed on toolbar as background.
• colorPrimaryDark – This color is displayed at status bar (Notification bar)as background.
• windowBackground – This color is displayed as our app background color.
• textColorPrimary – This is the color of your text that you use for your app title.
• colorAccent – This color is used when we use different widgets or UI controls such as, EditText, CheckBox etc.
   

Fig. 1 Color Description

• There are some more color  terminologies, we will discussed later on.  

Step – 3: Create new project, go to File > New > New Project. This will open create new project dialog box. and create new project.

Step - 4: Choose Empty Activity from Activity List.

Step - 5: Now we are going to,

create material design

• Go to the res > values open colors.xml file. and add different colors that you want to add to your app. here, I use my colors. that I want to use in my app.

<?xml version="1.0" encoding="utf-8"?><resources>    <color name="colorPrimary">#ff8888</color>    <color name="colorPrimaryDark">#ff8877</color>    <color name="colorAccent">#ff3388</color>    <color name="windowBackground">#ffffff</color>    <color name="textColorPrimary">#000000</color></resources>

Now, after saving this file, open res > values > styles.xml file. and add the code.

<resources>
    <style name="MyDemoTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <item name="windowNoTitle">false</item>        <item name="windowActionBar">true</item>        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

• Now, after saving this file, open androidmanifest.xml file. and add the code. and edit <application>.

android:theme="@style/MyDemoTheme"

• Now, check the entire AndroidManifest.xml file. It looks Like.

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.trivediheena.materialdesignappdemo">
    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/MyDemoTheme">        <activity android:name=".MaterialDemoActivity">            <intent-filter>                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>
</manifest>

Now you can see the output like below screen.  after setting all the colors. your material them is somewhere ready.

Fig. 2 Final Output

So, Friends it is really easy to create material design theme. In the next article I will show you how to use navigation drawer and other widgets with material design. Try the above code you will get all the things and understand easily.

Happy coding...