I have a couple of views (consider images). One image (bigger one) should be centered horizontally. Other view (smaller) should be to the left of the bigger view, but it should be centered horizontally at the space to the left of bigger view.
One huge restriction: all these views should be inside the same layout (I think relative layout suits better for this case).
But I can't achieve what I need.
Any help is greatly appreciated.
Try this XML...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<View
android:id="#+id/smallView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<View
android:id="#+id/smallView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<View
android:id="#+id/bigView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<View
android:id="#+id/smallView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<View
android:id="#+id/smallView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
</LinearLayout>
Seems, like this could be done only programmatically.
Main idea:
Create FrameLayout and put all the needed views inside it.
Calculate absolute position on the screen for every view (position of top-left corner for each view). For big view it will be something like: left = (screenWidth - viewWidth) / 2, right = (screenHeight - viewHeight) / 2 (maybe height of statusBar should also be counted).
Place each view at its position by setting FrameLayout.LayoutParams with defined leftMargin, topMargin – top and left coordinate.
Related
<LinearLayout
android:layout_width="11dp"
android:layout_height="wrap_text"
android:layout_weight="1">
<LinearLayout
android:id="#+id/first_layout"
android:layout_width="0dp"
android:layout_height="wrap_text"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:id="#+id/second_layout"
android:layout_width="0dp"
android:layout_height="wrap_text"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
Which layout gets the 11th pixel? (assuming 1px = 1dp)
Is it based on the order they are written, drawn, other?
What you want to show in your Layout, this is horizontal or vertical?
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'm trying to get a ScrollView to take up as much screen space as it needs until it would start pushing items below (outside) it off the screen, then it needs to stop expanding and become scrolly.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable"
/>
<!--
android:text="just one line"
-->
</ScrollView>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button"
/>
</LinearLayout>
As it is above the ScrollView fills the entire screen height and pushes the button off the bottom of the screen.
If I add android:layout_weight="1" to the ScrollView then it works for this case - the button is at the bottom and the ScrollView stops above it - but when the ScrollView doesn't have much content (replace the text with the one-liner) then the ScrollView doesn't shrink to fit around the content so is far too tall.
I've tried using RelativeLayout with no success - if the Button is android:layout_below the ScrollView then the ScrollView will push it off the bottom of the screen if it has a lot of content.
Here's what I want it to look like: in the first image the ScrollView has a lot of content and so expands to fill the available height but doesn't push the items below it (the button) offscreen, in the second image the ScrollView doesn't have much content so takes up just the height it needs allowing the items below it (the button) to move up the screen:
What you can do, is to correct the height in your code. It's a bit hacky and I would like to see another solution, but off the top of my head I do not know anything better.
What you would need is to add a OnGlobalLayoutListener and calculate within it the minimum of either the ScrollView height or the height of the container surrounding your ScrollView minus the height of your Button.
Then set the size with setLayoutParams() on your ScrollView.
And you have to remove the listener to avoid an endless loop :-)
final View scrollview = findViewById(R.id.scrollview);
final View container = findViewById(R.id.container);
final View button = findViewById(R.id.button);
scrollview.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int height = scrollview.getHeight();
int heightButton = button.getHeight();
int heightContainer = container.getHeight();
int min = Math.min(heightContainer - heightButton, height);
int width = scrollview.getWidth();
Log.v("test", "min: " + min);
scrollview.setLayoutParams(new RelativeLayout.LayoutParams(width, min));
// do not forget to remove the listener
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
scrollview.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
else {
scrollview.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
}
});
For this to work you have to use wrap_content as the height of the ScrollView in your layout file. And the outer container has to be a RelativeLayout so that the Buttonis rendered and has a non-zero height!
If you use paddings or margins you would have to consider those values in the computation.
Try this:
<?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="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:background="#ff0000">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable" />
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable" />
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable" />
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable" />
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable" />
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable" />
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable" />
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="taking\nup\lots\nof\nlines\nto\nmake\nthe\nscrollview"s\ncontent\ntaller\nthan\nthe\nspace\navailable\nto\nit\nwhich\nshould\nmake\nthe\nscrollview\nstop\nabove\nthe\nbutton\nand\nbecome\nscrollable" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button" />
</RelativeLayout>
Just try adding fillViewport = "true" on your scroll view
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>
I have a banner that I am displaying on an Android Layout. On this banner, I have two avatars that I would like to display next to each other, and most importantly, I would like to have them displayed where the midway point of these two avatars on the y-axis is aligned with the bottom of the banner that these avatars sit on top of.
How would you do this?
Edit:
In other words, I'm asking how you could use an parameter like android:layout_below, but instead of it aligning the top of the imageview with the botton of the specified layout, to align the center.
Unfortunately, there is no direct layout parameter to align a center point with another edge. If the height of your avatars is fixed, you could add some padding that is half the height so they all line up; i.e.
<?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">
<ImageView
android:id="#+id/banner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="25dp"
android:src="#drawable/banner" />
<ImageView
android:id="#+id/avatar1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:src="#drawable/horse" />
<ImageView
android:id="#+id/avatar2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:layout_toRightOf="#id/avatar1"
android:src="#drawable/horse" />
</RelativeLayout>
If the heights of those items, however, is dynamic, then you will need to create a custom ViewGroup container so you can measure the avatar heights (in onMeasure()) and apply the padding (or other offset value) at runtime.
Put them in a linear layout, and then give them a width to fill the parent. Then you can use the weight property to disperse the widths equally.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
</LinearLayout>