Android: How to understand layouts? - android-studio

Question

I am struggling big time with trying to make a simple layout with two TextView:s under each other on the left and corresponding two TimePicker:s under each other on the right. However, whichever view I use or attributes I choose that seem relevant I do not get the desired outcome. Here is my current try:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
>
<TextView
android:layout_column="1"
android:id="#+id/text_start_time"
android:text="#string/start_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_start"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
>
<TextView
android:layout_column="1"
android:id="#+id/text_end_time"
android:text="#string/end_time"
android:layout_gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_end"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
/>
</TableRow>
<TableRow>
<Button
android:layout_column="2"
android:layout_width="match_parent"
android:text="#string/button_calculate"
android:gravity="center"
android:onClick="calculateWorkingTime"
/>
</TableRow>
</TableLayout>
This gives the following output
Where is "Start"?
As you can see "Start" is not even shown! I would like to align "Start" with the vertical center of the TimePicker spinner. How to do that?

Answer 1

First, don't use a TableLayout. Use Linears, as you are a beginner and they're easier to use and understand. Here's what you should do:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_start_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_end_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/end_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</LinearLayout>
<Button
android:layout_column="2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="#string/button_calculate"
android:gravity="center"
android:onClick="calculateWorkingTime"
/>
</LinearLayout>
What I've done is creating a Linear Layout and, into it, another two with orientation:horizontal, which makes the elements appear one next to each other.
Also, I've put width and height to all the elements, what is very important.
I've put wrap_content, if you want to change it, no problem.
I didn't test it, if there's any error, just coment
Hope it helps!