VanessaF
Reputation: 793
Layout in Android emulator looks different compared to layout file
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
Upvotes: 0
Views: 592
Answers (2)
Ronak Ukani
Reputation: 613
Here Selection Activity's xml file. Try this,
<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"
app:layout_constraintTop_toBottomOf="@+id/toolbar_mainActivity"
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.026"
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_toBottomOf="@+id/imageButton"
app:srcCompat="@mipmap/cocktail_x" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Upvotes: 1
Mohammed Alaa
Reputation: 3320
for MainActivity the text are for title you can remove it by applying them without toolbar and set your custom toolbar or follow this question
for SelectionActivity try this layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity">
<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_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_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="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_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/toolbar_mainActivity"
tools:text="Selection" />
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/toolbar_mainActivity">
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintEnd_toStartOf="@id/imageButton1"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/logo" />
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/imageButton2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/logo" />
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintEnd_toStartOf="@id/imageButton4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/imageButton2"
app:srcCompat="@drawable/logo" />
<ImageButton
android:id="@+id/imageButton4"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintStart_toEndOf="@id/imageButton3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/imageButton2"
app:srcCompat="@drawable/logo" />
<ImageButton
android:id="@+id/imageButton5"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintEnd_toStartOf="@id/imageButton6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/imageButton3"
app:srcCompat="@drawable/logo" />
<ImageButton
android:id="@+id/imageButton6"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#00000000"
android:scaleType="fitCenter"
app:layout_constraintStart_toEndOf="@id/imageButton3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/imageButton3"
app:srcCompat="@drawable/logo" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
hope this help you in your issue, for more info in how to use constraintlayout check this codelab
Upvotes: 1
Related Questions
- Layout in Android Emulator looks different as compared to the layout file
- Layout looks different in Android emulator compared to real device
- Layout looks right in Editor, wrong on Emulator
- Layout in Emulator is not matching that from Android Studio
- different layout between what appear on emulator and what on xml
- emulator output different from layout view in android
- Android emulator uses wrong layout resources?
- Graphical layout is different when it's emulator
- Android Development - Graphical Layout looks different from actual XML
- The layout on emulator and android phone are not same