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.
Related
Android - How can I create layout as per image attached for different screens?
You must make different designs and use the visibility attribute to change the designs:
RelativeLayout oneLayout = findViewById (R.id.one_view);
RelativeLayout otherLayout = findViewById (R.id.other_view);
oneLayout.setVisibility (View.GONE);
otherLayout.setVisibility (View.VISIBLE);
To know what design to use:
DisplayMetrics metrics = context.getResources().GetDisplayMetrics ();
int height = metrics.heightPixels;
int width = metrics.widthPixels;
int density = metrics.densityDpi;
This way you will know the width and height of the screen.
For the design you have chosen, you should read about RelativeLayout and ConstraintLayout.
So there is one option, which is way too sophisticated and going to be fun to implement but could take forever, you draw this on a Canvas with all sort of paths and whatnot.
Another option is not very clever, but I think will do the trick!
Step 1
Split your background into squares, so that your background is a grid. Split it horizontally and vertically, like the images below.
Place those into containers, namely ViewGroups that split the screen correctly .. maybe using weights or ConstraintLayout
Step 2
You can align your items to the edges of those backgrounds you constructed.
Just an idea :)
Using the ViewPager view from the Android support library, the default setup shows one page at a time, with a large margin between each item - ie, if your view is about half the width of your activity there's space on either side, and as you swipe the next one in there's space there too.
ViewPagers have a method, setPageMargin(), that lets you specify an offset to adjust the margin size between pages, and I'm using it to specify a negative margin so that it pulls the pages closer together. However, obviously the amount you need to pull in these margins varies according to the screen dimensions.
So, I'm looking for a smarter way: is there a way to tell the ViewPager "I want no margins at all, making the views in my ViewPager butt up against each other"?
Thank you!
I don't know if there's a smarter way, but your way should work if all pages have the same width. Try something like this:
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
// getActivity().getWindow... if inside a Fragment
yourViewPager.setPageMargin((yourPageWidth - dm.widthPixels) / 2);
So I have been facing this problem for a while and still I cant find solution for it. Hopefully you guys can give me a hand in this. I have a cards game that a player can see his cards like any other cards game.
The problem is that a lot of people complained that cards are too small.When I run it on my devicr (galaxy s2) the cards size are good. By chance someone sent me a screenshot from his HTC and the cards are indeed smaller than What I have.
Please note that I have this 3 different density folders and my Images view are set at wrap content.
I Have 2 solutions in mind and I appreciate if you can help further
1) instead of wrap content, I user a predefined width for each screen size (not density).This will garaunter a specifc size (space it occupies)on large screens for example
2) Make the imageview size relative to the width of the screen.I dont know how to do it so any pointers are appreciated.
3) any suggestions?
please help a programmer stuck in this delemma
You can use DesplayMetrics to get the dimensions of the device at run time and use the width and height you get.
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int width = metrics.widthPixels;
int height = metrics.heightPixels;
ImageView iv = (ImageView)findViewById(R.id.yourImageViewId);
iv.setWidth(width);
iv.setHeight(height * 2/3);
or something like that. this way you will never get such issues.
Do you have images in different sizes for different densities? Which scale type are you using for ImageViews?
You can create different layouts for densities but I would start with experimenting with scale types - http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
I am making an android component which allows user to pick date from it. It can be helpful for developer who wants user to select date in his app. In my basic view, I have TextView where date from pop up will be populated into it and I have a button beside TextView. When a User clicks on the button, my component gets popped out and displays Dates. The component gets pops out in a Popup window and shows dates as month view and user also can switch from next-previous months, next-previous years just like we do in Calendar. Check the Image.
http://s15.postimage.org/ujw8py60b/stackoverflow.jpg (Sorry, I couldn't upload an image here because I am not allowed as I am new User here)
Each date is a TextView with the width of 35 and height as 30 set by me. DaysDisplayBar is also of some size set by me. So this component's whole width is 245 and height is around 200. Which is for mobile screen size.
I want to make this component as size dependent for various screen display sizes. For e.g. If it is being viewed on Tablet or Pad, it should be bigger in size than what its size on mobile phone screen. That is, For various displays its size should be changed to some value like max 1/3 of display size or like that something.
What can be the solution for this? According to me, some mathematics is needed here, some formula, equations etc. how about Parabola? Please help, I am dumb in maths totally. Thanks! :D
"Each date is a TextView with the width of 35 and height as 30 set by me. DaysDisplayBar is also of some size set by me. So this component's whole width is 245 and height is around 200. Which is for mobile screen size."
^^ is the problem. Sizes should be defined relative to the layout, not absolute. For example, the calendar has 7 columns (one for each day). Instead of making each one 35px, make each 1/7th of the screen.
SO:
I am assuming a DaysDisplayBar is a row containing 7 TextViews (one for each day). If that is true, why not call it a Week? Either way, The trick is in layout_wieght. Make all elements fill_parent, and all with the same weight of 1. This will evenly distrubate all elements in the parent. In your case, the parent is a DaysDisplayBar.
SO:
set DaysDisplayBar attribute `layout_width="fill_parent"
For each TextViewset attribute layout_width="fill_parent" ANDlayout_weight="1"`
hope that helps!
First of all, make sure you use density pixels (dip) instead of pixels.
Second, you can get the screen width and height, and from there, calculate your component size.
You can get the screen dimensions using the Display class getSize() method:
WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point screenSize = new Point();
display.getSize(screenSize);
int screenWith = screenSize.x;
Or you can get the parent view dimensions:
MarginLayoutParams params = (MarginLayoutParams)parentView.getLayoutParams();
int padding = parentView.getPaddingLeft() + parentView.getPaddingRight();
int margin = params.leftMargin + params.rightMargin;
int measuredWidth = parentView.getMeasuredWidth() - padding - margin;
That way you know how much space you have inside the parent view element for your component.
Remember to convert any hard coded value to dip, you can do it this way:
public static int getDensitySize(float size) {
float density = getResources().getDisplayMetrics().density;
return (int)(density * size);
}
You do all of this from your onMeasure method to set your view size, and later on the onDraw you'll use this measure to draw your component.
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.