I have a Xamarin project. I develop for IOS,Android and UWP. In my application, I have my manual layout logic for UI Elements. In IOS, I can use the frame property in order to set where the view is going to be rendered. I can do the same in UWP by using Canvas as the container and Canvas.Left,Canvas.Top properties to set x,y locations and my code has the logic to do the layout. I am confused about how to achieve this in Android. AbsoluteLayout seemed to be a perfect match, but it's deprecated. Can I achieve this with some other Layout or should I create my custom ViewGroup class?
You can use a FrameLayout and position items in it using the top and left margin. In XML it would look something like:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="100dp"
/>
</FrameLayout>
If you want to set it from code then you can use the LayoutParams:
FrameLayout.LayoutParams param = (FrameLayout.LayoutParams) view.getLayoutParams();
param.leftMargin = 100;
param.topMargin = 100;
param.height = 50;
param.width = 50;
view.setLayoutParams(param);
Note that the values in code are pixels not dp so you would have to convert. I'm not sure how this would convert to Xaramin but it gives you the idea.
Either way you'll have to consider what will happen when a user with an unusual device size uses your app. The reason Android doesn't have much use for absolute layouts is that there are so many different device sizes/densities that they are usually impractical.
You can use Relative Layout/ Frame Layout / Custom Layout. instead of Absolute Layout, As Absolute layout is harder to maintain is the reason its depreciated.
Related
I am using PercentRelativeLayout from Design Support Library and i want to set different Percentage for 7 inch and 10 inch tablet.
For example if i have ImageView like below.
<ImageView
android:id="#+id/contactDoc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_widthPercent="70%"
app:layout_heightPercent="70%"
android:layout_centerHorizontal="true"
android:clickable="true"
android:src="#drawable/dashboard_contactdoctor" />
now if i want to set 70% for 7 inch tablet and 60% for 10inch tablet without making different layout folder like sw720dp . Can i do it?
Help is appreciated.
Those percentages are fraction resources. You should be able to set up res/values/fractions.xml and res/values-sw720dp/fractions.xml, where you define the values for the fractions. Then, use #fraction/whatever_you_called_it in the layout.
You can use different layouts for different screen sizes. You can read more about it in the documentation: https://developer.android.com/training/multiscreen/screensizes.html
A possibility wihtout providing multiple layouts would be to place the ImageView inside a LinearLayout with a android:weightSum of 10 and then set the weight of the ImageView programmatically:
LinearLayout.LayoutParams layoutParams = yourView.getLayoutParams();
layoutParams.weight = WHATEVER;
yourView.setLayoutParams(layoutParams);
Try using constraint layout, it is available on android studio 2.2 and after .
By using this, you can add both vertical and horizontal guideline according to screen percentage and then you set the height and width of your imageview relative to those guideline
First of all, you are going to need to detect 7" or 10" tablet. I assume that you already know how to do it based on your question. If not, check out this great answer.
After you know what device are you dealing with, use the following code to put inside an if condition (or somewhere else) to define the percentage of your view in code:
View view = findViewById(R.id.yourView);
PercentLayoutHelper.PercentLayoutParams params =
(PercentRelativeLayout.LayoutParams) view.getLayoutParams();
PercentLayoutHelper.PercentLayoutInfo info = params.getPercentLayoutInfo();
info.heightPercent = 0.60f;
view.requestLayout();
Based on another great answer.
I have a view that I want to layout in either a large format or compact format depending on the length of text in a textview like so:
What is the best way to achieve this?
I am thinking I will need to measure the length of the text and the controls and get the available space to see if they would fit on one line. If they will then use a compact layout otherwise use the large layout.
Is this the right approach or is there a way to achieve this with a single layout?
The layout you require is something called FlowLayout. But android SDK doesn't have such a layout support currently. There are nice 3rd party libraries available & one of them is FlowLayout.
Gradle:
compile 'com.wefika:flowlayout:0.4.1'
In your layout :
<com.wefika.flowlayout.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="start|top">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lorem ipsum" />
</com.wefika.flowlayout.FlowLayout>
Put both in a LinearLayout and set its orientation programically in java file like this
LinearLayout layout = /* ... */;
layout.setOrientation(LinearLayout.VERTICAL);
Set Horizonatal if you want compact and set vertical if you want large one.
and put condition based on the width you get from below code
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
You can try to make user set texts for all your textViews and after use something like this:
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
if(layout.getWidth()/2<Title.getWidth()){
p.addRule(RelativeLayout.BELOW, R.id.Title);
controls.setLayoutParams(p);
}else{
p.addRule(RelativeLayout.RIGHT_OF, R.id.Title);
controls.setLayoutParams(p);
}
It is called a FlowLayout. Google it for multiple libraries that support it.
I am developing a feature for my app where the user can click on buttons that are placed within an image background. The problem: I need to place the buttons to a particular location within the image so it doesn't look displaced and works dynamically to different kind of devices' resolutions. Here's an image example:
I would like to place the buttons exactly where these rounded squares are. How can I be sure they will look exactly the same in different devices as well? I might need to place some text above each button. The buttons they have to be clickable and I have some animation over the buttons to allow the user to know when the button is being clicked. Any lead is much appreciated. Any feasible solution could be the accepted answer.
The game clash of clans have something similar:
This is exactly what I am trying to achieve!
Since there are a lot of Android devices, in practice you can't show buttons exactly in all devices. You can use a RelativeLayout or a LinearLayout to assure that the top title will be above buttons
There will be a parent view with two children : One is for the title, and another is for all the buttons
If you use a RelativeLayout, you could place the buttons at any point within the Image.
Just make sure that you use DP units of measurement and have size appropriate images for each density.
A short example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button android:layout_marginLeft="10dp"
android:layout_marginTop="10dp" />
<Button android:layout_marginLeft="30dp"
android:layout_marginTop="30dp" />
<Button android:layout_marginLeft="10dp"
android:layout_marginTop="50dp" />
</RelativeLayout>
I found a hacked solution by using the percentages of the width and height of the device. It worked for tablets and 2 more different screen size devices.
int w = front_layout.getWidth();
int h = front_layout.getHeight();
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
int top = convert(h * 0.248f);
int bottom = 0;
int left = convert(w * 0.186f);
int right = 0;
params.setMargins(left, top, right, bottom);
btn1.setLayoutParams(params);
private int convert(float value) {
return (int) Math.ceil(value);
}
The only downside of it is that I have to find the exact percentages by try and error. A better solution will score my accepted answer!
I am having an issue with a kind of custom seekbar What I have done is created a new object that extends SeekBar.
Then in onSizeChanged function, I am calculating the width, and setting it up, and the pass that size on to super.onSizeChanged() function.
Now this gives me perfectly correct width of the SeekBar track, however, when I push and drag the SeekBar thumb, more it moves towards right, thumb moves further a head of the seekbar track filling color area. So much so that it moves to the edge of the available screen where as the color filled width of the track is behind.
I hope some kind soul can guide..There is nothing fancy its simple manual intervention to change the width in onSizeChanged and thats it.
Here is the XML that I am using for this
<com.test.SeekBar
android:id="#+id/seek_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="1dip"
android:progress="0"
android:max="100"
android:progressDrawable="#layout/progressbar"
android:secondaryProgress="0"
/>
Thanks
I figured out the solution to my problem. My solution is a mix of xml and setting up layout parameters programmatically in the main activity.
I enclosed the seekbar xml element in another linear layout element(now I had only one control in this linear layout element
Then in code I just calculated the desired width as I wanted and set the layout params
as below
int newWidth = getSeekBarWidthAsNeeded();
int newHeight = getDesiredHeight();// smaller for lareger screens
LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(newWidth,newHeight);
mySeekBar.setLayoutParams(llp);
And this finally took care of my struggle with working with onSizeChanged and other methods, which I had soo much trouble with
I'm developing an Android application and I want to design, in eclipse, a layout bigger than screen height.
I have a layout for a fragment and this fragment will be inside a ScrollView on FragmentActivity.
This is my fragment's layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/user_pro_main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/text_state"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/layout_state"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Do I have to change android:layout_height="match_parent" to make it bigger on eclipse's designer?
What do I have to do if I want to see the layout bigger on eclipse designer?
Answer is pretty simple: you can't view layout which is biggern then screen on Eclipse Editor.
Possible workarounds:
1. Comment part of top views (visible) to see bottom (which are invisible), then uncomment when ready to launch.
2. Change Device Preview to bigger resolution (Nexus 10), this will give you some extra space.
You can always explicitly set the exact dp value in layout_height, but of course most of the time I don't think you want a fixed value, so do it programatically.
LinearLayout yourLayout; // Get it by findViewById()
yourLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, your_calculated_height));
You would set android:layout_height="wrap_content" and as you add child elements beyond the physical screen it will continue to stretch the layout.
As for viewing this on Eclipse, I'm not sure. I personally would just run it on a device to view it.
just calculate device height and width and add int value to calculated height and width at runtime at layouts height and width.
public void deviceDisplay(){
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();
}