We Keep Coding

Layout constraint start top don't work button disappears

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"

How to work with linear layout?

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 :)

Black Screen Above Elements

I'm having an awkward error, and do not have any clue about what's the cause.
I'm working on a maintenance of an android map application, it was using GoogleMap API, but now I've changed it to MapLink API. One of the view is this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<EditText
android:id="#+id/searchText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="3dip"
android:ems="10"
android:hint="Busca"
android:maxLines="1"
android:layout_weight="0.85" />
<Button
android:id="#+id/searchBtn"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/magnifier13"
android:onClick="search" />
</LinearLayout>
<View
android:id="#+id/separator1"
android:layout_width="fill_parent"
android:layout_height="2dip"
android:background="#color/red" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<br.com.maplink.map.MapTemplate
android:id="#+id/mapview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</br.com.maplink.map.MapTemplate>
<ImageView
android:id="#+id/drag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/androidpin64"
android:visibility="gone" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="100dip"
android:orientation="vertical" >
<View
android:id="#+id/separator2"
android:layout_width="fill_parent"
android:layout_height="2dip"
android:background="#color/red" />
<EditText
android:id="#+id/txtEtiqueta"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="3dip"
android:ems="10"
android:hint="Etiqueta"
android:maxLines="1" >
<requestFocus />
</EditText>
<Button
android:onClick="create"
android:id="#+id/btnCadastrarPOI"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:paddingRight="10dip"
android:text="Concluído" />
</LinearLayout>
When I click on the top textbox the keyboard just appear and when it's dismissed everything is normal, but when I click on the bottom textbox, the keyboard scroll the content page up and the content above the map goes off the view, when the keyboard is dismissed the content page scrolls back to it's original, but the content above the map is covered by a black frame, if I rotate the device or try to click on the top text box the black frame disappear.
I've already tried to recreate the view on other file but it keep this problem, I've tried the same thing on other project and everything is working fine.
Also, this problem only happen on landscape orientation;
Thanks.

xml layout isn't working for me

I have a lot of info to put on one xml page. Now i got what I want in the positions i want. However instead of fitting all my data on 3 key parts without running into each other, It keeps running into the next TextView. I was wondering how to have it auto adjust.
<?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"
android:orientation="vertical" >
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/back" />
<TextView
android:id="#+id/makeup_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginTop="97dp"
android:text="#string/part_section_2" />
<TextView
android:id="#+id/part_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginLeft="19dp"
android:layout_marginTop="38dp"
android:text="put text here for info" />
<TextView
android:id="#+id/part_safety"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_makeup"
android:layout_below="#+id/safety_title"
android:layout_marginTop="28dp"
android:text="put text here for safety" />
<TextView
android:id="#+id/info_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="42dp"
android:text="#string/part_section_1" />
<TextView
android:id="#+id/part_makeup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_info"
android:layout_below="#+id/makeup_title"
android:layout_marginTop="33dp"
android:text="put text here for makeup" />
<TextView
android:id="#+id/safety_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/part_makeup"
android:layout_marginTop="48dp"
android:text="#string/part_section_3" />
<TextView
android:id="#+id/part_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:textColor="#b70000"
android:textSize="16sp"
android:text="put text here for part title" />
</RelativeLayout>
would ScrollView work better? and how would switch this from this to ScrollView.
skin is 480x800
density is high(240)
Strings file - http://pastie.org/8534713

Changing to ScrollView (source):
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- your Button and TextView widgets -->
</RelativeLayout>
</ScrollView>
Edit:
As well as that, try changing your back button XML to this:
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/part_safety"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/back" />
The problem was android:layout_alignParentBottom="true". The bottom ended up not going to the bottom of the page like you had before. The ScrollView cut back on the bottom of the layout.

Android HorizontalScrollView content Stretch

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.