Right now, I have one Button and one EditText view inside ConstraintLayout XML file. Need to move views up when user is typing inside EditText.
Manifest windowSoftInputMode is not working, so I think I need to work with constraints. Does anyone have clue how to solve this?
<?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">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/sx_landing_bg"
android:id="#+id/fpp_background"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
tools:ignore="ContentDescription"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="1.0" />
<android.support.v7.widget.AppCompatButton
android:layout_height="0dp"
android:layout_width="0dp"
android:text="#string/forgot_password_reset_password"
android:id="#+id/btn_login"
android:textColor="#color/colorDarkGray"
android:theme="#style/WhiteButtonStyle"
android:backgroundTint="#color/colorPrimaryDark"
android:textAllCaps="false"
app:layout_constraintLeft_toLeftOf="#+id/gl_vl_16d"
app:layout_constraintRight_toLeftOf="#+id/gl_vr_16d"
app:layout_constraintBottom_toTopOf="#+id/gl_vh_80p"
app:layout_constraintTop_toTopOf="#+id/gl_vh_70p"
tools:layout_constraintTop_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
android:gravity="center_vertical|center_horizontal|center" />
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="wrap_content"
android:id="#+id/gl_vh_80p"
android:orientation="horizontal"
tools:layout_editor_absoluteY="541dp"
tools:layout_editor_absoluteX="0dp"
app:layout_constraintGuide_percent="0.7922078"
/>
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="wrap_content"
android:id="#+id/gl_vh_70p"
android:orientation="horizontal"
tools:layout_editor_absoluteY="478dp"
tools:layout_editor_absoluteX="0dp"
app:layout_constraintGuide_percent="0.7"
/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="683dp"
android:id="#+id/gl_vr_16d"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="395dp"
app:layout_constraintGuide_end="16dp"
/>
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="683dp"
android:id="#+id/gl_vl_16d"
app:layout_constraintGuide_begin="16dp"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="16dp"
/>
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="683dp"
android:id="#+id/guideline3"
app:layout_constraintGuide_begin="387dp"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="387dp" />
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="683dp"
android:id="#+id/guideline4"
app:layout_constraintGuide_begin="24dp"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="24dp" />
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="wrap_content"
android:id="#+id/guideline9"
app:layout_constraintGuide_begin="372dp"
android:orientation="horizontal"
tools:layout_editor_absoluteY="372dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="431dp"
android:orientation="horizontal"
tools:layout_editor_absoluteY="431dp"
tools:layout_editor_absoluteX="0dp" />
<EditText
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/editText2"
android:textColor="#color/button_text_color"
android:theme="#style/WhiteButtonStyle"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/guideline9"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintHorizontal_bias="1.0"
android:hint="Enter email or ussername"
style="#style/RobotoEditTextStyle"
android:textSize="14sp"
app:layout_constraintRight_toLeftOf="#+id/gl_vr_16d"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
android:layout_marginBottom="8dp"
android:textColorHint="#bababa" />
</android.support.constraint.ConstraintLayout>
Done by setting views programmatically at runtime and checking when keyboard appears.
ConstraintLayout.LayoutParams constraint = (ConstraintLayout.LayoutParams)login.getLayoutParams();
constraint.topToBottom = shrinked ? R.id.gl_h_850p: R.id.gl_h_550p;
constraint.bottomToTop = shrinked ? R.id.gl_h_999p: R.id.gl_h_650p;
login.setLayoutParams(constraint);
Related
I have problem in the bottom layout where my constraint layout does not fill the scroll view entirely(blank space bellow). This is the image evidence of the problem.
In this case I want the gray background to fill that white space below. I tried match parent in everything but it does not work.
This is my xml file that belongs to the layout I uploaded
<?xml version="1.0" encoding="utf-8"?>
<layout 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/layout">
<data>
<variable
name="viewModel"
type="com.repsol.repsolmove.ui.login.LoginViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:id="#+id/scrolView"
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/imageView"
android:layout_width="174dp"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="3dp"
android:src="#drawable/ic_img_logo_repsolmove"
app:layout_constraintBottom_toTopOf="#+id/imageBottomMargin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.repsol.repsolmove.ui.widgets.RepsolInputLayout
android:id="#+id/login"
android:layout_width="0dp"
android:layout_height="105dp"
android:layout_marginTop="30dp"
app:errorText="#string/invalid_card_number"
app:layout_constraintEnd_toStartOf="#+id/marginEnd"
app:layout_constraintStart_toStartOf="#+id/marginStart"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:titleText="#string/login_title" />
<com.repsol.repsolmove.ui.widgets.RepsolInputLayout
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="105dp"
app:errorText="#string/invalid_password"
app:isPassword="true"
app:layout_constraintEnd_toStartOf="#+id/marginEnd"
app:layout_constraintStart_toStartOf="#+id/marginStart"
app:layout_constraintTop_toBottomOf="#+id/login"
app:titleText="#string/password_title" />
<TextView
android:id="#+id/newPassword"
style="#style/RepsolText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/repsol_regular"
android:text="#string/new_password"
android:textSize="16dp"
app:layout_constraintEnd_toStartOf="#+id/marginEnd"
app:layout_constraintTop_toBottomOf="#+id/password" />
<Button
android:id="#+id/btnLogin"
android:layout_width="228dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:background="#drawable/shape_rounded_fill_rectangle"
android:fontFamily="#font/repsol_regular"
android:text="#string/login"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/newPassword" />
<Button
android:id="#+id/btnJoin"
android:layout_width="0dp"
android:layout_height="51dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="32dp"
android:background="#drawable/shape_rounded_rectangle"
android:fontFamily="#font/repsol_regular"
android:text="#string/join"
android:textAllCaps="false"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnNologin"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#+id/marginStart"
app:layout_constraintTop_toBottomOf="#+id/btnLogin"
app:layout_constraintVertical_bias="0.75" />
<Button
android:id="#+id/btnNologin"
android:layout_width="0dp"
android:layout_height="51dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:background="#drawable/shape_rounded_no_stroke_rectangle"
android:fontFamily="#font/repsol_regular"
android:text="#string/enter_without_login"
android:textAllCaps="false"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/marginEnd"
app:layout_constraintStart_toEndOf="#+id/btnJoin"
app:layout_constraintTop_toBottomOf="#+id/btnLogin"
app:layout_constraintVertical_bias="0.75" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/imageBottomMargin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.30" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/marginStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.10" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/marginEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.90" />
<com.repsol.repsolmove.ui.widgets.RepsolDialog
android:id="#+id/dialog"
android:layout_width="match_parent"
android:layout_height="0dp"
android:elevation="10dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<include
android:id="#+id/loading"
layout="#layout/loading"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Add this attribute to your NestScrollView element in xml file
android:fillViewport="true"
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.
I'm my search the closest question was that: Scrollview inside constraint layout does not scroll to the bottom of the parent constraint
But there is no solution =|.
What I'm trying to do:
I have a constraint layout with 3 "parts": top bar, middle content and bottom button.
I want to put a scrollview only for the middle content. So if you scroll down and up you continuous to see the top bar and the bottom button
But this scroll view is not working, I think is something related with "match_parent" in the scrollview, but I can't put this option because as the scrollview is inside a Constraint Layout the size should be relative and if I put match parent it don't fill all spaces.
I'm using already:
fillViewport="true",
layout_constraintBottom_toBottomOf="parent"
Follow the code, scroll view name: "scrollview2"
<?xml version="1.0" encoding="utf-8"?>
<!--Create by Canato 26/09/2017-->
<com.flipboard.bottomsheet.BottomSheetLayout 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/needs_search_bottomsheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">
<android.support.constraint.Guideline
android:id="#+id/horGuideline10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="82dp" />
<android.support.constraint.Guideline
android:id="#+id/horGuideline90"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9"
tools:layout_editor_absoluteY="536dp"
tools:layout_editor_absoluteX="0dp" />
<include
android:id="#+id/actionbar"
layout="#layout/view_actionbar"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/horGuideline10"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1" />
<Button
android:id="#+id/needs_search_save_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/btn_green_bright_half_round_selector"
android:gravity="center"
android:text="#string/str_continue_save"
android:textAllCaps="false"
android:textColor="#color/WHITE"
android:textSize="#dimen/size_text_button"
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="#+id/horGuideline90"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginTop="0dp"
android:fillViewport="true"
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="#+id/horGuideline10">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="400dp">
<android.support.constraint.Guideline
android:id="#+id/verGuideline20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2"
tools:layout_editor_absoluteX="72dp"
tools:layout_editor_absoluteY="206dp" />
<android.support.constraint.Guideline
android:id="#+id/verGuideline55"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55"
tools:layout_editor_absoluteX="198dp"
tools:layout_editor_absoluteY="206dp" />
<android.support.constraint.Guideline
android:id="#+id/verGuideline90"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9"
tools:layout_editor_absoluteX="324dp"
tools:layout_editor_absoluteY="206dp" />
<android.support.constraint.Guideline
android:id="#+id/horGuideline10in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="233dp" />
<android.support.constraint.Guideline
android:id="#+id/horGuideline20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="260dp" />
<android.support.constraint.Guideline
android:id="#+id/horGuideline28"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.28"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="282dp" />
<android.support.constraint.Guideline
android:id="#+id/horGuideline38"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.38"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="309dp" />
<TextView
android:id="#+id/needs_search_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:text="#string/service_request_title_text"
android:textColor="#color/ANDROID_DARK_GRAY"
android:textSize="#dimen/title_text_size"
app:layout_constraintBaseline_toBaselineOf="#+id/needs_search_title_edit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/verGuideline20" />
<EditText
android:id="#+id/needs_search_title_edit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="#string/service_request_title_explanation_text"
android:inputType="textPersonName"
android:textColorHint="#color/ANDROID_DARK_GRAY"
app:layout_constraintBottom_toTopOf="#+id/horGuideline10in"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/verGuideline20"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/iconLocation"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/service_request_location_icon_contentDescription"
app:layout_constraintBottom_toTopOf="#+id/horGuideline20"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/verGuideline20"
app:layout_constraintTop_toTopOf="#+id/horGuideline10in"
app:layout_constraintVertical_bias="0.454"
app:srcCompat="#drawable/ic_location_on_gray_24dp" />
<EditText
android:id="#+id/service_request_address_editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="#string/service_request_location_text"
android:inputType="textPersonName"
android:textColorHint="#color/ANDROID_DARK_GRAY"
android:textSize="#dimen/size_text_button"
app:layout_constraintLeft_toRightOf="#+id/iconLocation"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/horGuideline10in" />
<ImageView
android:id="#+id/iconDecribeText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:contentDescription="#string/service_request_text_contentDescription"
app:layout_constraintBottom_toTopOf="#+id/horGuideline38"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/verGuideline20"
app:layout_constraintTop_toTopOf="#+id/horGuideline28"
app:srcCompat="#drawable/ic_short_text_gray_24dp" />
<EditText
android:id="#+id/needs_search_description_edit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="#string/service_request_small_text_explanation"
android:inputType="textMultiLine"
android:textColorHint="#color/ANDROID_DARK_GRAY"
android:textSize="#dimen/size_text_button"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/verGuideline20"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/horGuideline28" />
<Button
android:id="#+id/needs_search_address_locate_btn"
android:layout_width="0dp"
android:layout_height="0dp"
android:alpha="0.5"
android:background="#android:drawable/dialog_holo_light_frame"
app:layout_constraintBottom_toTopOf="#+id/horGuideline28"
app:layout_constraintLeft_toLeftOf="#+id/verGuideline20"
app:layout_constraintRight_toLeftOf="#+id/verGuideline55"
app:layout_constraintTop_toTopOf="#+id/horGuideline20"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/needs_search_address_home_btn"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:alpha="0.5"
android:background="#android:drawable/dialog_holo_light_frame"
app:layout_constraintBottom_toTopOf="#+id/horGuideline28"
app:layout_constraintLeft_toLeftOf="#+id/verGuideline55"
app:layout_constraintRight_toLeftOf="#+id/verGuideline90"
app:layout_constraintTop_toTopOf="#+id/horGuideline20"
app:layout_constraintVertical_bias="0.0" />
<android.support.v7.widget.RecyclerView
android:id="#+id/needs_search_images_recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:focusable="false"
android:focusableInTouchMode="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/needs_search_description_edit"
tools:listitem="#layout/needs_search_big_image_list_item" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
</com.flipboard.bottomsheet.BottomSheetLayout>
Well, I just found the solution with a friend, first I think about delete this, but since other people maybe have the same problem here is the solution:
I just remove all guidelines and build again, connecting the elements without using so many guidelines.
Was a little bit of lucky, because I did this to fix when change the orientation.
You need to create a chain with the following constraints
in the top bar:
app:layout_constraintBottom_toTopOf="#+id/scrollView2"
app:layout_constraintTop_toTopOf="parent"
in the middle content:
app:layout_constraintBottom_toTopOf="#+id/needs_search_save_btn"
app:layout_constraintTop_toBottomOf="#+id/actionbar"
in the bottom button:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollView2"
I'm using the ConstraintLayout and I want to display button in the centre of ViewPager but with width and height of 1/3 of this pager.I used horizontal and vertical chain. And got the next:
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="#id/view_pager"
app:layout_constraintRight_toLeftOf="#+id/button2" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintBottom_toBottomOf="#id/view_pager"
app:layout_constraintTop_toBottomOf="#id/button2"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintTop_toTopOf="#id/view_pager"
app:layout_constraintBottom_toTopOf="#id/button2"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintVertical_weight="1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="#id/button4"
app:layout_constraintBottom_toTopOf="#id/button5"
app:layout_constraintLeft_toRightOf="#+id/button1"
app:layout_constraintRight_toLeftOf="#+id/button3" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/button2"
app:layout_constraintRight_toRightOf="#id/view_pager" />
<android.support.constraint.Guideline
android:id="#+id/vertical_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="#dimen/basic_keyline"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginLeft="8dp"
android:layout_marginRight="#dimen/basic_keyline"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:text="#string/send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/vertical_guideline"
app:layout_constraintRight_toRightOf="parent" />
But I think this approach is so scary. Maybe somebody know better solution, please help me. I want to use only xml without using the code.
UPDATE
Buttons were added to easy understand what I want.
Here's what you can do without adding so many buttons and also without guidelines.
Here's the 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"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:id="#+id/apbLay1"
tools:context="studios.brilliant.com.commutech.Home">
<android.support.constraint.ConstraintLayout
android:layout_marginBottom="152dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="0dp"
android:layout_width="0dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".333"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".333"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
This will give you the exact output you need and you're getting as in the screenshot provided.
.333 is 33.3% of the parent which is almost equal to 1/3.
That extra layout is to add a container for the viewpager and button as using viewpager as the container can cause the button to hide when the fragment will be visible.
You can insert a ConstraintLayout into your PageViewer so that you can use GuideLines to constraint the Button.
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.67" />
<android.support.constraint.Guideline
android:id="#+id/top_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/bottom_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/top_guideline"
app:layout_constraintBottom_toTopOf="#id/bottom_guideline"
app:layout_constraintLeft_toRightOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline" />
</android.support.constraint.ConstraintLayout>
So I am trying to learn about the new ConstraintLayout stuff, as an iOS developer things seem ok.
This is my view
What I am trying to do is to get the 4 squares to be slightly different sizes on the vertical axis (so pink 60%, blue below 40%, blue on the right 40%, black 60%)
Reading up on layout_constraintVertical_bias, this should do what I want however it seems to do nothing
<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">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/left_guideline"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="58dp"
app:layout_constraintGuide_percent="0.16111112" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/right_guideline"
app:layout_constraintGuide_percent="0.85"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="306dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/bottom_guideline"
app:layout_constraintGuide_percent="0.85"
android:orientation="horizontal"
tools:layout_editor_absoluteY="434dp"
tools:layout_editor_absoluteX="0dp" />
<ImageButton
android:id="#+id/yourStoryButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
app:layout_constraintTop_toTopOf="#+id/bottom_guideline"
app:layout_constraintVertical_bias="0.0" />
<ImageButton
style="?android:attr/borderlessButtonStyle"
android:padding="0dp"
android:id="#+id/leftTopButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/leftBottomButton"
app:layout_constraintLeft_toRightOf="#+id/left_main_guideline"
app:layout_constraintRight_toLeftOf="#+id/rightTopButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#color/colorAccent" />
<ImageButton
style="?android:attr/borderlessButtonStyle"
android:padding="0dp"
android:id="#+id/rightTopButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/rightBottomButton"
app:layout_constraintLeft_toRightOf="#+id/leftTopButton"
app:layout_constraintRight_toLeftOf="#+id/right_main_guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.4"
app:srcCompat="#color/colorPrimary" />
<ImageButton
style="?android:attr/borderlessButtonStyle"
android:padding="0dp"
android:id="#+id/leftBottomButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_guideline"
app:layout_constraintTop_toBottomOf="#+id/leftTopButton"
app:layout_constraintLeft_toRightOf="#+id/left_main_guideline"
app:layout_constraintRight_toLeftOf="#+id/rightBottomButton"
app:layout_constraintVertical_bias="0.4"
app:srcCompat="#color/colorPrimaryDark" />
<ImageButton
android:id="#+id/rightBottomButton"
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_guideline"
app:layout_constraintLeft_toRightOf="#+id/leftBottomButton"
app:layout_constraintRight_toLeftOf="#+id/right_main_guideline"
app:layout_constraintTop_toBottomOf="#+id/rightTopButton"
app:layout_constraintVertical_bias="0.6"
app:srcCompat="#android:color/background_dark" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/left_main_guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.0"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/right_main_guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="1.0"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="360dp" />
</android.support.constraint.ConstraintLayout>
Am I incorrect that app:layout_constraintVertical_bias controls the growth percentage of that view (like weight did)
Rather than setting layout_constraintVertical_bias set this layout_constraintVertical_weight
To make it work you should also specify chainStyle
app:layout_constraintVertical_chainStyle="packed"
So, I am still baffled by what layout_constraintVertical_bias should do, however app:layout_constraintVertical_weight did what I expected layout_constraintVertical_bias to do
<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">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/left_guideline"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="58dp"
app:layout_constraintGuide_percent="0.16111112" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/right_guideline"
app:layout_constraintGuide_percent="0.85"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="306dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/bottom_guideline"
app:layout_constraintGuide_percent="0.85"
android:orientation="horizontal"
tools:layout_editor_absoluteY="434dp"
tools:layout_editor_absoluteX="0dp" />
<ImageButton
android:id="#+id/yourStoryButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline"
app:layout_constraintTop_toTopOf="#+id/bottom_guideline"
app:layout_constraintVertical_bias="0.0" />
<ImageButton
style="?android:attr/borderlessButtonStyle"
android:padding="0dp"
android:id="#+id/leftTopButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/leftBottomButton"
app:layout_constraintLeft_toRightOf="#+id/left_main_guideline"
app:layout_constraintRight_toLeftOf="#+id/rightTopButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="0.6"
app:srcCompat="#color/colorAccent" />
<ImageButton
android:id="#+id/rightTopButton"
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="0dp"
app:layout_constraintBottom_toTopOf="#+id/rightBottomButton"
app:layout_constraintLeft_toRightOf="#+id/leftTopButton"
app:layout_constraintRight_toLeftOf="#+id/right_main_guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="0.4"
app:srcCompat="#android:color/holo_orange_dark" />
<ImageButton
style="?android:attr/borderlessButtonStyle"
android:padding="0dp"
android:id="#+id/leftBottomButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_guideline"
app:layout_constraintTop_toBottomOf="#+id/leftTopButton"
app:layout_constraintLeft_toRightOf="#+id/left_main_guideline"
app:layout_constraintRight_toLeftOf="#+id/rightBottomButton"
app:layout_constraintVertical_weight="0.4"
app:srcCompat="#color/colorPrimaryDark" />
<ImageButton
android:id="#+id/rightBottomButton"
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_guideline"
app:layout_constraintLeft_toRightOf="#+id/leftBottomButton"
app:layout_constraintRight_toLeftOf="#+id/right_main_guideline"
app:layout_constraintTop_toBottomOf="#+id/rightTopButton"
app:layout_constraintVertical_weight="0.6"
app:srcCompat="#android:color/background_dark" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/left_main_guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.0"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/right_main_guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="1.0"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="360dp" />
</android.support.constraint.ConstraintLayout>