Android View Stuff

TextViews

• Display text• Display images???

TextView Drawables

• TextViews allow drawables to appear to the left of, above, to the right of, and below the text.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/ic_launcher" android:text="Drawable Left" android:layout_margin="10dp"/>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/ic_launcher" android:text="Drawable Top" android:layout_margin="10dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/ic_launcher" android:text="Drawable Right" android:layout_margin="10dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableBottom="@drawable/ic_launcher" android:text="Drawable Bottom" android:layout_margin="10dp"/></LinearLayout>

setError()

• Method available to TextView and EditText to display an error message to the user.

• This is very useful for user input validation.

ImageView

• Use this View when you want to display an image in your application.

• Many beginners will misuse the ImageView by using the incorrect property.

ImageView src property

• Use the android:src property to set a drawable as the content of the ImageView.

• Don’t use android:background unless you want the image to have a background img.

ImageView Example <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher"/>

ImageView Example with a background

<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:background="#FFFF0000"/>

ImageView scaleType

• Control how your image is scaled and positioned inside the ImageView– Useful when your image is too big– Useful when your image is too small

ImageView scaleType : centerScale Type Description

center Displays the image centered in the view with no scaling.

centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.

centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.

fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.

fitStart Same as fitCenter but aligned to the top left of the view.

fitEnd Same as fitCenter but aligned to the bottom right of the view.

fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.

matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

ImageView scaleType : centerCropScale Type Description

center Displays the image centered in the view with no scaling.

centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.

centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.

fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.

fitStart Same as fitCenter but aligned to the top left of the view.

fitEnd Same as fitCenter but aligned to the bottom right of the view.

fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.

matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

ImageView scaleType : centerInsideScale Type Description

center Displays the image centered in the view with no scaling.

centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.

centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.

fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.

fitStart Same as fitCenter but aligned to the top left of the view.

fitEnd Same as fitCenter but aligned to the bottom right of the view.

fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.

matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

ImageView scaleType : fitCenterScale Type Description

center Displays the image centered in the view with no scaling.

centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.

centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.

fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.

fitStart Same as fitCenter but aligned to the top left of the view.

fitEnd Same as fitCenter but aligned to the bottom right of the view.

fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.

matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

ImageView scaleType : fitStartScale Type Description

center Displays the image centered in the view with no scaling.

centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.

centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.

fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.

fitStart Same as fitCenter but aligned to the top left of the view.

fitEnd Same as fitCenter but aligned to the bottom right of the view.

fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.

matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

ImageView scaleType : fitEndScale Type Description

center Displays the image centered in the view with no scaling.

centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.

centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.

fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.

fitStart Same as fitCenter but aligned to the top left of the view.

fitEnd Same as fitCenter but aligned to the bottom right of the view.

fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.

matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

ImageView scaleType : fitXYScale Type Description

center Displays the image centered in the view with no scaling.

centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.

centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.

fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.

fitStart Same as fitCenter but aligned to the top left of the view.

fitEnd Same as fitCenter but aligned to the bottom right of the view.

fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.

matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

ImageView scaleType : matrixScale Type Description

center Displays the image centered in the view with no scaling.

centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.

centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.

fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.

fitStart Same as fitCenter but aligned to the top left of the view.

fitEnd Same as fitCenter but aligned to the bottom right of the view.

fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.

matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.

ImageView ScaleType Info

• http://www.peachpit.com/articles/article.aspx?p=1846580&seqNum=2

Android:tint

• ImageView’s have an attribute that allows the source image of the view to be tinted by a color.

ImageButton

• We’re familiar with a Button– Default background provided by the platform– Displays Text

• Well Android supports an ImageButton– Looks like a regular button– Default background provided by the platform– Displays an Image

Why Buttons are awesome

• Android provides a method for giving a button a state list that defines which images should be shown while the button is:– Normal– Focused– Enabled– Disabled– Pressed

Hiding the default background on an ImageButton

• If you want to use an ImageButton but don’t want to see the default background, you can hide it.– Set the android:background=“#00000000”– Set the android:background=“@android:color/transparent

ShapeDrawables

• An XML file that defines a geometric shape, including colors and gradients. Creates a ShapeDrawable.

<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape=["rectangle" | "oval" | "line" | "ring"] >    <corners        android:radius="integer"        android:topLeftRadius="integer"        android:topRightRadius="integer"        android:bottomLeftRadius="integer"        android:bottomRightRadius="integer" />    <gradient        android:angle="integer"        android:centerX="integer"        android:centerY="integer"        android:centerColor="integer"        android:endColor="color"        android:gradientRadius="integer"        android:startColor="color"        android:type=["linear" | "radial" | "sweep"]        android:useLevel=["true" | "false"] />    <padding        android:left="integer"        android:top="integer"        android:right="integer"        android:bottom="integer" />    <size        android:width="integer"        android:height="integer" />    <solid        android:color="color" />    <stroke        android:width="integer"        android:color="color"        android:dashWidth="integer"        android:dashGap="integer" /></shape>

ShapeDrawable Examples

ShapeDrawable Examples

What is a 9-Patch

• An Image that has the capability to specify stretchable regions.

Use Case for 9-Patch

More Info on 9-Patch

• Android 9 Patch Tool• A Simple guide to 9-patch for Android UI