Styling UI Screens FAQ - meswapnilwagh/android_guides GitHub Wiki

This is an FAQ that addresses common questions that arise when building UI screens. For inspiration, see the android app patterns site for screens you might try to build. There are several questions that come up commonly addressed below:

The recommended way to layout most screens is often by using the powerful RelativeLayout system. Note that you can also embed layouts within each other. LinearLayouts positioned within a root RelativeLayout can be a powerful way to achieve complex layouts as well.

You need to go to the XML Layout and check the root RelativeLayout and remove each of the android:padding properties that are set by default. After removing these properties from the root layout, that padding around the edges of your layout will disappear.

Simply assign the android:background property to any view or layout to change the background color or image. The android:background for any view can be either a color hex value #000040 or a drawable image @drawable/some_image.

<RelativeLayout
  android:background="@drawable/some_image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
</RelativeLayout>

Use padding around a layout to add extra content spacing. Remember that you can embed layouts within each other if needed to achieve the desired effect.

The opacity (transparency) of any view can be set in the XML Layout in two ways. First, the android:background property of any view supports alpha channels when specifying a color hex in the format of "#AARRGGBB" for example "#80a4113b" would set the alpha channel to 50% for the color "#a4113b". For other alpha values check out this values list:

<RelativeLayout
  android:background="#80a4113b"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
</RelativeLayout>

Alternatively, you can use the android:alpha property which must be a floating point from 0 to 1. Note though that alpha sets both the view and all of it's children to this opacity which is often not desired.

To align the position of your view itself in the layout, you need to use a different method based on the parent layout type. If the view is contained within a RelativeLayout, use the android:centerInParent property to center the view both horizontally and vertically or android:layout_centerHorizontal to set just one or the other.

If your view is contained within a LinearLayout, then you can use the android:layoutGravity to determine the alignment of the view.

To align the contents within a view, you can use the [[android:gravity property|Defining-Views-and-their-Attributes#view-gravity]]. This property can also be used to set the alignment of text in a TextView to the left, right, or center. Note that android:textAlignment is essentially useless replaced by gravity.

Simply wrap your views inside a PercentRelativeLayout or PercentFrameLayout and specify attributes with "Percent" suffix. Alternatively, you can also use [[android:layout_weight|Constructing-View-Layouts#linearlayout]] attribute if you are using a LinearLayout.

Tabs used to swap the content displayed on screen can be added to an Activity using a number of methods. The recommended method using a TabLayout involves splitting up the contents of each tab into a "Fragment" (modular piece of an activity) and then using a "ViewPager" which enables us to easily swap the contents of different fragments onto the screen.

If you simply want the image to be loaded in the easiest way possible then just copy and paste the image from your finder into the Android Studio res/drawable folder and select xxhdpi as the resolution.

Note that you need to make sure the image filename only contains lowercase letters, numbers and underscores (i.e my_image_file.png). After renaming the image to a valid resource name, copy the image into the drawable-mdpi folder as shown here. Unless you want the image to be a small standard icon size, do not use the icon generator (i.e New Image Asset) when creating the images.

Instead to generate resized images that work at all densities, check out this image guide which allows us to select our resources directory, choose an extra high density image and the tool will automatically generate the corresponding lower density image sizes.

See the Working with ImageView guide in particular the sizing section:

<ImageView
    android:maxHeight="150dp"
    android:maxWidth="150dp"
    android:scaleType="fitXY"
    android:adjustViewBounds="true"
    ...
/>

There are many different android:scaleType values which you can read about in this scale types guide.

You have probably noticed that there are multiple drawable folders (i.e drawable-hdpi, drawable-xhdpi) which allow us to provide multiple resolutions for different density screens. An easy guide for which sizes to create can be found in this ImageView guide.

In certain cases a button has an image background that needs to stretch to support different text content inside. In this case you could draw a 9-patch stretchable image. Check out the Button Custom Background Official Guide for specific details. You can also check out these nice looking 9-patch buttons.

For generating square icons at standard sizes, use this handy online resizer tool or the Android Studio New => Image Asset generator. Launcher icons are for the app icon displayed on the main screen. "Action Bar icons" can be used for anything displayed on the ActionBar. For any non-icon images, see below.

For generating arbitrary images at multiple densities, use the Final Android Resizer by downloading and running this JAR. Do not use the Android Studio Image Asset generator in this case.

Simply drag the image to the res/drawable-mdpi folder and then apply the image to any view by setting android:background="@drawable/my_image_name". See this stackoverflow post for more details.

Note that the aspect ratio cannot be changed when a drawable is applied as a background of a view. If you need more control of how the image is scaled, see this post using a FrameLayout. In short, if you want to control the scale or stretch type of an image, you must use an ImageView that is "match_parent" for both width and height of the parent container.

This probably means that the drawable image being used is a large resolution. The easiest fix is to simply re-copy the image as xxhdpi density when you copy and paste the image into Android Studio. Note that when adding an image you are prompted to select the density. If you select xxhdpi the image will likely be able to be loaded. In the event that you still see this error, resize the image to a maximum of 1776 x 1080px.

For this, we'd use a custom ToggleButton as described here which has a different image applied for the checked and unchecked states.

To display animated GIFs, we can't use Picasso. Instead, we can use the alternative image loading library called Glide from Bumptech.

Toast is a quick alert that can be displayed with:

Toast.makeText(MyActivity.this, "some message", Toast.LENGTH_SHORT).show();

Review the Displaying Toasts guide for more details on how to display a toast.

Any view can have a click handler setup by following this event handler guide which triggers an action when the click occurs.

For views that display text, if the view such as a button displays text in all caps and you want to disable that set the android:textAllCaps="false" property to change that behavior. This behavior is the default starting with API 21.

For EditText or other views that accept input, use the android:capitalize attribute to change the capitalization of text entered by the user.

First create your image icons with this generator or in Android Studio with New => Image Asset and then you can add the image to the left or right with drawableLeft or drawableRight:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:drawableLeft="@drawable/icon"
    android:drawablePadding="-20sp"
    android:text="blah blah blah" />

Note the use of padding to remove the extra spacing added to the text when the drawable is inserted. See the textview guide for more details.

The TextView has basic support for HTML text formatting:

TextView view = (TextView)findViewById(R.id.sampleText);
view.setText(Html.fromHtml("This <i>is</i> a <b>test</b>"));

and can even autolink URLs contained within the text:

<TextView
     android:id="@+id/custom_font"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:autoLink="all"
     android:linksClickable="true"
/>

Refer to the official TextView docs for other details.

Fonts can be customized fairly easily using this custom fonts guide. Be aware that custom fonts can cause performance issues if used too much.

The easiest way to change the bottom line indicator is to use this holo theme generator to change the color. Choose the desired color and select "YES" for EditText and then drag the generated resources into your 'res' folder. See this stackoverflow post for more details.

You can add a border to any view by creating a "drawable shape xml" and applying that as the android:background of the view. Create an XML file in res/drawable called shape_view_border.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#000000" />
</shape>

The stroke is the border properties and solid is the background color of the rest of the view. You can apply this border and background to any view with:

<EditText
    android:background="@drawable/shape_view_border"  
    ...
/>

See this stackoverflow post about setting borders for more details. If you want to have a border on just one edge of a view, this is unfortunately more difficult to do but can be achieved with layer lists as described in this post about borders on one edge.

You can remove the border from a Button or ImageButton by either setting android:background to "@null" or setting style to "android:attr/borderlessButtonStyle":

<Button
     ...
     style="?android:attr/borderlessButtonStyle"
     ...
/>

Using this code the border on the button will be removed.

Styling a button requires the use of either image assets (see the ImageButton) or alternatively applying the concept of custom drawables. For example, to style a button with drawables, you could create a shape at res/drawable/shape_fancy_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient android:startColor="#0078a5"  android:endColor="#00adee"  android:angle="90"/>
    <stroke android:width="1dp" android:color="#0076a3" />
    <corners android:radius="8dp" />
</shape>

This would create a button with a background gradient, 1dp border (stroke) and rounded corners. You could then apply this to the button with:

<Button
    android:background="@drawable/shape_fancy_button"  
    ...
/>

For readymade solutions, check out these nice looking pre-built buttons or this handy button generator.

Button states are created by using a "drawable" xml resource called a State List. The core is you define each state with it's own drawable by assigning the android:background property of the button as the state list. This involves creating an XML file within a res/drawable folder called states_my_image_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:drawable="@drawable/btn_pressed" 
        android:state_pressed="true"/> 

  <item android:drawable="@drawable/btn_normal" />
</selector>

and then setting this as the background of the ImageButton within the layout:

<Button
    android:background="@drawable/states_my_image_button"  
    ...
/>

Check out the Button Custom Background Official Guide for specific details.

You can use a color selector drawable stored in the res/color/states_button_color.xml:

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true" android:color="#000000" /> <!-- pressed -->
     <item android:color="#FFFFFF" /> <!-- default -->
 </selector>

and then applied to a button with:

<Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textColor="@color/states_button_color" />

See this stackoverflow post for more details.

Any view can be hidden by calling the setVisibility property and setting the Visibility flag:

// This view is invisible, but it still takes up space for layout purposes.
view.setVisibility(View.INVISIBLE);
// This view is invisible, and it doesn't take any space for layout purposes.
view.setVisibility(View.GONE);
// This view is visible and takes up space within the layout
view.setVisibility(View.VISIBLE);

You can use View.INVISIBLE to hide the element or View.GONE to collapse the element entirely.

We can use the new Palette system to easily color any text or backgrounds based on the color scheme of an image at runtime.

Rather than hardcoding units such as 10dp or 21sp into the XML layouts, we can use a dimens.xml file to declare our dimensions instead. In res/values/dimens.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="navigation_drawer_width">360dp</dimen>
</resources>

and then we can use these in our layout files with @dimen/activity_horizontal_margin such as:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:paddingLeft="@dimen/activity_horizontal_margin">
</RelativeLayout>

Using the powerful alternative resources feature, we can easily create alternate dimens.xml files for different device types.

dp are density-independent pixels and they correspond to pixels depending on the physical density. sp is a scale-independent pixel which is scaled when the Large Text option is turned on in the device's settings. In short: Use sp for Text sizes. Use dp for padding, heights, and everything else.

Customize the theme of the ActionBar in your app using the res/values/styles.xml as detailed in the Advanced ActionBar to adjust the color of the ActionBar. If your app is using the Toolbar instead, then customize that using the styling the Toolbar guide.

Customize the theme of the ActionBar in your app using the res/values/styles.xml as detailed in the Advanced ActionBar to adjust the color of the ActionBar. If your app is using the Toolbar instead, then customize that using the styling the Toolbar guide.

In the new Android 5.0 material design guidelines, the style guidelines have changed to discourage the use of the icon in the ActionBar. Although the icon can be added back with:

getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setLogo(R.drawable.ic_launcher);
getSupportActionBar().setDisplayUseLogoEnabled(true);

You can read more about this on the material design guidelines which state: "The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer."

ActionBar title can be styled or centered only if you opt to customize the XML view being inflated to display in the ActionBar. Instead of using the default ActionBar text you can specify your own to use instead that is styled as desired. Check out the Advanced ActionBar cliffnotes for details.

You can hide the top bar in any Activity by modifying the "theme" of an Activity in the AndroidManifest.xml such as:

<activity android:name=".Activity"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

You can also hide the ActionBar programmatically at runtime in Java with getSupportActionBar().hide() within the onCreate method after setContentView in an Activity.