I am trying to layout a view that should wrap its content, but it shouldn't be more than ~100dp less than its parent width. How can I do that using a RelativeLayout or some other layout? What I have right now will always make the view 100dp less than its parent so that there is space for another view.
This picture is an example of what I have:
As you can see, the text doesn't fill the whole box, so it could be smaller. But, it should never be larger than 100dp less than its parent, so that there is room for the time the message was sent.
This is my layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingRight="#dimen/horizontalMargin"
android:paddingTop="10dp">
<TextView
android:id="#+id/message_holder"
android:layout_toLeftOf="#id/blank"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/horizontalMargin"
android:background="#drawable/message_corners"
style="#style/white_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="alsdkjf; alsdkf" />
<RelativeLayout
android:id="#+id/blank"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_alignParentRight="true"
android:minWidth="100dp">
</RelativeLayout>
<TextView
android:minWidth="100dp"
android:id="#+id/time"
style="#style/gray_text"
android:layout_toRightOf="#id/message_holder"
android:paddingLeft="10dp"
android:text="Yesterday,\n11:30 PM" />
<RelativeLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignBottom="#id/message_holder"
android:layout_alignParentLeft="true"
android:background="#drawable/triangle" />
</RelativeLayout>
I have tried using the "minWidth" property on a blank view to the right of the message box to provide spacing, but it doesn't resize to be larger (which would make the message box smaller). When I don't have the blank view, and simply place the time TextView to the right of the message box, then that TextView isn't visible when the message box expands.
Update:
This is my "message_corners.xml":
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/green" >
</solid>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" >
</padding>
<corners
android:radius="10dp">
</corners>
</shape>
Update 2:
This is what I am looking for in a layout with short text:
And this is what I am looking for in a layout with long text:
Here you go, a layout that does exactly what you want.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:paddingBottom="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/blank"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#aaaaaa">
<LinearLayout
android:id="#+id/message_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="100dp">
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello?"
android:background="#00ff00" />
</LinearLayout>
<TextView
android:id="#+id/time"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/message_container"
android:layout_marginLeft="-100dp"
android:text="12:30 PM"
android:background="#ff0000" />
</RelativeLayout>
</RelativeLayout>
Short message
Long message
I know this is a really old question, but it's a frustrating problem I've encountered several times now and the existing answers weren't quite what I was looking for. Some colleagues and I came up with the following:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="vertical"
android:background="#FFFFFF">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#888888"
android:padding="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00FF00"
tools:text="Short message."/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="0"
android:background="#CCCCCC"
tools:text="Yesterday,\n11:30pm"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#888888"
android:padding="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/message_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00FF00"
tools:text="Super ultra mega awesome long message which is going to help us take over the world."/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="0"
android:background="#CCCCCC"
tools:text="Yesterday,\n11:31pm"/>
</LinearLayout>
</LinearLayout>
Which looks like this when rendered:
The magic seems to be the zero value for the weight of the text box on the right (in addition to the non-zero weight value of the text box on the left, which some of the other answers already have).
Honestly, I can't explain exactly why it works, but after having looked for a solution to this for so long I'm not questioning it! :)
As an aside, I like this approach because it doesn't require any explicit or minimum widths, any intermediate wrapper views, or the use of clipping settings, margins, padding, etc. to implement view overlay.
What the author of this question really asks is, how to let the TextView expand to fit the message inside of it without overflowing the time TextView, and without leaving blank spaces.
Since you don't actually know the width of the whole screen, you can't tell your TextView to be 100dp less than it.
What you should do is wrap your TextView in a container which will have the toLeftOf rule, with the TextView only wrapping it's contents. This way, the container will expand all the way up to the right (without overflowing the time TextView) but the TextView will only wrap it's text contents (so, it won't extend any blank spaces)
Code
Instead of
<TextView
android:id="#+id/message_holder"
android:layout_toLeftOf="#id/blank"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/horizontalMargin"
android:background="#drawable/message_corners"
style="#style/white_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="alsdkjf; alsdkf" />
Use
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/blank"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/horizontalMargin">
<TextView
android:id="#+id/message_holder"
android:background="#drawable/message_corners"
style="#style/white_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="alsdkjf; alsdkf" />
</LinearLayout>
By the way, your layout isn't very good. You should optimize it.
You can try the following arrangement of views and their widths:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp"
>
<FrameLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
tools:text="Some long test is this which is support to wrap at the end of parent view"
/>
</FrameLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
tools:text="Yesterday,\n 11:30 PM"
/>
</LinearLayout>
Sat Sri Akal
This can also be achieved using ConstraintLayout
with 2 children in horizontal chain
1st child
layout width 0
constraint weight 1
constraint max width wrap
2nd child
layout width wrap content
A solution with ConstraintLayout using
app:layout_constrainedWidth
layout_constraintHorizontal_bias
layout_constraintHorizontal_chainStyle
.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/edt_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample content"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/button_right"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/edt_left"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
If you want to make time text on right and text message on its left, you can do something like that ( using this in relative layout) also you can use maxWidth not minWidth
<TextView
android:id="#+id/view_textView_timeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/view_textView_timeText"
android:maxWidth="100dp"/>
What you could do is put an empty view between the 2 views and keep its width as MATCH_PARENT and assign the textview to leftof this empty view and the empty view to left of the date view. Just make sure to keep the view empty.
As i understand you want to make the layout or the textview to be 100 dp less than the screen size
Which you can do by getting the screen width in pixels which is done by this
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
Then you could set the textbiew width to be less 100dp from the screen size hope this help
P.s I think you might want to convert dp to px but i am not sure
You can do like this(not the direct answer for the question ):
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:paddingLeft="45px"
android:text="asdfadsfsafasdfsakljkljkhjhkkhjkjhjkjhjkhjkhljkhlkhjlkjhljkhljkhlkjhljkhljkhlfasd"
android:textColor="#4a4a4a"
android:textSize="40px" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:paddingLeft="45px"
android:paddingRight="48px"
android:text="2017.08.09 13:00"
android:textColor="#9b9b9b"
android:textSize="34px" />
</LinearLayout>
I have a common solution to solve this kind of layout question:
Create a specific ViewGroup!
For the question above, the key point is how to set the correct maxWidth to the content view.
Create a SpecialViewGroup. The contentView is the left view, and the timeView is the right view.
class SpecialViewGroup #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {
private lateinit var contentView: TextView
private lateinit var timeView: TextView
override fun onAttachedToWindow() {
super.onAttachedToWindow()
contentView = findViewById(R.id.content)
timeView = findViewById(R.id.time)
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
// measure the timeView firstly, because the contentView's maxWidth rely on it.
timeView.measure(
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
)
// then caculate the remained space for the contentView
val parentWidth = MeasureSpec.getSize(widthMeasureSpec)
val paddingHorizontal = paddingStart + paddingEnd
val view1MaxWidth = parentWidth - timeView.measuredWidth - paddingHorizontal
// set the maxWidth to the contentView
contentView.maxWidth = view1MaxWidth
// The rest thing will be handed over by LinearLayout
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
}
}
Use the SpecialViewGroup in your layout, like the usual LinearLayout.
<com.example.SpecialViewGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFBB86FC"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF3700B3"
android:padding="10dp"
android:text="adaasdasdasasdadasdasdaaaaaaaaaaaaaaaa"
android:textColor="#color/white" />
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#FF018786"
android:padding="10dp"
android:text="1970-01-01"
android:textColor="#color/white" />
</com.example.archview.SpecialViewGroup>
And the result:
The benefits of this approach are obvious:
No extra nesting Layout.
Common to solve the similar layout questions.
Had the similar issue. Made it works with constraint.
<ConstraintLayout>
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintEnd_toStartOf="#+id/option_info"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="wrap" />
<ImageView
android:id="#+id/option_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_info"
app:layout_constraintBottom_toBottomOf="#+id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/title"
app:layout_constraintTop_toTopOf="#+id/title" />
</ConstraintLayout>
Related
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.
I am trying to put a text below an image but they are not showing up in android layout.
Here is the screenshot:
I dont' see any text below image.
And my code: inside a relative layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_footer"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/panelcolor" >
<ImageView
android:id="#+id/searchicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingRight="60dp"
android:src="#drawable/search_white" />
<TextView
android:id="#+id/searchText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/searchicon"
android:text="Search" />
<ImageView
android:id="#+id/homeicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingRight="60dp"
android:layout_toRightOf="#+id/searchicon"
android:src="#drawable/ic_home" />
<TextView
android:id="#+id/hometext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/homeicon"
android:text="Home" />
<ImageView
android:id="#+id/wishicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/homeicon"
android:src="#drawable/ic_favorite" />
<TextView
android:id="#+id/wishtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/wishicon"
android:text="Wish List" />
<ImageView
android:id="#+id/viewicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="60dp"
android:layout_toRightOf="#+id/wishicon"
android:src="#drawable/ic_eye" />
<TextView
android:id="#+id/viewtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/wishicon"
android:text="Viewed" />
</RelativeLayout>
Not sure what is wrong?
Assuming you follow Googles Design guidelines
(Tabs with icons and text Height - 72dp;
Icon - 24 x 24dp)
Change 'match_parent' to 'wrap_content' for the ImageViews
The problem is you have put android:layout_height="match_parent" for image views and android:layout_height="wrap_content" for text views. Either use wrap_content for image view or use use a LinearLayout with android:weight property. Using LinearLayout would also solve your problem of alignment if it occurs!
Try setting android:layout_alignParentBottom="true" instead of android:layout_below="#+id/homeicon".
This aligns the text at the bottom of the parent. You might also need to set android:layout_alignLeft="" and align it to the corresponding imageView.
This method will only work, if there is enough padding below the image. This is because the text will now overlap the image.
EDIT:
Another way would be, to set the relative layout to a fixed height you know (like 60dp) and set the imageView to a fixed height (like 40dp). Then the TextView will also show up below the ImageView.
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.
Here's the layout (below). I'm trying to reposition the location of the checkbox; move it to the right of the view. android:gravity and android:layout_gravity seem to have no effect. Any explanation? This LinearLayout is a child of a Relative Layout.
<LinearLayout
android:id="#+id/deviceLinear"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#id/view1" >
<ImageView
android:contentDescription="#string/devices_icon"
android:id="#+id/devices_img"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="0.15"
android:layout_gravity="center"
android:src="#drawable/hardware_phone" />
<TextView
android:id="#+id/devices"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.43"
android:text="#string/devices"
android:textSize="20sp" />
<CheckBox
android:id="#+id/check_devices"
android:button="#drawable/custom_checkbox"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.42"
android:onClick="onCheckboxClicked" />
</LinearLayout>
I assume that you want the CheckBox to be on the right side of the LinearLayout. Since you have given it a layout_weight it will always take up some fixed percentage of the width regardless of its size as you can see by that blue bounding box.
Try wrapping the checkbox in another LinearLayout that has android:orientation='horizontal'. Give the 0.42 weight to the wrapping LinearLayout and then set the LinearLayout's android:gravity to be right. That should keep your spacing while moving the checkbox to the far right.
Something like this:
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="0.42"
android:layout_height="wrap_content"
android:gravity="right" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
You might also want to consider a RelativeLayout which enables you to position Views based on where other views are.
You are giving layout_weight="0.42" to your checkbox, that means that it will be measured with a width based on the LinearLayout's width. By this approach you will never manage to put it on the right.
The best way to achieve your goal is to use a RelativeLayout. Here is my list item layout with a checkbox on the right. Sorry about the merge tag but it is merged inside a RelativeLayout with
android:layout_width="match_parent"
android:layout_height="wrap_content"
attributes
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="#+id/imgChannelIcon"
android:layout_alignParentLeft="true"
style="?muListItemImage60x60" />
<CheckBox android:id="#+id/chkIsChecked"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_alignTop="#+id/imgChannelIcon"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/imgChannelIcon"
android:layout_marginLeft="#dimen/list_item_checkbox_margin_left"
android:layout_marginRight="#dimen/list_item_checkbox_margin_right"
android:layout_marginTop="#dimen/list_item_checkbox_margin_top"
android:layout_marginBottom="#dimen/list_item_checkbox_margin_bottom"
android:focusable="false"
android:focusableInTouchMode="false" />
<TextView android:id="#+id/lblChannelTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgChannelIcon"
android:layout_alignTop="#+id/imgChannelIcon"
android:layout_toLeftOf="#+id/chkIsChecked"
android:layout_alignWithParentIfMissing="true"
android:includeFontPadding="false"
android:textStyle="bold"
android:text="#string/channel_item_dummy_title"
style="?muListItemTextBig" />
<TextView android:id="#+id/lblChannelSubtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgChannelIcon"
android:layout_below="#+id/lblChannelTitle"
android:layout_toLeftOf="#+id/chkIsChecked"
android:layout_alignWithParentIfMissing="true"
android:includeFontPadding="false"
android:textStyle="normal"
android:text="#string/channel_item_dummy_subtitle"
style="?muListItemTextNormal" />
<TextView android:id="#+id/lblChannelCategory"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#+id/imgChannelIcon"
android:layout_below="#+id/lblChannelSubtitle"
android:layout_alignBottom="#+id/imgChannelIcon"
android:layout_toLeftOf="#+id/chkIsChecked"
android:layout_alignWithParentIfMissing="true"
android:includeFontPadding="false"
android:paddingLeft="3dp"
android:gravity="center_vertical|left"
android:textStyle="italic"
android:text="#string/channel_item_dummy_category"
style="?muListItemTextNormal_Inverse" />
<TextView android:id="#+id/lblChannelUpdate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/imgChannelIcon"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:includeFontPadding="false"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:textStyle="italic"
android:text="#string/channel_item_dummy_update"
style="?muListItemTextTiny" />
</merge>
As you can see I first place an image with layout_alignParentLeft="true" then the checkbox with layout_alignParentRight="true" and finally I arrange the other components based on those two. From your image I can see that you can use your devices_img as the left component (but you will have to give it a fixed height and maybe some margins in order to became the Layout's height) and your check box as your right.
Keep in mind that in a RelativeLayout with wrap_content as height you cannot use the AlignParentBottom attribute.
Hope this helps...
I'm trying (in vain) to add margins to my ListView items. I have tried adding margin values to my RelativeLayout below but no matter what I do all I seem to get is a 1px line between each item.
What I really would like is to have rounded corners on each item, a 1px black border and a 3-5px margin left, top, and right but right now I'll settle for just a margin around each item :-)
How do I achieve my goals? Just the margin for now... ;-)
Here's what I have:
UPDATE: I have updated the xml below removing main layout and fragment layout. I have also updated the ListView item layout to what I have now which is closer to what I want but still not perfect. Screenshot added as well
listview item layout xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/matchMargin"
android:paddingRight="#dimen/matchMargin"
android:paddingTop="#dimen/matchMargin" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cfcfcfcf" >
<include
android:id="#+id/matchKampstart"
layout="#layout/kampstart_layout" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tournamentImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/tournamentImageViewContentDescription"
android:gravity="left"
android:src="#drawable/sofabold_launcher" />
<ImageView
android:id="#+id/homeTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/homeTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/homeTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:text="#string/home"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/dash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="#string/dash"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/awayTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/awayTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/awayTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="#string/away"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tvChannelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:contentDescription="#string/tvChannelImageViewContentDescription"
android:gravity="right"
android:src="#drawable/sofabold_launcher" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
This gives me the following where you'll notice a very small line to the right and left for each item. That I would also like to get rid of.
I'm not great with layouts, but I have noticed in the past that ListView rows often ignore LayoutParams. I have no idea where this happens or if it's possible to override, I do know you can easily work around it by adding another layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#990000ff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#9900ff00"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99ff0000" />
</LinearLayout>
</LinearLayout>
Typically layouts that only have one child can be removed, but as you can see this one serves a purpose:
The outer-most layout is blue, the TextView is red, and the green is the extra layout that allows you to add some extra spacing. Notice the difference between padding (the green on the left) and margin (no green on the right). You have clearly stated that you want to use margins (android:layout_margin) but your code clearly uses padding (android:padding) so I included both.
A little late seeing this, but just add the following lines to your ListView xml element
android:divider="#00000000"
android:dividerHeight="10dp"
See the answer here for why. In short the child asks the parent, and the list view row uses AbsListView.LayoutParams, which doesn't include margins.
Why LinearLayout's margin is being ignored if used as ListView row view
In your adapter, catch your relative layout in getView(), then give a layout params ,
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
params.setMargins(80, 0, 0, 0); //substitute parameters for left, top, right, bottom
YourRelativeLayoutInAdapter.setLayoutParams(params);
I suppose you have a ListView defined in an XML file somewhere, if so, you could add some padding to it, so that there will be some space between the edge of the screen and the ListView.
Example:
<ListView
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:padding="15dp"/>