RecyclerView large space is creating between each items - android

Though i have set the RecyclerView height to wrap_content,space is being created between items.At the start of the app there are about some elements(that can be fit on the screen) without space but when i scroll again large space is being created between each items
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display"
app:layout_constraintVertical_bias="0.0" />
ViewHolder 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="GradleDependency">
<TextView
android:id="#+id/desgn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="#string/designation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="#string/Name"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/desgn"
tools:ignore="RtlHardcoded" />
</android.support.constraint.ConstraintLayout>


check your custom layout. In that you have to change match_parent into wrap_content.
If this layout inflating in your layout change this
<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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content" //todo made the changes here
tools:ignore="GradleDependency">
<TextView
android:id="#+id/desgn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="#string/designation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="#string/Name"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/desgn"
tools:ignore="RtlHardcoded" />

Related

RecyclerView in ConstraintLayout is not showing properly

I tested this xml with chaining, Guideline and Barrier but none of them could help.
The xml 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"
tools:context=".RatingActivity">
<TextView
android:id="#+id/welcomeTextView"
android:layout_width="0dp"
android:layout_height="74dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="79dp"
android:gravity="clip_vertical|center_horizontal"
android:text="#string/welcome"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
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" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="467dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="24dp"
android:background="#android:color/darker_gray"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toTopOf="#+id/submitButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/submitButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="#string/submit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
When it runs on an AVD, the RecyclerView takes more space than what is needed causing it to cover or push back either welcomeTextView or submitButton.
BTW, this is the Gradle dependency:
implementation 'com.android.support.constraint:constraint-layout:1.1.3'

Try:
<?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/welcomeTextView"
android:layout_width="0dp"
android:layout_height="74dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="79dp"
android:gravity="clip_vertical|center_horizontal"
android:text="welcome"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textStyle="bold"
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" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="24dp"
android:background="#android:color/darker_gray"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#+id/welcomeTextView"
app:layout_constraintBottom_toTopOf="#id/submitButton" />
<Button
android:id="#+id/submitButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="submit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
The only change is set the top of your RecyclerView instead the bottom of your text, and then set the RecyclerView height to 0 and set the app:layout_constrainedHeight="true" to enable the height calculation based on constraints. If the welcome message bottom margin doesn't work, try to set a top margin to the RecyclerView.

Constraint Layout not matching Scroll View height

I've put inside a constraint layout a image and a heading layout which is not supposed to scroll and a scroll view which contains another constraint layout with some views. When I try to resize the constraint layout inside scroll view, The width changes accordingly, however the height not. I'd like the constraint layout height to match the height of its scrollview as I intend to add more text boxes and buttons for a registration form. Right now the two boxes are squeezed and the constraint layout height is not increasing.
<?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"
android:background="#color/MistyRose"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingTop="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="203dp"
android:layout_height="95dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="#drawable/logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Register"
android:textColor="#color/Black"
android:textSize="40dp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:layout_constraintVertical_bias="0.016" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="400dp"
android:layout_height="250dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.0">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<EditText
android:layout_width="350dp"
android:layout_height="46dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:background="#drawable/edittext"
android:hint="Name"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="12dp" />
<EditText
android:layout_width="350dp"
android:layout_height="46dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#drawable/edittext"
android:hint="Email"
android:inputType="textEmailAddress"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

You should put some constraints to your views in the container of the scroll view and make the scrollview stretch its content to fill the viewport with android:fillViewport="true"
Code here:
<?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"
android:background="#color/MistyRose"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingTop="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="203dp"
android:layout_height="95dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="#drawable/logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Register"
android:textColor="#color/Black"
android:textSize="40dp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:layout_constraintVertical_bias="0.016" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="400dp"
android:layout_height="250dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.0" android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<EditText
android:layout_width="350dp"
android:layout_height="46dp"
android:layout_marginStart="8dp"
android:background="#drawable/edittext"
android:hint="Name"
android:inputType="text"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
android:id="#+id/editText" android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"/>
<EditText
android:layout_width="350dp"
android:layout_height="46dp"
android:background="#drawable/edittext"
android:hint="Email"
android:inputType="textEmailAddress"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText" android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent" android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

How in this example, can I have TextView1 on top of Textview2?

The image of what I need to acheive:
I have two FloatingActionButtons,
One constrainted to the left of the parent,
The other to the right,
How to alter the following layout to achieve:
Having 2 TextViews, both engagin all width available between buttons, and half of the height available, sitting on top of each other?
<?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="wrap_content">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/colorPrimary"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:fabSize="mini"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_edit_w"
tools:layout_editor_absoluteX="41dp"
tools:layout_editor_absoluteY="16dp" />
<TextView
android:id="#+id/txt_top"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/fab_edit"
android:text="top"/>
<TextView
android:id="#+id/txt_btm"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/fab_play"
android:text="bottom"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_play"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:fabSize="mini"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:srcCompat="#drawable/ic_play_w"
tools:layout_editor_absoluteX="220dp"
tools:layout_editor_absoluteY="8dp" />
</android.support.constraint.ConstraintLayout>

Try the following:
<?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="wrap_content">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/colorPrimary"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:fabSize="mini"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="41dp"
tools:layout_editor_absoluteY="16dp" />
<TextView
android:id="#+id/txt_top"
android:layout_width="0dp"
android:layout_height="match_parent"
android:padding="8dp"
android:gravity="center"
app:layout_constraintBottom_toTopOf="#id/txt_btm"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/fab_edit"
app:layout_constraintEnd_toStartOf="#id/fab_play"
android:text="top"/>
<TextView
android:id="#+id/txt_btm"
android:layout_width="0dp"
android:layout_height="match_parent"
android:padding="8dp"
android:gravity="center"
app:layout_constraintTop_toBottomOf="#id/txt_top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/fab_edit"
app:layout_constraintEnd_toStartOf="#id/fab_play"
android:text="bottom"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_play"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:fabSize="mini"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
tools:layout_editor_absoluteX="220dp"
tools:layout_editor_absoluteY="8dp" />
</android.support.constraint.ConstraintLayout>

placing next button bottom of ConstraintLayout with viewport in scrollview

I'm developing activity drawing view programmatically.
I wanna place 'NEXT' button to bottom of ConstraingLayout in scrollView
so, Adding ViewPort attribute in scrollView.
It's works for me. when there is no scroll.
But,
If ConstraintLayout's height is stretched, It isn't works correctly.
This is parent code using PageIndicatorView and ViewPager.
<?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:attrs="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=".activities.AssetAddActivity">
<com.rd.PageIndicatorView
android:id="#+id/pageIndicatorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:piv_selectedColor="#79f56e02"
app:piv_unselectedColor="#1ef56e02"
app:piv_viewPager="#id/addAssetViewPager"
attrs:piv_padding="12dp"
attrs:piv_radius="8dp" />
<android.support.v4.view.ViewPager
android:id="#+id/addAssetViewPager"
android:layout_width="0dp"
android:layout_height="0dp"
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" />
</android.support.constraint.ConstraintLayout>
this is my fragment xml
<?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"
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="true"
android:paddingBottom="50dp">
<Button
android:id="#+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#drawable/selector_btn_login"
android:text="#string/button_next"
android:textColor="#color/colorButtonText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/insert_point"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/txtv_beacon_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="60dp"
android:gravity="center"
android:text="새로 등록할 대상의 분류\n그리고 ID와 이름을 입력해주세요."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/txtv_title_category"
app:layout_constraintTop_toBottomOf="#+id/txtv_title_category" />
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner">
<android.support.design.widget.TextInputEditText
android:id="#+id/edt_asset_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Asset ID"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputLayout4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout">
<android.support.design.widget.TextInputEditText
android:id="#+id/edt_asset_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Asset Name"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:id="#+id/insert_point"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="#+id/textInputLayout4"
app:layout_constraintStart_toStartOf="#+id/textInputLayout4"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout4" />
<TextView
android:id="#+id/txtv_title_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="44dp"
android:layout_marginTop="60dp"
android:text="#string/txtv_category"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txtv_beacon_info" />
</android.support.constraint.ConstraintLayout>
and this picture is problem screenshot.
problem screenshot

Create an app for tablet and phone using a ConstraintLayout

I read that ConstraintLayout is a great tool for creating an app for multiple screen sizes, like tablet and phone.
But even tho' the layout itself scales (from what I have seen) between different screen sizes, what can I do about the text size of a TextView, for example?
How can I make it scale as well?
Also if you have any knowledge of a better way to write an app for phone and tablets as well feel free to tell me (I would prefer not to create different layouts for all types of screens).
Code Sample:
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.merchantproxy.merchantproxy.activities.DashboardActivity"
tools:showIn="#layout/activity_dashboard">
<ScrollView
android:id="#+id/dashboardScrollView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="157dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1">
<LinearLayout
android:id="#+id/dashboardDataLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/salesCard"
android:layout_width="0dp"
android:layout_height="170dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:layout_weight="0.05"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintTop_creator="1"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/salesTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="Sales"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/salesStats"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/salesStats"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<TextView
android:id="#+id/totalSales"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="40dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="16dp"
android:text="$0"
android:textAlignment="center"
android:textColor="#color/colorSuccess"
android:textSize="35sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/netSalesLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.538"
app:layout_constraintLeft_toRightOf="#+id/feesLayout"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.963"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
<TextView
android:id="#+id/netSales"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:text="$0"
android:textAlignment="center"
android:textColor="#color/colorSuccess"
android:textSize="35sp"
android:textStyle="bold"
tools:layout_editor_absoluteX="24dp"
tools:layout_editor_absoluteY="208dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Net Sales"
android:textAlignment="center"
android:textSize="20sp"
tools:layout_editor_absoluteX="24dp"
tools:layout_editor_absoluteY="208dp" />
</LinearLayout>
UI:
I mention that i have this issue only on phones that are oriented vertically...if I rotate the view to landscape everything scales ok

Categories

Resources