1 / 30

Android Views: Display Text and Images Tutorial

Learn how to display text and images in Android using TextViews and ImageViews. Understand how to customize TextViews with drawables and set images with scale types. Dive into ImageView properties and ShapeDrawables. Explore the use of tint in ImageViews and the capabilities of ImageButtons. Discover how to hide default backgrounds and create ShapeDrawables in Android.

kirby
Télécharger la présentation

Android Views: Display Text and Images Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Android View Stuff

  2. TextViews • Display text • Display images???

  3. TextViewDrawables • TextViewsallow drawables to appear to the left of, above, to the right of, and below the text.

  4. <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/ic_launcher" android:text="Drawable Left" android:layout_margin="10dp"/> <TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/ic_launcher" android:text="Drawable Top" android:layout_margin="10dp"/> <TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/ic_launcher" android:text="Drawable Right" android:layout_margin="10dp"/> <TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableBottom="@drawable/ic_launcher" android:text="Drawable Bottom" android:layout_margin="10dp"/> </LinearLayout>

  5. setError() • Method available to TextView and EditText to display an error message to the user. • This is very useful for user input validation.

  6. 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.

  7. ImageViewsrc 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.

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

  9. ImageView Example with a background <ImageViewandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:background="#FFFF0000"/>

  10. ImageViewscaleType • 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

  11. ImageViewscaleType : center

  12. ImageViewscaleType : centerCrop

  13. ImageViewscaleType : centerInside

  14. ImageViewscaleType : fitCenter

  15. ImageViewscaleType : fitStart

  16. ImageViewscaleType : fitEnd

  17. ImageViewscaleType : fitXY

  18. ImageViewscaleType : matrix

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

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

  21. 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

  22. 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

  23. 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

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

  25. <?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape=["rectangle" | "oval" | "line" | "ring"] ><cornersandroid:radius="integer"android:topLeftRadius="integer"android:topRightRadius="integer"android:bottomLeftRadius="integer"android:bottomRightRadius="integer"/><gradientandroid: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"] /><paddingandroid:left="integer"android:top="integer"android:right="integer"android:bottom="integer"/><sizeandroid:width="integer"android:height="integer"/><solidandroid:color="color"/><strokeandroid:width="integer"android:color="color"android:dashWidth="integer"android:dashGap="integer"/></shape>

  26. ShapeDrawable Examples

  27. ShapeDrawable Examples

  28. What is a 9-Patch • An Image that has the capability to specify stretchable regions.

  29. Use Case for 9-Patch

  30. More Info on 9-Patch • Android 9 Patch Tool • A Simple guide to 9-patch for Android UI

More Related