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
Related
I have this activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/table_top"
android:layout_marginTop="60dp"
android:layout_width="355dp"
android:layout_height="107dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="40dp">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/first_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="First name:" />
<EditText
android:id="#+id/first_name_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="number" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/last_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Last name:" />
<EditText
android:id="#+id/last_name_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="number" />
</TableRow>
</TableLayout>
<Button
android:id="#+id/calculate_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CALCULATE"
android:textColor="#303030"
app:backgroundTint="#CCCCCC"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="40dp"
app:layout_constraintStart_toEndOf="#+id/table_top"
app:layout_constraintTop_toBottomOf="#+id/table_top"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
It looks like this:
If I remove
app:layout_constraintStart_toEndOf="#+id/table_top"
app:layout_constraintTop_toBottomOf="#+id/table_top"
from the button, it looks like this:
I need to position the button beneath the table. Why the constraints didn't help? How do I fix it?
Although I tend to agree that dodging the table layout is better for this use case It's a good use case for table layout since the edit texts should be still aligned while the text views have different widths.
It's totally not right that the table layout is useless with constraints so you can still use table layout if you wish.
Make your constraints like the following layout (of course tweak the margins as you wish to get your desired UI):
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MY BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/table" />
<TableLayout
android:id="#+id/table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Name:" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Last Name:" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
It should look like this:
Don't use Constraint Layout with Table Layout, the last one is useless with constraints.
Delete Table Layout and adapt your constraint fields
You're constraining the start of the button to the end of the table, and your table is constrained to the end of the parent, which means your button is pushed outside of the screen. If you open the layout inspector you get a complete overview of the view hierarchy and you can see where the button is.
I'm assuming what you want is to have the button below the table and at the end of the screen, so change the button constraint to end_toEndOf="#+id/table_top"
I am new to android and am trying to create a list view row item as follows:
On the far left of the listview item I need two stacked text views
In the center of the listview item I need an additional two stacked text view
On the far right I need a checkbox
I want to make the width of the center textviews a constant size, irrespective to the length of text.
Every time I adjust the middle linear layout, it pushes the checkbox off the screen unless I manually give it a width (which will not work for multiple screen sizes). Can someone please help?
I've tried using weights and all but I can't figure it out.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="left"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/starttime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:singleLine="true"
android:text="10:35am"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#929692"
android:textSize="12sp" />
<TextView
android:id="#+id/endtime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:singleLine="true"
android:text="11:55am"
android:textColor="#929692"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/middle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_toRightOf="#id/left"
android:orientation="vertical">
<TextView
android:id="#+id/sessionname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="ok this is where my text goes it is very long
and it will push stuff off"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textSize="14sp" />
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:singleLine="true"
android:text="#android:string/ok"
android:textColor="#929692" />
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_toRightOf="#id/middle"
android:orientation="vertical">
<CheckBox
android:id="#+id/list_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:checked="false" />
</LinearLayout>
</RelativeLayout>
Used constraintlayout and it worked!
I am building an app for android that dynamically updates a table layout with table rows. The way I do this, is by having a fixed table row layout that I populate with content and then insert it to the table layout and it displays like seen below.
The problem I'm having is that when I add a row that contains content that is longer in the middle part and creates multiple lines on one of the text views, it somehow shortens the width of the layout that contains the two text views of the other rows (middle part), specifically those that have single lines, for example the first and second row in the image below.
You can find the code below. If you need any more code or examples, please tell me.
row_main.xml - The fixed layout of the row.
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRowMain1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center" >
<TextView
android:id="#+id/textViewEmployeeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center"/>
<TextView
android:id="#+id/textViewClientId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center"/>
<TextView
android:id="#+id/textViewTable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
<TextView
android:id="#+id/textViewTimeStamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_margin="1dp"
android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutOrder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="2dp"
android:gravity="center"
android:layout_gravity="center"
android:layout_weight="1" >
<TextView
android:id="#+id/textViewOrder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="marquee"
android:layout_weight="1"
android:gravity="center"
android:layout_gravity="center" />
<TextView
android:id="#+id/textViewOrderDetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_weight="1"
android:layout_margin="0dp"
android:gravity="center"
android:layout_gravity="center" />
</LinearLayout>
<Button
android:id="#+id/buttonDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:text="#string/cross"
android:textSize="25sp"
android:gravity="center"
android:layout_gravity="center" />
</merge>
MainActivity.xml (snippet) - Where the table row is inserted.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
android:layout_weight="1"
android:layout_margin="10dp"
android:overScrollMode="always" >
<TableLayout
android:id="#+id/tableLayoutMain"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
</TableLayout>
</ScrollView>
I really can't figure out how to solve this or what may be causing it... Please help!
Thank you in advance! :)
Note: The pink/red rectangles is the "Show layout bonds" tool from the developer options in android.
EDIT: I replaced the TableLayout with a Vertical LinearLayout and it works just fine. I guess I was overcomplicating it... :P
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 :)
Please have a look at the following simple code.
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="John Jonathan Samuwell Abbruzzi"
android:singleLine="true"
android:scrollHorizontally="true"
android:textSize="50sp" />
The text in TextView is larger than the width of the screen and should be in single line. I added android:scrollHorizontally="true", so the user can scroll it to see the rest of the text. But, it is not happening. What have I done wrong?
Put your textview inside the HorizontalScrollView its working i am tested..
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="John Jonathan Samuwell Abbruzzi"
android:singleLine="true"
android:scrollHorizontally="true"
android:textSize="50sp" />
</HorizontalScrollView>
You need to use HorizontalScrollView with single line. If you want horizontal scrollbar for multiple views then you can create layout in HorizontalScrollView and scroll complete. HorizontalScrollView can only hold one direct child.
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="91dp"
android:singleLine="true"
android:text="my view" />
</HorizontalScrollView>