Learn Android — Adding Visual Polish — 1
The world’s most popular mobile OS — from phones and watches to cars and TVs.
Welcome to the Learn Android series. Here I teach you the why’s of the programming world instead of just the how’s to help you understand the workings. I’ll share with you explanations and code snippets on how to implement the most important and basic things in Android.
In the previous articles, we learned a lot about the fundamentals, how to create layouts, make apps with multiple activities, and even how to add RecyclerViews and ListViews to display endless feeds. In this article, we’ll learn about adding components to improve the user experience and adding Visual Polish to the applications that we create.
Previous Article →
Why do we need to learn about Visual Polish? Because we as humans judge everything with our eyes first. That includes book covers before reading them, meals presentation before eating them, and more. Let’s dive right into how we can make our applications look better.
The first thing we can change to have an immediate effect on the user is the base color of the applications. The colors are defined in the colors.xml file in the “res →values” directory. We need to define 2 main colors for an application — primary and accent. Primary color is the base color of the app and the Accent color is used to call attention to important elements.
You can follow the link below to add Material colors suggested by Google.
To know more about color compatibility you can visit coolors.co
Many a times you’d have seen that there are activities which take up the full-screen of the phone. There is no visible space for either Toolbars or Status bars. This can be implemented by adding just 2 lines of code. Let’s see how it’s done.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Setting up the activity for full screen mode.
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
}
}Notice how we add the code before we call the function setContentView() to set the layout for the activity.
Next let’s see how to add a Toolbar which we can customize fully. First of all we’ll need to navigate to the styles.xml in the “res →values” directory. We’ll see that there is already a default style implemented. It’ll mostly be similar to this one —
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>But to implement our own Toolbar, we’ll need to remove the default one. To do this, we can simply change the parent theme to Theme.AppCompat.Light.NoActionBar. Or we can choose any theme which doesn’t have an Action Bar.
After changing the style, we’ll add the Toolbar widget as the topmost view in the activity. But we need to wrap the Toolbar in another view called the AppBarLayout. This is because it avoids Toolbar being overlapped by other views and also helps when we want to customize the toolbar further like making a Collapsing Toolbar. Let’s see how to add the toolbar to the layout XML —
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
</LinearLayout>If you are unable to add the AppBarLayout into the XML, you’ll need to add the design dependency to include the view, if the dependency isn’t present already.
Notice that we’ve used the “support.v7.widget.Toolbar” instead of the plain toolbar to add into the XML layout. Now we will set the toolbar as the action bar in the Java file. Let’s see how —
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Setting up the activity for full screen mode.
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
//Referencing the toolbar from it's XML view using the id.
toolbar = findViewById(R.id.toolbar_main);
//Setting the toolbar as the action bar.
setSupportActionBar(toolbar);
}
}Initially, we reference the view from the XML using it’s id. Then the function setSupportActionBar() is called which takes the Toolbar that we created and sets it as the ActionBar.
Now, we’ll look at how to add menus and actions to the toolbar. Menus are great at containing easily accessible information, but one which isn’t primary to the user. For example — Terms and Conditions, Feedback / Suggestion links, Developer help and contact, and more. Let’s see how to add Menus to an activity.
Firstly, we’ll add the Menu folder to the “res” directory —
Then we’ll add a menu resource file and then we can start adding items to the menu XML file.
I have named the file menu_main.xml and have added Terms and Feedback item to the menu. Let’s see how it looks —
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/terms_menu_item"
android:title="@string/terms_amp_conditions" />
<item
android:id="@+id/feedback_menu_item"
android:title="@string/feedback" />
</menu>For every item we must add the id and title. To show the item as an icon on the Toolbar we need to add the showAsAction attribute to the item. For example if we always need to show the Feedback item in the ActionBar as icon, we’ll add an icon to the item and set the showAsAction attribute to “always” —
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/terms_menu_item"
android:title="@string/terms_amp_conditions" />
<item
android:id="@+id/feedback_menu_item"
android:icon="@mipmap/ic_launcher"
android:title="@string/feedback"
app:showAsAction="always" />
</menu>There are more options for the showAsAction attribute and the names do tell us specifically what we want to achieve. So do play around with them to see how they work.
Now, we’ll add the menu to the activity from the activity Java file. We’ll need to override two methods — onCreateOptionsMenu() and onOptionsItemSelected(). Press “Ctrl + O” to reveal the methods that we can override and add them to the activity.
In the first method, we’ll inflate the menu layout that we just created. Then in the second method, we’ll use the id of the menu items to implement the required functionality when an item is pressed. Here’s how to do it —
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int itemId = item.getItemId();
switch (itemId) {
case R.id.feedback_menu_item:
//Operation to be performed when feedback clicked.
break;
case R.id.terms_menu_item:
//Operation to be performed when terms clicked.
break;
}
return true;
}We do not specifically need to attach the menu to the Toolbar because we already have set the Toolbar as the ActionBar and android will do this for us.
