If you are a newbie in Android app development and you chose to go with Android Studio and Java or Kotlin, after having a tour of the UI components (views and layouts), you may think something is lacking. But after I sharpened my practice a little more and came across shape drawables, I knew I had found my answer.
At first glance, many new Android developers using Android Studio who do not know about shape drawables usually complain that they do not have the necessary tools to implement their UIs the way they want — and that is true. When you get a grasp of shape drawables and discover how great they are at enhancing your UIs, however, you will love designing with them.
Shape drawables make your UI’s components or views more appealing and fulfilling by giving them the real custom touch you want for your views. They do a great job of customizing your buttons, TextViews, EditText, and many layouts to match your preferences.
Shape drawables are created in XML and the syntax is simple to understand, which makes it easy for any newbie to get acquainted.
In this article, you will see some useful shape drawables, how you can create them, and how they enhance your UI.
How to Create and Use a Shape Drawable
Creating shape drawables is done in XML with the <item> and <shape>elements.
The <item> element is the enclosing parent of <shape>. It defines attributes like the width and height of the shape, but that is possible only if your project is API 23 and above.
The <shape> element is where the shape of your drawable is defined and all its nested elements are defined. The android:shape attribute can hold four values: rectangle, oval, ring, or line. If you do not specify a value, it will be a rectangle by default.
Multiple shape items can be nested in a <layer-list> element. A layer-list can nest a collection of <item> elements superposed on each other, with the last element being the first on top of the others.
Within the <shape> element, other nested shape-creating elements like <stroke>, <gradient>, <corners>,<padding>,<size>, and <solid> can be added to the shape.
The <stroke> element is used for setting the width, the color, the dashGap, and the dashWidth of the shape’s borders.
The <gradient> element is used for setting the startcolor, centerColor, endColor, and some other attributes used for giving linear-gradient coloring to the shape.
The <corners> element is used just for setting the radius for each corner of the shape.
The <padding> element is used for setting the padding for all sides of the shape.
The <size> element is used for setting the width and height of the shape, but this can be done in the <item> element if your project is targeting API 23 and above.
The <solid> element is used for setting an overall single color that covers the entire shape.
#programming #mobile #javascript #ux #android #ui
