How to adjust view layout based on text size - android

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.

Related

How to make Percent dynamic in PercentRelativeLayout?

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.

What's alternative to deprecated AbsoluteLayout in Android?

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.

Android Layout, view height is equal to screen size

in Android how to make a view have same height as its screen size, is it possible to achieve this with only the xml? or if it must use script, tell me how
Thanks.
Sorry for being not clear, and thanks for your reply
but i think, match_parent and fill_parent attribute is not reliable, because when i put the view inside one container or change the view container hierarchy, it won't work.
Here my complete xml layout.
The element i want to make the height sam with device screen is the last list view inside relative layout
No you cannot achieve this in XML only.
As Android supports multiple screen sizes, at runtime you need to check for each device size. The height for each device can be calculated like this:
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int height = size.y;
With the above code, you will get the height of the screen and you need to set this height in dp to your view at runtime.
Do this in your activity:
// get view you want to resize
LinearLayout mainLayout = (LinearLayout) findViewById(R.id.main);
// get layout parameters for that view
ViewGroup.LayoutParams params = mainLayout.getLayoutParams();
// change height of the params e.g. 480dp
params.height = 480;
// initialize new parameters for my element
mainLayout.setLayoutParams(new LinearLayout.LayoutParams(params));
This can be possible from xml layout. To do this make the parent layout height and width fill_parent or match_parent and then set each child view width fill_parent or match_parent. Don't set any padding or margin to parent layout. Hope it will work. Here I am giving you an example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/btn_swap"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Left or Right" />
<SurfaceView
android:id="#+id/my_surface"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
Attention: If you use ScrollView, you have to set fillViewport="true" otherwise it will not work. A Google engineer said about it before. Check it from here
Display screenDisplay = getActivity().getWindowManager().getDefaultDisplay();
LayoutHeight = screenDisplay.getHeight();
LinearLayout.LayoutParams listLayoutParams = new LinearLayout.LayoutParams(
LayoutHeight, LinearLayout.LayoutParams.WRAP_CONTENT);
view.setLayoutParams(listLayoutParams);

Changing text of TextView based on its size

Is there any simple way of changing the text of a TextView in order to make it fit the view's size? Note that I do not want to truncate the text or to put an ellipsis, I want to set a different text.
For example instead of Experience: I want to use Exp: if the view is too small(where both those strings are resources).
I know that I could "avoid" this writing a custom .xml layout file for every possible screen size, but I'd like to avoid this if possible. I'm already using some different layout files, but only for situations where the layout needs some radical change to fit the size of the screen. Also in some circumstances I'd like to be able to dynamically set the text of a TextView and this can't be done via xml layout files.
I'm interested only in single-line TextViews and width.
The only way I could think of is to use a custom TextView subclass that uses a fallback text if the original text doesn't fit, but I wonder whether there is a simpler solution and, eventually, how can I reliably compute whether some text fits the TextView size or not.
You can try something like this:
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int screenWidth = size.x;
if( textView.getWidth() > screenWidth ) {
textView.setText("Exp:");
} else {
textView.setText("Experience:");
}
I'm not sure if you need to use getWidth() or getMeasuredWidth() so if it will not work, try second option.

Resize ImageView in run time using a button - Android

I am displaying an image using ImageView container. the image needs to be resized when a user enters a specific value and clicks update
resize is just for display, the original resource remains as it is. NO editing, save, etc
xml layout
<ImageView
android:background="#drawable/picture01"
android:id="#+id/picture01holder"
android:layout_below="#+id/TextView01"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
</ImageView>
main.java
final ImageView pic01 = (ImageView)findViewById(R.id.picture01);
now what do i do to dynamically assign this pic01 a size of my choice. just the function, i can implement it inside a button myself. i believe i have to use something like pic01.setLayoutParams but i dont know how to use it.
basically i want to overwrite layout_height="wrap_content" and layout_width="wrap_content" in .java
change the Imageview size by taking LayoutParams
final ImageView pic01 = (ImageView)findViewById(R.id.picture01);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(50, 50);
pic01.setLayoutParams(layoutParams);
First of all, you have to set the scale type of the image to CENTER_INSIDE or CENTER_CROP depending on your preferences. You should do this in your onCreate() method.
myImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
Afterwords you just have to resize the image view in your layout. This will depend on the type of layout you're using. An example for LinearLayout would be:
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(100,200);
myImageView.setLayoutParams(params);
Or you can set the components minimal size:
myImageView.setMinimumWidth(200);
myImageView.setMinimumHeight(200);
In both cases make sure that the size can be achieved inside the layout. If you have multiple components with smaller weights, the image view may be unable to take up the space you need.
RelativeLayout.LayoutParams myParams = new RelativeLayout.LayoutParams(yourWidthHere, yourHeightHere);
pic01.setLayoutParams(myParams)

Categories

Resources