{"id":3572,"date":"2016-07-10T06:39:16","date_gmt":"2016-07-10T06:39:16","guid":{"rendered":"http:\/\/www.gubatron.com\/blog\/?p=3572"},"modified":"2017-10-19T03:45:00","modified_gmt":"2017-10-19T03:45:00","slug":"android-how-to-create-a-background-shape-with-a-double-border-rounded-border-with-a-drop-shadow","status":"publish","type":"post","link":"https:\/\/www.gubatron.com\/blog\/android-how-to-create-a-background-shape-with-a-double-border-rounded-border-with-a-drop-shadow\/","title":{"rendered":"[ANDROID] How to create a background shape with a double border \/ rounded border with a drop shadow"},"content":{"rendered":"<p>Usually we use &lt;shape&gt; objects in our .xml drawables meant for the backgrounds of buttons or other <code>View<\/code> objects.<\/p>\n<p>I came across a situation where such object should appear as if it had been previously selected, and the graphic design choice was to put a thick rounded stroke around the container, while at the same time showing a hint of a dropped shadow.<\/p>\n<p>Android &lt;shape&gt;&#8217;s only allow us to define rectangles, curve their &lt;corners&gt;, fill them up with &lt;solid&gt; colors, and to give them a single &lt;stroke&gt; around (dashed or solid). Therefore we can&#8217;t think of using 2 strokes.<\/p>\n<p>Luckily drawable resources\u00a0to be used as <code>View<\/code> backgrounds can be created using not just shapes, or bitmaps, but &lt;layer-list&gt;&#8217;s.<\/p>\n<p>For creating the selected button below<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.gubatron.com\/blog\/wp-content\/uploads\/2016\/07\/android-how-to-make-background-with-2-borders-gubatron.jpg?w=640\" alt=\"android-how-to-make-background-with-2-borders-gubatron\"\/><\/p>\n<p>this is what I did (after over an hour of playing around until I was happy, for some reason UI code takes me the longest to get it right, am I the only one?)<\/p>\n<p>&nbsp;<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.gubatron.com\/blog\/wp-content\/uploads\/2016\/07\/android-how-to-make-background-with-colored-border-and-shadow-with-shape.jpg?w=640\" alt=\"android-how-to-make-background-with-colored-border-and-shadow-with-shape\"\/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Usually we use &lt;shape&gt; objects in our .xml drawables meant for the backgrounds of buttons or other View objects. I came across a situation where such object should appear as if it had been previously selected, and the graphic design choice was to put a thick rounded stroke around the container, while at the same [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5,15],"tags":[],"class_list":["post-3572","post","type-post","status-publish","format-standard","hentry","category-android","category-code"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5Unzf-VC","jetpack-related-posts":[{"id":1913,"url":"https:\/\/www.gubatron.com\/blog\/how-to-do-unit-testing-on-android-with-eclipse\/","url_meta":{"origin":3572,"position":0},"title":"[SCREENCAST] How to do Unit Testing on Android with Eclipse","author":"gubatron","date":"May 2, 2010","format":false,"excerpt":"I was going to make a tutorial, but then I figured that making a video would be a much better way to show this. As for the code that you could grab from a tutorial, there's a link at the end of the post with all the code shown in\u2026","rel":"","context":"In &quot;Android&quot;","block_context":{"text":"Android","link":"https:\/\/www.gubatron.com\/blog\/category\/android\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/androinica.com\/wp-content\/uploads\/2008\/10\/android_logo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2613,"url":"https:\/\/www.gubatron.com\/blog\/photoshop-how-to-convert-a-path-into-a-shape\/","url_meta":{"origin":3572,"position":1},"title":"Photoshop: How to Convert a Path into a Shape","author":"gubatron","date":"December 16, 2011","format":false,"excerpt":"So you wanted to create a Custom Shape on photoshop but you started drawing a path because of the nature of what you were doing (or because you forgot to change the pen mode to Shape) and now when you want to right click > \"Define Custom Path...\" it's disabled\u2026","rel":"","context":"In &quot;Geeklife&quot;","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3486,"url":"https:\/\/www.gubatron.com\/blog\/android-how-to-set-a-custom-title-view-on-a-dialogpreference-extending-class\/","url_meta":{"origin":3572,"position":2},"title":"[ANDROID] How to set a custom title View on a DialogPreference extending class.","author":"gubatron","date":"May 6, 2016","format":false,"excerpt":"So you have a FooDialogPreference class which extends DialogPreference, and one of the things you'd like to do to it, is to change the Dialog's title. DialogPreference happens to be a bit of a bitch, you can't just call getDialog() and start playing with its features before it is shown\u2026","rel":"","context":"In &quot;Android&quot;","block_context":{"text":"Android","link":"https:\/\/www.gubatron.com\/blog\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":716,"url":"https:\/\/www.gubatron.com\/blog\/ted-jill-bolte-taylor-my-stroke-of-insight\/","url_meta":{"origin":3572,"position":3},"title":"[TED] Jill Bolte Taylor &#8211; My Stroke of Insight","author":"gubatron","date":"March 12, 2008","format":false,"excerpt":"[Tomado de la lista de correos de wedoit4you.com y ted.com] Para los que no conocen TED, es un evento realizado todos los anos, en donde las mentes mas brillantes se reunen para compartir sus ideas, estudios, logros. El enlace los llevara a una de las charlas mas impresionantes que he\u2026","rel":"","context":"In &quot;Geeklife&quot;","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2887,"url":"https:\/\/www.gubatron.com\/blog\/android-changing-textview-alpha-transparency-across-different-target-sdks\/","url_meta":{"origin":3572,"position":4},"title":"Android: Changing TextView alpha transparency across different target SDKs","author":"gubatron","date":"November 30, 2012","format":false,"excerpt":"Sometimes you may need to make a TextView (label) look a little transparent to make emphasis on other parts of your UI. The .setAlpha() function on TextView is not supported after later in the SDK. Here's a static workaround you can place on some sort of UIUtils class you may\u2026","rel":"","context":"In \"Android\"","block_context":{"text":"Android","link":"https:\/\/www.gubatron.com\/blog\/tag\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":541,"url":"https:\/\/www.gubatron.com\/blog\/note-about-signals-and-pyqt4\/","url_meta":{"origin":3572,"position":5},"title":"Note about Signals and PyQt4.","author":"gubatron","date":"July 9, 2007","format":false,"excerpt":"I keep making the mistake of sending PyQt_PyObjects instead of sending actual Qt4 objects on signals that are defined by Qt like that. Bottom line: If a signal has been defined by Qt, to send Qt objects, just copy and paste it, do not try to override it by exchanging\u2026","rel":"","context":"In &quot;Code&quot;","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/3572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/comments?post=3572"}],"version-history":[{"count":11,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/3572\/revisions"}],"predecessor-version":[{"id":3587,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/3572\/revisions\/3587"}],"wp:attachment":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/media?parent=3572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/categories?post=3572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/tags?post=3572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}