Develop Reference

Relativelayout position view between two views

so I'm currently working on an app on Android, and I got stuck on a specific problem regarding the RelativeLayout, which I can't find a way to solve.
I have in the layout three views as follows: TextView, Textview and ImageView (laid horizontally), here is a screenshot of the ios counterpart:
the Textview at the middle should stick to the first one, until he gets to the Imageview, when he does, he keeps his minimum size (wrap content), while the first Textview truncate.
On IOS I setted priorities to the constraint to accomplish this, but I can't figure out how to solve this on Android.
Here what I tried:
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/daily_movie_title_box">
<TextView
android:id="#+id/daily_header_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="New Text aawi oa ioawfwi"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/white"
android:lines="1"
android:singleLine="true"
android:layout_alignParentStart="true"
/>
<TextView
android:id="#+id/duration_text"
android:text="138 mins"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textSize="13sp"
android:textColor="#color/white"
android:lines="1"
android:layout_alignBaseline="#id/daily_header_textview"
android:layout_toStartOf="#+id/certification_icon"
android:layout_toEndOf="#id/daily_header_textview"
/>
<ImageView
android:id="#id/certification_icon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/uk12a"
android:layout_alignBottom="#id/daily_header_textview"
app:layout_aspectRatio="100%"/>
</android.support.percent.PercentRelativeLayout>
Which resulted in this (which is what I want):
But when I increase the first Textview text it's not behaving as I desire...
Is it possible to achieve the behaviour I want in Android (keep the middle Textview wrap content, and truncate the first one if needed)?
I will post an update if I find a solution eventually, just wanted to see if anyone can find an easy way to achieve this behaviour, as I suspect there is.
Thanks.

From my understanding, you want the first TextView to be as large as possible, without adding space after the text if the text is too small. The second TextView should only wrap_content, but it should fill the rest of the parent layout when the row doesn't. The ImageView is set to wrap_content.
I tested it with this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Shrinking text dddddddddddddddddddddd"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Midle column"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
</TableRow>
</TableLayout>
</LinearLayout>
The only problem is that if the second column has a incredibly large text, it will push the other views out of the parent. But in your case, I don't think that will be a problem. Otherwise, I think it does the job.

These are some suggested solutions:
You can use LinearLayout with horizontal orientation and weight for each component (TextViews and ImageView).
You can set the minimum and maximum text length for the second TextView.
But i prefer to apply the first solution. You can assign a weight for each component ( amount of space on the screen ) using:
android:layout_height

How to set a Button's width to fix the remaining screen size inside a Linear Layout if there are 2 Buttons (1 with spcified width)

I have an horizontal LinearLayout which contains 2 Buttons, one Button has a specified width (57dp) and the other one should fill the remaining screen size.
I tried like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="37dp"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:gravity="center_vertical|center_horizontal" >
<Button
android:id="#+id/fold_action"
android:layout_width="fill_parent"
android:layout_height="34dp"
android:padding="8dp"
android:background="#drawable/order_button"
android:text="test" />
<Button
android:id="#+id/like_action"
android:layout_width="57dp"
android:layout_height="37dp"
android:background="#drawable/wish_off" />
</LinearLayout>
But this way the Button that should fill the remaining part of the screen gets the same width as the LinearLayout so the Buttons goes off screen. Is there a way to do it in xml?

set layout_width to 0dp and layout_weight to 1

How can I maximize the space my control occupies while maintaining horizontal order?

I have the following linear layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/SearchBox">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Search: "
android:id="#+id/SearchText"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_le="#+id/SearchBox"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search"
android:id="#+id/SearchButton"/>
</LinearLayout>
As you can see, the EditText is between the view and the button. Is there any property I can set that makes the edit text fill the space between the other two controls? (Which have a fixed size, based on their static content).
Setting the Edit Text's layout width to "Fill_parent" pushes off the button (since there's no more room in the parent).
Ideally, I guess the thing to do would be to add the edit text last, specify that it should be between the other two controls, and then set it to fill width.
But I'm not sure how to do that. Any help?

use property android:weight='1' on the EditText once you have fixed the widths of the other views

scrollable linearlayout with weights bigger than screen in android

I am trying to create a vertical linearlayout with weights that has a size bigger than the screen. Let's say 2x the size of the screen. In order for this to work I would obviously need to be able to scroll through it. Unfortunately I can't figure out a way to do this. I tried using the layout weights, and setting the weight sum as half of the actual sum of the weights of all components (so if all components weights sum is 20 I set the weight sum as 10) and managed to make it work but unfortunately the scrolling is not working anymore for some reason.
Is there anything that I am missing?
this is the code that makes the linearlayout twice as big as the screen but the scroll is not working:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<EditText android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:textSize="25dp"
android:gravity="center"
android:layout_weight="2"/>
<EditText android:id="#+id/id2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:textSize="25dp"
android:gravity="center"
android:layout_weight="2"/>
</LinearLayout>
</ScrollView>

Based on your comment, here is a programmatic way of achieving what you're looking for. I do not believe there is a way to accomplish this in pure layout XML.
Layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#000000"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical" >
<EditText
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DCDCDC"
android:gravity="center"
android:text="ONE ONE ONE"
android:textIsSelectable="false"
android:textSize="45sp" />
<EditText
android:id="#+id/id2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA"
android:gravity="center"
android:text="TWO TWO TWO"
android:textIsSelectable="false"
android:textSize="45sp" />
<EditText
android:id="#+id/id3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#777777"
android:gravity="center"
android:text="THREE THREE THREE"
android:textIsSelectable="false"
android:textSize="45sp" />
</LinearLayout>
</ScrollView>
Activity:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Get display size -- API L13 and up. Otherwise use getResources().getDisplayMetrics();
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
// You want size to be 50% per EditText, so divide available height by 2.
// Note: this is absolute height, does not take into consideration window decoration!
int editTextHeight = size.y / 2;
// Get a handle to your EditTexts
EditText t1 = (EditText) findViewById(R.id.id1);
EditText t2 = (EditText) findViewById(R.id.id2);
EditText t3 = (EditText) findViewById(R.id.id3);
// Set height to 50% of screen size each
t1.setHeight(editTextHeight);
t2.setHeight(editTextHeight);
t3.setHeight(editTextHeight);
}
That'll do it. End result:

You declared height of your LinearLayout "match_parent" that is equal to its parents height. It will never scroll as long as the content is bigger then ScrollView. First of all you have to give a fixed height like (50dp) or wrap_content or you have to set Its height programmatically(like 2x screen height as you mention).
weightSum and weight will always force your items to fit in your LinearLayouts current size so try not to use it.
I hope this helps.

The problem here is your use of layout_weight and weightSum is invalid. It's important to remember that android:layout_weight can only use the remaining space available in the view; anything exceeding that boundary is automatically cropped.
Therefore, in your example, your first EditText is taking up the entirety of the screen, and your second one is entirely excluded from the view. Because the second EditText is cropped, the LinearLayout has taken the entire screen and there's nothing for the ScrollView to do.
I'm not entirely sure what your end goal is; are you trying to have text inputs that grow with user entry, and the ScrollView handles the overflow?
If so, this will work:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#000000"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical" >
<EditText
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DCDCDC"
android:gravity="center"
android:text="ONE ONE ONE"
android:textIsSelectable="false"
android:textSize="45sp" />
<EditText
android:id="#+id/id2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA"
android:gravity="center"
android:text="TWO TWO TWO"
android:textIsSelectable="false"
android:textSize="45sp" />
</LinearLayout>
</ScrollView>
I've included some basic background colors so that you can see where each item begins & ends in layout preview. Typing in the first EditText will correctly push the second one down, producing a scroll bar.
Also note that you should use sp instead of dp for textSize values.
Edit: I should also note, for clarification, that weightSum will also take away space when necessary. To test this, set the weightSum of your LinearLayout to 2, and then add android:layout_weight="1" to each of the EditText controls. The end result will be a 50/50 split when the view loads, and then as you start typing in the first control, the 2nd space will shrink accordingly. Adding text to the second control will result in a scrollbar appearing.

Android button layout - get two buttons side-by-side across entire screen

I have two buttons which I would like to appear side-by-side horizontally, but together they fill the horizontal length of the phone. The height is wrap content, that's fine. My issue right now is that only one button is showing up (stretching across the screen).
Here is my XML code:
<LinearLayout
android:id="#+id/page_buttons"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<Button
android:id="#+id/prevButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Previous"
/>
<Button
android:id="#+id/nextButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Next"
/>

Change your Buttons XML to include the layout_weight attribute:
<Button android:id="#+id/nextButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Next"/>

Since nobody is explaining why their solutions work, I will give it a go.
The problem lies in the layout of the buttons. The two concerned attributes are layout_width and layout_weight.
In other layout systems, when you indicate that each element of a layout has to fill the parent (layout_width="fill_parent"), they do so by distributing equally the space of the parent between them. So, each of them would have the same size.
Instead, in Android's layout system, if both elements have
layout_width="fill_parent" the first element (in your case, the
Previews button) will be stretched to fill the parent and the second
(or third, or etc.) will not have any space left to distribute, so it
will not be visible.
Now, to make it understand that you want both buttons to show, you set the layout_weight for each button. To make the buttons have the same size, set the same layout weight to both of them.
The layout_weight defines how many "parts" (or segments) of the parent each of the buttons occupy. The parent will be cut into a number of segments equal to the sum of the children's segments. If you want to make one button three times bigger then the other, you have to assign it the number of parts equal to the number of parts of the first button, multiplied by three.
So if you want your Next button to be two times bigger then the
Previews button, you can do this:
for Previews button: layout_weight=1
for Next button: layout_weight=2
In consequence, the parent will be cut in 3 parts, 2 of which will be allocated to the Next button and 1 to the Previews button.
The example taken here is for buttons and horizontal layout, but this will work just fine for any type of object and also for vertical layout parent.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/entry"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/space"/>
<TextView
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"/>
<Button
android:id="#+id/button02"
android:layout_toRightOf="#id/button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/entry"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Seems like you want two equal buttons, not wrapped content. I created a centered spacer using TextView, and relatively aligned to that. Left button to parent left and spacer, Right button to Left Button and parent right.

Parent of your Button is Linear-Layout, and you are setting Button's width as fill parent and hence it is taking the whole space. You hav two options to Implement this...
Give the fixed width for your button(eg 50dip).
Give the width as 0dp and insert one more attribute in both button "weight" and give 0.5dip for each...

The two buttons should be on a linearlayout. The linear layout should be horizontal and each button has a weight of 1. This should give you two buttons with equal size along the screen width. A sample is here
Horizontal orientation: check the 2 Buttons at the end of this xml layout

Your Requirement is
<LinearLayout
android:id="#+id/page_buttons"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/prevButton"
android:layout_width="0dp"
android:weight="0.5"
android:layout_height="wrap_content"
android:text="Previous"
/>
<Button
android:id="#+id/nextButton"
android:layout_width="0dp"
android:weight="0.5"
android:layout_height="wrap_content"
android:text="Next"
/>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<TextView
android:text="#+id/SomeText"
android:id="#+id/TextView01"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:background="#android:drawable/bottom_bar"
android:paddingLeft="4.0dip"
android:paddingTop="5.0dip"
android:paddingRight="4.0dip"
android:paddingBottom="1.0dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_below="#+id/TextView01">
<Button
android:id="#+id/allow"
android:layout_width="0.0dip" android:layout_height="fill_parent"
android:text="Allow"
android:layout_weight="1.0" />
<Button
android:id="#+id/deny"
android:layout_width="0.0dip" android:layout_height="fill_parent"
android:text="Deny"
android:layout_weight="1.0" />
</LinearLayout>
</RelativeLayout>

I found the leading issue for people who still seems to not get what they want.
when using buttons with their conventional (out-of-the-box/default) background, it has a built in margin.
If you try changing the background manually with a single color, you can tell easily that you just need to set a separate background.
other than that when you have the weights put in, it will work.