I am trying to create a table/grid for some items within my app and I would like to have a border around each cell to divide the items up and have a coherent association of the setting with the item. This app will be used in an industrial setting where there may be people unfamiliar with Android that need to use this, thus trying to make it as easy as possible.
The table/grid will contain TextView, EditText, Spinner, and Button, and will also be scrollable (via ScrollView parent).
I read about the GridView and found that it (seems) to only be able to get items programmatically, please correct me if I am wrong. I felt that this was unnecessary since I know what items I want and where. Also, I have not tried adding items to a layout programmatically yet so I figured I would try the other options first. Also, the GridView documentation does not say one way or the other if border lines are automatically shown, or if you can have them shown at all.
I started with a TableLayout and was able to get everything except the border lines to work. I tried android:divider to get the lines but that didn't work. One thought I had was to create a bunch of TextViews with black backgrounds and ~2dp widths/heights to make my own border lines. This feels like a huge waste though. Then I also read the TableLayout documentation and found this: "TableLayout containers do not display border lines for their rows, columns, or cells."
I then tried the GridLayout and had the same results as the TableLayout. I tried padding and margins, neither worked. Also, the GridLayout documentation states: "The grid is composed of a set of infinitely thin lines that separate the viewing area into cells."
My questions are:
Is there an attirbute that I missed in TableLayout or GridLayout that will give me border lines via the xml?
If no, then will the GridView give me the lines I want?
Will I be able to add all the perviously mentioned items I want to the GridView?
I was actually able to achieve the desired look by setting the android:background="#000000" within the GridLayout view and then in the child items I set the android:background="#8CDD81" (just some green color) and combined with android:layout_margin="2dp" I was able to get the "grid" lines that I wanted. Thanks to CommonsWare though for getting me thinking in a new direction that turned into a solution.
EDIT:
This does not work quite as anticipated. You need the android:layout_alignLeft/Right which are only available via RelativeLayout in order to get just the right width on the child items. Haven't tested this yet using this idea, child items within RelativeLayout within GridLayout.
Is there an attirbute that I missed in TableLayout or GridLayout that will give me border lines via the xml?
No.
If no, then will the GridView give me the lines I want?
No.
Will I be able to add all the perviously mentioned items I want to the GridView?
Yes, though how well something like a Spinner will work, I can't say.
The simplest way, off the top of my head, to give you the lines you seek is to have each cell of the TableLayout or GridLayout be some container containing the widget(s) for that cell, where you give the container a background that is your line. A ShapeDrawable could be defined in XML for that background, which will be nicely resizeable based upon the actual requirements of the cell.
For future visiters this is how I did it with TableLayout:
table.xml
<TableLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#969696">
<!-- table heading -->
<TableRow>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:background="#d2d2d2"
android:layout_margin="1dp"
/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Address"
android:background="#d2d2d2"
android:layout_margin="1dp"
/>
</TableRow>
<!-- table data -->
<TableRow>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ahtisham"
android:layout_margin="1dp"
android:background="#f1f1f1"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kashmir"
android:layout_margin="1dp"
android:background="#f1f1f1"
/>
</TableRow>
</TableLayout>
Related
Im pretty new to Android Development, so after like three days of trying different things with the XML Layout Design, i give up and hope for help from you guys.
What i want to achieve:
A table layout with with multiple rows, each filled with calculations im making in the background
The first three rows shall contain the input parameters, the following ~12 rows shall contain output parameters
rows 3 to 6 shall be rearrangeable, so to speak change name and shown values.
This is the concept, thats what one row should look like:
My way of trying things was:
Creating a TableRow for "Taupunkt" and "Td" and another one for three textfields and the +/- picture.
But how on earth am i supposed to insert the ">" arrows picture into the layout? Basically it should be centered between the rows.
I hope i did a clear explanation of my problem and hope that there is someone out there who can help me :)
PS.: App is going to support Android 4.0 and above
EDIT: As seen in the picture, how would i go about centering the plus/minus vertically to the textfields? Like, it should have the same space above and below it to the textfields
You can use ListView or RecyclerView as mentioned in comments.
For second question to make your view centrally aligned you can use android:gravity attribute in LinearLayout. Just made one same which is using center_vertical. Checkout -
<LinearLayout
android:id="#+id/btn_google"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/standard_padding"
android:background="#drawable/rectangle_round_red"
android:gravity="center_vertical"
android:minHeight="#dimen/standard_height"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_google" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Google"
android:textColor="#android:color/white"
android:textSize="#dimen/font_18" />
</LinearLayout>
This is how it looks
The texts can be entered into them . Only these two text widgets are possible in the given activity. I would want to know the structure , I would have to employ to get result as such.
I am still in learning phase.
There's a lot of ways how to achieve that. I suggest you to start with reading this thoroughly to learn how to build layouts on Android.
In general, you can add spacing among views by adding some margin and/or padding.
If you want to replicate the particular design quickly, do this:
Have vertical LinearLayout as your root layout (with gray background).
Add two CardViews (one for each box). That will add the
background and spacing.
Add other views to those CardViews.
To give you something to work on
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> //Elements inside this will be added vertically on the screen
<EditText
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="10dp"
android:hint="First edittext"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:hint="Second edittext"/>
</LinearLayout>
This is the basic structure on the image you showed. Expirement with it. Add your desired borders by using shapes and etc.
I have an oddly organized activity with a number of LinLayouts inside of LinLayouts inside of LinLayouts (inside of LinLayouts) all so that each little section is organized correctly. Everything looks good except for one part.
I have a vertical LinearLayout with two things inside of it. One is another LinearLayout with weight set to 6, and below it is a TextView weight set to 1. What I want to do is have the height of the TextView to scale depending on the amount of lines in it. It could either be a one-liner sentence or maybe a four-line paragraph--I don't know what it'll end up. Then the LinLayout above it needs to fill in the rest of the height.
What layout_height settings do I need to combine to get this to work?
Finally figured it out. It's sort of weird, but this is what I had to do:
<LinearLayout
android:id="#+id/everything_but_description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" />
<TextView
android:id="#+id/description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/paragraph" />
I had to have both set to "wrap_content" but give the one I wanted to fill the remaining space a weight WITHOUT giving the other one a weight. Very weird workaround but it works perfectly.
I have a listview where each item has 2 images, one on the right and the other on the left. Between them there is a textview that is filled from data. If text is long then it can continue down but there is a lot of free space just as you can see in the image. I want to use this space also to display text. I have been looking around the web and I have seen things like this http://code.google.com/p/android-flowtextview/downloads/detail?name=FlowTextDemo.zip&can=2&q= but this is useless. I don't want to lose the control of the images because I need their click method. What is the best way to do it? I have thought that maybe I can put a textview between images and an other down and when the first is filled continue in the second one but how can I know how many letters can keep the first textview?
I don't understand why FlowTextView (that you linked to) won't work for you. It's derived from RelativeLayout and flows text around any child views. The child views can be your images, positioned as you normally would in a RelativeLayout. Their onClick methods should work just fine.
<com.pagesuite.flowtext.FlowTextView
android:id="#+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/the_text >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="onTopLeftClick"
android:src="#drawable/top_left_image" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="onTopRightClick"
android:src="#drawable/top_right_image" />
</com.pagesuite.flowtext.FlowTextView>
You will need to set the text in code, or else extend FlowTextView and define your own custom attribute(s) to do it from xml.
OK, here's ANOTHER question about positioning objects in tables in Android, but nothing I've found on Stack has helped.
I want the ImageView in the XML below to be left aligned in its cell. No matter what I've tried, though, it won't do this (it's always centered). The layout_width and layout_weight are set as they are to control the position and sizes of the cells themselves. Maybe these settings are making it impossible to left align the ImageView in its cell, though.
android:layout_gravity="left" and android:gravity="left" didn't work in either the ImageView tag or the TableRow tag. One kind of kludgy solution that seems to work is to add a blank TextView in a third column, to force the 2nd column holding the ImageView to be exactly the width of the ImageView's bitmap. However, I'd prefer not to have to do this, especially since different rows may contain bitmaps of different widths.
<TableLayout
android:id="#+id/scoreTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<TableRow
android:id="#+id/thisWeek"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/thisWeekText"
android:layout_width="0px"
android:layout_height="30dp"
android:layout_weight="35"
android:gravity="right"
android:paddingRight="30px"
android:text="#string/thisWeek"
android:textStyle="bold" />
<ImageView
android:id="#+id/chevron1"
android:layout_width="0px"
android:layout_height="20dp"
android:layout_weight="65"
android:layout_marginLeft="0px"
android:src="#drawable/doser_scale4a"
android:visibility="visible" />
</TableRow>
I replaced the TextViews with ImageViews, using bitmaps of the text that was in the TextViews. This was OK for me because that text won't be changing, though I guess if it did I could create images for all possible text and switch between those images.
This was not an ideal solution, since I assume using bitmaps instead of text uses more memory, and making bitmaps for my text required a little time and effort and some sacrifice of ease and flexibility of changing the text, if that is desired at some point, but I couldn't figure out how to make this work with TextViews. Android definitely seems limited in this way, since it shouldn't be that difficult to align text any way you want in a table cell, should it?
Each "cell" of the TableRow is a View, so you could put a LinearLayout (with your preferred gravity) and put inside this LinearLayour your image.