Introduction

This article explains how to design a button using drawable.
Android provides many drawable resources. In this, we use only a shape darwable resource. A drawable shape provides many basic shapes, such as Rectangle, Oval, Ring, Line. Form these shapes you can create many effects. All of these shapes support the following tags.
Step 1
Create a project like this:
Clipboard04.jpg
Step 2
Create an XML file and write the following.
In this, I have taken multiple buttons inside a linear layout and I have given the shape and color through the drawable XML file. This will change the color and shape of the buttons. I set all the backgrounds of all the buttons to a gradient XML file that I have created inside the drawable folder.
I set the gradient2.xml file to the LinearLayout at the bottom that contains a textview.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical"
  6. android:background="#000000">
  7. <LinearLayout
  8. android:layout_width="fill_parent"
  9. android:layout_height="wrap_content"
  10. android:layout_marginLeft="70dp"
  11. >
  12. <TextView
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:text="Account Manager"
  16. android:textSize="30dp"
  17. android:textColor="#ffffff"/>
  18. </LinearLayout>
  19. <LinearLayout
  20. android:orientation="vertical"
  21. android:layout_width="300dp"
  22. android:layout_height="460dp"
  23. android:layout_marginLeft="40dp"
  24. android:layout_centerVertical="true"
  25. android:layout_marginTop="20dp"
  26. android:background="@drawable/gradient">
  27. <LinearLayout
  28. android:orientation="vertical"
  29. android:layout_width="200dp"
  30. android:layout_height="300dp"
  31. android:layout_marginLeft="50dp"
  32. android:layout_marginTop="10dp"
  33. android:background="@drawable/gradient2"
  34. >
  35. <Button
  36. android:layout_width="150dp"
  37. android:layout_height="wrap_content"
  38. android:text="Enter Investment"
  39. android:textColor="#ffffffff"
  40. android:textStyle="bold"
  41. android:id="@+id/buttonInvestment"
  42. android:layout_gravity="center"
  43. android:layout_marginTop="10dp"
  44. android:background="@drawable/gradient"
  45. />
  46. <Button
  47. android:textColor="#ffffffff"
  48. android:textStyle="bold"
  49. android:layout_width="150dp"
  50. android:layout_height="wrap_content"
  51. android:text="Enter Income"
  52. android:id="@+id/buttonIncome"
  53. android:background="@drawable/gradient"
  54. android:layout_marginTop="10dp"
  55. android:layout_gravity="center" />
  56. <Button
  57. android:layout_width="150dp"
  58. android:layout_height="wrap_content"
  59. android:textColor="#ffffffff"
  60. android:textStyle="bold"
  61. android:text="View All Expense"
  62. android:id="@+id/button3"
  63. android:layout_gravity="center"
  64. android:layout_marginTop="10dp"
  65. android:background="@drawable/gradient"/>
  66. <Button
  67. android:layout_width="150dp"
  68. android:layout_height="wrap_content"
  69. android:text="View Investment"
  70. android:textColor="#ffffffff"
  71. android:textStyle="bold"
  72. android:id="@+id/button4"
  73. android:layout_gravity="center"
  74. android:layout_marginTop="10dp"
  75. android:background="@drawable/gradient"/>
  76. <Button
  77. android:textColor="#ffffffff"
  78. android:textStyle="bold"
  79. android:layout_width="150dp"
  80. android:layout_height="wrap_content"
  81. android:text="Remain Balance"
  82. android:id="@+id/button4"
  83. android:layout_marginTop="10dp"
  84. android:layout_gravity="center"
  85. android:background="@drawable/gradient"/>
  86. </LinearLayout>
  87. <LinearLayout
  88. android:layout_height="130dp"
  89. android:layout_width="270dp"
  90. android:background="@drawable/gradient3"
  91. android:layout_marginTop="10dp"
  92. android:orientation="vertical"
  93. android:layout_gravity="center">
  94. <LinearLayout
  95. android:layout_width="wrap_content"
  96. android:layout_height="wrap_content"
  97. android:layout_marginTop="20dp">
  98. <TextView
  99. android:layout_width="wrap_content"
  100. android:layout_height="wrap_content"
  101. android:text="R.balance"
  102. android:layout_marginLeft="20dp"
  103. />
  104. <TextView
  105. android:layout_width="wrap_content"
  106. android:layout_height="wrap_content"
  107. android:text="R.balance"
  108. android:layout_marginLeft="100dp"/>
  109. </LinearLayout>
  110. <LinearLayout
  111. android:layout_width="wrap_content"
  112. android:layout_marginTop="20dp"
  113. android:layout_height="wrap_content">
  114. <TextView
  115. android:layout_width="wrap_content"
  116. android:layout_height="wrap_content"
  117. android:text="R.balance"
  118. android:layout_marginLeft="20dp"
  119. />
  120. <TextView
  121. android:layout_width="wrap_content"
  122. android:layout_height="wrap_content"
  123. android:text="R.balance"
  124. android:layout_marginLeft="100dp"/>
  125. </LinearLayout>
  126. <LinearLayout
  127. android:layout_width="wrap_content"
  128. android:layout_height="wrap_content"
  129. android:layout_marginTop="20dp">
  130. <TextView
  131. android:layout_width="wrap_content"
  132. android:layout_height="wrap_content"
  133. android:text="R.balance"
  134. android:layout_marginLeft="20dp"
  135. />
  136. <TextView
  137. android:layout_width="wrap_content"
  138. android:layout_height="wrap_content"
  139. android:text="R.balance"
  140. android:layout_marginLeft="100dp"
  141. />
  142. </LinearLayout>
  143. </LinearLayout>
  144. </LinearLayout>
  145. </LinearLayout>
Step 3
Create an XML file inside a drawable folder and write the following. I hope that you know how to create an XML file inside a drawable folder.
gradient.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  5. <corners
  6. android:bottomLeftRadius="10dp"
  7. android:bottomRightRadius="10dp"
  8. android:topLeftRadius="10dp"
  9. android:topRightRadius="10dp"/>
  11. <gradient android:startColor="#1E90FF"
  12. android:endColor="#1E90FF"/>
  14. </shape>
Step 4
Another XML file inside the drawable folder:
gradient 2.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners android:bottomLeftRadius="10dp"
  5. android:bottomRightRadius="10dp"
  6. android:topLeftRadius="10dp"
  7. android:topRightRadius="10dp" />
  8. <gradient android:startColor="#ffffff"
  9. android:endColor="#ffffff" />
  10. <stroke android:color="#000000"
  11. android:width="1dp" />
  12. </shape>
Step 5
Clipboard02.jpg