I'm designing my application UI. I need a layout looks like this:
(< and > are Buttons). The problem is, I don't know how to make sure the TextView will fill the remaining space, with two buttons have fixed size.
If I use fill_parent for Text View, the second button (>) can't be shown.
How can I craft a layout that looks like the image?
Answer from woodshy worked for me, and it is simpler than the answer by Ungureanu Liviu since it does not use RelativeLayout. I am giving my layout for clarity:
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:layout_width = "80dp" android:layout_weight = "0" android:layout_height = "wrap_content" android:text="<"/> <TextView android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:layout_weight = "1"/> <Button android:layout_width = "80dp" android:layout_weight = "0" android:layout_height = "wrap_content" android:text=">"/> </LinearLayout> 
alignLeft and alignParentLeft, etc, which can never be achieved with LinearLayout.
If <TextView> is placed in a LinearLayout, set the Layout_weight proprty of < and > to 0 and 1 for the TextView.
If you're using a RelativeLayout, align < and > to the left and right and set "Layout to left of" and "Layout to right of" property of the TextView to the ids of < and >.
If you use RelativeLayout, you can do it something like this:
<RelativeLayout android:layout_width = "fill_parent" android:layout_height = "fill_parent"> <ImageView android:id = "@+id/my_image" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_alignParentTop ="true" /> <RelativeLayout android:id="@+id/layout_bottom" android:layout_width="fill_parent" android:layout_height = "50dp" android:layout_alignParentBottom = "true"> <Button android:id = "@+id/but_left" android:layout_width = "80dp" android:layout_height = "wrap_content" android:text="<" android:layout_alignParentLeft = "true"/> <TextView android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:layout_toLeftOf = "@+id/but_right" android:layout_toRightOf = "@id/but_left" /> <Button android:id = "@id/but_right" android:layout_width = "80dp" android:layout_height = "wrap_content" android:text=">" android:layout_alignParentRight = "true"/> </RelativeLayout> </RelativeLayout> 
> button?
Using a ConstraintLayout, I've found something like
<Button android:id="@+id/left_button" android:layout_width="80dp" android:layout_height="48dp" android:text="<" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/left_button" app:layout_constraintRight_toLeftOf="@+id/right_button" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/right_button" android:layout_width="80dp" android:layout_height="48dp" android:text=">" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> works. The key is setting the right, left, top, and bottom edge constraints appropriately, then setting the width and height to 0dp and letting it figure out it's own size.
TextView has the left and right constraints. The TextView does not stretch if the first Button has the right constraint to the TextView and the last Button has the left constraint to the TextView.
It´s simple You set the minWidth or minHeight, depends on what you are looking for, horizontal or vertical. And for the other object(the one that you want to fill the remaining space) you set a weight of 1 (set the width to wrap it´s content), So it will fill the rest of area.
<LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center|left" android:orientation="vertical" > </LinearLayout> <LinearLayout android:layout_width="80dp" android:layout_height="fill_parent" android:minWidth="80dp" > </LinearLayout> you can use high layout_weight attribute. Below you can see a layout where ListView takes all free space with buttons at bottom:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" tools:context=".ConfigurationActivity" android:orientation="vertical" > <ListView android:id="@+id/listView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1000" /> <Button android:id="@+id/btnCreateNewRule" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="Create New Rule" /> <Button android:id="@+id/btnConfigureOk" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="Ok" /> </LinearLayout> You should avoid nesting 2 relative layout since relative layout always make 2 pass for drawing (against 1 for any other type of layout). It becomes exponential when you nest them. You should use linear layout with width=0 and weight=1 on the element you want to fill the space left. This answer is better for performance and the practices. Remember: use relative layout ONLY when you don't have other choice.
<?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"> <ImageView android:id="@+id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <Button android:id="@+id/prev_button" android:layout_width="80dp" android:layout_height="wrap_content" android:text="<" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:singleLine="true" android:gravity="center" android:text="TextView" /> <Button android:id="@+id/next_button" android:layout_width="80dp" android:layout_height="wrap_content" android:text=">" /> </LinearLayout> </LinearLayout> For those having the same glitch with <LinearLayout...> as I did:
It is important to specify android:layout_width="fill_parent", it will not work with wrap_content.
OTOH, you may omit android:layout_weight = "0", it is not required.
My code is basically the same as the code in https://stackoverflow.com/a/25781167/755804 (by Vivek Pandey)
When using a relative layout, you can make a view stretch by anchoring it to both of the views it's supposed to stretch toward. Although the specified height will be disregarded, Android still requires a height attribute, which is why I wrote "0dp". Example:
<View android:id="@+id/topView" android:layout_width="match_parent" android:layout_height="40dp" android:layout_alignParentTop="true" android:layout_marginTop="8dp"/> <View android:id="@+id/stretchableView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_below="@id/topView" android:layout_above="@+id/bottomView" android:layout_marginTop="8dp" android:layout_marginBottom="8dp" android:adjustViewBounds="true"/> <View android:id="@id/bottomView" android:layout_width="wrap_content" android:layout_height="40dp" android:layout_alignParentBottom="true" android:layout_marginBottom="16dp"/> You can use set the layout_width or layout_width to 0dp (By the orientation you want to fill remaining space). Then use the layout_weight to make it fill remaining space.
use a Relativelayout to wrap LinearLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:round="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text="<"/> <TextView android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:layout_weight = "1"/> <Button android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text=">"/> </LinearLayout> </RelativeLayout>` i found
<TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginEnd="10dp" android:fontFamily="casual" android:text="(By Zeus B0t)" `` android:textSize="10sp" android:gravity="bottom" android:textStyle="italic" />