I use Android Studio and I created the XML layouts file with it. Suprisingly the layouts in the emulator look different to the ones I created and I have no clue why this is happening. Here you see some pictures.
Main Activity layout in Android Studio:
Main Activity in the emulator (why is there the red marked text, which is not visible in the layout):
Selection Activity in Android Studio:
Selection Activity in in the emulator (1: Text is wrong, 2: the buttoms are not in the right place):
Constrainets in Android Studio
Here is the code for the Main activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:ignore="ExtraText">
'<!--Learning: The following lines define a toolbar -->'
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_mainActivity"
android:layout_width="match_parent"
android:layout_height="53dp"
android:background="#435cb53f"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="@android:color/holo_green_light" />
<Button
android:id="@+id/Statistik_Button"
android:layout_width="256dp"
android:layout_height="95dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#435cb53f"
android:text="@string/Statistik_Button"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.697" />
<Button
android:id="@+id/Bestellen_Button"
android:layout_width="255dp"
android:layout_height="96dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#435cb53f"
android:text="@string/Bestellen_Button"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.279" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="153dp" />
<TextView
android:id="@+id/textView_ToolBar_MainActivity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="@string/Main_Activity_Toolbar_Text"
android:textColor="@android:color/white"
android:textSize="24sp"
android:visibility="visible"
app:fontFamily="@font/roboto_bold"
app:layout_constraintBottom_toBottomOf="@+id/toolbar_mainActivity"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.535"
app:layout_constraintStart_toStartOf="@+id/toolbar_mainActivity"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.421"
tools:text="App" />
</android.support.constraint.ConstraintLayout>
And here is the code for the selection activity:
<ScrollView 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"
xmlns:android="http://schemas.android.com/apk/res/android" >
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="ExtraText">
'<!--Learning: The following lines define a toolbar -->'
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_mainActivity"
android:layout_width="match_parent"
android:layout_height="53dp"
android:background="#435cb53f"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="@android:color/holo_green_light" />
<TextView
android:id="@+id/textView_ToolBar_CocktailSelectionActivity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TestText"
android:textColor="@android:color/white"
android:textSize="24sp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="@+id/toolbar_mainActivity"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.535"
app:layout_constraintStart_toStartOf="@+id/toolbar_mainActivity"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.421"
tools:text="Selection" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="1000dp"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="73dp">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="210dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.026"
app:srcCompat="@mipmap/test_dish_2" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="210dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.014"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.027"
app:srcCompat="@mipmap/test_dish_1" />
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="210dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.014"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.788"
app:srcCompat="@mipmap/cocktail_x" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Manifest-File (requested by Ronak):
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.td.barapp">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<meta-data
android:name="preloaded_fonts"
android:resource="@array/preloaded_fonts" />
<activity android:name=".Selection_Activity"></activity>
</application>
</manifest>
Update: Does anybody know a good tutorial for combining a ScrollView with a Constrained Layout? As posted before, the use of a "normal" Constrained Layout is quite simple and I do not have any problems with that. Things become extremely challenging for me when combining it with a Scroll View