Home / Android / Creating adaptive, legacy, tab and action bar icons with Image Asset Studio

Creating adaptive, legacy, tab and action bar icons with Image Asset Studio

Designing a professional-looking UI is an very important a part of handing over a just right person enjoy.

Whilst there’s no scarcity of tips and recommendation on the best way to craft the very best UI, on this article we’ll be specializing in a space of person interface design that’s simple to disregard: your app’s icons.

We’ll be the use of Android Studio’s integrated Symbol Asset Studio to temporarily and simply create motion bar icons and tab icons, plus adaptive and legacy launcher icons, throughout all of the display configurations that your software helps.

While you’ve created those icons, you’ll wish to in reality use them, so alongside the way in which we’ll even be developing interactive motion bars and multi-tab person interfaces, able to show your new icons.

What icons do I want?

Despite the fact that we generally tend to make use of “app icons” as a generic time period, Android app icons may also be divided into 3 distinct classes:

  • Launcher icon. That is the icon that represents your app at the instrument’s homescreen, app drawer, Settings software, and in shortcuts and sharing dialogs. Launcher icons can both be adaptive (API stage 26 and better) or legacy (API stage 25 or previous). Relying to your app’s minSdkVersion, you might want to supply an adaptive and a legacy icon, or a legacy icon most effective.
  • Motion Bar icons. Through default, the motion bar shows your app’s identify and overflow menu, however it might probably additionally come with motion icons. Those icons constitute an important motion for the present context, for instance should you had been viewing a message within an SMS app, then the motion bar would possibly come with a “Answer” motion.
  • Tab Icons. Those constitute the tabs in a multi-tab interface.

Icon design made simple with Symbol Asset Studio

Growing a couple of app icons may also be time-consuming, however if in case you have Android three.zero or upper put in then you have already got get admission to to Symbol Asset Studio, a device that help you temporarily and simply generate all of the icons your software wishes.

Each and every time you create a launcher, motion or tab icon the use of Symbol Asset Studio, it routinely generates choice icons for all of the other pixel densities, and puts them in the proper density-specific folders, probably saving you a tonne of time. You’ll be able to even use the Symbol Asset Studio to generate a internet icon, able to make use of for your app’s Google Play checklist!

We’ll be the use of the Symbol Asset Studio right through this educational, so release it via settling on “Document > New > Symbol Asset” from the Android Studio toolbar, or via Keep watch over-clicking your challenge’s “res” folder and settling on “New > Symbol Asset.”

Growing an Motion Bar icon

Let’s get started via including an motion bar icon to our challenge:

  • If you happen to haven’t already, release the Symbol Asset Studio (“Document > New > Symbol Asset”).
  • Open the “Icon Sort” dropdown and choose “Motion Bar and Tab icons.”

creating adaptive legacy tab and action bar icons with image asset studio - Creating adaptive, legacy, tab and action bar icons with Image Asset Studio

  • Give your icon a reputation. In case your challenge already accommodates an icon with the similar title, then Symbol Asset Studio will provide you with a warning earlier than changing the unique useful resource.
  • Choose the kind of asset that you wish to have to make use of for your icon:
  1. Symbol. To make use of a picture that’s saved in the neighborhood, choose “Symbol,” then click on the little “…” button and make a selection a picture out of your onerous power.
  2. Clip Artwork. This launches a window the place you’ll be able to choose an icon from Google’s Subject material Design icon set.
  3. Textual content. You’ll be able to provide some textual content that Symbol Asset Studio will then convert right into a PNG record, able to make use of for your icon.

Relying on the kind of asset you choose, you’ll be able to then edit your asset the use of some, or all the following choices:

  • Trim. Gets rid of any clear area between the icon graphic and the icon border, whilst maintaining the facet ratio.
  • Padding. Adjusts the quantity of area round your icon.
  • Theme. Make a choice from “HOLO_LIGHT” or “HOLO_DARK,” or create your personal theme via settling on “CUSTOM.”

While you’re satisfied along with your icon, click on “Subsequent.” The next display shows the directories the place the other density-specific icons will probably be saved.

1537876631 847 creating adaptive legacy tab and action bar icons with image asset studio - Creating adaptive, legacy, tab and action bar icons with Image Asset Studio

Through default, icons are saved within the “major” listing, the place they may be able to be utilized by all construct variants, together with debug and free up builds. If you happen to’d choose to limit this icon to a particular construct variant, then open the “Res listing” dropdown and choose both “debug” or “free up.”

In the end, click on “End” and Symbol Asset Studio will generate your icons, and position them in the precise directories.

Getting extra out of the Motion Bar: Including icons

Subsequent, you wish to have to show the icon as a part of your app’s motion bar, via making a menu useful resource record after which including the icon as an <merchandise> component.

In case your challenge doesn’t already include a “res/menu” listing and a menu.xml record, then you definately’ll want to create them:

  • Keep watch over-click your challenge’s “res” folder and choose “New > Android useful resource listing.”
  • Within the “Listing title” box, input “menu.”
  • Open the “Useful resource kind” dropdown, and choose “menu.”
  • Click on “OK.”
  • Keep watch over-click your challenge’s “menu” folder and choose “New > Menu useful resource record.”
  • Input the filename “menu” after which click on “OK.”

Within the menu.xml record, create an <merchandise> component for every motion bar icon, for instance:

<?xml model="1.zero" encoding="utf-Eight"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <merchandise
       android:identity="@+identity/my_action"
       android:icon="@drawable/ic_my_action"
       android:identify="My motion"
       app:showAsAction="ifRoom"/>
</menu>

The app:showAsAction characteristic specifies whether or not this icon must be displayed within the motion bar, or the overflow menu:

  • app:showAsAction=”ifRoom.” The icon is displayed within the motion bar, anywhere conceivable. If the motion bar is complete, then the icon will probably be moved to the overflow menu.
  • app:showAsAction=”by no means.” The icon is displayed within the overflow menu most effective.

Each and every time the person interacts with an motion bar icon, the device will name your Job’s onOptionsItemSelected() callback manner. You’ll want to decide which icon has been clicked, via calling MenuItem.getItemId() within your onOptionsItemSelected() implementation, after which mentioning the motion that are supposed to be carried out. As an example, right here I’m exhibiting a toast every time the person interacts with the “my_action” icon:

import android.enhance.v7.app.AppCompatActivity;
import android.os.Package deal;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public magnificence MainActivity extends AppCompatActivity 

Run this app on a bodily Android instrument or Android Digital Software (AVD), and provides the motion bar icon a faucet – it must reply via exhibiting a toast.

1537876632 18 creating adaptive legacy tab and action bar icons with image asset studio - Creating adaptive, legacy, tab and action bar icons with Image Asset Studio

Showing icons in a mutli-tab UI

You upload a tab icon on your challenge, in precisely the similar manner you upload an motion bar icon, so open the Symbol Asset Studio, choose “Motion Bar and Tab icon” from the dropdown menu, after which create your icon as customary. On this segment, I’m operating with two tab icons, “ic_messages” and “ic_contacts.”

While you’ve created a number of tab icons, you’ll want to create some tabs. There’s a number of tactics to put in force tabs, however I’m going to create a TabLayout element after which upload every tab declaratively, as an TabItem component. Notice that TabItems are simply dummy Perspectives that mean you can set every tab’s textual content, icon and structure – you’ll nonetheless want to outline the true content material for every tab.

I’m additionally enforcing a ViewPager, so the person can swipe left and all through the tabs.

   <android.enhance.design.widget.TabLayout
        android:identity="@+identity/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.enhance.design.widget.TabItem
            android:identity="@+identity/tabMessages"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

//The drawable that you wish to have to make use of as this tab’s icon//

            android:icon="@drawable/ic_messages"/>

        <android.enhance.design.widget.TabItem
            android:identity="@+identity/tabContacts"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

//The drawable that you wish to have to make use of as this tab’s icon//

            android:icon="@drawable/ic_contacts" />

   </android.enhance.design.widget.TabLayout>

   <android.enhance.v4.view.ViewPager
        android:identity="@+identity/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Then you outline every tab’s content material in a separate XML record, for instance right here’s the content material of my “fragment_contacts.xml” tab:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|center_horizontal"
    android:textual content="Contacts"
    android:textSize="40sp" />

</FrameLayout>

Subsequent, you wish to have to inflate the structure for every tab fragment. Right here’s my corresponding ContactsFragment.java record:

import android.os.Package deal;
import android.enhance.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public magnificence ContactsFragment extends Fragment 

Rinse and repeat for each tab, for instance I’ve additionally created MessagesFragment.java and fragment_messages.xml information.

Since we’re the use of a ViewPager, we want to create a brand new magnificence that manages the fragments that’ll be displayed every time the person selects a brand new tab. This magnificence will have to put in force the getItem() manner, which will probably be referred to as each time a brand new fragment is asked. This technique makes use of a transfer observation to spot and go back the precise fragment example.

import android.enhance.v4.app.Fragment;
import android.enhance.v4.app.FragmentManager;
import android.enhance.v4.app.FragmentPagerAdapter;

public magnificence PageAdapter extends FragmentPagerAdapter 

In the end, open your MainActivity.java record and use the TabLayout.OnTabSelectedListener technique to discover when the person selects a brand new tab.

import android.enhance.v7.app.AppCompatActivity;
import android.os.Package deal;
import android.view.Menu;
import android.view.MenuItem;
import android.enhance.v4.view.ViewPager;
import android.widget.Toast;

import android.enhance.design.widget.TabItem;
import android.enhance.design.widget.TabLayout;

public magnificence MainActivity extends AppCompatActivity {

    ViewPager viewPager;
    PageAdapter pageAdapter;
    TabLayout tabLayout;
    TabItem tabContacts;
    TabItem tabMessages;

    @Override
    safe void onCreate(Package deal savedInstanceState) 

This provides us a UI consisting of a “Messages” tab, and a “Contacts” tab.

1537876633 214 creating adaptive legacy tab and action bar icons with image asset studio - Creating adaptive, legacy, tab and action bar icons with Image Asset Studio

You’ll in finding your complete code for this challenge, over at GitHub.

Android Oreo and better: Growing Adaptive icons

In Android Eight.zero and better, instrument OEMs (Authentic Apparatus Producers) may give mask, which the Android device then makes use of to render all adaptive launcher icons with the similar form, for instance an icon would possibly seem round on one instrument, and oblong on any other.

Adaptive launcher icons encompass a background and a foreground layer, which you will have to supply as drawables sized at 108 x 108 dp, with out mask or background shadows. Those layers are then minimize into form via the launcher, the use of the masks equipped via the OEM.

1537876633 389 creating adaptive legacy tab and action bar icons with image asset studio - Creating adaptive, legacy, tab and action bar icons with Image Asset Studio

In case your app helps Android Oreo or upper, then you definately’ll want to supply an adaptive launcher icon to verify your app is visually in step with the remainder of the person’s instrument. Whilst it’s just right on your software to stand proud of the gang, you don’t need it getting spotted for all of the fallacious causes!

In case your app’s minsdkversion is Nougat or previous, then you definately’ll additionally want to supply a legacy launcher icon, which will probably be used on gadgets operating previous variations of Android.

You’ll be able to create an adaptive and a legacy icon on the similar time, the use of the Symbol Asset Studio:

  • In Symbol Asset Studio, open the “Icon kind” dropdown and choose “Launcher Icons (Adaptive & Legacy).”
  • Give your icon a reputation.
  • Choose the “Foreground Layer” tab.
  • Make a selection the kind of asset that you wish to have to make use of as your icon’s foreground layer: Symbol, Clip Artwork, or Textual content.

While you’ve selected an asset kind, you’ll be able to tweak that asset the use of acquainted settings equivalent to Trim, in addition to some further choices:

  • Layer title. Give this deposit a novel title.
  • Colour. If you happen to’re the use of Clip Artwork, then this may occasionally exchange the colour of the icon; should you’re the use of textual content, then it’ll exchange the colour of the textual content.
  • Resize. Exchange the dimensions of your icon, starting from the minimal zero%, to the utmost 400%.

Rinse and repeat, to create your icon’s background layer:

  • Choose the “Background Layer” tab.
  • Assign the layer a novel title.
  • Make a selection an Symbol, Clip Artwork, or Textual content asset.
  • Edit your asset, as required.

In the end, choose the “Legacy” tab and specify that you wish to have to create a legacy icon. You’ll be able to supply this icon within the following shapes: None (a sq. with sharp corners) Circle, Sq. (a sq. with rounded corners), a Vertical rectangle or a Horizontal rectangle.

While you’re satisfied along with your icon:

  • Click on “Subsequent.”
  • Specify whether or not you wish to have to make use of this icon on your major, debug or free up builds.
  • Click on “End.”

If you happen to’re excited by how the background and foreground layers come in combination to create an adaptive icon, then open your challenge’s res/mipmap-anydpi folder; it must include a brand new XML record that’s chargeable for combining those layers.

<?xml model="1.zero" encoding="utf-Eight"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
   <background android:drawable="@drawable/ic_launcher_background" />
   <foreground android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>

To make use of this adaptive launcher icon, open your AndroidManifest.xml record, in finding the android:Icon characteristic and ensure android:icon is referencing the “mipmap” record that Symbol Asset Studio has simply created.

<software
   android:allowBackup="true"

//Replace android:Icon//

  android:icon="@mipmap/my_launcher"

...
...
...

Simplest supporting previous variations of Android?

In case your app most effective helps Android 7.1 (API stage 25) and previous, then you definately simply want to supply a legacy icon, which is composed of a unmarried layer.

  • Open the “Icon Sort” dropdown, and choose “Launcher icons (legacy most effective).”
  • Give your icon a reputation.
  • Make a selection the asset that you wish to have to make use of: Symbol, Clip Artwork, or Textual content.

Relying to your selected asset, you’ll be able to then edit your icon the use of some, or all the following:

  • Trim. Take away the clear areas round your icon.
  • Padding. Regulate the quantity of padding round your icon.
  • Colour. Exchange the foreground or background colour.
  • Scaling. Make a choice from “Shrink to Are compatible” and “Crop.” Relying at the asset you’ve chosen, cropping might take away one of the crucial icon’s content material.
  • Form. Upload a backdrop on your supply asset, via settling on Circle, Sq., Vertical, or Horizontal. Then again, you’ll be able to take away the backdrop via settling on “None.”
  • Impact. If you happen to’ve chosen Sq., Vertical, or Horizontal, then you’ll be able to upload a “dog-eared” impact, as proven within the following screenshot.

1537876633 727 creating adaptive legacy tab and action bar icons with image asset studio - Creating adaptive, legacy, tab and action bar icons with Image Asset Studio

Wrapping up

On this article, we checked out how you’ll be able to use Symbol Asset Studio to temporarily and simply create quite a lot of icons on your Android apps, and the best way to use the ones icons, via developing tabs and interactive motion bars.

Do you might have any pointers for developing efficient Android app icons? Tell us within the feedback underneath!

fbq('init', '539715236194816'); fbq('track', "PageView");

Check Also

1526817172 android app bundles what are they and how to create them - Android App Bundles: What are they and how to create them

Android App Bundles: What are they and how to create them

At Google I/O 2018, the hunt large offered Android App Bundles, a brand new report …

Leave a Reply

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

%d bloggers like this: