Designing a Circle with LinearLayout in Android
LinearLayout always play an important role in structuring a User Interface of an app. LinearLayout does strict all its children in a single direction (i.e. vertically or horizontally). We are designing a circle with a combination of some LinearLayouts in a step by step and in a most easiest way.
1. Creating Parent LinearLayout
First of all we have to create one LinearLayout which will be our Parent LinearLayout and it’s orientation (i.e. how the children of this Layout aligned, vertically or horizontally) is set to be “Vertical” because It will have 3 three vertical children.
Code:
2. Creating Three Vertical LinearLayouts
After done with the first step, now we have to create three LinearLayouts inside of Parent Layout. As you can see in the figure, first LinearLayout contains Futsal , Cricket and Basketball. Second LinearLayout contains Badminton, FLOG and FFT. And similarly third LinearLayout contains Volley, Throw, Table. All three layouts are aligned vertically.
Code:
3. Creating Three Horizontal LinearLayouts
After done with creating three Vertical LinearLayouts, now for each Vertical LinearLayouts we will create three Horizontal LinearLayouts which means there will be total nine Horizontal LinearLayouts, three for each.
Code:
4. Creating Two Vertical LinearLayouts
At last each Horizontal LinearLayout contains two children as you can see below in figure. First child is the image or icon of the sports wrapped in LinearLayout and the second child is the name of the sports (i.e. TextView). This will follow for all the nine Horizontal LinearLayouts.
Code:
5. Set Padding to our LinearLayouts.
After following all the four steps, our UI will look like as figure A (i.e. haven’t set any padding) But after applying the padding it will be a perfect circle! (THINK IN CREATIVE WAY). Circle 2, 5 and 8 won’t change their position so no padding will be applied on these Layouts. PaddingTop applied on Circle 1 and 3, PaddingBottom applied on Circle 7 and 9, PaddingLeft applied to circle 6 and PaddingRight applied to circle 4.
If you think it’s worth reading and helped you to think critically, please support me and buy me a coffee here (https://www.buymeacoffee.com/hamzaahmed9)
Thank you! (Happy Coding)
