android Layouts & Drawable Resources in hindi

Introduction to Android Layouts 

जैसा की मैने आपको पहले बताया जब भी आप views क्रिएट करते है तो वो उसी order में शो होते है जिसमे आपने उन्हें क्रिएट किया है एक के बाद दूसरा। कई बार ऐसा हो सकता है की आप किसी view को screen पर एक particular position पर place करना चाहते है। ऐसा आप android layouts की मदद से कर सकते है।  

Layouts यूजर इंटरफ़ेस के लिए structure प्रोवाइड करते है उस structure के according आप अपने elements स्क्रीन पर मैनेज कर सकते है। Android system कई तरह के layouts provide करता है। आपकी एप्लीकेशन के लिए जो layout आपको ठीक लगे आप उसे यूज़ कर सकते है। https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5239991314032243&output=html&h=280&slotname=4443653915&adk=2329325985&adf=3675991051&pi=t.ma~as.4443653915&w=725&fwrn=4&fwrnh=100&lmt=1649820167&rafmt=1&psa=1&format=725×280&url=https%3A%2F%2Fjavahindi.com%2F2021%2F05%2F26%2Fandroid-layouts-in-hindi%2F&fwr=0&fwrattr=true&rpe=1&resp_fmts=3&wgl=1&uach=WyJXaW5kb3dzIiwiMi4wLjAiLCJ4ODYiLCIiLCIxMDAuMC40ODk2Ljc1IixbXSxudWxsLG51bGwsIjY0IixbWyIgTm90IEE7QnJhbmQiLCI5OS4wLjAuMCJdLFsiQ2hyb21pdW0iLCIxMDAuMC40ODk2Ljc1Il0sWyJHb29nbGUgQ2hyb21lIiwiMTAwLjAuNDg5Ni43NSJdXSxmYWxzZV0.&tt_state=W3siaXNzdWVyT3JpZ2luIjoiaHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbSIsInN0YXRlIjoyOSwiaGFzUmVkZW1wdGlvblJlY29yZCI6dHJ1ZX1d&dt=1649820155449&bpp=15&bdt=2047&idt=1038&shv=r20220406&mjsv=m202204040101&ptt=9&saldr=aa&abxe=1&cookie=ID%3Dd13468a9c3377232-22ab5570eed100d8%3AT%3D1649840168%3ART%3D1649840168%3AS%3DALNI_MatDI3dIupxtx8kE8OPE81lZKDhRA&prev_fmts=0x0%2C1349x635%2C725x280&nras=2&correlator=7000724474451&frm=20&pv=1&ga_vid=1058618757.1649817694&ga_sid=1649820156&ga_hid=1498993617&ga_fc=1&u_tz=-420&u_his=1&u_h=768&u_w=1366&u_ah=738&u_aw=1366&u_cd=24&u_sd=1&dmc=4&adx=165&ady=1707&biw=1349&bih=635&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759842%2C31061829%2C21067496%2C31062931&oid=2&pvsid=827520806363129&pem=880&tmod=1858317599&uas=0&nvt=1&ref=https%3A%2F%2Fwww.google.com%2F&eae=0&fc=1920&brdim=0%2C0%2C0%2C0%2C1366%2C0%2C1366%2C738%2C1366%2C635&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=3&uci=a!3&btvi=2&fsb=1&xpc=zlYatsCQAa&p=https%3A//javahindi.com&dtd=11991

Android में layouts आप 2 तरह से define कर सकते है या तो आप एक XML फाइल के द्वारा ऐसा कर सकते है या run time  में view और view groups के objects क्रिएट करके ऐसा कर सकते है।   

आप जो चाहे वो तरीका अपना सकते है या आप दोनों तरीके भी अपना सकते है। आप चाहे तो XML के द्वारा क्रिएट किये हुए layouts को run time में चेंज भी कर सकते है। यदि आप layouts XML फाइल के द्वारा डिक्लेअर करते है तो आप अपनी एप्लीकेशन के view को और एप्लीकेशन के behavior को अलग अलग control कर सकते है।

Attributes of Android Layouts

नीचे कुछ common attributes दिए जा रहे है जो सभी views के साथ यूज़ होते है
android:id – इस attribute के द्वारा आप view की id define करते है जो view को uniquely identify करने के काम आती है।

android:layout_width – इस attribute के द्वारा आप view की screen पर width define करते है।

android:layout_height –  इस attribute के द्वारा आप view की स्क्रीन पर height define करते है।

Types of Android Layouts

Linear layout

Linear layout एक ऐसा layout है जिसमे सारे elements एक ही direction में होते है या तो vertical या horizontal. आप layout का direction android:orientation attribute के द्वारा define कर सकते है।

यदि layout का direction vertical है तो एक column में एक ही एलिमेंट आएगा। और यदि layout का direction horizontal है तो एक row में एक ही element आएगा।


यदि आप चाहे तो किसी एक particular element को priority वैल्यू भी दे सकते है। इसे layout weight कहते है।  ऐसा आप android:layout_weight attribute डिफाइन करके कर सकते है।  जिस element का जितना weight होता है वो उतना ही space screen पर cover करता है।

यदि किसी element का weight बाकि elements से अधिक है तो सभी elements के set होने के बाद जो remaining space होगा वो element cover करेगा।

Linear layout क्रिएट करने के लिए आपको XML file में <LinearLayout> element declare करना होगा। इस element के android:layout_width, android:layout_height और android:orientation 3 attributes होते है। इन तीनो attributes के लिए values provide करके आप layout को set कर सकते है।

  <LinearLayout xmlns:android="android schema address"  
android:layout_width="width of layout"
android:layout_height="height of layout"

android:orientation="layout orientation">
<Button
android:layout_width="width of button"
android:layout_height="height of button"
android:text="name of button" /> 
<Button
android:layout_width="width of button"
android:layout_height="height of button"
android:text="name of button" /> 
</LinearLayout>

Relative Layout

Relative layout view elements को relative positions पर display करता है। हर view को आप दूसरे elements के relation में position कर सकते है। किसी भी नए view की position आप existing view के relation में define करते है। जैसे की आप existing element के right में नए element को set करना चाहते है या left में। इस प्रकार आप किसी भी element को screen पर कँही भी place कर सकते है।

Relative layout views को position करने के लिए कुछ attributes provide करता है, जिनके द्वारा आप अपने view को position कर सकते है। आइये इन attributes के बारे में जानने का प्रयास करते है –

android:layout_alignParentTop

यदि किसी view element में इस attribute की value true है तो वो view आप की स्क्रीन में सबसे top पर show होगा।

android:layout_centralVertical   

यदि किसी view element में इस attribute की वैल्यू true है तो वो view आप की स्क्रीन में vertically center में show होगा।

android:layout_below

ये attribute आपके view element को उस view के नीचे position करता है जो आपने resource id के द्वारा define किया है।

android:layout_toRightOf

ये attribute आपके view element को उस view element के right में place करता है जो आपने resource id के द्वारा define किया है।

यँहा पर ये कुछ उदाहरण दिए गए है ये attributes बहुत सारे है। आप जो चाहे अपनी आवश्यकता के अनुसार इस्तेमाल कर सकते है।

  <RelativeLayout xmlns:android="android schema address"  
android:layout_width="width of layout"
android:layout_height="height of layout"
android:paddingLeft="in dp"
android:paddingRight="in dp">

<Button
android:layout_width="width of button"
android:layout_height="height of button"
android:layout_below="id of other view element"
andorid:text="name of button" /> 
<Button
android:layout_width="width of button"
android:layout_height="height of button"
android:layout_centralVertical="id of other view element"
android:text="name of button" /> 
</RelativeLayout>

ListView

https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5239991314032243&output=html&h=280&slotname=4443653915&adk=2329325985&adf=3177732490&pi=t.ma~as.4443653915&w=725&fwrn=4&fwrnh=100&lmt=1649820187&rafmt=1&psa=1&format=725×280&url=https%3A%2F%2Fjavahindi.com%2F2021%2F05%2F26%2Fandroid-layouts-in-hindi%2F&fwr=0&fwrattr=true&rpe=1&resp_fmts=3&wgl=1&uach=WyJXaW5kb3dzIiwiMi4wLjAiLCJ4ODYiLCIiLCIxMDAuMC40ODk2Ljc1IixbXSxudWxsLG51bGwsIjY0IixbWyIgTm90IEE7QnJhbmQiLCI5OS4wLjAuMCJdLFsiQ2hyb21pdW0iLCIxMDAuMC40ODk2Ljc1Il0sWyJHb29nbGUgQ2hyb21lIiwiMTAwLjAuNDg5Ni43NSJdXSxmYWxzZV0.&tt_state=W3siaXNzdWVyT3JpZ2luIjoiaHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbSIsInN0YXRlIjoyOSwiaGFzUmVkZW1wdGlvblJlY29yZCI6dHJ1ZX1d&dt=1649820155502&bpp=4&bdt=2101&idt=995&shv=r20220406&mjsv=m202204040101&ptt=9&saldr=aa&abxe=1&cookie=ID%3Dd13468a9c3377232-22ab5570eed100d8%3AT%3D1649840168%3ART%3D1649840168%3AS%3DALNI_MatDI3dIupxtx8kE8OPE81lZKDhRA&prev_fmts=0x0%2C1349x635%2C725x280%2C725x280%2C195x600%2C195x240%2C195x240&nras=5&correlator=7000724474451&frm=20&pv=1&ga_vid=1058618757.1649817694&ga_sid=1649820156&ga_hid=1498993617&ga_fc=1&u_tz=-420&u_his=1&u_h=768&u_w=1366&u_ah=738&u_aw=1366&u_cd=24&u_sd=1&dmc=4&adx=165&ady=5253&biw=1349&bih=635&scr_x=0&scr_y=2732&eid=44759875%2C44759926%2C44759842%2C31061829%2C21067496%2C31062931&oid=2&psts=AGkb-H_iANaidqCbecBi2coY9nxwoYmHLS9VeahWlz_Wpv9E03llRq_Rdzj2WMtKKtbYICWMy5WBHJb4dYpidWt4KA%2CAGkb-H_4f8Qhvs9SS9VooAJVjZiPmpnh0I4O2eAgbVK16an5K-R6ATak_QnzOW7fP7JYkunUcO_5TNQuoLFumLp7uA%2CAGkb-H_-zbliZRpos9thGXrtQCXtobi9gCJb5rOPYe61O6qeblHX6MoIYHVr0Gt31u6hiakoBFjoOKiFRIuZHpDAUQ%2CAGkb-H-i424EdrVbuYd9IeB6r_ZrT4yUnnyr3DTPN8imTuQKcH22vaDE4LwmuVjmOQUxzRqxoAsywlkJOXol44XVwQ&pvsid=827520806363129&pem=880&tmod=1858317599&uas=1&nvt=1&ref=https%3A%2F%2Fwww.google.com%2F&eae=0&fc=1920&brdim=0%2C0%2C0%2C0%2C1366%2C0%2C1366%2C738%2C1366%2C635&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=4&uci=a!4&btvi=6&fsb=1&xpc=J7BJsuPkNP&p=https%3A//javahindi.com&dtd=32384

ListView एक view group होता है जो items की list show करता है जिन्हे आप scroll कर सकते है। ये layout run time में सभी views को मैनेज कर सकता है। इस layout में एक ही column होता है और row बहुत सी होती है। यानी आप एक row में एक ही view position कर सकते है।

Run time में आप adapter के द्वारा किसी array या database से item को pull करते है वो adapter उस item को view convert करके list के आखिर में add कर देता है।

GridView

GridView एक view group होता है तो items को two dimensional grid में शो करता है। इस grid को आप scroll कर सकते है। इस layout में items rows और columns की form में show होते है।  GridView में items run time पर automatically insert हो जाते है।

Drawable resources

A drawable resource is a general concept for a graphic that can be drawn to the screen and which you can retrieve with APIs such as getDrawable(int) or apply to another XML resource with attributes such as android:drawable and android:icon. There are several different types of drawables:Bitmap FileA bitmap graphic file (.png.webp.jpg, or .gif). Creates a BitmapDrawable.Nine-Patch FileA PNG file with stretchable regions to allow image resizing based on content (.9.png). Creates a NinePatchDrawable.Layer ListA Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index is be drawn on top. Creates a LayerDrawable.State ListAn XML file that references different bitmap graphics for different states (for example, to use a different image when a button is pressed). Creates a StateListDrawable.Level ListAn XML file that defines a drawable that manages a number of alternate Drawables, each assigned a maximum numerical value. Creates a LevelListDrawable.Transition DrawableAn XML file that defines a drawable that can cross-fade between two drawable resources. Creates a TransitionDrawable.Inset DrawableAn XML file that defines a drawable that insets another drawable by a specified distance. This is useful when a View needs a background drawable that is smaller than the View’s actual bounds.Clip DrawableAn XML file that defines a drawable that clips another Drawable based on this Drawable’s current level value. Creates a ClipDrawable.Scale DrawableAn XML file that defines a drawable that changes the size of another Drawable based on its current level value. Creates a ScaleDrawableShape DrawableAn XML file that defines a geometric shape, including colors and gradients. Creates a GradientDrawable.

Also see the Animation Resource document for how to create an AnimationDrawable.

Note: A color resource can also be used as a drawable in XML. For example, when creating a state list drawable, you can reference a color resource for the android:drawable attribute (android:drawable="@color/green").

Bitmap

A bitmap image. Android supports bitmap files in the following formats: .png (preferred), ,webp (preferred, requires API level 17 or higher), .jpg (acceptable), .gif (discouraged).

You can reference a bitmap file directly, using the filename as the resource ID, or create an alias resource ID in XML.

Note: Bitmap files may be automatically optimized with lossless image compression by the aapt tool during the build process. For example, a true-color PNG that does not require more than 256 colors may be converted to an 8-bit PNG with a color palette. This will result in an image of equal quality but which requires less memory. So be aware that the image binaries placed in this directory can change during the build. If you plan on reading an image as a bit stream in order to convert it to a bitmap, put your images in the res/raw/ folder instead, where they will not be optimized.

Bitmap file

A bitmap file is a .png.webp.jpg, or .gif file. Android creates a Drawable resource for any of these files when you save them in the res/drawable/ directory.file location:res/drawable/filename.png (.png.webp.jpg, or .gif)
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a BitmapDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenameexample:With an image saved at res/drawable/myimage.png, this layout XML applies the image to a View:

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

The following application code retrieves the image as a Drawable:KotlinJava

val drawable: Drawable? = ResourcesCompat.getDrawable(resources, R.drawable.myimage, null)

see also:

XML bitmap

An XML bitmap is a resource defined in XML that points to a bitmap file. The effect is an alias for a raw bitmap file. The XML can specify additional properties for the bitmap such as dithering and tiling.

Note: You can use a <bitmap> element as a child of an <item> element. For example, when creating a state list or layer list, you can exclude the android:drawable attribute from an <item> element and nest a <bitmap> inside it that defines the drawable item.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a BitmapDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:antialias=["true" | "false"]
    android:dither=["true" | "false"]
    android:filter=["true" | "false"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                      "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                      "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:mipMap=["true" | "false"]
    android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

elements:<bitmap>Defines the bitmap source and its properties.

attributes:xmlns:androidString. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android". This is required only if the <bitmap> is the root element—it is not needed when the <bitmap> is nested inside an <item>.android:srcDrawable resourceRequired. Reference to a drawable resource.android:antialiasBoolean. Enables or disables antialiasing.android:ditherBoolean. Enables or disables dithering of the bitmap if the bitmap does not have the same pixel configuration as the screen (for instance: a ARGB 8888 bitmap with an RGB 565 screen).android:filterBoolean. Enables or disables bitmap filtering. Filtering is used when the bitmap is shrunk or stretched to smooth its apperance.android:gravityKeyword. Defines the gravity for the bitmap. The gravity indicates where to position the drawable in its container if the bitmap is smaller than the container.

Must be one or more (separated by ‘|’) of the following constant values:

ValueDescription
topPut the object at the top of its container, not changing its size.
bottomPut the object at the bottom of its container, not changing its size.
leftPut the object at the left edge of its container, not changing its size.
rightPut the object at the right edge of its container, not changing its size.
center_verticalPlace object in the vertical center of its container, not changing its size.
fill_verticalGrow the vertical size of the object if needed so it completely fills its container.
center_horizontalPlace object in the horizontal center of its container, not changing its size.
fill_horizontalGrow the horizontal size of the object if needed so it completely fills its container.
centerPlace the object in the center of its container in both the vertical and horizontal axis, not changing its size.
fillGrow the horizontal and vertical size of the object if needed so it completely fills its container. This is the default.
clip_verticalAdditional option that can be set to have the top and/or bottom edges of the child clipped to its container’s bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges.
clip_horizontalAdditional option that can be set to have the left and/or right edges of the child clipped to its container’s bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges.

android:mipMapBoolean. Enables or disables the mipmap hint. See setHasMipMap() for more information. Default value is false.android:tileModeKeyword. Defines the tile mode. When the tile mode is enabled, the bitmap is repeated. Gravity is ignored when the tile mode is enabled.

Must be one of the following constant values:

ValueDescription
disabledDo not tile the bitmap. This is the default value.
clampReplicates the edge color if the shader draws outside of its original bounds
repeatRepeats the shader’s image horizontally and vertically.
mirrorRepeats the shader’s image horizontally and vertically, alternating mirror images so that adjacent images always seam.

example:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/icon"
    android:tileMode="repeat" />

see also:

Nine-Patch

NinePatch is a PNG image in which you can define stretchable regions that Android scales when content within the View exceeds the normal image bounds. You typically assign this type of image as the background of a View that has at least one dimension set to "wrap_content", and when the View grows to accommodate the content, the Nine-Patch image is also scaled to match the size of the View. An example use of a Nine-Patch image is the background used by Android’s standard Button widget, which must stretch to accommodate the text (or image) inside the button.

Same as with a normal bitmap, you can reference a Nine-Patch file directly or from a resource defined by XML.

For a complete discussion about how to create a Nine-Patch file with stretchable regions, see the 2D Graphics document.

Nine-patch file

file location:res/drawable/filename.9.png
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a NinePatchDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenameexample:With an image saved at res/drawable/myninepatch.9.png, this layout XML applies the Nine-Patch to a View:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/myninepatch" />

see also:

XML Nine-Patch

An XML Nine-Patch is a resource defined in XML that points to a Nine-Patch file. The XML can specify dithering for the image.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a NinePatchDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:dither=["true" | "false"] />

elements:<nine-patch>Defines the Nine-Patch source and its properties.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".android:srcDrawable resourceRequired. Reference to a Nine-Patch file.android:ditherBoolean. Enables or disables dithering of the bitmap if the bitmap does not have the same pixel configuration as the screen (for instance: a ARGB 8888 bitmap with an RGB 565 screen).example:

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/myninepatch"
    android:dither="false" />

Layer list

LayerDrawable is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.

Each drawable is represented by an <item> element inside a single <layer-list> element.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a LayerDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

elements:<layer-list>Required. This must be the root element. Contains one or more <item> elements.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".<item>Defines a drawable to place in the layer drawable, in a position defined by its attributes. Must be a child of a <layer-list> element. Accepts child <bitmap> elements.

attributes:android:drawableDrawable resourceRequired. Reference to a drawable resource.android:idResource ID. A unique resource ID for this drawable. To create a new resource ID for this item, use the form: "@+id/name". The plus symbol indicates that this should be created as a new ID. You can use this identifier to retrieve and modify the drawable with View.findViewById() or Activity.findViewById().android:topDimension. The top offset, as a dimension value or dimension resource.android:rightDimension. The right offset, as a dimension value or dimension resource.android:bottomDimension. The bottom offset, as a dimension value or dimension resource.android:leftDimension. The left offset, as a dimension value or dimension resource.

All drawable items are scaled to fit the size of the containing View, by default. Thus, placing your images in a layer list at different positions might increase the size of the View and some images scale as appropriate. To avoid scaling items in the list, use a <bitmap> element inside the <item> element to specify the drawable and define the gravity to something that does not scale, such as "center". For example, the following <item> defines an item that scales to fit its container View:

<item android:drawable="@drawable/image" />

To avoid scaling, the following example uses a <bitmap> element with centered gravity:

<item>
  <bitmap android:src="@drawable/image"
          android:gravity="center" />
</item>

example:XML file saved at res/drawable/layers.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

Notice that this example uses a nested <bitmap> element to define the drawable resource for each item with a “center” gravity. This ensures that none of the images are scaled to fit the size of the container, due to resizing caused by the offset images.

This layout XML applies the drawable to a View:

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

The result is a stack of increasingly offset images:see also:

State list

StateListDrawable is a drawable object defined in XML that uses a several different images to represent the same graphic, depending on the state of the object. For example, a Button widget can exist in one of several different states (pressed, focused, or neither) and, using a state list drawable, you can provide a different background image for each state.

You can describe the state list in an XML file. Each graphic is represented by an <item> element inside a single <selector> element. Each <item> uses various attributes to describe the state in which it should be used as the graphic for the drawable.

During each state change, the state list is traversed top to bottom and the first item that matches the current state is used—the selection is not based on the “best match,” but simply the first item that meets the minimum criteria of the state.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a StateListDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]
    android:dither=["true" | "false"]
    android:variablePadding=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_hovered=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_activated=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

elements:<selector>Required. This must be the root element. Contains one or more <item> elements.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".android:constantSizeBoolean. “true” if the drawable’s reported internal size remains constant as the state changes (the size is the maximum of all of the states); “false” if the size varies based on the current state. Default is false.android:ditherBoolean. “true” to enable dithering of the bitmap if the bitmap does not have the same pixel configuration as the screen (for instance, an ARGB 8888 bitmap with an RGB 565 screen); “false” to disable dithering. Default is true.android:variablePaddingBoolean. “true” if the drawable’s padding should change based on the current state that is selected; “false” if the padding should stay the same (based on the maximum padding of all the states). Enabling this feature requires that you deal with performing layout when the state changes, which is often not supported. Default is false.<item>Defines a drawable to use during certain states, as described by its attributes. Must be a child of a <selector> element.

attributes:android:drawableDrawable resourceRequired. Reference to a drawable resource.android:state_pressedBoolean. “true” if this item should be used when the object is pressed (such as when a button is touched/clicked); “false” if this item should be used in the default, non-pressed state.android:state_focusedBoolean. “true” if this item should be used when the object has input focus (such as when the user selects a text input); “false” if this item should be used in the default, non-focused state.android:state_hoveredBoolean. “true” if this item should be used when the object is being hovered by a cursor; “false” if this item should be used in the default, non-hovered state. Often, this drawable may be the same drawable used for the “focused” state.

Introduced in API level 14.android:state_selectedBoolean. “true” if this item should be used when the object is the current user selection when navigating with a directional control (such as when navigating through a list with a d-pad); “false” if this item should be used when the object is not selected.

The selected state is used when focus (android:state_focused) is not sufficient (such as when list view has focus and an item within it is selected with a d-pad).android:state_checkableBoolean. “true” if this item should be used when the object is checkable; “false” if this item should be used when the object is not checkable. (Only useful if the object can transition between a checkable and non-checkable widget.)android:state_checkedBoolean. “true” if this item should be used when the object is checked; “false” if it should be used when the object is un-checked.android:state_enabledBoolean. “true” if this item should be used when the object is enabled (capable of receiving touch/click events); “false” if it should be used when the object is disabled.android:state_activatedBoolean. “true” if this item should be used when the object is activated as the persistent selection (such as to “highlight” the previously selected list item in a persistent navigation view); “false” if it should be used when the object is not activated.

Introduced in API level 11.android:state_window_focusedBoolean. “true” if this item should be used when the application window has focus (the application is in the foreground), “false” if this item should be used when the application window does not have focus (for example, if the notification shade is pulled down or a dialog appears).

Note: Remember that Android applies the first item in the state list that matches the current state of the object. So, if the first item in the list contains none of the state attributes above, then it is applied every time, which is why your default value should always be last (as demonstrated in the following example).example:XML file saved at res/drawable/button.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

This layout XML applies the state list drawable to a Button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

see also:

Level list

A Drawable that manages a number of alternate Drawables, each assigned a maximum numerical value. Setting the level value of the drawable with setLevel() loads the drawable resource in the level list that has a android:maxLevel value greater than or equal to the value passed to the method.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a LevelListDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<level-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/drawable_resource"
        android:maxLevel="integer"
        android:minLevel="integer" />
</level-list>

elements:<level-list>This must be the root element. Contains one or more <item> elements.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".<item>Defines a drawable to use at a certain level.

attributes:android:drawableDrawable resourceRequired. Reference to a drawable resource to be inset.android:maxLevelInteger. The maximum level allowed for this item.android:minLevelInteger. The minimum level allowed for this item.example:

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/status_off"
        android:maxLevel="0" />
    <item
        android:drawable="@drawable/status_on"
        android:maxLevel="1" />
</level-list>

Once this is applied to a View, the level can be changed with setLevel() or setImageLevel().see also:

Transition drawable

TransitionDrawable is a drawable object that can cross-fade between the two drawable resources.

Each drawable is represented by an <item> element inside a single <transition> element. No more than two items are supported. To transition forward, call startTransition(). To transition backward, call reverseTransition().file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a TransitionDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</transition>

elements:<transition>Required. This must be the root element. Contains one or more <item> elements.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".<item>Defines a drawable to use as part of the drawable transition. Must be a child of a <transition> element. Accepts child <bitmap> elements.

attributes:android:drawableDrawable resourceRequired. Reference to a drawable resource.android:idResource ID. A unique resource ID for this drawable. To create a new resource ID for this item, use the form: "@+id/name". The plus symbol indicates that this should be created as a new ID. You can use this identifier to retrieve and modify the drawable with View.findViewById() or Activity.findViewById().android:topInteger. The top offset in pixels.android:rightInteger. The right offset in pixels.android:bottomInteger. The bottom offset in pixels.android:leftInteger. The left offset in pixels.example:XML file saved at res/drawable/transition.xml:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/on" />
    <item android:drawable="@drawable/off" />
</transition>

This layout XML applies the drawable to a View:

<ImageButton
    android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/transition" />

And the following code performs a 500ms transition from the first item to the second:KotlinJava

val button: ImageButton = findViewById(R.id.button)
val drawable: Drawable = button.drawable
if (drawable is TransitionDrawable) {
    drawable.startTransition(500)
}

see also:

Inset drawable

A drawable defined in XML that insets another drawable by a specified distance. This is useful when a View needs a background that is smaller than the View’s actual bounds.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a InsetDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:insetTop="dimension"
    android:insetRight="dimension"
    android:insetBottom="dimension"
    android:insetLeft="dimension" />

elements:<inset>Defines the inset drawable. This must be the root element.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".android:drawableDrawable resourceRequired. Reference to a drawable resource to be inset.android:insetTopDimension. The top inset, as a dimension value or dimension resourceandroid:insetRightDimension. The right inset, as a dimension value or dimension resourceandroid:insetBottomDimension. The bottom inset, as a dimension value or dimension resourceandroid:insetLeftDimension. The left inset, as a dimension value or dimension resourceexample:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/background"
    android:insetTop="10dp"
    android:insetLeft="10dp" />

see also:

Clip drawable

A drawable defined in XML that clips another drawable based on this Drawable’s current level. You can control how much the child drawable gets clipped in width and height based on the level, as well as a gravity to control where it is placed in its overall container. Most often used to implement things like progress bars.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a ClipDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:clipOrientation=["horizontal" | "vertical"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                     "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                     "center" | "fill" | "clip_vertical" | "clip_horizontal"] />

elements:<clip>Defines the clip drawable. This must be the root element.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".android:drawableDrawable resourceRequired. Reference to a drawable resource to be clipped.android:clipOrientationKeyword. The orientation for the clip.

Must be one of the following constant values:

ValueDescription
horizontalClip the drawable horizontally.
verticalClip the drawable vertically.

android:gravityKeyword. Specifies where to clip within the drawable.

Must be one or more (separated by ‘|’) of the following constant values:

ValueDescription
topPut the object at the top of its container, not changing its size. When clipOrientation is "vertical", clipping occurs at the bottom of the drawable.
bottomPut the object at the bottom of its container, not changing its size. When clipOrientation is "vertical", clipping occurs at the top of the drawable.
leftPut the object at the left edge of its container, not changing its size. This is the default. When clipOrientation is "horizontal", clipping occurs at the right side of the drawable. This is the default.
rightPut the object at the right edge of its container, not changing its size. When clipOrientation is "horizontal", clipping occurs at the left side of the drawable.
center_verticalPlace object in the vertical center of its container, not changing its size. Clipping behaves the same as when gravity is "center".
fill_verticalGrow the vertical size of the object if needed so it completely fills its container. When clipOrientation is "vertical", no clipping occurs because the drawable fills the vertical space (unless the drawable level is 0, in which case it’s not visible).
center_horizontalPlace object in the horizontal center of its container, not changing its size. Clipping behaves the same as when gravity is "center".
fill_horizontalGrow the horizontal size of the object if needed so it completely fills its container. When clipOrientation is "horizontal", no clipping occurs because the drawable fills the horizontal space (unless the drawable level is 0, in which case it’s not visible).
centerPlace the object in the center of its container in both the vertical and horizontal axis, not changing its size. When clipOrientation is "horizontal", clipping occurs on the left and right. When clipOrientation is "vertical", clipping occurs on the top and bottom.
fillGrow the horizontal and vertical size of the object if needed so it completely fills its container. No clipping occurs because the drawable fills the horizontal and vertical space (unless the drawable level is 0, in which case it’s not visible).
clip_verticalAdditional option that can be set to have the top and/or bottom edges of the child clipped to its container’s bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges.
clip_horizontalAdditional option that can be set to have the left and/or right edges of the child clipped to its container’s bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges.

example:XML file saved at res/drawable/clip.xml:

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/android"
    android:clipOrientation="horizontal"
    android:gravity="left" />

The following layout XML applies the clip drawable to a View:

<ImageView
    android:id="@+id/image"
    android:src="@drawable/clip"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />

The following code gets the drawable and increases the amount of clipping in order to progressively reveal the image:KotlinJava

val imageview: ImageView = findViewById(R.id.image)
val drawable: Drawable = imageview.background
if (drawable is ClipDrawable) {
    drawable.level = drawable.level + 1000
}

Increasing the level reduces the amount of clipping and slowly reveals the image. Here it is at a level of 7000:

Note: The default level is 0, which is fully clipped so the image is not visible. When the level is 10,000, the image is not clipped and completely visible.see also:

Scale drawable

A drawable defined in XML that changes the size of another drawable based on its current level.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a ScaleDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                          "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                          "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:scaleHeight="percentage"
    android:scaleWidth="percentage" />

elements:<scale>Defines the scale drawable. This must be the root element.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".android:drawableDrawable resourceRequired. Reference to a drawable resource.android:scaleGravityKeyword. Specifies the gravity position after scaling.

Must be one or more (separated by ‘|’) of the following constant values:

ValueDescription
topPut the object at the top of its container, not changing its size.
bottomPut the object at the bottom of its container, not changing its size.
leftPut the object at the left edge of its container, not changing its size. This is the default.
rightPut the object at the right edge of its container, not changing its size.
center_verticalPlace object in the vertical center of its container, not changing its size.
fill_verticalGrow the vertical size of the object if needed so it completely fills its container.
center_horizontalPlace object in the horizontal center of its container, not changing its size.
fill_horizontalGrow the horizontal size of the object if needed so it completely fills its container.
centerPlace the object in the center of its container in both the vertical and horizontal axis, not changing its size.
fillGrow the horizontal and vertical size of the object if needed so it completely fills its container.
clip_verticalAdditional option that can be set to have the top and/or bottom edges of the child clipped to its container’s bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges.
clip_horizontalAdditional option that can be set to have the left and/or right edges of the child clipped to its container’s bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges.

android:scaleHeightPercentage. The scale height, expressed as a percentage of the drawable’s bound. The value’s format is XX%. For instance: 100%, 12.5%, etc.android:scaleWidthPercentage. The scale width, expressed as a percentage of the drawable’s bound. The value’s format is XX%. For instance: 100%, 12.5%, etc.example:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/logo"
    android:scaleGravity="center_vertical|center_horizontal"
    android:scaleHeight="80%"
    android:scaleWidth="80%" />

see also:

Shape drawable

This is a generic shape defined in XML.file location:res/drawable/filename.xml
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a GradientDrawable.resource reference:In Java: R.drawable.filename
In XML: @[package:]drawable/filenamesyntax:

<?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="float"
        android:centerY="float"
        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>

elements:<shape>The shape drawable. This must be the root element.

attributes:xmlns:androidStringRequired. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android".android:shapeKeyword. Defines the type of shape. Valid values are:

ValueDesciption
"rectangle"A rectangle that fills the containing View. This is the default shape.
"oval"An oval shape that fits the dimensions of the containing View.
"line"A horizontal line that spans the width of the containing View. This shape requires the <stroke> element to define the width of the line.
"ring"A ring shape.

The following attributes are used only when android:shape="ring":android:innerRadiusDimension. The radius for the inner part of the ring (the hole in the middle), as a dimension value or dimension resource.android:innerRadiusRatioFloat. The radius for the inner part of the ring, expressed as a ratio of the ring’s width. For instance, if android:innerRadiusRatio="5", then the inner radius equals the ring’s width divided by 5. This value is overridden by android:innerRadius. Default value is 9.android:thicknessDimension. The thickness of the ring, as a dimension value or dimension resource.android:thicknessRatioFloat. The thickness of the ring, expressed as a ratio of the ring’s width. For instance, if android:thicknessRatio="2", then the thickness equals the ring’s width divided by 2. This value is overridden by android:innerRadius. Default value is 3.android:useLevelBoolean. “true” if this is used as a LevelListDrawable. This should normally be “false” or your shape may not appear.<corners>Creates rounded corners for the shape. Applies only when the shape is a rectangle.

attributes:android:radiusDimension. The radius for all corners, as a dimension value or dimension resource. This is overridden for each corner by the following attributes.android:topLeftRadiusDimension. The radius for the top-left corner, as a dimension value or dimension resource.android:topRightRadiusDimension. The radius for the top-right corner, as a dimension value or dimension resource.android:bottomLeftRadiusDimension. The radius for the bottom-left corner, as a dimension value or dimension resource.android:bottomRightRadiusDimension. The radius for the bottom-right corner, as a dimension value or dimension resource.

Note: Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero (“0dp”) where you don’t want rounded corners.<gradient>Specifies a gradient color for the shape.

attributes:android:angleInteger. The angle for the gradient, in degrees. 0 is left to right, 90 is bottom to top. It must be a multiple of 45. Default is 0.android:centerXFloat. The relative X-position for the center of the gradient (0 – 1.0).android:centerYFloat. The relative Y-position for the center of the gradient (0 – 1.0).android:centerColorColor. Optional color that comes between the start and end colors, as a hexadecimal value or color resource.android:endColorColor. The ending color, as a hexadecimal value or color resource.android:gradientRadiusFloat. The radius for the gradient. Only applied when android:type="radial".android:startColorColor. The starting color, as a hexadecimal value or color resource.android:typeKeyword. The type of gradient pattern to apply. Valid values are:

ValueDescription
"linear"A linear gradient. This is the default.
"radial"A radial gradient. The start color is the center color.
"sweep"A sweeping line gradient.

android:useLevelBoolean. “true” if this is used as a LevelListDrawable.<padding>Padding to apply to the containing View element (this pads the position of the View content, not the shape).

attributes:android:leftDimension. Left padding, as a dimension value or dimension resource.android:topDimension. Top padding, as a dimension value or dimension resource.android:rightDimension. Right padding, as a dimension value or dimension resource.android:bottomDimension. Bottom padding, as a dimension value or dimension resource.<size>The size of the shape.

attributes:android:heightDimension. The height of the shape, as a dimension value or dimension resource.android:widthDimension. The width of the shape, as a dimension value or dimension resource.

Note: The shape scales to the size of the container View proportionate to the dimensions defined here, by default. When you use the shape in an ImageView, you can restrict scaling by setting the android:scaleType to "center".<solid>A solid color to fill the shape.

attributes:android:colorColor. The color to apply to the shape, as a hexadecimal value or color resource.<stroke>A stroke line for the shape.

attributes:android:widthDimension. The thickness of the line, as a dimension value or dimension resource.android:colorColor. The color of the line, as a hexadecimal value or color resource.android:dashGapDimension. The distance between line dashes, as a dimension value or dimension resource. Only valid if android:dashWidth is set.android:dashWidthDimension. The size of each dash line, as a dimension value or dimension resource. Only valid if android:dashGap is set.example:XML file saved at res/drawable/gradient_box.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

This layout XML applies the shape drawable to a View:

<TextView
    android:background="@drawable/gradient_box"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />

This application code gets the shape drawable and applies it to a View:KotlinJava

val shape: Drawable? = getDrawable(resources, R.drawable.gradient_box, getTheme())

val tv: TextView = findViewById(R.id.textview)
tv.background = shape

source link

Leave a Reply

Your email address will not be published.