Search code examples
androidandroid-layoutandroid-linearlayoutandroid-constraintlayoutgrid-layout

How to align Gridlayout children linear layouts in center on orientation change?


enter image description here

How to align Grid layout's children linear layouts in the center on orientation change?

I am having an app with a constraint layout having a grid layout further having linear layout children (circles shown below). How to align the linear layout circles shown in the image to the center for all screen sizes and for orientation changes also.

XML File

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:grid2="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center">

    <ScrollView
        android:id="@+id/scroll"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.gridlayout.widget.GridLayout
        android:id="@+id/container2"
        android:layout_width="match_parent"
        android:background="#00555555"
        android:layout_height="wrap_content"
        android:paddingTop="?attr/actionBarSize"
        grid2:alignmentMode="alignBounds"
        grid2:columnCount="2"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        grid2:rowOrderPreserved="false">

        <LinearLayout
            android:id="@+id/layout1"
            android:layout_width="180dp"
            android:layout_height="170dp"
            android:background="@drawable/circle_shape"
            android:gravity="center"
            android:orientation="vertical"
            android:text="TextView"
            grid2:layout_column="0"
            grid2:layout_gravity="center"
            grid2:layout_row="0">

                <Button
                    android:id="@+id/but1"
                    android:layout_width="55dp"
                    android:layout_height="56dp"
                    android:layout_gravity="center"
                    android:background="@drawable/button1"
                    android:layout_marginTop="20dp"
                    grid2:layout_gravity="left" />

                <TextView
                    android:id="@+id/tv1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:text="@string/control"
                    android:textSize="22sp"
                    android:textStyle="italic" />

                <TextView
                    android:id="@+id/tv2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textColor="#25F325"
                    android:text="@string/no_status"
                    android:textSize="14sp" />
            </LinearLayout>

        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="180dp"
            android:layout_height="170dp"
            android:layout_marginEnd="20dp"
            android:background="@drawable/circle_shape"
            android:gravity="center"
            android:orientation="vertical"
            grid2:layout_column="1"
            grid2:layout_gravity="center_horizontal"
            grid2:layout_row="0">

                <Button
                    android:id="@+id/but2"
                    android:layout_width="55dp"
                    android:layout_height="56dp"
                    android:layout_marginTop="10dp"
                    android:layout_gravity="center"
                    android:background="@drawable/button2" />

                <TextView
                    android:id="@+id/tv4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:textStyle="italic"
                    android:textSize="21sp" />

                <TextView
                    android:id="@+id/tv5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginBottom="10dp"
                    android:text="@string/no_data"
                    android:textColor="#25F325"
                    android:textSize="14sp" />
            </LinearLayout>

        <LinearLayout
            android:id="@+id/layout3"
            android:layout_width="180dp"
            android:layout_height="170dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="10dp"
            android:background="@drawable/circle_shape"
            android:gravity="center"
            android:orientation="vertical"
            grid2:layout_column="0"
            grid2:layout_gravity="center"
            grid2:layout_row="1">

                <Button
                    android:id="@+id/but3"
                    android:layout_marginTop="0dp"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_gravity="center"
                    android:background="@drawable/img1" />

                <TextView
                    android:id="@+id/tv6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:text="Fire"
                    android:textSize="21sp"
                    android:textStyle="italic" />

                <TextView
                    android:id="@+id/tv7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="@string/no_data"
                    android:textColor="#25F325"
                    android:textSize="14sp" />
            </LinearLayout>

        <LinearLayout
            android:id="@+id/layout4"
            android:layout_width="180dp"
            android:layout_height="170dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="20dp"
            android:background="@drawable/circle_shape"
            android:gravity="center"
            android:orientation="vertical"
            android:text="TextView"
            grid2:layout_column="1"
            grid2:layout_gravity="center"
            grid2:layout_row="1">

            <Button
                android:id="@+id/but4"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_gravity="center"
                android:background="@drawable/gas1" />

            <TextView
                android:id="@+id/tv8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:text="Gas"
                android:textSize="21sp"
                android:textStyle="italic" />

            <TextView
                android:id="@+id/tv9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textColor="#25F325"
                android:text="@string/no_data
                android:textSize="14sp" />
        </LinearLayout>

</androidx.gridlayout.widget.GridLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Solution

  • You just change GridLayout width

    android:layout_width="match_parent" to

    android:layout_width="wrap_content"
    

    and add layout_gravity

    android:layout_gravity="center_horizontal"