Develop Reference

Gridview item programmatically from xml code

I want to add views (in this example, ImageViews) to a grid layout programmatically. My grid is fixed to 5 columns and 7 rows (35 items in total) and I don't want to add these 35 views in my xml so I want to do it programmatically. I'm struggling to find a conversion from xml to java/kotlin code for the attributes layout_width, layout_height, layout_columnWeight and layout_rowWeight so that the layout looks exactly the same as if I have defined the views in the xml. Can someone write the code for the views' layoutparams that matches these attributes?
<GridLayout
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:columnCount="5"
android:rowCount="7">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:srcCompat="#drawable/ic_photo_camera"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:srcCompat="#drawable/ic_photo_camera"/>
... //35 times the Image view
</GridLayout>
The previous xml would give me the next layout:
I tried the next one without success (Imageviews are showing too big and not fitting all inside the grid boundaries):
for(i in 1..35) {
val view = ImageView(context)
val params = GridLayout.LayoutParams(
GridLayout.spec(GridLayout.UNDEFINED, GridLayout.FILL,1f),
GridLayout.spec(GridLayout.UNDEFINED,GridLayout.FILL,1f))
view.layoutParams = params
gridView.addView(view, 0)
}
Can you help me translate the xml into java/kotlin code? Thanks in advance

First step would be to create a view object
val image = ImageView()
image.setImageResource(resourceID)
Then you'll need to set layout attributes
val params = GridLayout.LayoutParams(x, y)
//x and y is your size, if you want something special you can do for instance LayoutParams.FILL_PARENT
You can also set size a bit later:
params.height = X
params.width = Y
Lastly you just add the view to the layout
gridView.addView(image)
Put that all inside a for loop and you're done. GridView would take care of placing the views.

Result :
Try something like this :
final int MAX_COLUMN = gridView.getColumnCount(); //5
final int MAX_ROW = gridView.getRowCount(); //7
final int itemsCount = MAX_ROW * MAX_COLUMN; //35
int row = 0, column = 0;
for (int i = 0; i < itemsCount; i++) {
ImageView view = new ImageView(this);
//Just to provide alternate colors
if (i % 2 == 0) {
view.setBackgroundColor(Color.RED);
} else {
view.setBackgroundColor(Color.GREEN);
}
GridLayout.LayoutParams params = new GridLayout.LayoutParams(GridLayout.spec(row, 1F), GridLayout.spec(column, 1F));
view.setLayoutParams(params);
gridView.addView(view);
column++;
if (column >= MAX_COLUMN) {
column = 0;
row++;
}
}
If you want specific width and height for your cells, then use :
params.width = 100; // Your width
params.height = 100; //your height

setPadding() on Button programmatically not working

When I set padding on a button using XML it works without problems.
XML for the button:
<Button
android:id="#+id/comment_video"
android:layout_below="#+id/input_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/comment_video"
android:textColor="#android:color/white"
android:backgroundTint="#color/colorAccent"
android:layout_alignParentEnd="true"
android:textSize="14sp"
android:padding="10dp"
android:layout_marginTop="0dp"
android:layout_marginEnd="10dp"
android:visibility="gone"/>
Screenshot of button:
Then when I do it programmatically it's not working.
Code for the button:
// Add reply button
final Button replyButton = new Button(mContext);
replyButton.setId(170000 + i2);
replyButton.setText("REPLY");
replyButton.setTextColor(Color.parseColor("#FFFFFF"));
replyButton.setBackgroundColor(Color.parseColor("#C70000"));
replyButton.setPadding(dp10_in_px, dp10_in_px, dp10_in_px, dp10_in_px);
replyButton.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
replyButton.setVisibility(View.GONE);
RelativeLayout.LayoutParams lp8 = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
lp8.addRule(RelativeLayout.BELOW, textInputLayout.getId());
lp8.addRule(RelativeLayout.ALIGN_PARENT_END, relativeLayout3.getId());
lp8.setMargins(0, dp4_in_px, dp10_in_px, dp10_in_px);
replyButton.setLayoutParams(lp8);
Screenshot of button:
I set thousands of views dynamically based on YouTube data and must do it programmatically, at least as far as I know.
The formula used for variables in setPadding and setMargin are as follows:
int dp4 = 4; // 4 dps
final float scale = getResources().getDisplayMetrics().density;
int dp4_in_px = (int) (dp4 * scale + 0.5f);
int dp10 = 10; // 10 dps
int dp10_in_px = (int) (dp10 * scale + 0.5f);
Any help is appreciated.
Update 1 - Screenshot of layout bounds
Update 2 - Sharp corners
Another small detail that might be a clue. The corners on the programmatically made button is sharp. Normally they're a bit rounded.

OK, with help from war_Hero in comments I've found the solution.
setBackgroundColor() don't work. It sets the entire background, including the padding, to the same color.
This:
replyButton.setBackgroundColor(Color.parseColor("#C70000"));
Should be replaced with something like this:
replyButton.getBackground().setColorFilter(ContextCompat.getColor(mContext, R.color.colorAccent), PorterDuff.Mode.MULTIPLY);

Try this:
replyButton.setPadding(dp10_in_px, dp10_in_px, dp10_in_px, dp10_in_px);
you should replace line something like this
replyButton.setPadding(0,padding,0,0);

can a custom RelativeLayout exceed parents height when defined as parents height?

I have the following structure within a view hierarchy
ScrollView
LinearLayout (horizontal)
- RelativeLayout (X)
-LinearLayout
-CustomView
- RelativeLayout
- RelativeLayout
- RelativeLayout
- RelativeLayout
- RelativeLayout
Here is a sample of it in the xml
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:id="#+id/linLayoutWrapper"
android:layout_width="match_parent"
android:layout_height="1080dp"
android:background="#color/white">
<!--- note this include is a <RelativeLayout> -->
<include
android:id="#+id/dg_axis"
layout="#layout/day_grid_axis"></include>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/grayBorder"></View>
<--- start of repetitive substructure which his higlighted in screen shot -->
<RelativeLayout
android:id="#+id/sundayColumn"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="1080dp">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
</LinearLayout>
<com.mynursesstation.views.DayView
android:id="#+id/sundayDayView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/grayBorder"></View>
<!--- repeat above sub structure 6 more times --->
</LinearLayout>
</ScrollView>
where the inner structure (X) is repeated for all other RelativeLayout siblings. The Linear Layout, RelativeLayouts
NOTE: (X) is shown highlighted in its unusual behavior in Red, where as its parent is the entire screen width and is delimited with the grey vertical line above it.
The RelativeLayouts would all be flush to the top of the Linear Layout if all of them were the same size (That is my experimental opinion which has yet to be proved). If one is bigger than the rest, then they by default align to the bottom. My question is, how can These children of the RelativeLayout's exceed their parent when they are defined by the parent? Could it be that I am programmatically creating views whose intrinsic heights exceed the height of their parents? What is android's official handling of this case? Does the view overflow like an HTML DOM element?
UPDATE:
On inspecting each RelativeLayout, my hypothesis that one of them exceeded 3240pixels was wrong. None of them do. Only there seems to be a top margin applied to some (Which would theoretically increase the height of its parent, being wrap_content) but it does not.
The definition of the RelativeLayout called CustomView, is a RelativeLayout within which are programmatically positioned relativelayouts. They are positioned within their parent as follows:
int pixels = (int) (height * scale + 0.5f);
pixels = (pixels + 4) / 5 * 5;
relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(
columnWidth / maxConflicts,
pixels));
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) relativeLayout.getLayoutParams();
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
params.addRule(RelativeLayout.ALIGN_PARENT_START);
start = cal2.get(Calendar.HOUR_OF_DAY);
height = start > 0 ? start * 44.000000000f + (start - 1) : start * 44.00000000f;
height += cal2.get(Calendar.MINUTE) / 60.00000000000f;
pixels = (int) (height * scale + 0.5f);
if (offsetAmount != null){
params.setMargins( (columnWidth / maxConflicts) * offsetAmount, pixels, 0, 0);
} else {
params.setMargins(0, pixels, 0, 0);
}
relativeLayout.setLayoutParams(params);
However there is never a case where the top margin of the relativeLayout above plus the height of the of the relativeLayout exceeds 1080dp. I verify this dynamically by logging the height of the CustomView DayView with the following code:
columnHeight = MeasureSpec.getSize(heightMeasureSpec);
which always logs out as 3240 pixels which at a scale of 3 is exactly 1080dp.
So this eliminates the possibility that one of the DayView exceeds 1080 and that is why not all the children of the top level LinearLayout are not flush to its top. However, I still cannot comprehend what could be causing this behavior. All elements programmatically added to the DayView are alignTop to their parent and are positioned with a vertically margin which, with the height of the view being programmatically added` never exceeds 1080dp.
Notice that the red views have a mysterious mTop added even though their dynamic height is 1080dp. mTop + 1080dp > 1080dp yet there parent is 1080dp (it is wrap_content) !
Take a good look at the view which is flush. It also has the same height but has a zero mTop. I don't understand why this is or how can be possible.
enter image description here
UPDATE Saturday:
Good News! i have narrowed down the problem to a subview of a subview, which when omitted, does not cause this strange inconsistency in my layout logic / intention. The culprit is a <TextView> which is programmatically added to the two types of events which are programmatically added <RelativeLayout>s added to DayView. when both types of views have textviews added as subviews it breaks the view hierarchy. When only one is present, the views present as intended. Here is the code for programmatically laying out the calendar events the entirety of which consist of all the subviews of a DayView:
private void createEventLayout(CalendarEvent e, Integer offsetAmount, int maxConflicts) {
final float scale = getContext().getResources().getDisplayMetrics().density;
int idForMyView = e.assignmentId > 0 ? e.assignmentId : -e.conflictId;
RelativeLayout relativeLayout = new RelativeLayout(getContext());
relativeLayout.setId(idForMyView);
Calendar cal2 = Calendar.getInstance();
cal2.setTimeZone(TimeZone.getTimeZone("UTC"));
cal2.setTime(e.startDate);
Calendar cal3 = Calendar.getInstance();
cal3.setTimeZone(TimeZone.getTimeZone("UTC"));
cal3.setTime(e.endDate);
float start = cal2.get(Calendar.HOUR_OF_DAY);
start += cal2.get(Calendar.MINUTE) / 60.0000000f;
float end = cal3.get(Calendar.HOUR_OF_DAY);
end += cal3.get(Calendar.MINUTE) / 60.00000000f;
float height = (end - start) * 45.0000000f;
int pixels = (int) (height * scale + 0.5f);
pixels = (pixels + 4) / 5 * 5;
relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(
columnWidth / maxConflicts,
pixels));
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) relativeLayout.getLayoutParams();
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
params.addRule(RelativeLayout.ALIGN_PARENT_START);
start = cal2.get(Calendar.HOUR_OF_DAY);
height = start > 0 ? start * 44.000000000f + (start - 1) : start * 44.00000000f;
height += cal2.get(Calendar.MINUTE) / 60.00000000000f;
pixels = (int) (height * scale + 0.5f);
if (offsetAmount != null){
params.setMargins( (columnWidth / maxConflicts) * offsetAmount, pixels, 0, 0);
} else {
params.setMargins(0, pixels, 0, 0);
}
relativeLayout.setLayoutParams(params);
if (e.assignmentId > 0){
// company name
TextView tv = new TextView(getContext());
tv.setId(idForMyView);
tv.setText(e.companyName);
LayoutParams tvParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
tvParams.setMargins(0,0,0,0);
tv.setLayoutParams(tvParams);
RelativeLayout.LayoutParams companyNameParams = (RelativeLayout.LayoutParams) tv.getLayoutParams();
tv.setTextColor(Color.parseColor("#ffffff"));
tv.setTypeface(null, Typeface.BOLD);
companyNameParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
//time of assignment / conflict
TextView tvTime = new TextView(getContext());
tvTime.setTextColor(Color.parseColor("#ffffff"));
SimpleDateFormat sdf = new SimpleDateFormat("h:mm a");
sdf.setTimeZone(TimeZone.getTimeZone("UTC"));
String startTime = sdf.format(e.startDate);
String endTime = sdf.format(e.endDate);
tvTime.setText(startTime + " - " + endTime);
tvTime.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
RelativeLayout.LayoutParams timeParams = (RelativeLayout.LayoutParams) tvTime.getLayoutParams();
timeParams.addRule(RelativeLayout.BELOW, idForMyView);
relativeLayout.addView(tv); // ALSO this will break if present with the other kind
relativeLayout.addView(tvTime); // this too
relativeLayout.setBackground(ContextCompat.getDrawable(getContext(), R.drawable.gradient_background_home));
relativeLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
final int assignmentId = view.getId();
if (assignmentId > 0) {
Intent intent = new Intent(getContext(), AssignmentDetailActivity.class);
intent.putExtra(getContext().getString(R.string.extra_assignment_id), assignmentId);
getContext().startActivity(intent);
}
}
});
} else {
final CalendarEvent event = e;
relativeLayout.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.conflict));
if (isConflictMode && e.isAllDay == 1){
TextView tv = new TextView(getContext());
tv.setId(idForMyView);
tv.setText(ALL_DAY_TEXT);
LayoutParams tvParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
tvParams.setMargins(0,0,0,0);
tv.setLayoutParams(tvParams);
RelativeLayout.LayoutParams companyNameParams = (RelativeLayout.LayoutParams) tv.getLayoutParams();
tv.setTextColor(Color.parseColor("#ffffff"));
tv.setTypeface(null, Typeface.BOLD);
companyNameParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
tv.setTextSize(TypedValue.COMPLEX_UNIT_PX,
getResources().getDimension(R.dimen.calendar_small_font));
relativeLayout.addView(tv); //THIS will break the layout logic
}
}
this.addView(relativeLayout);
return;
}
I tried making sure the <TextView> is clipped by its parent by setting
tv.setGravity(Gravity.CLIP_HORIZONTAL | Gravity.CLIP_VERTICAL)
when I inspect it in the view it appears that it is clipping exactly to the bounds of the tv, yet, something seems to be exceeding the height of its parent based on the fact that when the <TextViews> are gone everything addes up, but when they are present, there seems to be too much vertical content.

So my problem was that i was assigning the same id to the <RelativeLayout> which was the particular CalendarEvent as well as to the children of this view, the <TextViews>. This created circular logic which referred to the parent and child which caused the views to not properly by aligned, I think specifically with the BELOW requirement of one of the textViews, being essentially made to be below itself. By creating a unique id with View.generateId() each time I created a <TextView> then the intended layout was made possible.

Android: Measured width of dynamically created TextView sometimes wrong

I'm stuck on a strange little problem.
The goal with this activity is to display two texts, one is the original the second the answer text. The answer text contains errors and the user has to find and mark those errors.
The solution we came up with is to split the text into its words and display each word as its own in a TextView. All these TextViews are created dynamically at runtime, because there are many different texts to display.
There are two instances, where we need a 'line break': a) the text contains a linebreak () and b) the width of the display wouldn't fit any more text.
This solution works most of the time but each text has 2-4 words, which don't fit the line width and are therefore broken up into multiple lines visually.
Here's the code:
String[] questionSplit = exercise.exerciseQuestion.split(" ");
ids = new Integer[questionSplit.length];
int displayWidth = getResources().getDisplayMetrics().widthPixels;
int currentLineWidth = 0;
Integer lastIdInRow = 0;
int counter = 0;
for(String bit : questionSplit) {
TextView tv = new TextView(this);
tv.setId(generateViewId());
ids[counter] = tv.getId();
//Exception for <br>
if(bit.equals("<br>")) {
lastIdInRow = ids[counter - 1];
currentLineWidth = 0;
} else {
tv.setText(bit);
tv.setPadding(dpToPx(3), dpToPx(3), dpToPx(2), dpToPx(2));
tv.measure(0, 0);
currentLineWidth += tv.getMeasuredWidth();
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
if(currentLineWidth <= displayWidth && counter == 0) {
// move along, nothing to see here
} else if(currentLineWidth <= displayWidth && counter != 0) {
p.addRule(RelativeLayout.RIGHT_OF, ids[counter - 1]);
} else {
lastIdInRow = ids[counter - 1];
currentLineWidth = 0;
}
if(lastIdInRow != 0 && lastIdInRow != tv.getId()) {
p.addRule(RelativeLayout.BELOW, lastIdInRow);
}
rlTextComparisonOriginal.addView(tv,p);
}
counter++;
}
To explain the layout rules of the TextViews: if the measuredWidth fits into the line, a RIGHT_OF the last id rule is added. If it would overflow, a BELOW the last id in the line rule is added.
As I mentioned earlier, for most of the text that works perfectly. But there are some words which do not fit. If I change the displayWidth to be only 80% of the display width, the error persists just the word changes, so I think it's not the specific text / word.
And here is the relevant part of the view's xml
<ScrollView
android:id="#+id/svTextComparisonDesc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvTextComparisonHeaderMiddle"
android:paddingBottom="55dp"
>
<RelativeLayout
android:id="#+id/rlTextComparison"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvTextComparisonDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/text_background"
android:padding="10dp"
android:text="#string/text_exercise_desription"
android:textSize="#dimen/activity_text_description_size"
android:scrollHorizontally="false"
/>
<RelativeLayout
android:id="#+id/rlTextComparisonOriginal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/text_background"
android:layout_below="#id/tvTextComparisonDescription"
/>
<RelativeLayout
android:id="#+id/rlTextComparisonAnswer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/rlTextComparisonOriginal"
/>
</RelativeLayout>
</ScrollView>
The last bit of information: right now the code above resides in the activity's onCreate Method. If I log the measuredWidth and displayWidth and currentWidth, the logic isn't broken, the measuredWidth fits into the line, but after rendering, it doesn't.
Any ideas what the problem actually might be? Thanks in advance!
After using the mentioned lib the code is much cleaner and looks like this:
//Exception for <br>
if(bit.equals("<br>")) {
FlowLayout.LayoutParams lp = new FlowLayout.LayoutParams(0,0);
lp.setNewLine(true);
flTextComparisonOriginal.addView(tv,lp);
} else {
tv.setText(bit);
tv.setPadding(dpToPx(3), dpToPx(3), dpToPx(2), dpToPx(2));
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
flTextComparisonOriginal.addView(tv, p);
}

In case using a library is acceptable instead of coding it yourself, you will find two projects on github under the keyword "FlowLayout". These sound like they solve the layout you need:
https://github.com/ApmeM/android-flowlayout
https://github.com/blazsolar/FlowLayout

To get width and height of the text view,
Rect bounds = new Rect();
Paint textPaint = textView.getPaint();
textPaint.getTextBounds(text,0,text.length(),bounds);
int height = bounds.height();
int width = bounds.width();

Android make continues scrolling text within single view in repeat mode

I am trying to implement ticker board where you can see all ticker in scrolling mode check below image,
now I want continue scrolling for example
in #user5 after some space and start again with this same value no blank area like in init space
I want like this
scrolling text from one user 3 hours #user3 <some space> scrolling text from...
sorry for bad english
here is my code
View view = parent_layout.getChildAt(index);
// measures the unconstrained size of the view
// before it is drawn in the layout
view.measure(View.MeasureSpec.UNSPECIFIED,
View.MeasureSpec.UNSPECIFIED);
// takes the unconstrained width of the view
float width = view.getMeasuredWidth();
float height = view.getMeasuredHeight();
// gets the screen width
view.setLayoutParams(new LinearLayout.LayoutParams((int) width,
(int)height));
Log.e("contact details","width and screenwidth are" + width + "/"
+ screenWidth + "///" + view.getMeasuredWidth());
// performs the calculation
toXDelta = width - (screenWidth - 0);
// sets toXDelta to -300 if the text width is smaller that the
// screen size
if (toXDelta < 0) {
toXDelta = 0 - screenWidth;// -300;
} else {
toXDelta = 0 - screenWidth - toXDelta;// -300 - toXDelta;
}
// tickerList.add(view);
// animList.add(mAnimation);
// Animation parameters
mAnimation = new TranslateAnimation(screenWidth,
toXDelta, 0, 0);
mAnimation.setDuration(15000);
// mAnimation.setRepeatMode(Animation.RESTART);
mAnimation.setRepeatCount(Animation.INFINITE);
view.setAnimation(mAnimation);

My solution is just create double of string means appending current string with itself if the length is lower then screen width and using marquee feature in Textview.
private float screenWidth;
onCreate(){
TextView tv = (TextView)findViewById(R.id.textview);
Point outSize = new Point();
getWindowManager().getDefaultDisplay().getSize(outSize);
screenWidth = outSize.x;
StringBuilder ticker = new StringBuilder("This is my String");
do{
tv.setText(Html.fromHtml(ticker.toString()));
int w = ticker.length();
if(screenWidth>w){
ticker.append(" ");
ticker.append(tickerList.get(index));
tv.setText(Html.fromHtml(ticker.toString()));
}else
break;
}while(true);
}
xml code
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:scrollHorizontally="true"
android:singleLine="true"
android:textSize="18sp"
android:padding="5dp"
android:id="#+id/textView1">
</TextView>