How to develop an extensible view with a fixed aspect ratio view

Question

In my application, I have a scroll. Over the life of my application, I dynamically add new views to the scroll view. I can add views with a little problem, however, I cannot correctly estimate the sizes. Here is a sketch of my desired layout:

In the image, I have a screen with Width dimensions at Height . It contains a HorizontalScrollView (or perhaps a RecyclerView , but I'm not sure how to use this), which will grow when views are added to it. I want each element added to the view to have a width equal to one fifth of the height of the screen, and to have corresponding heights. I can do this job if I rigidly set the width of the bloated view, however my view will not be the same aspect ratio on all phones.

Note. I tried using PercentRelativeLayout, but I could not get it to work. Not sure how to solve this problem ... any ideas?

---

Note on generosity . I will accept answers in Java or C # (Xamarin) !! My project is in Xamarin, so it would be nice if it worked for this, or if it can be easily adapted to work in C #

Answer 1

You do not want your view to be fifth in height of the screen; you want it to be one fifth of the height of the parent view. Or, to be precise, you want your width to be one fifth of the height of your views.

The difference is that using the width / height of the screen may work on your device, but break on others. What would you do if someone opened your split-screen application?

However, determining the size of your presentation, the approach is the same: if you want a presentation that follows certain rules, you will need to create your own and evaluate your presentation accordingly.

 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int availableHeight = MeasureSpec.getSize(heightMeasureSpec); int wantedWidth = availableHeight / 5; setMeasuredDimension(wantedWidth, availableHeight); } 

And that’s basically it. You might want to read the correct documentation about MeasureSpec and measurements in general. I also wrote a blog post about custom views covering some of the basics.

Then you can simply add your custom views to LinearLayout by supporting ScrollView and you will install.

Here, a complete sample that will work mainly, you may need to use something other than a frame layout.

 public class FifthWidthView extends FrameLayout { public FifthWidthView(Context context) { super(context); } public FifthWidthView(Context context, AttributeSet attrs) { super(context, attrs); } public FifthWidthView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int availableHeight = MeasureSpec.getSize(heightMeasureSpec); int wantedWidth = availableHeight / 5; setMeasuredDimension(wantedWidth, availableHeight); } } 

Answer 2

Suppose you can use ViewPager. If so, you need to override the getPageWidth () method. This method tells the viewpager how wide each view inside it can be: from 0 (nothing) to 1 (use all).

We will calculate the dynamic size, if possible, given that we want to use a little more than one third of the screen. Suppose you want to use the entire screen for collections with only one item, half the screen for collections with two items and dynamic calculation for all the others.

 @Override public float getPageWidth(int position) { try{ Paint paint = new Paint(); return 0.3f+paint.measureText(data.get(position).getSize())/ DeviceFunctions.giveScreenResolution((Activity) context).x; } catch(Exception e){ int size = data.getValues().size(); switch(size){ case 1: return 1.f; case 2: return 0.5f; case 3: return 0.33f; default: return 0.33f; } } } 

suppose:

- data collection allows you to determine the estimated width of your view. You can change this using any required link. Or you can specify a fixed size based on the position of the view:

 @Override public float getPageWidth(int position) { int size = data.getValues().size(); switch(size){ case 1: return 0.35f; case 2: return 0.35f; case 3: return 0.30f; default: return 0.33f; } } 

And to get the screen resolution:

 @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR2) public static Point giveScreenResolution(Activity activity){ Display display = activity.getWindowManager().getDefaultDisplay(); Point size = new Point(); display.getSize(size); return size; } 

Answer 3

In one of my applications, this code was used and worked great.

  public static int getScreenHeight(Activity context) { Display display = context.getWindowManager().getDefaultDisplay(); Point size = new Point(); display.getSize(size); int height = size.y; return height; } 

In my work I use the following code

 //Container layout may be child of HorizontalScrollView LinearLayout parent = (LinearLayout)findViewById(R.id.splash_screen_logo); //Child layout to be added View mychildview = getLayoutInflater().inflate((R.layout.childView); mychildview.getLayoutParams().width = Utils.getScreenHeight(this)/5; mychildview.getLayoutParams().height = Utils.getScreenHeight(this); parent.addview(mychildview)