Consider the following:
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingStart="15dp"
android:paddingEnd="15dp">
<TextView
android:id="#+id/tv_Progress_Level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:layout_row="0"
android:layout_column="0"
android:text="#string/Progress"
android:textStyle="bold" />
<ProgressBar
android:id="#+id/pb_Assignment_Progress"
style="#android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="1"
android:paddingStart="10dp"
android:paddingTop="3dp"/>
</GridLayout>
In the above GridLayout, my ProgressBar has been set to 50% for the sake of width testing.
However, with the above setup, this is the result:
The bar is clearly NOT on the 50% mark.
Yes this is because I've used fill parent that actually takes up the space from the start of grid till the end of it.
I have tried using wrap_content on the bar, but it seems a lot shorter:
Is there a way I can fill up the remaining space of the grid?
Isn't fill_parent suppose to mean to fill up the remaining space? Guess I was wrong. It is actually a deprecated version of match_parent
I don't want the bar to possess the width of the grid, instead I want it to just fill up the remaining space after the TextView
Solved it:
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingEnd="15dp"
android:paddingStart="15dp"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_Progress_Level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Progress"
android:textColor="#color/white"
android:textStyle="bold" />
<ProgressBar
android:id="#+id/pb_Assignment_Progress"
style="#android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</GridLayout>
Happy coding!!
As simple as changing the following:
android:layout_width="fill_parent"
TO
android:layout_width="0dp"
and add the following:
android:layout_gravity="fill"
Related
I have a problem with "TextView" I do not know how to solve. I have three "TextView" within a "LinearLayout" and that the texts would stay the same size, same as break line. At the moment, the texts are on the same line, but with different sizes. What to do? The following image and code:
<LinearLayout
android:id="#+id/complementaryInfoLayout"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#color/purewhite">
<TextView
android:id="#+id/textCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#545454"
android:layout_marginStart="15dp"
android:text="#string/placeholder" />
<TextView
android:id="#+id/textCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#545454"
android:text="#string/placeholder" />
<TextView
android:id="#+id/textNeighborhood"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#545454"
android:text="#string/placeholder" />
</LinearLayout>
How is the tablet
Well.. The last line seems to be breaking duo the string size.
You may obligate TextView occupy one line regardless its content by using:
android:singleLine="true"
Furthermore you can give a nice touch by using:
android:ellipsize="marquee"
So it wont crop abruptly the content in it.
Hope it helps...
Try giving weights to your TextViews :
<LinearLayout
android:id="#+id/complementaryInfoLayout"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#color/purewhite">
<TextView
android:id="#+id/textCategory"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#545454"
android:layout_marginStart="15dp"
android:text="#string/placeholder" />
<TextView
android:id="#+id/textCity"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#545454"
android:text="#string/placeholder" />
<TextView
android:id="#+id/textNeighborhood"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#545454"
android:text="#string/placeholder" />
</LinearLayout>
need some clarity on your query, i hope you want to adjust three childs in linear layout horizontally, for this
you can use android:layout_weight attribute, in below code i have used layout_weight as 2, 3 and 5 respectiviely,
here 2+3+5=10 i.e total 10 parts equal to 100% width
so first textview occupies (2/10)*100 = 20% width horiontally
so second textview occupies (3/10)*100 = 30% width horiontally
so third textview occupies (5/10)*100 = 50% width horiontally
<LinearLayout
android:id="#+id/complementaryInfoLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#color/purewhite">
<TextView
android:id="#+id/textCategory"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/textCity"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/textNeighborhood"
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="wrap_content"/>
</LinearLayout>
I am designing a table using RelativeLayout in Android and add entries programmically. The result pleases me so far:
The layout code is
<RelativeLayout
android:id="#+id/table_relativelayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
<TextView
android:id="#+id/example_column1_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/column1_header"
android:text=""
android:paddingLeft="8dip"
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column2_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column2_header"
android:text=""
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column3_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column3_header"
android:paddingRight="8dip"
android:text=""
android:visibility="gone"
/>
</RelativeLayout>
However, as more entries are added, scrolling becomes necessary. So I wrap the whole thing in a ScrollView (as per this answer)
<ScrollView
android:id="#+id/table_scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true"
>
...
</ScrollView>
This of course has the result that the header row is hidden if I scroll down. I'd much rather have it outside the ScrollView but then I don't know how to align the entries with the header. Any ideas?
Try with something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
</LinearLayout>
<ScrollView
android:layout_below="#id/header"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/scroll_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<rows>
</LinearLayout>
</ScrollView>
<RelativeLayout>
you don't want to do this with xml.
Because you simply can't reference views inside of an relativeLayout
from the outside and vice versa, to align things.
I had to deal with exactly your issue, as I implemented a in size selfadjusting tableView. The trick is to add all your textViews for one row into a ViewGroup (LinearLayout e.g, because easy to use with addView) and calculate the width of every row header in forehand. Than set the size of the viewGroups programmaticaly.
That's the key. This way, you can easily change your row header later and keep beeing flexible. Moreover you are not limited to a fixed size of columns.
calculate the width of the header
set the size of the (e.g) LinearLayouts for every row
add all TextViews to the LinearLayouts
This should hopefully help you. Answers to all the upcoming question for calculation sizes etc, should you find yourself on stackoverflow.
Greets, Steve.
OK, I found a solution: I'll have the three header TextViews outside of the ScrollView, as suggested by several commenters, and three additional "header" TextViews with the same parameters plus android:visibility="invisible" inside the ScrollViews. Those invisible TextViews will be used to align the visible entries.
Thanks for your answers!
I have a RelativeLayout with three views. Both TextViews should be to right of the ImageView and the seconds one should be below the first TextView.
Code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp" >
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/avatar"
android:text="Chris"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:layout_toRightOf="#id/avatar"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
Result:
After removing android:layout_centerVertical="true" from the first TextView, everything works as expected (except that it's not vertical).
Why is this and how can I make the first TextView vertical centered?
For some reason the RelativeLayout's height param is giving the problem. Try setting it to 94dp (64 of the image + 15 of bottom padding + 15 of top padding). This should solve the problem
#f. de is right. The problem is android:layout_height="wrap_content", as the height of relative layout is determined my it's content setting it's content to vertically center based on it's height wont work. You need to set this to match_parent or to a fixed value.
You also could wrap your data, in your case Name and University inside another RelativeLayout or any other ViewGroup and make it to align center.
Like that
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp">
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_toEndOf="#id/avatar"
android:layout_toRightOf="#id/avatar">
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chris"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
</RelativeLayout>
This makes sense in order to group related views (TextViews) and also it produces better result because whole container is aligned center, in your initial example Name view is centered vertically but other view is below it and it makes it to look not as good as it will in case of container where baseline is vetical center of container.
Since trying to place both TextViews center vertical, they overlap. Use the padding attribute for the advantage.
So to align them as required, use this code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp" >
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/avatar"
android:text="Chris"
android:paddingBottom="7dp"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:layout_toRightOf="#id/avatar"
android:paddingTop="7dp"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
I wish this solves your problem...
The problem is with your RelativeLayout's height attribute,
if you change it to "match_parent" then it will work the way you wanted.
Or
you can make another Relativelayout in your main RelativeLayout who's height is "match_parent". After doing so you can place everything at any place without any problem.
Is there a way to specify that a view should lie strictly to the left of the center (or strictly to the right of the center)? I have two textviews, one for LOGIN and one for REGISTER. I have them as children of RelativeLayout. No matter what I do I can't get them to behave. The one configuration that works in the Graphical Layout of eclipse, only shows the registration button on a real device. Here it is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/login_bckg"
android:padding="10dip"
tools:context=".LoginActivity" >
...
<View
android:id="#+id/center_btns"
android:layout_width="1dp"
android:layout_height="20dp"
android:layout_below="#id/text_fields"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/login_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="login"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Login"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/register_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="register"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
...
</RelativeLayout>
If I set them as children of a horizontal linearLayout, how do I specify their relationship to get it to work? I already tried that and no avail.
I wish I could post this as a comment but I don't quite have the rep... Anyway, to clarify, do you want the items to be right next to each other on the same line? If so the LinearLayout should work just fine...
<LinearLayout
...android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
/>
Should work just fine. If not you may try playing with weights depending on which one you want to take up more space. For weights to work you will need to see the width of both to fill_parent.
I'm developing what I thought would be a simple listview row layout, but I'm having some trouble getting my views to line up properly. There are 4 TextViews all using layout_weight within a LinearLayout to size themselves appropriately. What I can't figure out, however, is how to align them consistently so that each TextView begins in the same position as the one above and beneath it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA88">
<TextView
android:id="#+id/quality"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_grade"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_distance"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="2px"
/>
</LinearLayout>
My attempts to use the :gravity tag don't seem to work. Is LinearLayout the wrong approach here?
As an edit, I'm making some headway using specific width values in dips. Now to test if it looks the same across different screens.
The gravity distributes the remainder of space available after minimum constraints not the total space.
So align different row above and below make sure the remaining space is equal on each row. A good way to accomplish this is to hard-code the minimum space each element needs:
android:layout_weight="2"
android:layout_width="1dip"
Make each TextView on every row 1dip width and split the remaining space according to weight.
you can try using RelativeLayout. Try 4 of the TextViews to be placed relatively, 3 can have fixed width in dp and the 4th can take up rest of the available space. that way each textview will start at a fixed position every time.
something like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text_1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 1"/>
<TextView
android:id="#+id/text_2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_1"
android:gravity="left"
android:padding="8dp"
android:text="Text 2"/>
<TextView
android:id="#+id/text_3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_2"
android:gravity="left"
android:padding="8dp"
android:text="Text 3"/>
<TextView
android:id="#+id/text_4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_3"
android:layout_alignParentLeft="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 4"/>
</RelativeLayout>