Develop Reference

ViewPager in a ScrollView with dynamic page heights

I've read many other SO answers but nothing seems to be what I want. What I want is a ViewPager inside a ScrollView with the heights of each page being appropriate for the content. Some of the more accepted answers on SO seem to have to take the max height of the children in the ViewPager but that leads for empty space.
WrapContentViewPager
public class WrapContentViewPager extends ViewPager {
public WrapContentViewPager(Context context) {
super(context);
}
public WrapContentViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int height = 0;
View view = null;
for(int i = 0; i < getChildCount(); i++) {
view = getChildAt(i);
view.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int h = view.getMeasuredHeight();
if(h > height) height = h;
}
if (height != 0) {
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), measureHeight(heightMeasureSpec, view));
}
/**
* Determines the height of this view
*
* #param measureSpec A measureSpec packed into an int
* #param view the base view with already measured height
*
* #return The height of the view, honoring constraints from measureSpec
*/
private int measureHeight(int measureSpec, View view) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
// set the height from the base view if available
if (view != null) {
result = view.getMeasuredHeight();
}
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
}
The reason why this doesn't work is because if I go to the third page, which has a large height with 32 items in the list, then go back to the second page with only 3 items, there is a lot of empty space in the second page since it took the height of the third page as max.
I've tried WCViewPager library on GitHub at https://github.com/rnevet/WCViewPager and it doesn't work for me as well.
Could someone guide me to a correct solution? I am using a ViewPager with just PagerAdapter, not FragmentPagerAdapter by the way.
UPDATE
I figured out a better way to solve it.
`public class WrapContentViewPager extends ViewPager {
public WrapContentViewPager(Context context) {
super(context);
}
public WrapContentViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int mode = MeasureSpec.getMode(heightMeasureSpec);
// Unspecified means that the ViewPager is in a ScrollView WRAP_CONTENT.
// At Most means that the ViewPager is not in a ScrollView WRAP_CONTENT.
if (mode == MeasureSpec.UNSPECIFIED || mode == MeasureSpec.AT_MOST) {
// super has to be called in the beginning so the child views can be initialized.
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int position = getCurrentItem();
View child = this.findViewWithTag("view"+position);
child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int height = child.getMeasuredHeight();
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
}
// super has to be called again so the new specs are treated as exact measurements
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}`
and in my PagerAdapter I changed the method instantiateItem
#Override
public #NonNull Object instantiateItem(#NonNull ViewGroup view, int position) {
View layout = inflater.inflate(R.layout.layout, view, false);
layout.setTag("view" + position);
}
This solution remeasures the height at the current page every time it is moved. getChildAt(getCurrentItem()) gives different results so it's not reliable.

Gravity of a child TextView does not work with custom ViewGroup

I have the following classes:
public class MyGridView extends ViewGroup {
...
#Override
public void onSizeChanged(int xNew, int yNew, int xOld, int yOld) {
super.onSizeChanged(xNew, yNew, xOld, yOld);
// do calculations for drawing bounds of child views
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
View child;
Rect rect;
for (int i=0; i < getChildCount(); i++) {
child = getChildAt(i);
rect = getBoundsAtChildIndex(i)
child.layout(rect.left, rect.top, rect.right, rect.bottom);
}
}
...
}
AND
public class MyAdapter {
public void setMyGridView(MyGridView myGridView) {
// add a single TextView to my grid view
textView = createTextView(context);
addTextViewToGrid(textView);
container.add(textView);
}
private TextView createTextView(Context context) {
TextView textView = new TextView(context);
textView.setText("1");
textView.setTextColor(0xffffffff);
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f);
textView.setTypeface(typeface);
textView.setGravity(Gravity.CENTER | Gravity.FILL);
// textView.setGravity(Gravity.RIGHT); // other tries to see gravity
// textView.setGravity(Gravity.FILL);
return textView;
}
private void addTextViewToGrid(TextView textView) {
myGridViewPtr.addView(textView, ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
}
...
}
I have created a custom grid view and adapter, where its children draw to the screen to the correct size and location. However, their gravity, set in the createTextView() is not observed.
I can set a background image to the textView and see it fill its space in the grid.
In contrast, the text in textView always draws in its top left corner, and it always stays at the text size I set it at 12sp, rather than scale to fit using Gravity.FILL.
Preferably, the text would scale to fit and center within the textview.
EDIT
I have added the following method for onMeasure() in ViewGroup:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
doUpdateOnSizeChanged(width, height);
for (int i = 0; i < getChildCount(); i++)
getChildAt(i).measure((int) viewDim.x, (int) viewDim.y);
setMeasuredDimension(width, height);
}
The children are supposed to be the same height, width as each other. The android example code for ViewGroup is more sophisticated than I require. For instance, I am not getting the max of all children width, height.
For my onMeasure(), the child width, height in ViewDim is width, height integers that are computed in doUpdateOnSizeChanged to be less than getMeasuredWidth, getMeasuredHeight.
The result is now text aligns in the bottom-left corner of the TextView.

onMeasure needed minor corrections, basically needing to rely on MeasureSpec:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width, height;
int cWidth1, cHeight1;
width = MeasureSpec.getSize(widthMeasureSpec);
height = MeasureSpec.getSize(heightMeasureSpec);
doUpdateOnSizeChanged(width, height);
cWidth1 = (int)viewDim.x; cHeight1 = (int)viewDim.y;
measureChildren(MeasureSpec.makeMeasureSpec(cWidth1, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(cHeight1, MeasureSpec.EXACTLY));
setMeasuredDimension(width, height);
}

extended View Group forces the child dimensions

I wrote the following ViewGroup
public class myViewGroup extends ViewGroup{
List<View> qResult;
List<Point> qLoc;
ImageView qImage;
public QueryViewLayout(Context context){
super(context);
}
public QueryViewLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public QueryViewLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
qResult = new LinkedList<View>();
qLoc = new LinkedList<Point>();
qImage = null;
}
public void addMainView(ImageBorderView view){
qImage = view;
super.removeAllViews();
super.addView(view);
}
public void addResultView(View result, Point loc){
super.addView(result);
qResult.add(result);
qLoc.add(loc);
}
/**
* Any layout manager that doesn't scroll will want this.
*/
#Override
public boolean shouldDelayChildPressedState() {
return false;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
// Measurement will ultimately be computing these values.
int maxHeight = 0;
int maxWidth = 0;
int childState = 0;
// Only main view affects the layouts measure
if (qImage != null) {
if (qImage.getVisibility() != GONE) {
// Measure the child.
qImage.measure(widthMeasureSpec, heightMeasureSpec);
maxWidth = qImage.getMeasuredWidth();
maxHeight = qImage.getMeasuredHeight();
childState = qImage.getMeasuredState();
}
}
for (View child:qResult){
if (MeasureSpec.getMode(widthMeasureSpec) != MeasureSpec.UNSPECIFIED)
child.measure(MeasureSpec.makeMeasureSpec(maxWidth, MeasureSpec.AT_MOST),
MeasureSpec.makeMeasureSpec(maxHeight, MeasureSpec.AT_MOST));
}
maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight());
maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth());
// Report our final dimensions.
setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState),
resolveSizeAndState(maxHeight, heightMeasureSpec,
childState << MEASURED_HEIGHT_STATE_SHIFT));
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
final int count = getChildCount();
int parentLeft = left + getPaddingLeft();
int parentRight = right - getPaddingRight();
final int parentTop = top + getPaddingTop();
final int parentBottom = bottom - getPaddingBottom();
if (qImage == null) return;
qImage.layout(parentLeft, parentTop, parentRight, parentBottom);
Iterator<Point> loc = qLoc.iterator();
for (View child:qResult) {
Point p = loc.next();
if (child.getVisibility() != GONE) {
int width = child.getMeasuredWidth();
int height = child.getMeasuredHeight();
Point locOnView = qImage.projectOnView(p);
width = (width < (int) Math.max(parentRight - (int) locOnView.x, locOnView.x - parentLeft)) ?
width : (parentLeft + parentRight)/2;
height = (height < (int) Math.max(parentBottom - (int) locOnView.y, locOnView.y - parentTop)) ?
height : (parentBottom + parentTop)/2;
int x = (width < (parentRight - (int) locOnView.x)) ? (int) locOnView.x : (parentRight - width);
int y = (height < parentBottom - (int) locOnView.y) ? (int) locOnView.y : (parentBottom - height);
// Place the child.
child.layout(x, y, x + width, y + height);
}
}
}
}
It is supposed to show some arbitrary view on top of an image, given a location for that view, when I use a GridView as the arbitrary view, even though I have defined a certain width for the GridView it is forced to have a width as large as the frame. In the measure phase I changed the mode to
MeasureSpec.AT_MOST
for both width and height of the overlay view, but this does not seem to work, can someone please help.
here is the xml where I, inflate the GridView from
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/result_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:columnWidth="#dimen/result_view_column_width"
android:numColumns="2"
android:verticalSpacing="2dp"
android:horizontalSpacing="2dp"
android:stretchMode="none"
android:gravity="center"
android:layout_margin = "2dp"
android:background="#drawable/solid_with_shadow" />

After a lot of trial and error, replacing
child.measure(MeasureSpec.makeMeasureSpec(maxWidth, MeasureSpec.AT_MOST),
MeasureSpec.makeMeasureSpec(maxHeight, MeasureSpec.AT_MOST));
with
measureChild(child, MeasureSpec.makeMeasureSpec(maxWidth, MeasureSpec.AT_MOST),
MeasureSpec.makeMeasureSpec(maxHeight, MeasureSpec.AT_MOST));
worked for me, I am not sure why, but a wild guess would be calling measure on a child does not read all the xml props, but measureChild(child, ...) does.

Android custom layout wrap content

I am implementing custom layout.
I put ImageViews to my layout and in onMeasure() method call all children child.measure(w, h)
Everything works fine instead of wrap_content behavior.
Views behave like they are match_parent and are full screen size instead of wrap content.
When I want to make view to be wrap_content doing this
if (boxSize == MyBox.RATIO_MEASURE) {
spec = MeasureSpec.AT_MOST;
size = containerSize;
code:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
for (int i = 0; i < getChildCount(); i++) {
View v = getChildAt(i);
// custom layout logic
MyBox box = getBox(v);
int width = getMeasuredSpec(box.getWidth(), widthMeasureSpec);
int height = getMeasuredSpec(box.getHeight(), heightMeasureSpec);
v.measure(width, height);
}
}
private int getMeasuredSpec(float boxSize, int containerSpec) {
int containerSize = MeasureSpec.getSize(containerSpec);
int spec;
int size;
if (boxSize == MyBox.RATIO_MEASURE) {
spec = MeasureSpec.AT_MOST;
size = containerSize;
} else if (boxSize == 1) {
spec = MeasureSpec.AT_MOST;
size = containerSize;
} else {
spec = MeasureSpec.EXACTLY;
size = (int) (MyBox.isScreenDependent(boxSize)
? containerSize * boxSize
: boxSize);
}
return MeasureSpec.makeMeasureSpec(size, spec);
}

Hrm.... this seems tricky b/c you are doing it from inside Java.
I think the magical class that you want is LayoutParams
https://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html#MATCH_PARENT
int WRAP_CONTENT= -2;
LayoutParams params= new ViewGroup.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
ImageView bNext_Word = (ImageView) rootView.findViewById(R.id.myimage);
mImage.setLayoutParams( params);

Set the Height of View to Make It Square By Knowing Only Its Width Weight

I have this scenario:
A horizontal LinearLayout that fills the container and weightSum=100, and two views inside with weight of 50 each.
Now how do I make these two views square (e.g. the height must be equal to their width). The number of LinearLayout rows is unknown, so basically, I can not wrap them in a vertical container with weights in this case.

Now how do I make these two views square (e.g. the height must be
equal to their width).
If you have just those two views in the LinearLayout you have two options:
Don't set your layout file directly as the content view, instead inflate it so you have a reference to the root from that file. Then post a Runnable on that root view, calculate the desired height and set it back to each of the two children of the LinearLayout that wraps them:
final View v = getLayoutInflater().inflate(
R.layout.views_specialheight, null);
v.post(new Runnable() {
#Override
public void run() {
setupHeight((ViewGroup) v);
}
});
setContentView(v);
where setupHeight() is the method:
private void setupHeight(ViewGroup vg) {
int count = vg.getChildCount();
for (int i = 0; i < count; i++) {
final View v = vg.getChildAt(i);
if (v instanceof LinearLayout) {
int width = v.getWidth();
LinearLayout.LayoutParams lp;
View one = ((LinearLayout) v).getChildAt(0);
lp = (LinearLayout.LayoutParams) one.getLayoutParams();
lp.height = width / 2;
one.setLayoutParams(lp);
View two = ((LinearLayout) v).getChildAt(1);
lp = (LinearLayout.LayoutParams) two.getLayoutParams();
lp.height = width / 2;
two.setLayoutParams(lp);
}
}
}
This method will work pretty well if you just have a wrapper ViewGroup subclass that wraps those LinearLayout rows. It can(and should) be improved, but I'm sure you get the point.
The second option is to use a custom ViewGroup(this may be used depending on what you were planing to do with the LinearLayout) instead of the LinearLayout like this:
<com.luksprog.oat.views.SpecialHeightViewGroup
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0077cc"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#99cc00"
android:text="Button" />
</com.luksprog.oat.views.SpecialHeightViewGroup>
The SpecialHeightViewGroup is a class like this:
class SpecialHeightViewGroup extends ViewGroup {
public SpecialHeightViewGroup(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
public SpecialHeightViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SpecialHeightViewGroup(Context context) {
super(context);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY
|| widthMode == MeasureSpec.AT_MOST) {
measureChildren(MeasureSpec.makeMeasureSpec(widthSize / 2,
MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(
widthSize / 2, MeasureSpec.EXACTLY));
measureChildren(MeasureSpec.makeMeasureSpec(widthSize / 2,
MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(
widthSize / 2, MeasureSpec.EXACTLY));
setMeasuredDimension(widthSize, widthSize / 2);
} else {
widthSize = 800; // we don't have restrictions, make it as big as we want
measureChildren(MeasureSpec.makeMeasureSpec(widthSize / 2,
MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(
widthSize / 2, MeasureSpec.EXACTLY));
measureChildren(MeasureSpec.makeMeasureSpec(widthSize / 2,
MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(
widthSize / 2, MeasureSpec.EXACTLY));
setMeasuredDimension(widthSize, 400);
}
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
View one = getChildAt(0);
one.layout(0, 0, getWidth() / 2, getHeight());
View two = getChildAt(1);
two.layout(getWidth() / 2, 0, getWidth(), getHeight());
}
}
The custom class isn't properly tested so it may have bugs(it's just an example).
Offtopic: Are you trying by any chance to create an UI like on the new Windows phones(with the tiles thing)?