I would like to draw a line behind an ImageView in a list item which fills the entire height of the list item. The image in the following link shows my desired result. The blue line is the one I want.
https://www.dropbox.com/s/fbdsuvcyxaz1pnj/listViewDesired.png?dl=0
I have a ListView with a custom adapter and layout for each row. The row is comprised of a relative layout with a few elements: an image with a specific size anchored to the left, a text view with a specific size anchored to the right, and a text view which fills the rest of the space in between.
I want to show a thin line coming out of the top and bottom of the ImageView and fill the rest of the space for that list item. The List item's size can become larger than the image size if there is a lot of text in the middle. How can I achieve this?
I have tried multiple approaches with a framelayout with a view that matches/fills the parent and the ImageView, and a linearlayout with 3 views (top line, imageView, bottom line that fills the parent), and the image looks correct in the IDE render, but the lines do not extend all the way or even show up when the app is actually running.
This is my layout without a line behind the imageview.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered-->
<ImageView
android:id="#+id/tabIcon"
android:src="#drawable/face"
android:layout_marginTop="#dimen/margin"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"/>
<TextView
android:id="#+id/tabUpdateTime"
android:layout_marginLeft="#dimen/margin"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tabText"
android:text="#string/long_string"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toRightOf="#id/tabIcon"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
You just need to create separate layout for Image as well as Vertical Line and to draw Vertical Line you need to add a View with width of 1dp or the thickness you want.
Try with the following Code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered -->
<RelativeLayout
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tabText" >
<View
android:id="#+id/verticleLine"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#0000ff" />
<ImageView
android:id="#+id/tabIcon"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"
android:layout_centerInParent="true"
android:layout_marginTop="#dimen/margin"
android:src="#drawable/face" />
</RelativeLayout>
<TextView
android:id="#+id/tabUpdateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="#dimen/margin" />
<TextView
android:id="#+id/tabText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_toRightOf="#id/image"
android:text="#string/long_string" />
</RelativeLayout>
So I managed to solve the issue by using an enclosing LinearLayout instead. I have changed some of the margin stuff but I get my desired effect. :)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:paddingLeft="#dimen/marginTop"
android:paddingRight="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered-->
<LinearLayout
android:orientation="vertical"
android:clipChildren="false"
android:id="#+id/frameTabIcon"
android:layout_marginRight="#dimen/margin"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<View
android:id="#+id/tabTopLine"
android:layout_width="#dimen/lineThickNess"
android:layout_height="#dimen/marginTop"
android:background="#android:color/black"
android:layout_gravity="center_horizontal"/>
<ImageView
android:onClick="deletePersonOnClick"
android:id="#+id/tabIcon"
android:src="#drawable/face"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"/>
<View
android:id="#+id/tabBottomLine"
android:background="#android:color/black"
android:layout_gravity="center_horizontal"
android:minHeight="#dimen/marginTop"
android:layout_width="#dimen/lineThickNess"
android:layout_height="match_parent"/>
</LinearLayout>
<RelativeLayout
android:layout_marginTop="#dimen/marginTop"
android:layout_marginBottom="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tabUpdateTime"
android:layout_marginLeft="#dimen/margin"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tabText"
android:text="#string/long_string"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
Related
I'm trying to make a trimmerbar to my video player
trimmer_bar.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/thumbsBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
tools:background="#color/trimmerBarSelected">
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription=""
android:scaleType="fitStart"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:contentDescription=""
android:scaleType="fitEnd"
android:src="#drawable/ic_right_thumb" />
</RelativeLayout>
<ImageView
android:id="#+id/progressIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="60dp"
android:layout_marginTop="3dp"
android:contentDescription=""
android:scaleType="centerCrop"
android:src="#android:drawable/btn_star_big_on" />
</FrameLayout>
activity_video_viewer:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#a8c71c"
tools:context=".activities.VideoTrimmerActivity">
<com.tomatedigital.instagram.longstories.ui.TrimmerBar
android:id="#+id/trimmerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/trimmerBarSelected"
/>
</FrameLayout>
it's logic is working great: when the user touches, i detect if it was on the any of the thumbs and case on the left thumb I adjust the left margin of the thumbsBar, case on the right I adjust the right margin...
As the two imageview are aligned to the edges this behavior makes them to move... but what is actually moving is the whole RelativeLayout
The problem is even adjuting the margins and moving the imageviews the relative layout is still showing the background in the margin area
ignoring the whole calculation i set the margins using:
this.thumbsBar= (RelativeLayout) findViewById(R.id.thumbsBar);
this.thumbsBarLayout = (LayoutParams) this.thumbsBar.getLayoutParams();
this.thumbsBarLayout.leftMargin = this.leftMargin;
this.thumbsBarLayout.rightMargin = this.rightMargin;
this.thumbsBar.setLayoutParams(this.thumbsBarLayout);
===============================================================
UPDATE:
to make it easier to understand
I've this:
I should have:
com.tomatedigital.instagram.longstories.ui.TrimmerBar has the same background as your RelativeLayout and has a width of match_parent. You don't really specify how your layout is being loaded and I assume it is in your custom view.
For a test, change the color of the background of the custom view to see if the background you are seeing in the margins is coming from the RelativeLayout or the custom view. My guess is that it's coming from the custom view and changing the background color in the custom view will solve your problem.
I am using Xamarin Android, and I have a list view with row views that have the following content in them:
All of these views are wrapped in a PercentRelativeLayout, because I want to keep the widths proportional. So the issue I'm running into is that since the two layouts on the left are left empty and filled at runtime (there is absolutely no way around this) their height is measured out to 0, which then sets the Rowview height to 0, and that then sets the controls layout off to the right to have a height of 0, which then stretches to the size of the largest control inside of it (ex:)
I have tried:
Using layout weights and a height of 0 to allow the layout itself to stretch to fill the parent
Using layout weights on the controls themselves within the layout
Scrapping a layout altogether, and simply wrapping the image buttons in the PercentRelativeLayout, and using layout positions to position them properly
Using percentage based layout widths and heights within the children to fill the height (this only seems to work for the width, but not height)
Adding dummy views as padding to push the controls layout into position
Adding percentage based margins to the layout itself, the children, the padding dummy views, and every combination of those
Not one single thing I have tried has had any effect, the only thing that affects the height of the linear layout is simply hard-coding the height.
My question then is how can I tell this layout to occupy the full height of the rowview once everything has been measured? (Please let me know if you have any other questions to help address this, I'm happy to oblige)
EDIT #1: Here is my xml for the rowview:
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="400dp"
android:layout_height="match_parent"
android:id="#+id/LeadRowHolder">
<!--Tag Holder-->
<RelativeLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:paddingTop="10dp"
android:orientation="horizontal"
android:id="#+id/LeadTagLayout">
</RelativeLayout>
<!--Details Holder-->
<LinearLayout
android:layout_height="match_parent"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadDetailsLayout"
android:layout_below="#id/LeadTagLayout"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingRight="10dp"
android:paddingLeft="10dp">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/leadShortDescription"/>
</LinearLayout>
<!--Controls Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="20%"
android:orientation="horizontal"
android:id="#+id/LeadControlsLayout"
android:layout_toRightOf="#id/LeadTagLayout"
android:gravity="center_vertical|center_horizontal">
<ImageButton
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/MenuCall3x"
android:background="#drawable/MenuCall3x"/>
<ImageButton
android:layout_height="30dp"
android:layout_width="20dp"
android:id="#+id/MenuFwd3x"
android:background="#drawable/MenuFwd3x"/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
I've played a bit with your code, and the result seems good.
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:id="#+id/LeadRowHolder">
<!--Tag Holder-->
<RelativeLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadTagLayout">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="this is a test"/>
</RelativeLayout>
<!--Details Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="80%"
android:orientation="horizontal"
android:id="#+id/LeadDetailsLayout"
android:layout_marginTop="5dp"
android:layout_below="#id/LeadTagLayout">
<android.webkit.WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:id="#+id/leadShortDescription"/>
</LinearLayout>
<!--Controls Holder-->
<LinearLayout
android:layout_height="wrap_content"
app:layout_widthPercent="20%"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:id="#+id/LeadControlsLayout"
android:layout_toRightOf="#id/LeadTagLayout"
android:gravity="center_vertical|center_horizontal">
<ImageButton
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/MenuCall3x"/>
<ImageButton
android:layout_height="30dp"
android:layout_width="20dp"
android:id="#+id/MenuFwd3x"/>
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
Let me know if this works for you at runtime (i've removed some background drawable files which you didn't provided to test this XML).
I've added a TextView inside the RelativeLayout to test his height
I am using View with a background colour to create a vertical line in a Relative layout . Wrap content is not working , the line is taking the entire viewport as height. Why is this happening ? attaching my code which is not working
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5"
android:orientation="vertical"
tools:ignore="MissingPrefix">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="2dp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_marginLeft="21.5dp"
android:background="#a9382b" />
<TextView
android:id="#+id/seeall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:textColor="#a9382b"
android:textSize="11sp"
tools:text="SEE ALL" />
</RelativeLayout>
</LinearLayout>
Setting the height to wrap_content in this case simply will not work.
In general, wrap_content will give the view enough size to contain everything "inside" it (whether that's child views or just the text in a TextView, etc), but your View tag doesn't have anything "inside" it to define the height. In this case, it will grow to fill all available space.
If you want your RelativeLayout to be as tall as the TextView inside of it, and you want the line to go from top to bottom of that size, use the following for your View tag:
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/seeall"
android:layout_alignBottom="#+id/seeall"
android:layout_marginLeft="21.5dp"
android:background="#a9382b">
I'm currently trying to position some LinearLayouts (which are then filled with some images) on an absolute position on the screen. Currently the LinearLayouts are alinged to the top-left of the parent RelativeLayout and then positioned using margins. This works properly for all child LinearLayouts EXCEPT the first one in the list. Setting some margins (as for example 25dp for the left margin) does not show any effect in this case. I hope someone has had the same issue and can provide some guidance.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_page"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:id="#+id/ll_first" android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="25dp" android:layout_marginTop="20dp"></LinearLayout>
<LinearLayout android:id="#+id/ll_second" android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="175dp" android:layout_marginTop="30dp"></LinearLayout>
<LinearLayout android:id="#+id/ll_third" android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="40dp" android:layout_marginTop="140dp"></LinearLayout>
</RelativeLayout>
Edit:
Example image http://i.stack.imgur.com/HuYjU.jpg
The RelativeLayout provides some tags for the positioning of Views/ViewGroups relative to another View/ViewGroup.
android:layout_below="id" and android:layout_above="id"
This will put the View below/above another View with the id.
android:layout_alignRightOf="id" and android:layout_alignLeftOf="id"
This will put the View to the right/left of another View with the id.
All tags have the same usability like this, where I use the android:layout_below="" to set a View/ViewGroup below another:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_page"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<--! YOUR LAYOUT AT THE TOP OF YOUR PARENT -->
<LinearLayout
android:id="#+id/ll_first"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"></LinearLayout>
<LinearLayout android:id="#+id/ll_second"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/ll_first" ></LinearLayout>
<LinearLayout
android:id="#+id/ll_third"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/ll_second"></LinearLayout>
</RelativeLayout>
Now you can use some margins for the position of every View.
I have a ScrollView with some elements.
My problem is that i can't set textview's above ImageView's with dynamical height.
I have 3 ImageView with different height, they can be visible or gone.
Above them i need to put text with background color, this text need to be at the bottom part of the ImageView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/pic"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="#+id/third_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:padding="8dp"
android:layout_alignParentBottom="true"
android:layout_above="#id/third_picture"
android:gravity="center_horizontal"
android:background="#android:color/white"
android:text="example text">
</TextView>
I tried a lot, but my View was always broken.
Please help, i need some proffesional advise.
You can do this in textview:
android:layout_alignBaseline="#id/pic"
This will align the baseline of textview with basline of imageview
You can set your picture as a background for a layout (e.g linear layout ) rather than using an ImageView and then put the textview inside it and place it where ever you want.
<LinearLayout
android:background="your picture" >
<!-- align it to the bottom -->
<TextView
/>
</LinearLayout>