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.
Really good article, thanks! When I tried playing around with it in my own custom package, trying to implement this dynamic square layout, I get a rectangle and not the text “This is a Dynamic square Layout” but rather the name of the package. Do you know why this is? Could I maybe message you on twitter or somewhere to send you a picture of what it’s looking like?
Pls share a screenshot in Twitter. Link is there in blog
I tried using this guide to make a home screen widget stay in a constant square. It should work but for some reason I cannot use the custom made class. I keep seeing a “Problem loading widget” into the widget itself. And for some reason, the preview displays it fine. Is it possible to make this on a widget app?