Please have a look at the following XML file
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:stretchColumns="*"
android:padding="5dp" >
<TableRow
android:id="#+id/tableRow0"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select Words To Remove" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_span="2"
android:padding="5dp"
>
</ScrollView>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<Button
android:id="#+id/removeWordsBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Acerto"
/>
</TableRow>
</TableLayout>
Inside the scrollview of this, I am adding table rows with textviews and buttons dynamically like below
ScrollView scrollView = (ScrollView)findViewById(R.id.scrollView);
TableLayout internalTableLayout = new TableLayout(this);
for(int i=0;i<words.size();i++)
{
TableRow r = new TableRow(this);
//r.setId(i);
TextView t = new TextView(this);
t.setGravity(Gravity.RIGHT);
CheckBox c = new CheckBox(this);
r.addView(t);
r.addView(c);
internalTableLayout.addView(r);
}
scrollView.addView(internalTableLayout);
}
But, what I get is the following
As you can see, the dynamically generated elements are left aligned. How can I make these right aligned?
Solution 1:
Use a RelativeLayout, make use of it's attributes:
Replace the children with android:layout_alignParentLeft="true" for the TextView and android:layout_alignParentRight="true" for the CheckBox.
That positions the children relative to the parents borders. You may also want to add android:layout_centerVertical="true" to each child to center the two vertical within each list item.
Solution 2:
If you want it for the table,
use myTable.setColumnStretchable(2, true); in Java.
and android:stretchColumns="2" in XML.
Solution 3:
Use CheckedTextView. I think this will serve your need.
Hope that helps.
Related
I'm trying to add 3 headers going from left to right above a ListView. I'm trying to add TextViews to achieve this. I've attached a picture to better demonstrate. Picture
My ListView works as i want it to by itself but I can't seem to get the textViews to align as i want them to.
activity_visualise.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/latitudeHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/listView"
android:layout_alignLeft="#+id/longitudeHeader"
android:text="#string/latitudeHeader"/>
<TextView
android:id="#+id/longitudeHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/listView"
android:text="#string/longitudeHeader"/>
<TextView
android:id="#+id/syncHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/listView"
android:layout_alignRight="#+id/longitudeHeader"
android:text="#string/syncHeader"/>
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
activity_visualise_row.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_visualise_database"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="org.softshack.VisualiseDatabaseActivity">
<TextView
android:id="#+id/dbLatitude"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/dbLongitude"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/dbReportTime"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/dbSyncStatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"/>
</LinearLayout>
Didn't see the rest of your code but you can try and put the headers as the first row on your ListView instead of the TextViews..
Couldn't align it properly in XML so I added the headers into the listview as strings. Had issues with them randomly repeating and this fixed it List view items changes position when scrolling android?
As the parent of your header view use a linear layout (horizontal) and apply a weightSum of 1 on it. then add 4 textviews as the childs of the linear layout and apply a layout weight of 0,25 on every one of them. do the same for the single list row view and you will get the result that you want.
UPDATED ANSWER:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView" android:layout_weight="0.25"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView2" android:layout_weight="0.25"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView3" android:layout_weight="0.25"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView4" android:layout_weight="0.25"/>
</LinearLayout>
P.S. you can use a gridview widget to get the same result.
Hello I'm trying to figure how to work with LinearLayouts. I dragged one horizontal layout to my XML file, I then dragged three TextView one next to each other. When I'm trying to drag ImageView and place it below them, it always pushes the TextView aside. How can I fix this?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="397dp"></LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_vertical" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="70dp"
android:weightSum="1">
<TextView
android:layout_width="110dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Movie Name"
android:id="#+id/textView"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
/>
<TextView
android:layout_width="110dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Actor Name"
android:id="#+id/textView2"
android:layout_marginLeft="10dp"
android:layout_marginTop="30dp" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Grade"
android:id="#+id/textView3"
android:layout_marginLeft="20dp"
android:layout_marginTop="30dp" />
</LinearLayout>
</LinearLayout>
You have not mentioned orientation for the main parent LinearLayout so by default it is considering it to be horizontal and showing images and text views in same line.
The following LinearLayout is useless as it does not have any children.
You need to declare orientation of LinearLayout to be vertical to show image below your other layout.
Some pseudo code will be like,
<LinearLayout
orientation="vertical"
...>
<LinearLayout
orientation="horizontal"
...>
<TextViews ... />
</LinearLayout>
<ImageView ... />
</LinearLayout>
LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.
All children of a LinearLayout are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child.
So My suggestion is Dont use specific width and Height, ALways use wrap_content or match_parent
For More Details see here
This is XML Code that You wants.
try the Below code. You should give the android:orientation="vertical"for the parent LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/textView"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:text="Movie Name"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="30dp"
android:text="Actor Name"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="30dp"
android:text="Grade"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
Happy Coding :)
I have a list and I want on the left part of a list item to show an image and on the right of the image
a series of widgets aligned vertically, one of which is an include:#layout
Having a relative layout I can add widgets using layout to right of the pic but:
1) I can not align the linear layout to the right of pic as there seems to be no such attribute
2) Without nesting the widgets in a linear layout and placing them only just to the right of the pick and one of top of the other I can not place the include:#layout where I want as it does not have a layout_bellow etc attribute.
How can I create such layouts?
Update:
++++++++ ++++++++++++++++++++
+IMAGE + TEXTVIEW +
+ + LAYOUT FILE +
+ + TEXTVIEW+
+++++++++++++++++++ TEXTVIEW+
UPDATE:
<?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">
<ImageView
android:id="#+id/thumb"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/friend_name”
android:layout_toRightOf="#id/thumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:gravity="top"
/>
<ViewStub
android:id="#+id/stub_friend_status”
android:inflatedId="#+id/friend_status”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/thumb"
android:layout_below="#id/friend_name"
android:layout="#layout/friend_status”/>
<TextView
android:id="#+id/latest_date”
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/stub_friend_status"
android:layout_toRightOf="#id/thumb"
/>
<ViewStub
android:id="#+id/stub_general_info”
android:inflatedId="#+id/general”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/latest_date"
android:layout_alignParentBottom="true"
android:layout="#layout/general_info”/>
</RelativeLayout>
Here is layout, you can make left/right part equally, left part put image and right part you can put layout vertically:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
//left part
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<FrameLayout
android:id="#+id/image_frame"
android:layout_width="img_width"
android:layout_height="img_height"
android:gravity="center"
>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/your_img"/>
</FrameLayout>
</LinearLayout>
//right part
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center_vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_1"
... ...
android:layout_gravity="left"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_2"
... ...
android:layout_gravity="left"
/>
... ...
</LinearLayout>
</LinearLayout>
If you want left part smaller than right, then you can change the layout_weight of left/right as 1/2 or 2/3 ...
Hope this help!
I have a HorizontalScrollView with some buttons, I am trying to stretch these buttons to fill the whole width of the HorizontalScrollView so that they can appear organized and equally spaced between each others. Here is the Image which I have.
I want these 4 buttons to be stretched over the whole width! here is my code
<HorizontalScrollView
android:id="#+id/items_HorizontalBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/vf"
android:background="#80000000"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Light"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Door"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Alarms"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Window"
android:textColor="#color/green_color"
android:textSize="20sp" />
</LinearLayout>
</HorizontalScrollView>
Instead of messing with LinearLayout you should follow the correct solution that is setting the HorizontalScrollView (or Vertical) to FillViewPort.
XML:
android:fillViewport="true"
Programmatically:
hsv.setFillViewport(true);
For equal distributions, set the weightSum value of the parent, and assign layout_weight to its children.
For 4 equal sized buttons, add android:weightSum="1" to the LinearLayout. For each of the buttons set android:layout_width="0dp", then add android:layout_weight="0.25".
This is what occurs in the code but depending on the View, the "Distribute Weights Evenly" button in the Eclipse GUI can also help.
However, HorizontalScrollView can only host one direct child, I wonder about the structure of this layout...
try making the container a horizontal scroll view. After that add in a table layout, and in each row of the table add in a horizontal linear layer. what will now happen instead, is that the scroll view will be stretched to fit the button size you set, and should scroll w/o you having to program a thing, and you should have effectively created a grid.
try something similar to this:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="233dp"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
Also perhaps you could wrap the horizontal scroll view in a vertical scroll view then you can scroll up/down, left/right and do as you need.
Here's what I want to achieve:
I have at table with a lot of table rows. Each row should have two text view with a product title and subtitle on top of each other (subtitle not implementet yet). The should be left aligned. To the right I want a spinner to select the quantity.
The texts come from the database and are of course of different lengths.
Here is what I've come up with so far:
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/barmenu"
android:background="#99ffff"
android:scrollbars="vertical">
<TableRow
android:layout_height="wrap_content"
android:background="#ffff99"
android:layout_width="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:background="#0000ff">
<TextView
android:id="#+id/productTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#88ffff"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="Product name"
android:textColor="#000000"
android:gravity="left"
android:textSize="13sp"
android:textStyle="bold" />
<Spinner
android:gravity="right"
android:layout_height="40dp"
android:layout_toRightOf="#id/productTitle"
android:width="100dp"
android:layout_width="wrap_content" />
</RelativeLayout>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:background="#ffff99"
android:layout_width="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:background="#0000ff">
<TextView
android:id="#+id/productTitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#88ffff"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="Some long long long long name"
android:textColor="#000000"
android:gravity="left"
android:textSize="13sp"
android:textStyle="bold" />
<Spinner
android:gravity="right"
android:layout_height="40dp"
android:layout_toRightOf="#id/productTitle2"
android:width="100dp"
android:layout_width="wrap_content" />
</RelativeLayout>
</TableRow>
</TableLayout>
</ScrollView>
Screendump:
First problem is that the RelativeLayout doesn't fill out the width of the table row. And the second problem: the spinners are not right aligned.
What am I missing?
best regards
Allan
android:fillViewport="true"
add this line to your ScollView attributes and you're done :)
I'd make it simpler and lighter. Just use RelativeLayout for all these 4 views. Align to right both spinners and make textview's with - match_parent and add toLeftOf the relative spinner. I think you will see what you want.
Add android:layout_weight="1" to your relativelayout