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"
Related
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Quantity" />
<TextView
android:id="#+id/quantity_text_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="0"
android:textColor="#color/black"
android:textSize="16sp" />
<Button
android:id="#+id/button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Order" />
</LinearLayout>
I am new in Android. And I am learning Android at Udacity. But the course is way old that some errors are happening. I am not able to handle the errors.
Change quantity_text_view's layout_height from match_parent to wrap_content:
<TextView
android:id="#+id/quantity_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="0"
android:textColor="#color/black"
android:textSize="16sp" />
Or, the TextView should occupy rest of the height after the first TextView.
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
I am busy designing my first app in android but I am having some problems.
I have created this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.mfr.calculatorapp.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_margin="15dp"
android:text="123"
android:id="#+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1" />
</LinearLayout>
But the two Buttons appear underneath each other and not on top of each other, I know that if I change orientation to horizontal that I will be able to position it next to each other but I want to be able to span a textview over the top.
What do I do?
Regards
Matt
You will want to use a relative layout. You will see the below code didn't need a lot of extra attributes to pull this off.
Notice that the buttons now have three additional attributes.
andoid:layout_below="#id/" : positions the element under another element
android:layout_alignWithParentIfMissing : if the above mentioned element is not present, align with the parent
android:layout_alignParentLeft : allows you to position one button to the left and one to the right
UPDATE use android:layout_alignRight="#id/textView" to properly align your second button to the right
<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="match_parent"
android:orientation="vertical"
tools:context="com.mfr.calculatorapp.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_margin="15dp"
android:text="123"
android:id="#+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1"
android:layout_below="#id/textView"
android:layout_alignWithParentIfMissing="true"
android:alignParentLeft="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="2"
android:id="#+id/button_2"
android:layout_below="#id/textView"
android:layout_alignWithParentIfMissing="true"
android:alignParentRight="true"
android:layout_alignRight="#id/textView"
/>
</RelativeLayout>
I am developing a contacts list android app and I am trying to insert 5 new edit text fields every time I press the add address button. I tried to make the text fields in the java file inside the onClick method but it didn't work, the thing is that I heard that you can add a layout inside another layout and now I am trying to add a layout with the 5 text fields inside the layout containing the button. This is the code of the .xml file containing some other fields and the add address button
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/add_contact_layout"
android:orientation="vertical" >
<EditText
android:id="#+id/first_name_editText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/first_name_hint" >
</EditText>
<EditText
android:id="#+id/second_name_editText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/second_name_hint" />
<EditText
android:id="#+id/mobile_phone_editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/cell_phone_hint"
android:inputType="phone" />
<EditText
android:id="#+id/work_phone_editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/work_phone_hint"
android:inputType="phone" />
<EditText
android:id="#+id/email_editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/email_text_hint"
android:inputType="textEmailAddress" />
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/add_address_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/add_address_text" />
<Spinner
android:id="#+id/address_spinner"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</LinearLayout>
</ScrollView>
This is the code of a new .xml file containing the five edit text fields:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/typeOfAdresstextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/spinner_value"
android:textAppearance="?android:attr/textAppearanceMedium" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/address_street_editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/street_hint"
android:inputType="textPostalAddress" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/address_number_editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="#string/address_number_hint"
android:inputType="number" />
<EditText
android:id="#+id/address_city_editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/city_hint"
android:inputType="textPostalAddress" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/address_state_editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/state_hint"
android:inputType="textPostalAddress" />
</TableRow>
<TableRow
android:id="#+id/tableRow6"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/address_zipcode_editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/zipcode_hint"
android:inputType="number" />
</TableRow>
</LinearLayout>
My goal is to insert these 5 text fields below the button and the spinner, and every time I press the button these text fields appear again for the user to be able to add all the addresses that he/she wants (below the previous filled address text fields). I don't know if this is the right way but if there is another way to accomplish this I am open to suggestions. Here I leave a sketch of what I want to accomplish
You could either create a FrameLayout after your TableLayout in the first XML layout file then inflate the 2nd layout into the FrameLayout. Or, just embed the 2nd layout into the first within a containing layout (like the FrameLayout I suggested above) and mark the container as android:visibility="gone". When your button is pressed, change the visibility and your other 5 fields will become visible.
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