Android Grid Layout display - java

I use a GridLayout in an Android application but I have a display problem,
I used setColumnCount to have 3 column because I have to add 3 elements per line, so it should be aligned.
layout1 = new GridLayout(this);
layout1.setColumnCount(3);
//In a loop later in the code :
layout1.addView(textView1);
layout1.addView(cb);
layout1.addView(textView2);
3 items are not aligned with the lines, but they are all in the first column, I do not really understand the problem.

Using LayoutParams for your child view
GridLayout gridLayout = new GridLayout(this);
gridLayout.setColumnCount(colCount);
gridLayout.setRowCount(rowCount);
GridLayout.LayoutParams third = new GridLayout.LayoutParams(0, 0);
textView1.setLayoutParams(third);
gridLayout.addView(textView1, third);
GridLayout.LayoutParams fourth = new GridLayout.LayoutParams(0, 1);
cb.setLayoutParams(fourth);
gridLayout.addView(cb, fourth);
GridLayout.LayoutParams fifth = new GridLayout.LayoutParams(0, 2);
textView2.setLayoutParams(fifth );
gridLayout.addView(textView2, fifth);

You should specify which cell adds which view in your addView method. This doc about GridLayout.addView may help you.

Maybe if it's static and it will be always be 3 items you can set a LinearLayout in the xml with orientation horizontal.

Have you tried this? :
<GridView
android:id="#+id/photo_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:numColumns="3" >
</GridView>
And make 1 custom xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:id="#+id/img_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_margin="5dp"
android:src="#drawable/img_photo_caption" />
</LinearLayout>

Related

Is there any way to make a ArrayList of TextView from one TextView defined in xml?

I want to make an ArryList of TextView.
sector.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:id="#+id/sectNameVew"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_weight="60"
android:textSize="20sp"/>
</LinearLayout>
Now i want to create an ArrayList like this:
ArrayList<TextView> arLst = new ArrayList<>();
for(int i = 0; i < 10; i++){
TextView tv = findViewById(R.id.sectorNamesView);
tv.setText((i + 1) + "");
arrLst.add(tv);
}
When i use the arLst, it shows that every TextView in arrLst has text "10".
But i want to store it as each TextView will have different text like "1", "2", "3", ... ... ... "10".
Even i want to dynamically add more item in that arrLst from user. So it can not be defined 10 TextView in xml text. Because number of items may increased.
How can i do that?
Thanks <3
You want to create the TextView programmatically and add it to the LinearLayout (the parent view).
First, you will want to assign an id to your LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center">
</LinearLayout>
So, your code will look a little like this:
LinearLayout parentLayout = (LinearLayout) findViewById(R.id.parentLayout);
int num_textViews = 10; // number of textViews you might want in your ArrayList
ArrayList<TextView> arrayList = new ArrayList<>();
for (int i = 0; i < num_textViews; i++) {
TextView tv = new TextView(this);
tv.setText((i + 1) + "");
// add any styling you wish
arrayList.add(tv);
parentLayout.addView(tv);
}

How can I adjust the row heights in a ListView so they take up the remaining space?

I have a ListView which can have 2-4 rows in it. I want the rows to change their height so they are even, and fill up the remaining space in the LinearLayout.
This is a snippet of what I have:
activity_layout.xml:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<TextView
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#drawable/quiz_question_box"
android:textColor="#000000"
android:textAlignment="center"
android:gravity="center_vertical"
android:textSize="25sp"
android:id="#+id/question_text_view"/>
<ListView
android:id="#+id/options_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"/>
</LinearLayout>
row_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorPrimary"
android:padding="0dp">
<TextView
android:id="#+id/row_content_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:padding="10dp"
android:textColor="#FFFFFF"
android:gravity="center_vertical"
android:textSize="20sp">
</TextView>
</LinearLayout>
Gives me this:
I've tried setting the weight of pretty much everything I can think of, including the LinearLayout in the row_layout.xml with the hope that the rows would be distributed evenly, but no luck. I've also tried setting the parameters of the view in the getView method of my Adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent){
View view = super.getView(position, convertView, parent);
view.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT, 0.5f));
if((position % 2 == 1) && (position != getNumberOfItemsInList())){
view.setBackgroundResource(R.drawable.quiz_middle_answer_bordered_light);
} else if ((position % 2 == 1) && (position == getNumberOfItemsInList())) {
view.setBackgroundResource(R.drawable.quiz_bottom_answer_rounded_light);
} else if ((position % 2 == 0) && (position != getNumberOfItemsInList())){
view.setBackgroundResource(R.drawable.quiz_middle_answer_bordered_dark);
} else {
view.setBackgroundResource(R.drawable.quiz_bottom_answer_rounded_dark);
}
return view;
}
But that hasn't worked either. How can I achieve this?
In your text views you declared the height to be wrap context that means they'll take the minnimal height and that's normally what you want to do.
However you want them to fill the entire space so what you should do is to set the height to match parent.
Now to prevent one of them to occupy the full object and therefore pushing the other off the screen you need to assign android:weight to them
Here's what you can do,
1) Find the screen height in dp
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
float dpHeight = displayMetrics.heightPixels / displayMetrics.density;
find half the screen height and pass this value to the list adapter
2) Divide this value by item count. You can call the method getItemCount()
Now we have the height of each list view child. Now on getView() you can the height of linear layout with this value.
Assign weigths to the rows that way they can take as much size as you want independent of your device screen

GridView not coming up Full Screen in Android

I am implementing my own Calendar strangely the gridView is not coming up fully. I am the numbers are coming properly but the screen is not full. It is half. I would like to implement something similar to CalendarView.
Please check the snapshot you will understand:
can you see the lot of empty grey Space. How do make it such way it is full screen?
Here are two xml's that are related to Calendar
CalendarView.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/calendarMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/calendar_top" >
</RelativeLayout>
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_gravity="center_horizontal"
android:listSelector="#android:color/transparent"
android:numColumns="7"
android:stretchMode="columnWidth" />
</RelativeLayout>
Next is CalendarItems.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/calendar_cell"
android:gravity="center"
android:orientation="vertical"
android:padding="2dip" >
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#000000"
android:textSize="16dip" >
</TextView>
<TextView
android:id="#+id/textvaluedate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/date"
android:textColor="#F44336"
android:textSize="10dip"
android:visibility="gone" >
</TextView>
</LinearLayout>
Try to change everything match_parent still the same. I am not really sure where I am going wrong here?
Can somebody help me fix this?
Thanks!
UPDATE 2:
I have updated my code according to #Heshan Sandeepa. I got the full screen but the image box look really big. Please take a look at the screen shot. What could be wrong here?
Here is the CODE in my Baseadapter:
DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
int height = metrics.heightPixels;
Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.YEAR, month.get(Calendar.YEAR));
calendar.set(Calendar.MONTH, month.get(Calendar.MONTH));
int numDays = calendar.getActualMaximum(Calendar.DATE);
double rowCounts = Math.ceil(numDays/7);
int rowCount = (int) rowCounts;
if (convertView == null)
{
LayoutInflater vi = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.calendar_item, null);
}
v.setMinimumHeight(height / rowCount);
}
All I require is that I need bigger square box for each date. That is all.
Let me know!
Thanks!
For columns you can achieve above requirement through strechMode read here . For rows you can achieve this through following steps ,
Calculate the Device height.
getWindowManager().getDefaultDisplay().getMetrics(new DisplayMetrics());
int deviceHeight = new DisplayMetrics().heightPixels;
Reduce the action bar height / any paddings from that (if you have one)
You can determine how many rows you need, then you can define the height of each row(cell actually) . You can get the row number by deviding the number of days of relevant month by 7 and get the ceiling value.
ex - jan
int rowCount = Math.ceil(31/7);
= 5
ex - Feb (carefull, here no need to get the ceiling as you can get integer)
int rowCount = Math.ceil(28/7);
= 4
Same for all months.
Now you have screen height(step 2) and the number of row(step 3), so can define what is the exact height of each ro. I hope you are having an adapter and custom view for each cell.
When you are inflating the custom view at the getView() , define the calculated height as the minimum height.
your_view.setMinimumHeight(<device height / rowCount>)

TableRow weights scaling opposite of what I expect when using GraphView in my Android java app

I've created the following layout xml-file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="some.package.MainActivity" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow
android:id="#+id/mainRow"
android:layout_weight="1" >
<FrameLayout
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
</TableRow>
<TableRow
android:id="#+id/footerRow"
android:layout_weight="1" >
<FrameLayout
android:id="#+id/footerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
</TableRow>
</TableLayout>
</RelativeLayout>
... and populate it with graphs from the GraphView api as follows:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
int[] assetLayouts = new int[]{
R.id.mainLayout,
R.id.footerLayout,
};
int count = 0;
for (int assetLayout :assetLayouts ) {
GraphViewSeries exampleSeries = new GraphViewSeries(new GraphViewData[] {
new GraphViewData(1, 2.0d)
, new GraphViewData(2, 1.5d)
, new GraphViewData(3, 2.5d)
, new GraphViewData(4, 1.0d)
});
GraphView graphView = new LineGraphView(this, "" + ++count);
graphView.addSeries(exampleSeries);
FrameLayout layout = (FrameLayout) findViewById(assetLayout);
layout.addView(graphView);
}
}
This behaves as expected and divides the screen in two parts, with one graph taking up the first top half, and the second one taking up the other bottom half. Now, I want to give the top graph/row more weight, i.e., it should be proportionally larger than the lower graph/row. So, what i did was set the top row (mainRow) to android:layout_weight="2". I expect that the top row now should be twice as large as the bottom row, however, the opposite happens. The top one only get 33%, while the bottom one gets 66% of the screen real estate. This is opposite of the documentation I found:
For example, if there are three text fields and two of them declare a
weight of 1, while the other is given no weight, the third text field
without weight will not grow and will only occupy the area required by
its content. The other two will expand equally to fill the space
remaining after all three fields are measured. If the third field is
then given a weight of 2 (instead of 0), then it is now declared more
important than both the others, so it gets half the total remaining
space, while the first two share the rest equally.
http://developer.android.com/guide/topics/ui/layout/linear.html
What is going on here?
Sure I can work around it and just give the opposite weights of what I thought was right, but I'd rather do it right.
Also when setting weight, set width (if orientation is horizontal) or height (if vertical) to 0dp. That way the width/height is calculated properly.

How to set the layout margins of edit text boxes?

In the table layout i have a tablerow and in that tablerow i have 6 edit text boxes and i want to set the layout margins for that 6 edit text boxes
TableLayout t1=(TableLayout)findViewById(R.id.table_layout01);
TableRow tr1=new TableRow(inventory.this);
tr1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
tr1.setBackgroundColor(Color.BLACK);
EditText ed6=new EditText(inventory.this);
//ed6.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
/*ViewGroup.MarginLayoutParams editmargin=new ViewGroup.MarginLayoutParams(ViewGroup.MarginLayoutParams.FILL_PARENT,ViewGroup.MarginLayoutParams.WRAP_CONTENT);
editmargin.setMargins(leftMargin, rightMargin, topMargin, bottomMargin);*/
ed6.setTextColor(Color.BLACK);
ed6.setBackgroundColor(Color.WHITE);
ed6.setText("1");
tr1.addView(ed6);
EditText ed7=new EditText(inventory.this);
//ed7.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
ed7.setTextColor(Color.BLACK);
ed7.setBackgroundColor(Color.WHITE);
ed7.setText("2");
tr1.addView(ed7);
EditText ed8=new EditText(inventory.this);
//ed8.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
ed8.setTextColor(Color.BLACK);
ed8.setBackgroundColor(Color.WHITE);
ed8.setText("3");
tr1.addView(ed8);
EditText ed9=new EditText(inventory.this);
//ed9.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
ed9.setTextColor(Color.BLACK);
ed9.setBackgroundColor(Color.WHITE);
ed9.setText("4");
tr1.addView(ed9);
EditText ed10=new EditText(inventory.this);
//ed10.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
ed10.setTextColor(Color.BLACK);
ed10.setText("5");
ed10.setBackgroundColor(Color.WHITE);
tr1.addView(ed10);
EditText ed11=new EditText(inventory.this);
//ed11.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
ed11.setTextColor(Color.BLACK);
ed11.setText("6");
ed11.setBackgroundColor(Color.WHITE);
tr1.addView(ed11);
t1.addView(tr1);
first of all something you should know: According to the Official Android Dev Pages, Views (and a TextView derives from View) do not support the setting of Margin, but ViewGroups (such as LinearLayout, RelativeLayout etc...) do.
So what you could do is the following:
TableLayout.LayoutParams params = new TableLayout.LayoutParams();
params.setMargins(5, 5, 5, 5);
TextView view = new TextView(this);
view.setLayoutParams(params);
This would set the margin for all children to 5 pixels - I tried it and it worked for me (albeit with a LinearLayout with vertical alignment). Give it a shot and let me know if I can help further :) .
Cheers,
Ready4Fajir
EDIT:
I would try with the XML below (you'd, of course, update the id's etc.). The "magic" in the xml is that it distributes all available width evenly among the TextView's (and the EditText's on the second row).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The first "row" -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView 01"
android:id="#+id/textView01" />
<!-- Here you'd add your other five TextView's accordingly -->
</LinearLayout>
<!-- The second "row" -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView 01"
android:id="#+id/editText01" />
<!-- Here you'd add your other five EditText's accordingly -->
</LinearLayout>
</LinearLayout>
In your Java code you could then access your EditText views like:
EditText editText01 = (EditText) findViewById(R.id.editText01);
editText01.setText("1");
I have now ignored the fact that you need to create your EditText's programatically. Do you really, really need to create them in Java? (Why?)
OLD ANSWER:
If you just want to set the layout margins to your EditText view i quess you could use the setMargins(left, top, right, bottom) function call on the LayoutParams variable.
int left = 6;
int top = 12;
int right = 6;
int bottom = 6;
TableRow.LayoutParams params = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.setMargins(left, top, right, bottom);
EditText edXY = new EditText(inventory.this);
edXY.setLayoutParams(params);
If you ultimately wish to distribute all available space evenly among the six EditText views in a table row I would suggest you have a look at the following post: 2-column TableLayout with 50% exactly for each column

Categories