I want to have a list of input fields with labels to their left for an edit screen. At the bottom there needs to be a set of buttons, which should be aligned centrally.
The labels can have different widths depending on the language, so the EditText views need to span across the remaining space. I am using a grid layout, because I need to have all EditText views aligned to a vertical line at their left.
I have spent half a day now to solve this, but I fail to make progress. The closest I could get to is this:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_column="0"
android:layout_row="0"
android:text="Label 1234545"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvHeightLabel"/>
<EditText
android:layout_column="1"
android:layout_row="0"
android:text="Some text which is too long that it could fit in one single row"
android:layout_gravity="fill_horizontal"
android:inputType="numberDecimal"
android:ellipsize="end"
android:id="#+id/etHeight"
android:layout_width="259dp"/>
<TextView
android:layout_column="0"
android:layout_row="1"
android:text="Label 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvHeightLabel2"/>
<EditText
android:layout_column="1"
android:layout_row="1"
android:text="Some text which is too long that it could fit in one single row"
android:layout_gravity="fill_horizontal"
android:inputType="numberDecimal"
android:ellipsize="end"
android:id="#+id/etHeight2"
android:layout_width="259dp"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_row="3"
android:layout_column="0"
android:layout_columnSpan="2">
<Button
style="?android:attr/buttonBarButtonStyle"
android:text="Button 1"
android:layout_height="wrap_content"
android:id="#+id/btCancel"
android:layout_weight="1"
android:layout_width="wrap_content"/>
<Button
style="?android:attr/buttonBarButtonStyle"
android:text="Button 2"
android:layout_height="wrap_content"
android:id="#+id/btSave"
android:layout_weight="1"
android:layout_width="wrap_content"/>
</LinearLayout>
</GridLayout>
This layout looks like this:
It seems to work first, but when the labels exceed a certain size, the EditText view elements grow out of the screen to the right:
I don't even get why the above solution works for labels, which just grow slightly. The width of the EditText elements is set to 259dp, which was set by Android Studio automatically. (I tried to arrange the EditText views by sizing it with the mouse on the preview on the design screen. Android Studio arranged it automatically at a certain point as given above.)
There must be some property to let a view eat up what is left independent of its content. The text could scroll, I'm ok with that. I feel like I have not understood the layout concept at all.
Use padding to restrict the flow of the text.
Related
In the Image attached below, the red box represents the linear layout.
In each linear layout I have 2 children text views to display details. Text on the text views are getting filled from JSON data fetched from google books api.
What I am finding difficult is how to maintain space between both the text views according to different text length.
Like in the 5th list item "Fundamental Of Java..." can be extended more as there is many space left.
In the 1st item item Both Title and Author name is really long so both should be displayed equally (50-50)%
And in the 3rd list item "Pearson Education..." can be extended more as there is more blank space before it.
So How to can determine/Distribute space in layout which fits each situations.
Code Of Linear Layout:
<LinearLayout
android:id="#+id/header_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_toRightOf="#+id/image">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="8dp"
android:layout_weight="2.5"
android:ellipsize="end"
android:maxLines="1"
android:text="Java Programming is really long text right not"
android:textColor="#ffffff"
android:textSize="16sp"></TextView>
<TextView
android:id="#+id/publisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="end"
android:maxLines="1"
android:text="John Wiley and its going long & Sons"
android:textColor="#ffffff"
android:textSize="10sp"></TextView>
</LinearLayout>
Try experimenting using RelativeLayout on your xml but you have to give priority on which textView that will consume most of the space - either of the two ( title or the publisher) then add a autoSizeTextType on your textView.
You can also use ConstraintLayout but you have to limit the number of items to be displayed in your recyclerview, or create a function that detects if the particular string consist of "n" characters long then adjust a padding or margin.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/publisher"
android:autoSizeTextType="uniform"
android:ellipsize="end"
android:maxLines="1"
android:text="Java Programming is really long text right not Java"
android:textColor="#ffffff"
android:textSize="16sp" />
<TextView
android:id="#+id/publisher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:autoSizeTextType="uniform"
android:ellipsize="end"
android:gravity="end"
android:maxLines="1"
android:text="John Wiley & Sons sdafsdfsfsdf"
android:textColor="#ffffff"
android:textSize="16sp" />
</RelativeLayout>
I'm trying to make a grid-like form, similar to the example on the official Android Developers blog.
Here is my layout:
<?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">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="48dp"
android:layout_marginRight="48dp"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:columnCount="2"
android:rowCount="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="end"
android:layout_row="0"
android:text="Send"
android:textColor="?android:attr/textColorPrimary"
android:textSize="24sp" />
<Spinner
android:id="#+id/send_currency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="end"
android:layout_row="1"
android:text="to"
android:textColor="?android:attr/textColorPrimary"
android:textSize="24sp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:hint="username"
android:textColor="?android:attr/textColorPrimary"
android:textSize="24sp" />
</GridLayout>
</LinearLayout>
My left column (static text, right-aligned) is working fine. It aligns the text to the right, and the width is dependent on the widest row.
However, the right column seems to be drawing way outside of the bounds of the GridLayout.
In that picture, the blue box is the bounds of the GridLayout. You can already see the problem in the green bar at the top. The right side is supposed to be stopping at the bounds of the GridLayout (like the left side is), but for some reason it's going way past it.
The blue box in that picture is the bounds of the EditText (it's set to wrap_content). However, the aqua-colored box is the bounds in which it's allowed to expand. When I type lots of characters into the EditText, it goes past the GridLayout's bounds, and even past the edge of the phone screen!
Is this a bug in GridLayout? Or am I missing something?
That is 'normal' behavior of GridLayout.
Fortunately, there is a new version of GridLayout, which was added with API 21. Thanks of that fact, you can make GridLayout accomodates children to its either width or height according as its orientation.
To know details look at documentation, especially at Class Overview -> Excess Space Distribution. You can find there info how to use GridLayout in the way you want.
Tip:
Don't forget that to make use of new GridLayout, you need to add it as support library and in xmls you should use:
<android.support.v7.widget.GridLayout ... >
instead of
<GridLayout ... >
I found this answer to be helpful. Also, paulina_glab's answer of using <android.support.v7.widget.GridLayout instead of just <GridLayout - thanks!
In particular these attributes on each cell:
android:layout_width="0dp"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1"
Hope it helps.
You can restrict edittext to single line.
<EditText
...
android:singleLine="true"
android:lines="1"
android:maxLines="1"
android:hint="to"></EditText>
Definitely odd. What happens if you constrain the width of the EditText to "match_parent" instead of "wrap_content" (which should constrain its horizontal width to within the grid cell)?
i.e.
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:hint="username"
android:textColor="?android:attr/textColorPrimary"
android:textSize="24sp" />
or, alternatively, give your EditText a right margin to try and push that right hand border in a little bit? e.g.
android:layout_marginRight="20dp"
and see if that makes a difference?
I have set up some buttons with icons on the left and text on the right. Everything scales with screen size (phone tablet) but the problem is that the button is just the text. I want the button to be the entire line so that the button that has focus lights up correctly (I use a remote).
This code works except for the button is just the text
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onSetTargets">
<ImageView
android:id="#+id/imageView1"
android:layout_width="#dimen/menu"
android:layout_height="#dimen/menu"
android:layout_marginTop="#dimen/padding_small"
android:src="#raw/target"
android:onClick="onSetTargets"/>
<Button
android:id="#+id/set_Targets"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/buttonselector"
android:ellipsize="none"
android:gravity="left"
android:onClick="onSetTargets"
android:singleLine="true"
android:text=" Targets "
android:textColor="#android:color/white"
android:textSize="#dimen/menu" />
</LinearLayout>
This is just a section within a linear layout and there are then several buttons in a row.
Following is what I would like to get working but I can't figure out how to scale the drawable. I know there is a scaleDrawable command but I can't find any posts on how to make it work in the XML other than people complaining that it doesn't work and getting solutions for dealing with it in java.
<Button
android:id="#+id/set_start_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/buttonselector"
android:gravity="left"
android:onClick="onStartTime"
android:text=" Timer"
android:textColor="#android:color/white"
android:textSize="#dimen/menu"
android:drawableLeft="#raw/hourglass"/>
This is what I came up with that worked. The overall page is a linear layout with buttons arranged vertically on the page. Each button is a vertical linear layout consisting of an image and some text. All elements of the vertical layout are clickable so clicking on the image or the text does the same thing. Here is an example for a single button. The size #dimen/menu is defined for both phone and tablet sizes and the image will scale to match the specification.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onSetTargets">
<ImageView
android:id="#+id/imageView1"
android:layout_width="#dimen/menu"
android:layout_height="#dimen/menu"
android:layout_marginTop="#dimen/padding_small"
android:src="#raw/target"
android:onClick="onSetTargets"/>
<Button
android:id="#+id/set_Targets"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/buttonselector"
android:ellipsize="none"
android:gravity="left"
android:onClick="onSetTargets"
android:singleLine="true"
android:text=" Targets "
android:textColor="#android:color/white"
android:textSize="#dimen/menu" />
</LinearLayout>
In my application I have several buttons with images in its drawableTop property. Also, every Button has a label (text).
All images have the same size: 394px X 336px.
I want all the buttons to have the same size when using GridLayout. Also, I don't want the user to scroll down to see the rest of the buttons. I want all the buttons to be placed in just one screen.
I'm trying to do this in here, but since images are big (I am using the cellphone emulator), user needs to scroll down to see the rest of the buttons and also, even though all images have the same size, buttons don't have the same size.
Here is my code (buttons names and images don't matter, I just wanted to create a 2X2 grid with same size for all items, no scrolling at all):
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:keepScreenOn="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="2"
android:rowCount="2" >
<Button
android:id="#+id/this_is_a_test"
android:background="#layout/roundcorners"
android:layout_gravity="fill"
android:text="This is a test"
android:textSize="20dip"
android:textStyle="bold"
android:textColor="#000000"
android:drawableTop="#drawable/test">
</Button>
<Button
android:id="#+id/this_is_a_test"
android:background="#layout/roundcorners"
android:layout_gravity="fill"
android:text="This is a test"
android:textSize="20dip"
android:textStyle="bold"
android:textColor="#000000"
android:drawableTop="#drawable/test">
</Button>
<Button
android:id="#+id/this_is_a_test"
android:background="#layout/roundcorners"
android:layout_gravity="fill"
android:text="This is a test"
android:textSize="20dip"
android:textStyle="bold"
android:textColor="#000000"
android:drawableTop="#drawable/test">
</Button>
<Button
android:id="#+id/this_is_a_test"
android:background="#layout/roundcorners"
android:layout_gravity="fill"
android:text="This is a test"
android:textSize="20dip"
android:textStyle="bold"
android:textColor="#000000"
android:drawableTop="#drawable/test">
</Button>
</GridLayout>
Can you guys help me, please?
I'm having real difficulty coming up with a layout which works. I have a view which fills the width of the screen. It contains three sub-views:
Some text
A number in parentheses after the main text
A button
The button is right-aligned, and the text items are left-aligned one after the other, as shown:
| Some heading text (n) [button] |
The problem is controlling what happens when the text is too long. I want it like this, so that the number is always visible just to the right of the main text. The main text should be truncated if needed so the other two views remain visible.
| Some very very long headin... (n) [button] |
The closest I've got which succesfully truncates the main text results in the (n) always being right-aligned next to the button even when the main text is short enough to fit. That's not what I want.
How would you approach this?
I'm not posting any of my current XML yet, lest it prejudice anyone's suggestions.
I do not believe there's any xml layout for that. My guess is that you will need to extend TextView and measure the text length inside onDraw(...), adjusting the text accordingly through some iteration (i.e., removing one character at a time until the text fits the canvas)
I just found another question that is quite similar to yours: Ellipsize only a section in a TextView . No other answer than ellipsize in the middle.
Another thoughts:
I'm wondering if it would work to have one textview with the main text (ellipsize left, wrap_content) and another with the number in the parenthesis (wrap_content), both inside an horizontal linear layout. That layout would be inside a relative layout and layout_toLeftOf the button, which would be wrap_content, layout_alignParentRight.
Does it make any sense? I don't have Eclipse now to test it myself. Not sure if the (n) textview would be lost behind the button or not with a long text.
Alternatively (and less interesting), you can setup one single relative layout with the two textviews all layout_toRightOf and the button aligned to the right (layout_alignParentRight) and set the max witdth ot the first textview (android:maxWidth). You would need to set up different layouts for different screens, though.
An example with a fixed max width that will work as required:
<?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="fill_parent"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="short text"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t1"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n1"
android:layout_toRightOf="#id/t1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt2"
android:layout_below="#id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="very long text that will not fit in any layout, regardless of the size of the screen"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t2"
android:layout_below="#id/bt1"
android:layout_alignParentLeft="true"
android:maxWidth="220dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n2"
android:layout_below="#id/bt1"
android:layout_toRightOf="#id/t2"
/>
</RelativeLayout>
Try a linearlayout, set the weight of the text view as 1,, and set ellipsis as TruncateAt.MIDDLE. Check this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:id="#+id/text" android:layout_width="0dp"
android:layout_height="wrap_content" android:lines="1"
android:ellipsize="middle" android:gravity="left"
android:layout_weight="1" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
The key is the ordering of the items as this is the order they are measured, in order to ensure your button and (n) text get enough space in the overall layout:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_toLeftOf="#id/button"
android:text="(n)"
/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/middle"
android:layout_alignParentLeft="true"
android:gravity="left"
android:ellipsize="end"
android:text="Some really long to text to make this flow over"
android:lines="1"
android:maxLines="1"
/>
</RelativeLayout>