Dynamic Square & Rectangular layouts in Android
Square & Rectangular Layouts
In this quick and easy tutorial, we will see how to create Dynamic Square & Rectangular layouts where width is same as height or height is twice the width. This is totally dynamic and adjust itself. This can be applied on any layouts including LinearLayout, RelativeLayout, FrameLayout, ImageView or any other views.
Dynamic Square Layout
First lets create the DynamicSquareLayout.class and add it in your project.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
//Replace RelativeLayout with any layout of your choice public class DynamicSquareLayout extends RelativeLayout{ public DynamicSquareLayout(Context context) { super(context); } public DynamicSquareLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public DynamicSquareLayout(Context context, AttributeSet attrs) { super(context, attrs); } // here we are returning the width in place of height, so width = height // you may modify further to create any proportion you like ie. height = 2*width etc @Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, widthMeasureSpec); int size = MeasureSpec.getSize(widthMeasureSpec); setMeasuredDimension(size, size); } } |
Applying it in Layout XML
Its very simple to integrate the above created DynamicSquareLayout in the Layout. Simply call the custom layout where ever applicable as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> // custom widget with its package <com.gadgetsaint.example.DynamicSquareLayout android:layout_width="300dp" android:layout_height="wrap_content" android:id="@+id/text" android:background="#919191" android:layout_centerInParent="true"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This is a Dynamic square Layout" android:textSize="18sp" android:textStyle="bold" android:layout_centerInParent="true" android:textColor="#fff" /> </com.gadgetsaint.viewpagerexample.SquareRelativeLayout> </RelativeLayout> |
Dynamic Rectangular layout
Create a class DynamicRectangularLayout.class and add it to your project
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// In this we are using a FrameLayout public class DynamicRectangularLayout extends FrameLayout{ public DynamicRectangularLayout(Context context) { super(context); } public DynamicRectangularLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public DynamicRectangularLayout(Context context, AttributeSet attrs) { super(context, attrs); } // Here note that the height is width/2 @Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, (widthMeasureSpec/2)); int size = MeasureSpec.getSize(widthMeasureSpec); setMeasuredDimension(size, (size/2)); } } |
The application of this layout is same as the Square Layout.
Bonus – Circular Layout
Create a circular RelativeLayout (Or any layout of choice).
Create a shape drawable in Drawable Folder named rounded_layout.xml with below code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="4dp" android:color="#369743" /> <solid android:color="#369743" /> <corners android:radius="360dp" /> <padding android:bottom="10dp" android:left="20dp" android:right="20dp" android:top="10dp" /> </shape> |
Applying to Layout
Its simple, set the above drawable as the background of the desired layout as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="300dp" android:layout_height="300dp" android:id="@+id/text" android:background="@drawable/rounded_layout" android:layout_centerInParent="true"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="This is a Circular Layout" android:textSize="18sp" android:textStyle="bold" android:layout_centerInParent="true" android:gravity="center" android:layout_gravity="center" android:textColor="#fff" /> </RelativeLayout> </RelativeLayout> |
Thats it!
Hope this quick tutorial is helpful for you.
Let me know your Suggestions / Queries in comments.
