The GridLayout
API docs is very difficult to learn ......
is there any one who can teach me how to set child View
s to have something like "weight" of LinearLayout
?
Right now it looks like all are placed on the left hand side,
I have tried many times and still can not make it like each one the half width of the screen.
Edited : I don't know what can I do for when the childen are all wrap_content
......
even if I want to set some image in specific size , this class helps me to make ImageView
wrap_content
.........it cannot operate normal , did I miss some setting ?!?
For other peeps: If you have to use GridLayout due to project requirements then use it but I would suggest trying out TableLayout as it seems much easier to work with and achieves a similar result.
Docs: https://developer.android.com/reference/android/widget/TableLayout.html
Example:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<Button
android:id="@+id/test1"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:text="Test 1"
android:drawableTop="@mipmap/android_launcher"
/>
<Button
android:id="@+id/test2"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:text="Test 2"
android:drawableTop="@mipmap/android_launcher"
/>
<Button
android:id="@+id/test3"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:text="Test 3"
android:drawableTop="@mipmap/android_launcher"
/>
<Button
android:id="@+id/test4"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:text="Test 4"
android:drawableTop="@mipmap/android_launcher"
/>
</TableRow>
<TableRow>
<Button
android:id="@+id/test5"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:text="Test 5"
android:drawableTop="@mipmap/android_launcher"
/>
<Button
android:id="@+id/test6"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:text="Test 6"
android:drawableTop="@mipmap/android_launcher"
/>
</TableRow>
</TableLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_weight="3"
android:columnCount="2"
android:padding="10dp"
android:rowCount="3"
android:background="@drawable/background_down"
android:layout_height="0dp">
<androidx.cardview.widget.CardView
android:layout_height="0dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_margin="10dp"
android:elevation="10dp"
app:cardCornerRadius="15dp"
>
<LinearLayout
android:weightSum="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_weight="2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="15dp"
android:src="@drawable/user" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Users"
android:textSize="16sp"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_height="0dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_margin="10dp"
android:elevation="10dp"
app:cardCornerRadius="15dp"
>
<LinearLayout
android:weightSum="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_weight="2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="15dp"
android:src="@drawable/addusers" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Users"
android:textSize="16sp"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_height="0dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_margin="10dp"
android:elevation="10dp"
app:cardCornerRadius="15dp"
>
<LinearLayout
android:weightSum="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_weight="2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="15dp"
android:src="@drawable/newspaper" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Report"
android:textSize="16sp"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_height="0dp"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_margin="10dp"
android:elevation="10dp"
app:cardCornerRadius="5dp"
>
<LinearLayout
android:weightSum="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_weight="2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="15dp"
android:src="@drawable/settings" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textSize="16sp"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
Full tutorials can be found here .
[Android Grid Layout With CardView and OnItemClickListener][2]
Just a quick follow up and note that it is possible now to use the support library with weighted spacing in GridLayout to achieve what you want, see:
As of API 21, GridLayout's distribution of excess space accomodates the principle of weight. In the event that no weights are specified, the previous conventions are respected and columns and rows are taken as flexible if their views specify some form of alignment within their groups. The flexibility of a view is therefore influenced by its alignment which is, in turn, typically defined by setting the gravity property of the child's layout parameters. If either a weight or alignment were defined along a given axis then the component is taken as flexible in that direction. If no weight or alignment was set, the component is instead assumed to be inflexible.
If you use fragments you can prepare XML layout and than stratch critical elements programmatically
int thirdScreenWidth = (int)(screenWidth *0.33);
View view = inflater.inflate(R.layout.fragment_second, null);
View _container = view.findViewById(R.id.rim1container);
_container.getLayoutParams().width = thirdScreenWidth * 2;
_container = view.findViewById(R.id.rim2container);
_container.getLayoutParams().width = screenWidth - thirdScreenWidth * 2;
_container = view.findViewById(R.id.rim3container);
_container.getLayoutParams().width = screenWidth - thirdScreenWidth * 2;
This layout for 3 equal columns. First element takes 2x2 Result in the picture
I archive this using LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:height="166dp"
android:text="Tile1"
android:gravity="center"
android:background="#6f19e5"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Tile2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:height="126dp"
android:gravity="center"
android:layout_weight=".50"
android:background="#f1d600"/>
<TextView
android:text="Tile3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:height="126dp"
android:gravity="center"
android:layout_weight=".50"
android:background="#e75548"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Tile4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:height="126dp"
android:gravity="center"
android:layout_weight=".50"
android:background="#29d217"/>
<TextView
android:text="Tile5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:height="126dp"
android:gravity="center"
android:layout_weight=".50"
android:background="#e519cb"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:height="176dp"
android:text="Tile6"
android:gravity="center"
android:background="#09eadd"/>
</LinearLayout>
</LinearLayout>
Starting in API 21 the notion of weight was added to GridLayout.
To support older android devices, you can use the GridLayout from the v7 support library.
compile 'com.android.support:gridlayout-v7:22.2.1'
The following XML gives an example of how you can use weights to fill the screen width.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:id="@+id/choice_grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="4dp"
grid:alignmentMode="alignBounds"
grid:columnCount="2"
grid:rowOrderPreserved="false"
grid:useDefaultMargins="true">
<TextView
android:layout_width="0dp"
android:layout_height="100dp"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#FF33B5E5"
android:text="Tile1" />
<TextView
android:layout_width="0dp"
android:layout_height="100dp"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#FF33B5E5"
android:text="Tile2" />
<TextView
android:layout_width="0dp"
android:layout_height="100dp"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#FF33B5E5"
android:text="Tile3" />
<TextView
android:layout_width="0dp"
android:layout_height="100dp"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#FF33B5E5"
android:text="Tile4" />
</android.support.v7.widget.GridLayout>
After many attempts I found what I was looking for in this layout. Even spaced LinearLayouts with automatically fitted ImageViews, with maintained aspect ratio. Works with landscape and portrait with any screen and image resolution.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcc5d00" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:padding="10dip"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/image1"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/stackoverflow"
android:layout_width="fill_parent"
android:layout_gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:padding="10dip"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/image2"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/stackoverflow"
android:layout_width="fill_parent"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:padding="10dip"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/image3"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/stackoverflow"
android:layout_width="fill_parent"
android:layout_gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:padding="10dip"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/image4"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/stackoverflow"
android:layout_width="fill_parent"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
Do you know View.getViewTreeObserver().addOnGlobalLayoutListener()
By this you can calculate the sizes.
I achieve your UI effect by GridView:
GridView g;
g.setNumColumns(2);
g.setStretchMode(GridView.STRETCH_SPACING_UNIFORM);
Source: Stackoverflow.com