I'm fairly new to android and xml layouting. I've been trying to make an app, and already done with the programming bit. However i'm stuck on the finalisation of the layout. Really need a hand. My app should look like this:
I've divided the screen in 4 Linear Layouts as I have numbered in the picture as seen below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.FirstVersion.android.cwd.Play"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@color/material_blue_grey_800">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnGoBack"
android:text="Go Back"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile Information"
android:background="@color/accent_material_dark"
android:layout_weight="10" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/LDrawerAction"
android:text="Menu"
android:clickable="false"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp" />
</LinearLayout>
//endregion
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/Section2"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/Section3"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="5sp"
android:textColor="@color/colorWhite"
android:background="#990000"
android:maxLines = "3"
android:scrollbars = "vertical"
android:id="@+id/txtSection3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="15"
android:orientation="vertical"
android:baselineAligned="false">
<TableLayout
android:id="@+id/Section4"
android:layout_width="match_parent"
android:layout_weight="15"
android:layout_height="wrap_content">
</TableLayout>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
The problem now is that, the second section is filled programmatically and it has a range of rows from 8 to 14. The same for the columns. Every block is a different button which I add with this code:
Lay= (LinearLayout)findViewById(R.id.Section2);
for (int row = 0; row < numberOfRows; row++)
{
LinearLayout Linearrow = new LinearLayout(this);
Linearrow.setOrientation(LinearLayout.HORIZONTAL);
for (int column = 0; column < numberOfColumns; column++)
{
View a = Chosen.blocks[row][column]; //This is a View the extend Button that has no layout properties defined
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT, 1.0f);
a.setLayoutParams(params);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
lp.weight = 1.0f;
Linearrow.addView(a, lp);
}
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
lp.weight = 1.0f;
Lay.addView(Linearrow, lp);
}
I have tried even using a TableLayout and assigning a small image as background so it could get resized with the following code:
TL =(TableLayout)fa.findViewById(R.id.Section2);
for (int i = 0; i < numberOfRows; i++)
{
TableRow tableRow = new TableRow(c);
for(int j = 0; j < numberOfColumns; j++)
{
String s = T[(i * 10) + j];
Block b = new Block(c, s);
//int w = Math.round(c.getResources().getDisplayMetrics().density * 20);
//int h = Math.round(c.getResources().getDisplayMetrics().density * 80);
//b.setLayoutParams(new TableRow.LayoutParams(w, h, 2.0f));
b.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT, 1f));
b.setBackgroundResource(R.drawable.g_3);
tableRow.addView(b);
tableRow.setLayoutParams(new android.widget.LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 5f));
final Block fb = b;
}
TL.addView(tableRow);
}
When I run the app, I can see that unless I open it on a big screen phone, the content is not visible entirely(as if the height is set fixed manually of the layouts), and since it is not scroll-able, the content is not visible. How can I rearrange or modify the layout so it looks as in the picture above?
