Android Studio Not showing button in GridLayout - java

Android studio doesn't show any buttons or textview in GridLayout, but when I put it in constraint layout it shows up properly and it even works fine when I run the app in the emulator:
Here's the Screen Shot:
This is how the xml file looks:
<?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">
<android.support.v7.widget.GridLayout
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"
app:columnCount="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</android.support.v7.widget.GridLayout>
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="514dp"
android:layout_marginEnd="291dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="291dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
And I am getting this error:
Error screenshot
Thanks for helping!


just remove the <android.support.v7.widget.GridLayout> or <androidx.gridlayout.widget.GridLayout> tag instead with <GridLayout>
<GridLayout
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"
app:columnCount="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</GridLayout>

Related

how to make ConstraintLayout to follow my progress in ProgressBar

I know that there is questions like this on this site but can't apply their solutions on my problem, or simply do not know how. I am trying to make my ConstraintLayout that is part of my layout to be placed on end of my progress,like this:
but in my case it is always on center of progressbar
my xml:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ProgressBar
android:id="#+id/seekBar2"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="6dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:progress="60"
android:progressDrawable="#drawable/customprogressbar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/goal_name_TV" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/thumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tv_content_rounded"
android:paddingStart="8dp"
android:paddingTop="2dp"
android:paddingEnd="8dp"
android:paddingBottom="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/goal_name_TV">
<ImageView
android:id="#+id/bullet_IMG"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingEnd="2dp"
android:src="#drawable/ic_bulet_blue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/marker_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/marker_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="985"
android:textColor="#color/background"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/bullet_IMG"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
and my java:
binding.seekBar2.setProgress((int) modelClass.getPercentage());
binding.markerValue.setText(binding.seekBar2.getProgress()+"%");
int position = (((binding.seekBar2.getRight() - binding.seekBar2.getLeft()/binding.seekBar2.getMax()) * binding.seekBar2.getProgress())+ binding.seekBar2.getLeft());
binding.thumb.setTranslationX((float) ((double)position - (binding.thumb.getWidth()/2)));
also i tried to make custom progrssbar but in vain

Constraint Layout performs different on different devices

I'm trying to convert my relative layout into a Constraint layout to fit every device, but I'm having some problems. On the editor in Android Studio it looks like this:
I made it using a Pixel C as emulator. Now, I tried the app on a Samsung Galaxy tab and this is the result:
Why the buttons are not at center at the screen like in the first picture? This is the code of the xml, as you can see I've even anchored the element to keep the distance between them:
<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:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_main"
android:scaleType="centerCrop"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="708dp"
android:layout_height="231dp"
android:layout_marginTop="152dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/kotta_one"
android:text="Test del pensiero\n divergente"
android:textColor="#000000"
android:textSize="86dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.57"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.195" />
<Button
android:id="#+id/button_1"
android:layout_width="180dp"
android:layout_height="60dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="76dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_bg"
android:text="#string/invioA"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
app:layout_constraintVertical_bias="0.028" />
<Button
android:id="#+id/button_2"
android:layout_width="180dp"
android:layout_height="60dp"
android:layout_marginEnd="188dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_bg"
android:text="#string/invioB"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
app:layout_constraintVertical_bias="0.028" />
<Button
android:id="#+id/button_3"
android:layout_width="161dp"
android:layout_height="114dp"
android:layout_marginEnd="8dp"
android:background="#android:color/transparent"
android:fontFamily="#font/kotta_one"
android:text="Area\nDocenti"
android:textAllCaps="false"
android:textColor="#030000"
android:textSize="26dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

You are giving wrong width and height to button and textview.
Also, for horizontal button and same width and height you can use chain like below I used.
Here, I give you approx design and also you can use your ConstraintLayout because I have androidx migrated project.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/add_news_feed_bg"
android:scaleType="centerCrop">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Test del pensiero\n divergente"
android:textColor="#000000"
android:textSize="86dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/bg_toolbar"
android:text="invioA"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="#+id/button_2"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button_2" />
<Button
android:id="#+id/button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#color/bg_toolbar"
android:text="invioB"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button_1"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<Button
android:id="#+id/button_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#android:color/transparent"
android:text="Area\nDocenti"
android:textAllCaps="false"
android:textColor="#030000"
android:textSize="26dp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Is it possible to put an image over all other layout elements (Buttons...)

I have a login screen with a Login button... I also have a ViewPager with some images. When I slide the ViewPager the image covers some login elements, but not all.
Right now I use the android:background = "myImage"
I also tried to use android:foreground = "myImage", but somehow it does not cover two of my buttons.
Here is some code from my main Activity:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:fitsSystemWindows="true"
android:orientation="vertical">
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView2"
android:layout_width="415dp"
android:layout_height="277dp"
android:layout_marginBottom="540dp"
android:src="#drawable/jus_login_two"
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.558" />
<EditText
android:id="#+id/mainActivity_username"
android:layout_width="300sp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:backgroundTint="#32756e"
android:ems="10"
android:hint="E-Mail-Adresse"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.364" />
<EditText
android:id="#+id/mainActivity_password"
android:layout_width="300sp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:backgroundTint="#32756e"
android:ems="10"
android:hint="Passwort"
android:inputType="textPassword"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mainActivity_username"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="OR"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mainActivity_errorMessage"
app:layout_constraintVertical_bias="0.32"/>
<TextView
android:id="#+id/mainActivity_errorMessage"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text=""
android:textColor="#FF0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.658" />
<Button
android:id="#+id/mainActivity_login"
android:layout_width="270dp"
android:layout_height="45dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#32756e"
android:text="Anmelden"
android:textAllCaps="false"
android:textColor="#ffff"
android:textSize="20sp"
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.532" />
<Button
android:id="#+id/mainActivity_continueWithout"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="ohne anmelden fortfahren"
android:textAllCaps="false"
android:textColor="#32756e"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mainActivity_createNewAccount"
app:layout_constraintVertical_bias="0.075" />
<Button
android:id="#+id/mainActivity_createNewAccount"
android:layout_width="200dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#3b5998"
android:text="Neues Konto erstellen"
android:textAllCaps="false"
android:textColor="#ffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.859"/>
<Button
android:id="#+id/mainActivity_forgotPassword"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="20sp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/white"
android:text="Passwort vergessen?"
android:textAllCaps="false"
android:textColor="#32756e"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.71" />
<View
android:layout_width="150sp"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_toLeftOf="#id/tvText"
android:background="#A9A9A9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.756" />
<View
android:layout_width="150sp"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_toRightOf="#id/tvText"
android:background="#A9A9A9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/tvText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.757" />
<CheckBox
android:id="#+id/checkBox_rememberPwdUsr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E-Mail-Adresse und Passwort speichern?"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.434"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.597" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/therealPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progress_bar"
style="#style/Widget.AppCompat.ProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:elevation="20dp"
android:visibility="gone" />
</RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>
Here is the code where I set the image:
<?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:orientation="vertical" android:layout_width="match_parent"
android:background="#drawable/jus_slide_one"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to always show Toolbar in Android even when there is scrolling?

After looking up various answers and suggestions on the site, I implemented a custom toolbar in my app instead of using the default ActionBar. For the most part, it works fine, however, one thing that is different from the standard action bar is that it auto-hides whenever I scroll. In the default ActionBar, it was always visible on the activity regardless of whether I was scrolling or not. Can anyone please explain how to implement this behavior in the custom toolbar as well? I have attached my xml below:
EDIT: I have tried moving the toolbar out of the scrollview which fixes the toolbar but then when I scroll, then other views in my activity also overlap on the toolbar because the top-most view is bound to the scrollview and other views are bound to it. So, the current implementation is better than the overlapping problem, but it is still not the solution I desire.
<?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">
<ScrollView
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
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="1.0">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/searchBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="Search..."
android:textColorHint="#color/myWhite"
android:inputType="textPersonName"
android:textColor="#color/myWhite"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subtitleBtn" />
<android.support.v7.widget.Toolbar
android:id="#+id/myToolbar"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:titleTextColor="#color/myWhite"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:contentInsetLeft="48dp"
android:contentInsetStart="48dp"
app:titleMarginStart="24dp"
app:contentInsetLeft="12dp"
app:contentInsetStart="12dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"/>
<Button
android:id="#+id/splitDrawableBackgroundBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Split Drawable Background"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.517"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/stackedDrawableBackgroundBtn" />
<Button
android:id="#+id/subtitleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Show Subtitle"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iconBtn" />
<Button
android:id="#+id/iconBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Icon"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alternateBackBtn" />
<Button
android:id="#+id/alternateBackBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Alternate Back Button"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hideBarBtn" />
<Button
android:id="#+id/hideBarBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Hide Action Bar"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/elevationBtn" />
<Button
android:id="#+id/elevationBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Elevation"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logoBtn" />
<Button
android:id="#+id/logoBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Logo"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hideAllBtn" />
<Button
android:id="#+id/hideAllBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Hide Everything"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hideBackBtn" />
<Button
android:id="#+id/hideBackBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Hide Back Button"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/splitDrawableBackgroundBtn" />
<Button
android:id="#+id/stackedDrawableBackgroundBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Stacked Drawable Background"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/drawableBackgroundBtn" />
<Button
android:id="#+id/drawableBackgroundBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Drawable Background"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/customViewBtn" />
<Button
android:id="#+id/customViewBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Show Custom View"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hideOffsetBtn" />
<Button
android:id="#+id/hideOffsetBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Hide Offset"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/backBtn" />
<Button
android:id="#+id/backBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Show back button"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/titleBtn" />
<Button
android:id="#+id/titleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="88dp"
android:text="Set Title"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>

Since the toolbar is inside the scrollview it will scroll.
Take it out and constraint it to the top of the Constraint Layout.

Please place the toolbar before scrollview. Then it becomes not scrollable and the rest of the area is scrollable

move your toolbar to our side of the scroll view
your view hierarchy should be something like this :
<LinearLayout>
<Toolbar/>
<FrameLayout>
<ScrollView/>
</FrameLayoyt>
</LinearLayout>

Your Toolbar is in the Scrollview, you can place on top of the CoordinatorLayout to solve the issue. so your code will look like this,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText />
<!-- other controls -->
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>

Constraint layout in practice look different than in Android Studio

I'm trying to place my views into ConstraintLayout, but every views like button/textview look different in real device than in AndroidStudio.
Check how its look:
in Android Studio
in real Device
It's looks horrible ! How I can fix that ? What I should do ?
I thought it was the easiest way to arrange views.
and my xml:
<?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=".activity.LoginActivity">
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.599" />
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.63" />
<Button
android:id="#+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
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" />
</android.support.constraint.ConstraintLayout>

The idea of ConstraintLayout is to use constraints to position views relative to each other. In your case you try to constrain each view in relation to the parent and then use bias to position the view which is the reason everything seems out of order.
Here is the simple example XML that will give you a basic idea how to position these views using constraints:
<?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=".activity.LoginActivity">
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#id/etLogin"
app:layout_constraintStart_toStartOf="#id/etLogin"
app:layout_constraintTop_toBottomOf="#id/etLogin" />
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
app:layout_constraintEnd_toStartOf="#id/btnDefault"
app:layout_constraintStart_toStartOf="#id/etLogin"
app:layout_constraintTop_toBottomOf="#id/etPassword" />
<Button
android:id="#+id/btnDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="default user"
app:layout_constraintEnd_toEndOf="#id/etLogin"
app:layout_constraintStart_toEndOf="#id/btnLogin"
app:layout_constraintTop_toBottomOf="#id/etPassword" />
</android.support.constraint.ConstraintLayout>
The result:
If you want to add some spacing between the views you can experiment with adding some margins between them.

I haven't checked this for syntax, but something like this might work better (tying things to each other, rather than to the screen edges).
<?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=".activity.LoginActivity">
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintEnd_toEndOf="#+id/etPassword"
app:layout_constraintStart_toEndOf="#+id/btnDefault"
app:layout_constraintTop_toBottomOf="#+id/etPassword"/>
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="64dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/etLogin"
app:layout_constraintStart_toStartOf="#+id/etLogin"
app:layout_constraintTop_toBottomOf="#+id/etLogin" />
<Button
android:id="#+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintStart_toStartOf="#+id/etPassword"
app:layout_constraintEnd_toStartOf="#+id/btnLogin"
app:layout_constraintTop_toBottomOf="#+id/etPassword" />
</android.support.constraint.ConstraintLayout>

Categories