I have a need to create a perfect square TableLayout. The table is a grid of equal sized objects. The problem here is that in landscape layout, the table should take up the maximum amount of space but nothing more. In other words, I need the width of the table equal to the maximum height allowable. An ad appears ~10 seconds or so after the activity starts so that also adds to the complexity.
Here is what I've tried so far to accomplish this:
I created a invisible view that was aligned horizontally center. I then aligned the right side of the table to this view. This works but for some devices, the screen ratio doesn't make this setup perfect. On devices like the droid, the bottom row is squinched in because the table width is smaller than the height.
I created an ImageView with adjustViewBounds set to true. I sourced it with a very large square image. I have it set to be above the adView and align top and align left. I then set the table layout to align to the bounds of that ImageView. This didn't work because it was a memory hog and the image bounds never fully adjusted when the ad popped up. The image source would go to a smaller scaled square but the right bound never adjusted to the new bounds.
I think this could be very easy if I made a custom class of the TableLayout and set the tablewidth = tableheight. I am struggling with this idea because I don't know where all I would need place the necessary logic. I suppose I would need to add it when the table gets initially drawn and again when the Table adjusts after the ad moves into place.
Can someone help with some sample code on the TableLayout class? Is there another way to do this?
Update 3/30 9:05PM PST
I've made some progress with a custom TableLayout class after looking through the suggestion from CommonsWare. I'm closer to achieving the solution using this class but have one left thing to solve. The new TableLayout doesn't adjust it's bounds so the width is still taking up additional space even though the contents are sized correctly. The width looks to be set when there isn't an ad and it never changes after that.
Here is my really simple extended TableLayout class. Note the onMeasure method where I set the width and height both equal to the height:
public class SquareTableLayout extends TableLayout {
public SquareTableLayout(Context context) {
super(context);
}
public SquareTableLayout (Context context, AttributeSet attrs) { super(context, attrs); }
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, heightMeasureSpec);
}
}
Here is a screenshot of the problem. I added apurple background to the TableLayout to highlight the problem.
http://ribzy.com/images/tile_takedown_landscape.png
TableLayout cannot accomplish what you seek, for the reasons you have determined. There is no built-in layout that has the notion of tying width and height together. Most likely, you will need to create a custom layout manager from scratch, like this one.
Related
I am designing a title row that has the item title in the middle, with a status description on the left and expiration date description on the right. The title should be centered at all times and expand width until it runs into either of the side views, at which time it should get ellipsized. I'm having trouble figuring out how to keep the title view centered while allowing for the two side views to have different sizes, while also trying to show as much of the text as possible in cases where the side views have only two or three characters, or as many as 20.
This is NOT a basic question of having the center view fill the space. The cases will outline the additional requirements I have that make it more tricky.
I tried two main approaches:
LinearLayout
I started with a horizontal LinearLayout. The first and third TextViews had widths of WRAP_CONTENT while the center title view had a width of 0dp and weight of 1, allowing it to fill the middle section of the row. The issue here was that the first and third views wouldn't have the same width with WRAP_CONTENT, so the title view would be shifted one way or the other. See here how the title is shifted to the left towards the smaller text:
After that, I assigned a weightSum of 20 to the LinearLayout, gave weights of 4 to the first and third views, a weight of 12 to the middle view, and width of 0dp for all 3. This worked better but wouldn't allow for longer text in the end views, even when there was plenty of room in the row for the view to expand:
Changing the views to use layout_weight and widths of WRAP_CONTENT didn't work either.
ConstraintLayout
I switch the row to a ConstraintLayout to try that as well.
I started this route with the end views using WRAP_CONTENT as their width and the title view using 0dp. The title view had its start linked to the end of the first view, and its end linked to the start of the last view. Of course, this would shift the title view towards whichever end text was shorter. Changing the end views to a width of 0dp yielded the same result.
From here I got closer. I linked the middle view's start and end to the parent LinearLayout so that it stretched the entire width. Then I linked the first view's end to the middle view's start, and the last view's start to the middle view's end, and set both of their widths to 0dp. By setting the middle view's width to 0dp and adding a marginStart and marginEnd of 64dp, I allowed some space for the first and last views to be shown. Still, this was like the LinearLayout solution with weights, as the gaps on each side of the middle view was of the fixed 64dp size, and didn't allow for expansion.
My last effort was so close! Changing the middle view's width to WRAP_CONTENT, and start and end both linked to the parent, allowed the end views to be of equal widths, and fully expanded. That is, UNTIL the title view became very long. With a width of WRAP_CONTENT, the middle view would push the end views off the screen with a very long text, even with a min_width set on the end views.
Changing the end views to have widths of WRAP_CONTENT didn't work either.
What I want to accomplish is most like this last try, except that I want the middle view to stop expanding and become ellipsized instead of pushing the end views out. Any other ideas to try?
The problem is if you want the first and third views equal width I don't think it is possible with just standard xml layouts as it's too late once a view has been sized, it won't be resized again without extra code.
Something like TableLayout has the extra code to resize all the rows to match, one it's sized them individually.
But you can to this yourself programmatically
e.g
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout mainLayout = findViewById(R.id.content);
// Wait until mainLayout has it's size calculated
ViewTreeObserver.OnGlobalLayoutListener mGlobalLayoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// Don't listen anymore
mainLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
TextView col1 = new TextView(getApplicationContext());
TextView col2 = new TextView(getApplicationContext());
TextView col3 = new TextView(getApplicationContext());
col1.setText("Much Long");
col1.setBackgroundColor(Color.CYAN);
col3.setText("Long");
col3.setBackgroundColor(Color.CYAN);
col3.setGravity(Gravity.RIGHT);
col2.setText("Really Really Really Really Really Really Really Really Really Long");
col2.setGravity(Gravity.CENTER_HORIZONTAL);
col2.setSingleLine(true);
// Set it to have Ellipsizes if too long
TextUtils.TruncateAt truncate = TextUtils.TruncateAt.END;
col2.setEllipsize(truncate);
int measureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED); // As big as the view wants to be
// Measure all the views
col1.measure(measureSpec, measureSpec);
col2.measure(measureSpec, measureSpec);
col3.measure(measureSpec, measureSpec);
// work which side is bigger
int maxWidth = Math.max(col1.getMeasuredWidth(), col3.getMeasuredWidth());
int parentWidth = mainLayout.getWidth();
// Probably should have some checks to make sure centre width does not go negative
int centreWidth = parentWidth - (2 * maxWidth);
col1.setWidth(maxWidth);
col2.setWidth(centreWidth);
col3.setWidth(maxWidth);
mainLayout.addView(col1);
mainLayout.addView(col2);
mainLayout.addView(col3);
}
};
mainLayout.getViewTreeObserver().addOnGlobalLayoutListener(mGlobalLayoutListener);
}
}
Produces some examples
The centre of the middle column is always at the centre of the screen
I used Horizontal scroll view in which I add 'Child View'. But on HZ scroll view I want to arrange child some think like, whole screen will show 3.5 child at a time or 4.5 , 5.5 depends on screen size. The half of child indicate there is more child on Scroller.
For that I used different dimensions for child view depends on density. But still their is some device which show whole child at the end of screen.
So how I can mange this on scroll view. Please guide me in right direction.
For that I used different dimensions for child view depends on
density. But still their is some device which show whole child at the
end of screen.
That will not work well in a lot of devices.
Assuming that those orange child views are all of the same width(although not that important) and you want to show half of one only when the HorizontallScrollView is first laid out, you could simply post a Runnable(in the onCreate method) on a view to set their widths to a proper dimension so you make the proper appearance:
public void onCreate(Bundle saved) {
// ... work
horizontalScrollView.post(new Runnable() {
#Override
public void run() {
DisplayMetrics dm = getResources().getDisplayMetrics();
int screenWidth = dm.widthPixels;
// based on this width, the space between the children and their
// widths calculate new widths so you get a half clipped
// children on the right side.
}
});
}
But, I would avoid this and simply set a much more powerful indicator on the HorizontalScrollView(overriding its dispatchDraw method and drawing something there(maybe also hiding it a bit later with a Runnable)) if you really want to make sure that the user sees the extra content.
I'm trying to display values that a user enters on an image, there are 4 versions of image (ldpi, mdpi, hdpi and xhdpi).
I want to position the textViews on a "fixed" location that adjusts to the right screensize.
Has anyone got some advice on how I could achieve this?
Here is a sketch of what I'm trying to do.
http://dl.dropbox.com/u/251053/stackoverflow.png
edit
Thanks for the fast responses.
Uploaded a new image, this isn't possible with relative layout I guess?
http://dl.dropbox.com/u/251053/stackoverflow1.png
Look at the "RelativeLayout" documentation: http://developer.android.com/reference/android/widget/RelativeLayout.html
You will be able to put your textView around your ImageView.
The best way to solve this I think is to create a custom layout that expects the ImageView as its first child.
All the other children will be the TextView's that you can either:
position relatively to the position of your ImageView
position proportionally to the height/width of your parent custom layout that matches the height/width of your ImageView
The left/top position information of the child TextView's can be given through a custom LayoutParams class that suits your needs.
I think the best way is to create a custom view by extending View class. It is not so complicated as it may look. Here you can find more info about custom UI components.
The main idea is to override onDraw(Canvas canvas) and onMeasure(int widthMeasureSpec, int heightMeasureSpec) methods.
In onMeasure you should return the dimensions of your view and also you may calculate the size and angle of the rectangle and also the size of text you want to draw. Or you can implement custom resize() method that will be called explicitly on you view from the activity and make text and image calculations.
When you know all the measurements you can position and draw both image and text in onDraw(Canvas canvas) method.
#Override
protected void onDraw(Canvas canvas) {
myImageDrawable.setBounds(0,0,50,50);
myImageDrawable.draw(canvas);
canvas.drawText(myText, 10, 10, myTextPaint);
}
You can find more info about Canvas class here.
Also you may use StaticLayout to measure text.
Basically I'm trying to make an application for tablets.
There going to be a bunch of widgets added and removed by the user inside a table layout. It needs to be dynamic so that the widgets are sized differently based on the width and height of the table layout.
To do this, I'm trying to make a 3x3 grid in a tablelayout. As I'm sure you guessed, each square has 33% width and height of the tablelayout.
This is what I got:
DisplayMetrics metrics;
int totalScreenSizeH;
int totalScreenSizeW;
TableLayout contentTable;
LinearLayout contentLayout;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//Get the UI detail
metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
totalScreenSizeH = metrics.heightPixels;
totalScreenSizeW = metrics.widthPixels;
contentTable=(TableLayout)findViewById(R.id.tableLayout1);
contentLayout=(LinearLayout)findViewById(R.id.contentLayout);
int tableWidth =contentTable.getWidth();
int tableHeight=contentTable.getHeight();
int layoutWidth=contentLayout.getWidth();
int layoutHeight=contentLayout.getHeight();
Log.v("Table Width",""+tableWidth);
Log.v("Table Height",""+tableHeight);
Log.v("Layout Width",""+layoutWidth);
Log.v("Layout Height",""+layoutHeight);
So just to explain this a bit better. The linearLayout contains the tablelayout which has 3 table rows. I figured that I would be able to get the width and height of these but for some reason, both are coming back as 0 in size. One I have the width and height dims, Im going to save that variable and the create the widgets based on those variables/3.
So 2 questions:
1: is this the right way to handle dynamically sized widgets. Or is this the wrong way to handle a problem like this?
2: Any ideas why those 2-4 variables are all coming back as 0?
I would advise against doing pixel-perfect designs on android, due to the vast amount of resolutions and densities you have to deal with.
My suggestion would be to look at android:layout_width/height="wrap_content" and android:layout_weight="INTEGER" that will help you make floating 3x3. You can also achieve this with a GridView
I linked to the source in a comment to the OP, but for the 3x3 Grid, follow some practices Roman has done with his custom DashboardLayout implementation (Apache License FTW). It will correct for horizontal and vertical spacing on various screen dimensions: https://gist.github.com/882650.
If it doesn't fit your use case, I highly suspect you can modify it to do so.
I'm attempting to build a layout programmatically.
This layout is dynamic. Based on the data read from a database, it could look different every time.
I have a LinearLayout with its orientation set to vertical.
I want to fit as many TextViews with text (the data from database) as I can on a "row".
What I'm doing is building LinearLayouts that are the rows. These LinearLayouts are populated with TextViews. I build the TextView, set the text, and then check the width to see if it will fit on this row (by subtracting the sum of all TextView widths from the screen width and see if the new TextView will fit). If not, I create a new LinearLayout and start adding TextViews to that one.
The problem is myTextView.getWidth() and myTextView.getMeasuredWidth() both return 0.
Why? How can I get the width of the TextView?
Well first of all, please post your code. Second the getWidth/getHeight returning zero question gets asked A LOT so you could search SO for more answers.
Assuming your calling these methods during onCreate (which is probably the case), the UI hasn't been drawn yet so the returned value is zero. You can't get the width or height of the view until it has been drawn.
You can use this library to schedule the task of perform calculation on the width to the correct time after the view had been completely drawn
You can call it on onCreate() and from any Thread
https://github.com/Mohamed-Fadel/MainThreadScheduler
Sample of use:
MainThreadScheduler.scheduleWhenIdle(new Runnable() {
#Override
public void run() {
int width = textview.getWidth();
int height = textview.getHeight();
textview.setText( String.valueOf( width +","+ height ));
}
});