android view stuff
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/1.jpg)
Android View Stuff
![Page 2: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/2.jpg)
TextViews
• Display text• Display images???
![Page 3: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/3.jpg)
TextView Drawables
• TextViews allow drawables to appear to the left of, above, to the right of, and below the text.
![Page 4: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/4.jpg)
<?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>
![Page 5: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/5.jpg)
setError()
• Method available to TextView and EditText to display an error message to the user.
• This is very useful for user input validation.
![Page 6: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/6.jpg)
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.
![Page 7: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/7.jpg)
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.
![Page 8: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/8.jpg)
ImageView Example <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher"/>
![Page 9: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/9.jpg)
ImageView Example with a background
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:background="#FFFF0000"/>
![Page 10: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/10.jpg)
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
![Page 11: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/11.jpg)
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.
![Page 12: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/12.jpg)
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.
![Page 13: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/13.jpg)
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.
![Page 14: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/14.jpg)
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.
![Page 15: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/15.jpg)
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.
![Page 16: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/16.jpg)
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.
![Page 17: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/17.jpg)
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.
![Page 18: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/18.jpg)
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.
![Page 19: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/19.jpg)
ImageView ScaleType Info
• http://www.peachpit.com/articles/article.aspx?p=1846580&seqNum=2
![Page 20: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/20.jpg)
Android:tint
• ImageView’s have an attribute that allows the source image of the view to be tinted by a color.
![Page 21: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/21.jpg)
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
![Page 22: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/22.jpg)
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
![Page 23: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/23.jpg)
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
![Page 24: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/24.jpg)
ShapeDrawables
• An XML file that defines a geometric shape, including colors and gradients. Creates a ShapeDrawable.
![Page 25: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/25.jpg)
<?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>
![Page 26: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/26.jpg)
ShapeDrawable Examples
![Page 27: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/27.jpg)
ShapeDrawable Examples
![Page 28: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/28.jpg)
What is a 9-Patch
• An Image that has the capability to specify stretchable regions.
![Page 29: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/29.jpg)
Use Case for 9-Patch
![Page 30: Android View Stuff](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815c45550346895dca4466/html5/thumbnails/30.jpg)
More Info on 9-Patch
• Android 9 Patch Tool• A Simple guide to 9-patch for Android UI