Unable to make a ScrollView that contains other layouts and widgets

Unable to make a ScrollView that contains other layouts and widgets - android

I am simply trying to make a scrollable layout with no luck...
I have no idea why it isn't working, it seems to be exactly as I read online.
The problem here is that the bottom of the included layout is cut of to fit exactly the screen size.
this is my layout xml:
<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"
tools:context=""
tools:layout_editor_absoluteY="81dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="opening game"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="14dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="#+id/GameTitleET"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/GameTitleET"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="153dp"
android:ems="10"
android:hint="Game's name"
android:inputType="textPersonName"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/GameContentET"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="מהלך המשחק"
android:inputType="textMultiLine"
android:maxLines="8"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/DeleteAndMakeYOurOwnButton" />
<Button
android:id="#+id/DeleteAndMakeYOurOwnButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="Write your own game"
app:layout_constraintStart_toStartOf="#+id/GameContentET"
app:layout_constraintTop_toBottomOf="#+id/numberPicker2" />
<Switch
android:id="#+id/SendToReviewSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:layout_marginStart="16dp"
android:text="הגש משחק להגשה"
app:layout_constraintBottom_toTopOf="#+id/DeleteAndMakeYOurOwnButton"
app:layout_constraintStart_toStartOf="parent" />
<include
android:id="#+id/include5"
layout="#layout/activity_create_post_methods"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/GameContentET" />
</android.support.constraint.ConstraintLayout></ScrollView>
Do you have any suggestion of what should i do? I also plan to add many more layouts to this main layout and I need it to scroll and show everything flawlessly.
Thank you a lot!

Related

Align textviews in left and right side of a linear layout?

I currently doing one of the project from "Google Android Dev". I am facing a problem in my layout design. Kindly help me how to align one textview in left side and right side of a linear layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|right"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android so you are most welcome for code review.

Try to change your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|start"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies: Sunbathing"
android:gravity="center"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Use it like this
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:weight="1"
android:layout_height="wrap_content"
android:text="Age : 7"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
weight here will allow the first textview to take all the space and will leave the required space for the hobby textview.
Use it as per your requirement.

Android GUI looks different when using margin and padding

I'm a beginner on Android, but my question require a little bit knowledge in UI and not in programming.
I have an xml code, i have their some views but for this question only two components are relevant.
The component is a ScrollView "father" that has only one "son" that is a TextView.
When setting padding in ScrollView, if the text inside the TextView is long, first line of TextView is a little bit truncated (although i am using padding). But on the other hand, when using margin_layout text is seen fine. I read a lot on the difference between margin and padding and from what i have understand setting padding inside father should give the same affect as setting margin inside son. I emphasize that i'm using only one son.
Code with margin (where text is fine):
<?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:background="#color/colorPrimary"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/chewy"
android:text="#string/title"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginStart="8dp"
android:layout_marginTop="68dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="5dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/question_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="8dp"
android:text="Hello There this is where we are going to add something..."
android:textSize="18sp" />
</ScrollView>
</android.support.v7.widget.CardView>
<Button
android:id="#+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:text="#string/true_title"
app:layout_constraintStart_toEndOf="#+id/prev_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<Button
android:id="#+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:text="#string/false_title"
app:layout_constraintEnd_toStartOf="#+id/next_button"
app:layout_constraintStart_toEndOf="#+id/true_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/previous_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/next_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_next" />
<TextView
android:id="#+id/counter_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/chewy"
android:text="#string/counter_questions"
app:layout_constraintBottom_toTopOf="#+id/cardView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
Code with padding (where first line is truncated)
<?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:background="#color/colorPrimary"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/chewy"
android:text="#string/title"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginStart="8dp"
android:layout_marginTop="68dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="5dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
>
<TextView
android:id="#+id/question_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hello There this is where we are going to add something..."
android:textSize="18sp" />
</ScrollView>
</android.support.v7.widget.CardView>
<Button
android:id="#+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:text="#string/true_title"
app:layout_constraintStart_toEndOf="#+id/prev_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<Button
android:id="#+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:text="#string/false_title"
app:layout_constraintEnd_toStartOf="#+id/next_button"
app:layout_constraintStart_toEndOf="#+id/true_button"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/previous_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:contentDescription="#string/next_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView"
app:srcCompat="#android:drawable/ic_media_next" />
<TextView
android:id="#+id/counter_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/chewy"
android:text="#string/counter_questions"
app:layout_constraintBottom_toTopOf="#+id/cardView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
In addition, putting padding inside CardLayout make thins to be even bad than when adding padding inside the ScrollView
Can someone explain me the reason?

It seems that the difference related to ScrollView odd behavior. I fixed the issue by setting android:fillViewport="true", and removing padding and margin_layout

Why do the buttons goes up?

So I programmed a simple app with android studio and the layout that is shown in the app when I run it is different than the xml file I designed.
Here is a link of an image of the problem.
https://imgur.com/6JIHSQ7
<?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">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/subBtn"
android:textSize="30sp"
app:layout_constraintBaseline_toBaselineOf="#+id/addBtn"
app:layout_constraintStart_toStartOf="#+id/divBtn" />
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="36dp"
android:layout_marginLeft="36dp"
android:layout_marginBottom="42dp"
android:text="#string/addBtn"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/multBtn"
app:layout_constraintStart_toEndOf="#+id/subBtn" />
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:ems="10"
android:hint="#string/number1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.444"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="39dp"
android:ems="10"
android:hint="#string/number2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText" />
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="108dp"
android:layout_marginRight="108dp"
android:layout_marginBottom="336dp"
android:text="#string/multBtn"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="88dp"
android:layout_marginLeft="88dp"
android:layout_marginBottom="336dp"
android:text="#string/divBtn"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimaryDark"
android:text="#string/resultView"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.455"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/n2EditText"
app:layout_constraintVertical_bias="0.637" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think it might be related to the virtual device i'm using but I don't know if that's the problem.

The problem is, your addBtn and subBtn are not aware of the n2EditText. The addBtn depends on the divBtn and the divBtn is placed 336dp above the bottom edge of the screen.
If you need the addBtn to appear below the n2EditText then you need to add a vertical constraint connecting to the n2EditText. Once your buttons are connected to their immediate top elements, you don't need to add the bottom constraint to the bottom edge of the screen.
Imagine a ConstraintLayout as a collection of widgets hanging down from the top of the screen, each tied to the immediately top elements with the chains called "constraints". You don't need to tie the bottom widget to the ground unless it is required by design.
Here is the modified layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:textSize="30sp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/n2EditText"
app:layout_constraintStart_toStartOf="#+id/n2EditText"/>
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toTopOf="#+id/subBtn"
android:layout_marginStart="16dp"/>
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:ems="10"
android:hint="n1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="n2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText"/>
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/divBtn"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/divBtn"/>
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="#+id/subBtn"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/subBtn"/>
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimaryDark"
android:text="res"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="#+id/divBtn"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Anyway, when you have a lot of widgets, you may have to use a ScrollView to accommodate them all.

Try this
<?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">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="25dp"
android:layout_marginRight="25dp"
android:text="submit"
android:textSize="30sp"
app:layout_constraintEnd_toStartOf="#+id/addBtn"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/n2EditText" />
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="52dp"
android:text="add"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/n2EditText" />
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:ems="10"
android:hint="1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.439"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="36dp"
android:ems="10"
android:hint="2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText" />
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:text="mult"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/addBtn" />
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:layout_marginEnd="48dp"
android:layout_marginRight="48dp"
android:text="div"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/subBtn" />
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorPrimaryDark"
android:text="resultView"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.547"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divBtn" />
</androidx.constraintlayout.widget.ConstraintLayout>

Probably on your layout editor and phone screen sizes are different. Use ConstraintLayout or some other add constraints to views

I cannot say definitly just looking at image but i think you are using facing problem because of your layout. Use LinearLayout to fix it.
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" />
<!-- EditText: number1 -->
<!-- EditText Number2 -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 2 Buttons here -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 2 Buttons here -->
</LinearLayout>
</LinearLayout>

Some general tips that can help:
Check the constraints if you're using ConstraintLayout or relatives between view if you're using RelativeLayout;
Check the values and the units of views;
Check the screen resolution of your "Preview" pane and Emulator.
If it's possible to provide some additional information about the layout that is used, if these tips didn't help.
In preview pane you can find info about resolutions here:
In the emulator pane you can simple see the sizes in the column:

Problem with multiple horizontal barriers in ConstraintLayout

I'm banging my head against the barriers of ConstraintLayout (sorry for the pun...)
Here's what I would like to accomplish:
Place a label and an edittext in the "first row". Align their centers vertically. Add a horizontal barrier referencing those two UI elements below them.
Add two buttons in a second row, one left aligned, one right aligned. Have another barrier below those two.
Let a RecyclerView fill all the space below the second barrier.
So here's my attempt at a layout file:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<!-- Try to cut from here..... -->
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_barrier"
/>
<android.support.constraint.Barrier
android:id="#+id/lowerBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageButton,button" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/lowerBarrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<!-- ..... to here. -->
</android.support.constraint.ConstraintLayout>
Problem is, that the first barrier moves up, as soon as I add something below it. It seems to move to the bottom of the smaller UI element, which seems a bit nonsensical to me.
The layout without the elements between the comments looks like this:
It stops working when I add the elements between the comments:
I'd be very happy, if you could explain what I'm doing wrong.
Cheers
EDIT:
Interestingly enough, I can get a little further by defining the buttons in the second row in reversed order.
But adding a second barrier below those two once again destroys the layout...
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_barrier"
/>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
</android.support.constraint.ConstraintLayout>

Imho I don't see anything wrong in Your code.
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name:"
app:layout_constraintBaseline_toBaselineOf="#+id/editText"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView"
tools:text="John Smith" />
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_barrier" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
<android.support.constraint.Barrier
android:id="#+id/lowerBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="button,imageButton" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/lowerBarrier" />
<!-- ..... to here. -->
</android.support.constraint.ConstraintLayout>
Preview:
I've changed only constraintVertical_bias for constraintBaseline_toBaselineOf.

Keyboard pushing up my view

I'm doing a log in screen using a constraint layout because I liked the sound of the responsiveness of the guidelines, however the problem I'm having comes when the user tries to use the edit text fields and the keyboard pops up.
Firstly I've gone through the different "Adjust" methods that go in the manifest.
AdjustNothing - My input fields are hidden behind the keyboard.
AdjustPan - This somewhat works where it pushed my view up so the
user can focus on what is selected, however it's extremely laggy.
AdjustResize- This breaks my view by pushing everything into the
available space.
In the past when using a RelativeLayout I nested the layout in a scrollview which gave it the same effect as AdjustPan, only smoother.
However If i do the same with the constraint layout, the guidelines stretch my screen size to a massively insane size, making alot of the elements appear off the screen.
Edit: Not sure if this means anything but if I have the constraint without a parent and set the height to wrap_context it stretches and does the same affect like when it is nested in a scrollview.
Here is the XML for the affected layout.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/background"
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" />
<ImageView
android:id="#+id/top_overlay"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:background="#drawable/overlay"
android:scaleType="fitCenter"
app:layout_constraintBottom_toTopOf="#+id/top_guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblWelcome"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textColor="#ffffff"
android:gravity="center"
android:text="Welcome"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/top_guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:id="#+id/top_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<android.support.constraint.Guideline
android:id="#+id/bottom_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<ImageView
android:id="#+id/ic_server"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/top_overlay"
android:layout_marginEnd="8dp"
android:layout_marginStart="32dp"
android:layout_toStartOf="#id/input_ip"
android:src="#drawable/ic_server"
app:layout_constraintEnd_toStartOf="#+id/input_ip"
app:layout_constraintHorizontal_bias="0.97"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/input_guideline" />
<EditText
android:id="#+id/input_ip"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_below="#+id/top_overlay"
android:layout_centerInParent="true"
android:digits="0123456789."
android:hint="#string/input_ip"
android:inputType="number"
android:textColor="#ffffff"
android:singleLine="true"
app:layout_constraintEnd_toStartOf="#+id/right_guideline"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintTop_toBottomOf="#+id/input_guideline" />
<ImageView
android:id="#+id/ic_user"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/top_overlay"
android:layout_marginEnd="8dp"
android:layout_marginStart="32dp"
android:layout_marginTop="22dp"
android:layout_toStartOf="#id/input_username"
android:src="#drawable/ic_user"
app:layout_constraintEnd_toStartOf="#+id/input_ip"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ic_server" />
<EditText
android:id="#+id/input_username"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/input_ip"
android:layout_marginTop="24dp"
android:hint="#string/input_username"
android:textColor="#ffffff"
android:singleLine="true"
app:layout_constraintEnd_toStartOf="#+id/right_guideline"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintTop_toBottomOf="#+id/input_ip" />
<ImageView
android:id="#+id/ic_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/top_overlay"
android:layout_marginEnd="8dp"
android:layout_marginStart="32dp"
android:layout_marginTop="20dp"
android:layout_toStartOf="#id/input_username"
android:src="#drawable/ic_pword"
app:layout_constraintEnd_toStartOf="#+id/input_ip"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ic_user" />
<EditText
android:id="#+id/input_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/input_ip"
android:layout_marginTop="24dp"
android:hint="#string/input_password"
android:inputType="textPassword"
android:singleLine="true"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/right_guideline"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintTop_toBottomOf="#+id/input_username" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_Connect"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="#color/material_light_red"
android:elevation="2dp"
android:padding="12dp"
android:text="Sign In"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/right_guideline"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintTop_toBottomOf="#+id/input_password" />
<ImageView
android:id="#+id/bottom_overlay"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="#drawable/overlay"
android:scaleType="fitCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bottom_guideline" />
<ImageView
android:id="#+id/bottom_logo"
android:layout_width="329dp"
android:layout_height="64dp"
android:background="#drawable/logo"
android:scaleType="fitCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo_guideline"
tools:layout_editor_absoluteY="558dp" />
<android.support.constraint.Guideline
android:id="#+id/input_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="#+id/logo_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.85" />
</android.support.constraint.ConstraintLayout>
</ScrollView>

Try using ScrollView > LinearLayout as a parent layout
and android:windowSoftInputMode="stateHidden|adjustPan" in AndroidManifest
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical">
</LinearLayout>
</ScrollView>

Only enter this line android:windowSoftInputMode="adjustPan" in AndroidManifest in your activity tag.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Unable to make a ScrollView that contains other layouts and widgets - android

Related

Align textviews in left and right side of a linear layout?

Android GUI looks different when using margin and padding

Why do the buttons goes up?

Problem with multiple horizontal barriers in ConstraintLayout

Keyboard pushing up my view

Categories

Resources