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 : center
Scale 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 : centerCrop
Scale 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 : centerInside
Scale 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 : fitCenter
Scale 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 : fitStart
Scale 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 : fitEnd
Scale 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 : fitXY
Scale 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 : matrix
Scale 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