Styling UI Screens FAQ

Overview

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:

Layouts

How do I properly layout a complex screen with many views?

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.

How do I get rid of the padding around the edges of the activity?

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.

How do I set an entire region to have a particular background color or image?

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.

How do I set the opacity of a layout or view?

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.

How do I align the position of my view or its inner contents?

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.

Images

How do I load images into an Android app for display?

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 images that work at all densities, download and run this JAR 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.

How do I control the way images are displayed or scaled within an ImageView?

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.

How would I create images that look good at any resolution?

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.

Also, there are cases where a button has an image background that needs to stretch to support different text content. In this case you might need to draw a 9-patch stretchable button. Check out the Button Custom Background Official Guide for specific details. You can also check out these nice looking 9-patch buttons for use too.

How do I add a background image to a view?

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. If you need more control of how the image is scaled, see this post using a FrameLayout.

My image isn't loading and I am seeing a memory error instead in the logs

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.

How would I create a toggle button that alternates between two images?

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

How do I remove the grey border from an ImageButton?

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

<ImageButton
     ...
     style="?android:attr/borderlessButtonStyle"
     android:src="@drawable/image_button_graphic" />

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

Views

How do I support text with rich formatting (bold words, links) in a TextView?

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.

How do I support different fonts in my app?

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

How do I change the color of the bottom line indicator for a text field?

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.

How do I customize the border or outline of a text field or another view?

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.

How do I customize the style of a button?

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.

How do I control the pressed state of the button?

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.

How would I toggle the text color of a button or view in different states?

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.

ActionBar

How do I change the background color of the ActionBar?

Customize the theme of the ActionBar in the styles.xml as explained in the Advanced Actionbar to adjust the color of the ActionBar. Also, check out this stackoverflow post for more details.

How do I style the title in the ActionBar?

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. This related stackoverflow post also explains the steps in detail.

How do I style tabs in the ActionBar?

Easiest way is to use the ActionBar Style Generator to customize the appearance. Check out this ActionBar Tabs guide for more details.

How would I hide the top ActionBar?

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

<activity android:name=".Activity"
    android:label="@string/app_name"
    android:theme="@android: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.