Android Layout Weight Sum Not Splitting Properly - android

A page on my app has a table layout page, and one row of it seems to not be working. My goal is to evenly split the page between the left cell and right cell. The left cell contains a string, the right cell an image and string. I have tried to do so using weighSum. The left cell got weight of 4/8, and right cell was put into a linear layout, within which the image got weight of 1/8 and the string got weight 3/8. However, in the layout the left cell is taking up the great majority of the row, about 75% and I'm not sure why.
My rows below this one attempt almost the same thing, but don't have the same problem.
My xml(cut for relevancy):
<TableRow
android:layout_width="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Class"
android:id="#+id/classTextView"
android:layout_marginTop="14dp"
android:layout_weight="1"
android:gravity="center"/>
<LinearLayout>
<View
android:layout_width="4dp"
android:gravity="left"
android:layout_height="match_parent"
android:background="#663300"/>
<ImageView
tools:ignore="ContentDescription"
android:id="#+id/classicon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/barbarianicon50"
android:layout_gravity="end"
android:layout_weight="1"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Class Value"
android:id="#+id/classValueView"
android:layout_marginTop="14dp"
android:layout_weight="3"
android:gravity="left"/>
</LinearLayout>
</TableRow>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#663300"/>
<TableRow android:layout_width="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Strength"
android:id="#+id/strengthTextView"
android:layout_marginTop="20dp"
android:layout_weight="4"
android:gravity="center" />
<LinearLayout>
<View
android:layout_width="4dp"
android:gravity="left"
android:layout_weight="0"
android:layout_height="match_parent"
android:background="#663300"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Strength Value"
android:id="#+id/strengthValView"
android:layout_marginTop="20dp"
android:layout_weight="4"
android:gravity="center" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Intelligence"
android:id="#+id/intelligenceTextView"
android:layout_marginTop="20dp"
android:layout_weight="4"
android:gravity="center" />
<LinearLayout>
<View
android:layout_width="4dp"
android:gravity="left"
android:layout_weight="0"
android:layout_height="match_parent"
android:background="#663300"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Intelligence Value"
android:id="#+id/intelligenceValView"
android:layout_marginTop="20dp"
android:layout_weight="4"
android:gravity="center" />
</LinearLayout>
</TableRow>
The first table row is the problematic one - it should be evenly split between the left and right cells, but is mostly towards the right.
The second table row is an example of it working correctly - this row has 2 pairs of cells, but each of the cells, and the pairs of cells are correctly splitting the width between themselves evenly.
I can't figure out why the first doesn't work. I appreciate any help!

I have finally succeeded in fixing the layout!
The method used was to <include /> another layout as a row element inside this one. All these row elements had the same data, so I then programmatically filled the row elements with their necessary data whenever the view changed. You could also do this as a ListView, with each row in the ListView being another pair of elements, but I'm not sure how well that works for the 4 element wide rows.
The XML of each row:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/statNameString"
android:id="#+id/statName"
android:layout_marginTop="30dp"
android:gravity="center" />
<View
android:layout_width="4dp"
android:gravity="left"
android:layout_height="match_parent"
android:background="#663300"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/statValString"
android:id="#+id/statVal"
android:layout_marginTop="30dp"
android:gravity="center" />
</LinearLayout>
The top row(which represented the Class of the Character in my app) needed to include an ImageView, so it had a slightly changed layout. The ImageView was placed after the bar View, and before the last TextView.
The XML including each row into the final layout, for the Land layout:
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
layout="#layout/horizontal_class_row_layout"
android:id="#+id/strValues"
android:layout_column="0" />
<include
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
layout="#layout/horizontal_class_row_layout"
android:id="#+id/intValues"
android:layout_column="0" />
</TableRow>
If you only wanted 1 pair of elements in each row, you can simply remove one of the include tags. As mentioned before, you could also use the ListView to do these, and fill the data, and I will probably modify it to do that eventually.
Finally, you programmatically fill the elements with their data in the Java, so they don't just say "Class" and "Class Value" or whatever default data:
private void fillViewValues() {
//Gather views
LinearLayout llClass = (LinearLayout)findViewById(R.id.classValues);
LinearLayout llStr = (LinearLayout)findViewById(R.id.strValues);
LinearLayout llDex = (LinearLayout)findViewById(R.id.dexValues);
LinearLayout llCon = (LinearLayout)findViewById(R.id.conValues);
LinearLayout llInt = (LinearLayout)findViewById(R.id.intValues);
LinearLayout llWis = (LinearLayout)findViewById(R.id.wisValues);
LinearLayout llCha = (LinearLayout)findViewById(R.id.chaValues);
//Get the layout's locations
TextView classNameView = (TextView) llClass.findViewById(R.id.statName);
TextView classValView = (TextView) llClass.findViewById(R.id.statVal);
ImageView classImage = (ImageView) llClass.findViewById(R.id.classicon);
TextView strNameView = (TextView) llStr.findViewById(R.id.statName);
TextView strValView = (TextView) llStr.findViewById(R.id.statVal);
TextView dexNameView = (TextView) llDex.findViewById(R.id.statName);
TextView dexValView = (TextView) llDex.findViewById(R.id.statVal);
TextView conNameView = (TextView) llCon.findViewById(R.id.statName);
TextView conValView = (TextView) llCon.findViewById(R.id.statVal);
TextView intNameView = (TextView) llInt.findViewById(R.id.statName);
TextView intValView = (TextView) llInt.findViewById(R.id.statVal);
TextView wisNameView = (TextView) llWis.findViewById(R.id.statName);
TextView wisValView = (TextView) llWis.findViewById(R.id.statVal);
TextView chaNameView = (TextView) llCha.findViewById(R.id.statName);
TextView chaValView = (TextView) llCha.findViewById(R.id.statVal);
//Fill those values
//Names of sections
classNameView.setText(getResources().getString(R.string.classString));
strNameView.setText(getResources().getString(R.string.strString));
dexNameView.setText(getResources().getString(R.string.dexString));
conNameView.setText(getResources().getString(R.string.conString));
intNameView.setText(getResources().getString(R.string.intString));
wisNameView.setText(getResources().getString(R.string.wisString));
chaNameView.setText(getResources().getString(R.string.chaString));
//Values
classValView.setText(classString);
setImage(classImage, classString);
strValView.setText(String.format("%d", finalStats[0]));
dexValView.setText(String.format("%d", finalStats[1]));
conValView.setText(String.format("%d", finalStats[2]));
intValView.setText(String.format("%d", finalStats[3]));
wisValView.setText(String.format("%d", finalStats[4]));
chaValView.setText(String.format("%d", finalStats[5]));
}
This follows the advice at at this StackOverflow post.
One thing I would like to note, is that when you change the layout, you need to reset the content view to your current layout. In my case, the function looked like:
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
if(newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE)
{
setContentView(R.layout.activity_see_character);
fillViewValues();
}else if(newConfig.orientation == Configuration.ORIENTATION_PORTRAIT)
{
setContentView(R.layout.activity_see_character);
fillViewValues();
}
}
where fillViewValues() is the previous function. I believe that this sets the layout to either the portrait or landscape version of the layout, which can then have its elements accessed. If you don't do this when you try to access the elements it can't find them and gives a NullPointerException.

Related

How can I place two views depending on their width?

In our project we have such a case: we have two textviews (let's say, #id/text_view_1 and #id/text_view_2). We should place them horizontally (#id/text_view_1 and then #id/text_view_2) if their width combined is less than the width of their parent or vertically (text_view_2 above text_view_1) if they are too wide.
Right now the best solution I've come up with looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text_view_above_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/text_view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/text_view_2_right"
android:layout_alignBottom="#+id/text_view_2_right"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/text_view_right_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text_view_2_above"
android:layout_toEndOf="#+id/text_view_1" />
</RelativeLayout>
Here is the logic of toggling visibility of text_views
private void toggleVisibility() {
TextView textView1 = (TextView) findViewById(R.id.text_view_1);
TextView textViewAbove2 = (TextView) findViewById(R.id.text_view_above_2);
TextView textViewRight2 = (TextView) findViewById(R.id.text_view_right_2);
textView1.measure(0, 0);
textViewAbove2.measure(0, 0);
textViewRight2.measure(0, 0);
View parent = findViewById(R.id.parent);
parent.measure(0, 0);
if (textView1.getMeasuredWidth() + textViewRight2.getMeasuredWidth() < parent.getMeasuredWidth()) {
textViewAbove2.setVisibility(View.GONE);
textViewRight2.setVisibility(View.VISIBLE);
} else {
textViewRight2.setVisibility(View.GONE);
textViewAbove2.setVisibility(View.VISIBLE);
}
}
Is there a solution more "beautiful" and shorter than the one I've described? I guess there is a way to do it with ConstraintLayout instead of RelativeLayout but I'm not sure.
EDIT 1: probably I have to provide the result I want to see. Here is what an activity supposed to look like if both views are short:
And here is what it should look like if views are too long:
Take a look at FlexboxLayout.
Here is a solution using FlexboxLayout:
<com.google.android.flexbox.FlexboxLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="This is a short string." />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="This is another short string." />
</com.google.android.flexbox.FlexboxLayout>
Using the same XML with a longer string for the first text view yields the following:
Solution:If you want to set TextView as per their width requirements then you will simply use LinearLayout as parent with width wrap_content and for both child TextViews also give width 'wrap_content'
try using wrap_content and put these child text views inside a parent LinearLayout , give wrap_content as width for both of the child textviews. It will place according to the content in those textviews.
If You want to put Views Horizontally --
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
If You want to put Views Vertically --
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
Try using percentagelayout . This might help. For more details provide desired output.

when adding views they go one below another even if width is wrap content

I have a Linear layout then programatically I'm adding some spinners and buttons and so on, but I have xml button Wrap content (width) and then on java I add spinner (or anything else) and it goes below this view even if both views are wrap content:
progBar = new ProgressBar(this);
pBarToca = new ProgressBar(this);
pBarToca.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
linToca = (LinearLayout) findViewById(R.id.tetoca);
linToca.addView(pBarToca);
and it's placed under the button of xml:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
edit!!!!!!
I want textview on first line then on next line button + progressbar (for example)
You have android:orientation=vertical so the Views will be laid out starting at the top and going down.
If you want them to all be next to each other, remove that from your xml since the default orientation for a LinearLayout is horizontal. If you do this, you will obviously need to change the android:width to wrap_content for your TextView or else it will take up the entire screen.
After your comment, a RelativeLayout would work best here.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar"
android:id="#+id/tvID" /> // give it an id
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca"
android:layout_below="#/id=tvID"> // place it below the TV
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
</RelativeLayout>
Note the changes in the comments. Now when you add your progressbar to the LL, it should be next to the Button. You may need some changes but this should give you approximately what you want.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/te_toca_jugar"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
In your textView you are matching the parent
android:layout_width="match_parent"
This will cause the textview to take up the entire width of the parent view.
android:layout_width="wrap_content"
and
android:orientation="horizontal"
android:orientation="vertical" will cause the elements to be stacked.
If you are using "horizontal" it's important not to have a child element with width matching parent.
EDIT:
After OPs change to question:
I have used a textview, two buttons and listview to give you an idea of how you can format it. There are many ways to achieve the same thing, this is one suggestion.
The internal linearlayout has a horizontal orientation (by default).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="te_toca_jugar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar2"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lv">
</ListView>
</LinearLayout>
</LinearLayout>

How should inflating go right way?

I need to have like several listviews on a scrollview which Android doesn't allow me to do so I decided to make it manually to simply inflate some listrows on a vertical LinearLayout, but everything goes not the right way
private void fillData(final ViewGroup parent, final ArrayList<Person> array ){
for (int i=0;i<array.size();i++){
final View view = lf.inflate(R.layout.personal_listrow, parent,true);
parent.setBackgroundColor(getActivity().getResources().getColor(R.color.background_light_darker));
view.setBackgroundColor(getActivity().getResources().getColor(R.color.background_night_lighter));
TextView tvName=(TextView) view.findViewById(R.id.tvName);
TextView tvStatus=(TextView) view.findViewById(R.id.tvStatus);
TextView tvGender=(TextView) view.findViewById(R.id.tvGender);
//fill textviews with info, set the onClickListeners and so on
}
So what I get - the view.setBackgroundColor paints parent as well .
parent is a vertical LinearLayout, view is horizontal LinearLayout - it's strange that I don't paint inflated element only so please explain me why
The next thing - after I add something to array - 1st element changes and all the rest is with unchanged text. However, I walked through the code with debugger - it passes every element and sets text.
The clicklisteners works on the 1st element only..
Would you plz explain
here's vertical , parent layout - nothing special:
<LinearLayout
android:id="#+id/rodll"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
the inflateable listrow is nothing special also :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/tvStatus"
android:layout_width="0dp"
android:layout_weight=".3"
android:maxLines="1"
android:layout_height="wrap_content"
android:text="tvSt" />
<TextView
android:id="#+id/tvName"
android:layout_weight="1"
android:layout_width="0dp"
android:maxLines="1"
android:layout_height="wrap_content"
android:text="tvName" />
<TextView
android:id="#+id/tvGender"
android:layout_weight=".1"
android:layout_width="0dp"
android:maxLines="1"
android:layout_height="wrap_content"
android:text="tvGender" />
<com.andexert.library.RippleView
android:id="#+id/removeRipple"
xmlns:ripple="http://schemas.android.com/apk/res-auto"
android:layout_marginLeft="30dp"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginRight="7.5dip"
android:padding="3dp"
ripple:rv_alpha="255"
ripple:rv_zoom="true"
ripple:rv_zoomScale="0.8"
ripple:rv_type="rectangle">
<ImageView
android:id="#+id/remove_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/remove" />
</com.andexert.library.RippleView>
<com.andexert.library.RippleView
android:id="#+id/addRipple"
xmlns:ripple="http://schemas.android.com/apk/res-auto"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginRight="7.5dip"
android:padding="3dp"
ripple:rv_alpha="255"
ripple:rv_zoom="true"
ripple:rv_zoomScale="0.8"
ripple:rv_type="rectangle">
<ImageView
android:id="#+id/add_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/add" />
</com.andexert.library.RippleView>
</LinearLayout>
So. what's the problem and how to solve it?

Space (View) is not working in ListItem Layout

I've got a ListActivity with a custom Adapter. This adapter uses the following list_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/ll1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin"
android:contentDescription="#string/checkbox_content_description"
android:src="#drawable/checkbox_unchecked"
android:background="#layout/transparent_background"
android:focusableInTouchMode="false"
android:adjustViewBounds="true"
android:clickable="false"
android:focusable="false" />
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false"
android:textIsSelectable="false" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin">
<TextView
android:id="#+id/tv_product_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false"
android:textIsSelectable="false" />
</LinearLayout>
<TextView
android:id="#+id/tv_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false"
android:textIsSelectable="false" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll2"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_below="#id/ll1">
<Space
android:id="#+id/filler_space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/default_margin"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false" />
<EditText
android:id="#+id/et_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:inputType="number" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:padding="0dp">
<AutoCompleteTextView
android:id="#+id/actv_search_product"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:ellipsize="end"
android:inputType="text" />
</LinearLayout>
<EditText
android:id="#+id/et_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:inputType="numberDecimal"
android:digits="0123456789.,-" />
</LinearLayout>
</RelativeLayout>
In the Adapter's getView-method I've added the following piece of code:
// Change the width of the Filler-Space to match the Image
// and leave the height as is
Space space = (Space) view.findViewById(R.id.filler_space);
space.setLayoutParams(new LinearLayout.LayoutParams(
imageView.getMeasuredWidth(), space.getMeasuredHeight()));
This gives the following result at first:
When I change the Visibility of my second LinearLayout (ll2) to VISIBLE, it gives the following result:
What I want instead is:
As it seems the Space-View width isn't changed at all.. While I know for fact that the getView methods are successfully called thanks to Log-messages and other things I do in the getView method.
Does anyone know what I did wrong?
PS: When I use View instead of Space I have the same result. Never used Space before, so I thought it might have to do something with that.
Solution thanks to Demand's option 4:
// Since we can't access Measured widths and heights before the View is completely loaded,
// we set up an Observer that will be called once the ListItem's layout is ready
ViewTreeObserver observer = view.getViewTreeObserver();
if(observer.isAlive()){
// In order to access the view in the onGlobalLayout, it needs to be final, so we create a final copy here
final View v = view;
observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
// This will be called once the layout is finished, prior to displaying it
#Override
public void onGlobalLayout() {
ImageView imageView = (ImageView) v.findViewById(R.id.image);
Space space = (Space) v.findViewById(R.id.filler_space);
// Change the width of the Filler-Space to match the Image and leave the height as is
space.setLayoutParams(new LinearLayout.LayoutParams(imageView.getMeasuredWidth(), space.getMeasuredHeight()));
}
});
}
You set width and height if your space to wrap_content. It's mean that space will have width as their children, but there is no children and you have width = 0. It's not about space, it's about layout measuring in android.
When you call your code:
Space space = (Space) view.findViewById(R.id.filler_space);
space.setLayoutParams(new LinearLayout.LayoutParams(
imageView.getMeasuredWidth(), space.getMeasuredHeight()));
Your imageView havn't measured yet and return width = 0. It will measured later before drawing. In getView() in adapter you only create views, but measuring, layout and drawing will be later.
You have several ways to fix it:
set width of your space in dp, instead of wrap_content.
using relative layout instead of three linear layouts.
Use TableLayout.
add GlobalTreeObserver and getMeasuredWidth() at right time.
Post your runnable to view's handler to get width after drawing.
I think the best ways is 2 and 3, because 4 and 5 will cause measuring several times.

Dynamic TextViews wrapping to next row/line in Linear layout

I am trying to build a UI, where in I have a linear layout which has been defined in the XML.
As per the user's input, I need to add some TextViews to this linear layout. I am able to do this.
My actual problem is, when I have more text views, they are stacked next to each other and some of text views text are hidden or stretched vertically as shown in the image below.
I would like to use the whole width of the linear layout and if the text view can not fit in this row, it should be put in a new row or below the first text view.. I would like the display to be as below.
Following is my Linear layout configuration in XML:
<RelativeLayout
android:id="#+id/RL1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingBottom="5dip"
android:paddingTop="5dip" >
<TextView
android:id="#+id/text1"
android:layout_width="85dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="left"
android:text="Lable 1"
android:textColor="#999999" />
<LinearLayout
android:id="#+id/LL1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/button1"
android:layout_toRightOf="#+id/text1"
android:gravity="left|center_vertical"
android:orientation="horizontal"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingTop="3dip" >
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginTop="2dip"
android:background="#drawable/plus"
android:clickable="true"
android:focusable="true"
android:paddingTop="5dip" />
</RelativeLayout>
Can any one please help me in how to realign the same in java code.
I would Like to suggest you about how you can provide equal sizes to all your views in Linear Layout,you can do that by using weight property in the XML file i.e., android:weight for that particular View and when you use this property you should give width=0dp or 0dip.I think this will solve your problem easily.
Please I suggest you first you take full Knowledge of how to use this property in the following Link:-Weight property with an example
Please see:
How to wrap Image buttons in a horizontal linear layout?
How can I do something like a FlowLayout in Android?
You also might search github for FlowLayout.java.
An alternative approach is given in:
Android - multi-line linear layout
In addition, there's a class that adds images into a TextView:
https://stackoverflow.com/a/21250752/755804
which is not the same as wrapping views in the general case, but sometimes may do the job.
i'm korean.
so i don't speak English well, but i'll help you.
first, Create 'item.xml' with four text boxes.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/set_checkbox"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text2"
android:text="0"
android:layout_weight="1"
android:gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text3"
android:text="0"
android:layout_weight="4"
android:gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text4"
android:text="0"
android:layout_weight="4"
android:gravity="center"/>
</LinearLayout>
second, Create 'main.xml' where 'item.xml' will be dynamically generated.
'orientation' helps to create one line at a time.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
Finally, You can create four TextView per line using the code below.
LinearLayout layout = (LinearLayout)findViewById(R.id.mainxml);
LinearLayout item = (LinearLayout)layout.inflate(this.getContext(), R.layout.itemxml, null);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
item.setLayoutParams(params);
CheckBox cb = item.findViewById(R.id.set_checkbox);
TextView text2 = item.findViewById(R.id.text2);
TextView text3 = item.findViewById(R.id.text3);
TextView text4 = item.findViewById(R.id.text4);
cb.setChecked(true);
text2.setText("text2");
text3.setText("text3");
text4.setText("text3");
layout.addView(item);
The 10th loop is shown in the following picture.
enter image description here

Categories

Resources