Aligning columns headings on custom listview checkboxes - android

I'm using a tablelayout where each row has a number of checkboxes, and am using a custom adapter. The columns do expand evenly across the screen. On the parent layout I also have a series of "check/uncheck all" type checkboxes and they line up perfectly with the listview checkboxes. My issue is that I can't get column headings for the checkboxes to line up with the columns. They have a creep, either too much or too little, let alone working across both phone and tablet devices. My suspicion is that the problem may be caused by the text associated with the leftmost checkboxs, the only ones that have any text associated with them.
This is the xml for the check/uncheck all checkboxes and lines up fine.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox1"
android:layout_height="match_parent"
android:layout_weight="1"
android:width="60dp"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="Ck all"
android:textSize="15dp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/checkBoxI"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false" />
<CheckBox
android:id="#+id/checkBoxII"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false" />
etc.
This is for column headings and does not line up.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_height="match_parent"
android:layout_weight="1"
android:width="60dp"
android:gravity="center"
android:background="#color/light_blue"/>
<TextView
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:gravity="center"
android:text="I"/>
<TextView
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:text="I"/>
etc
This is another attempt that also does not line up.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_height="match_parent"
android:width="60dp"
android:layout_weight="1"
android:text=""
android:gravity="center"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"/>
<TextView
android:id="#+id/keycode"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:text="I"
android:textStyle="bold" />
<TextView
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="II"
android:textStyle="bold" />
etc.
I've tried many different combinations of text alignment, and even tried to force the column widths which of course wouldn't work across devices. I've spent all day on this and still have no clue. Any help appreciated.

Ok, it was my stupidity. I had forgotten that I had left LinearLayouts around the table rows as I was cutting and pasting. After removing those Linearlayouts things lined up as expected. I did have to give the first column a textsize parm though, otherwise the variable width of the text associated with the leftmost checkbox messed up the alignment of the rest of the columns. I just had to make the textsize larger than any of the text in that column.

Related

android: How to make view fill available space

I couldn't really find an answer for this problem, all I did find was localized questions. Let's say I have this:
I can successfully do this. However, I want it that if "BUTTON2"'s visibility is set to GONE, make BUTTON1's width take as much as it can. So it will look like this:
Currently here's non-working code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_gravity="center">
<com.rey.material.widget.Button
android:id="#+id/button2"
style="#style/Material.Drawable.Ripple.Wave.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="goToOccasion"
android:padding="20dp"
android:text="#string/join"
app:rd_enable="true"
app:rd_rippleColor="#android:color/darker_gray"
app:rd_rippleType="wave"
android:gravity="center"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/joinOccasionBTN"
android:layout_marginStart="87dp"
android:layout_alignBottom="#+id/joinOccasionBTN" />
<com.rey.material.widget.Button
android:id="#+id/joinOccasionBTN"
style="#style/Material.Drawable.Ripple.Wave.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="goToOccasion"
android:padding="20dp"
android:text="#string/join"
app:rd_enable="true"
app:rd_rippleColor="#android:color/darker_gray"
app:rd_rippleType="wave"
android:gravity="center"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
That results in this:
When button2 is visible, and it results in the same as the pic above but without button2 ("JOIN").
An easy way to do this is using the android:layout_weight attribute in a LinearLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="10dp"
android:layout_gravity="center">
<com.rey.material.widget.Button
android:layout_width=0dp
android:layout_height="wrap_content"
android:layout_weight=1
...
/>
<com.rey.material.widget.Button
android:layout_width=0dp
android:layout_height="wrap_content"
android:layout_weight=1
...
/>
</LinearLayout>
This way, if one of your buttons changes visibility from visible to gone then the other button will fill the remaining space.
Instead of relativeLayout, use gridView and add your buttons in it.
If you set on column your button will take all the place.
if you set two columns, gridview will adapt automatically your view to two perfectly sized columns...
two columns :
<GridView
android:layout_width="match_parent"
android:numColumns="2"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</GridView>
one column:
<GridView
android:layout_width="match_parent"
android:numColumns="1"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/button2"
android:visibility:"gone"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</GridView>
hoping this helps.

Android LinearLayout: Give the first element remaing width

I am trying to achieve the following layout for 2 elements in a LinearLayout:
So to sum up:
- The second element should be allowed to fill as much as it needs
- The first element should be shortened down (textview ending on "...") if it is necessary.
- On bigger devices, both elements should be visible (if possible of course) and left aligned.
So here is my solution so far:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/filter_topbar_height"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/filter_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="0">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:lines="1"
android:clickable="false"
android:text="#string/filter_uppercase_colon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:lines="1"
android:ellipsize="end"
android:id="#+id/category_spinner"/>
</LinearLayout>
<LinearLayout
android:id="#+id/sorting_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:lines="1"
android:text="#string/sorting_uppercase_colon" />
<Spinner
android:id="#+id/sort_spinner"
style="#style/spinner"
android:lines="1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:spinnerMode="dialog"
tools:entries="#array/sorting_options"/>
</LinearLayout>
</LinearLayout>
The result of my current solution, is the opposite of what I want. Here the first element takes the width that it needs while the second one is pushed away to the right.
Change the first LinearLayout as
android:id="#+id/filter_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
And the second LinearLayout as
android:id="#+id/sorting_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0"
android:orientation="horizontal"
You should use ellipsize property of textview like
android:scrollHorizontally="true"
android:ellipsize="end"
android:maxLines="1"
Add this two properties in your text view
android:maxLines="1"
android:ellipsize="end"

layout_width in table row

i have a TableLayout with multiple rows. The rows may have 2 or 3 elements.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:weightSum="2">
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/spielfortsetzung" />
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="#string/loesung" />
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="#+id/tv3"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" />
<ListView
android:id="#+id/list1"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:scrollbars="none" />
<ImageView
android:id="#+id/img1"
android:layout_width="25dp"
android:layout_height="25dp" />
</TableRow>
</TableLayout>
In Android Studio the layouts look correct, but not on my device, when I run the app. There all the layouts just have minimal space for 1-2characters. Also it doesn't use the whole width, but leaves space on the left.
Try this,
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="0.5"
android:text="#string/spielfortsetzung" />
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="0.5"
android:text="#string/loesung" />
//same to other rows , define the weight as a portion .
Looking at the XML the first TableRow probably shows up correctly, the second on you forgot the weightSum for the TableRow, and all two rows are requesting a weight of 1. Add weightSum=2 to the second row should solve your issue.
Thanks to everyone. I agree that with weight="0.5" it is done better.
My problem however was something different. I load this layout in a Fragment. This only part of a dynamic UI, so not the full screen is filled with this layout. I used null for parent container, but no I use the ViewGroup container I get as a parameter and submit false for attachToParent, otherwise my app would crash.

Text being cut off in TableRow

I am having an issue with a certain layout in one of my apps in which text is not showing correctly. I have 2 TextViews in each TableRow, and in some cases, the 1st TextView's text is being cut off and/or not displayed at all. The right (2nd set) of TextViews are populated programatically. I just set android:shrinkColumns="0" and seems to have fixed the problem on smaller-screen devices (emulator).
Here is my layout file
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:fillViewport="true">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:shrinkColumns="0">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginTop="15dp"
android:gravity="center_horizontal"
android:text="#string/testHeader"
android:textSize="18sp"
android:textStyle="bold" />
<TableRow
android:layout_width="match_parent"
android:gravity="center">
<TextView
android:id="#+id/tvTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:padding="3dp"
android:singleLine="false"
android:text="#string/test1" />
<TextView
android:id="#+id/tvTest2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:padding="3dp"
android:singleLine="false"
android:text="text" />
</TableRow>
...... Similar setup in the rest of my layout...
This looks fine on all of my test devices, but a user showed me a screenshot, and the whole 1st set of textviews in each TableRow are barely, if at all, visible. It got worse after shrinking column 0. What could be causing this whacky issue?

Android, setting column sizes in TableLayout

So, I'm creating TableLayout from code by inflating layout files. I'm trying to get first row spanning over two columns, and each next row contains two TextViews: key and value. Problem is that value can be quite long, so I was playing around with settings android:stretchColumns, android:shrinkColumns in TableLayout xml. Now Key column and Value Column looks fine, but first, spanned, header is wider that screen size.
Current situation of my files looks like this:
tale_row.xml:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<TextView
android:id="#+id/key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textStyle="bold"
android:layout_marginRight="10dp" />
<TextView
android:id="#+id/value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/black" />"
</TableRow>
header_row.xml:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_span="2"
style="#style/group_separator_style"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" />
</TableRow>
table.xml:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >
</TableLayout>
Any ideas, what could be the reason? Setting attributes clipChildren and clipToPadding to true didn't help.
It looks like setting android:stretchColumns="1" and android:shrinkColumns="1" solved the problem

Categories

Resources