I am new to ConstraintLayout in Android and newbie to Android too. I have a question. Is it advisable to use LinearLayout inside ConstraintLayout? For example:
<?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"
app:srcCompat="#drawable/landing_screen"
android:layout_height="match_parent"
tools:context="com.braigolabs.braigo.landing.LandingActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/landing_screen"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="1.0"
app:layout_constraintHorizontal_bias="1.0"
tools:layout_constraintTop_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="51dp">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="66dp"
android:layout_marginStart="66dp"
android:gravity="center"
android:text="#string/login_welcome_braigolabs" android:textAppearance="#style/TextAppearance.AppCompat.Large"
tools:layout_editor_absoluteX="93dp"
tools:layout_editor_absoluteY="403dp"/>
<Button
android:id="#+id/login_button"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:text="#string/login_login_button_title"
android:textAllCaps="false"
tools:layout_editor_absoluteX="116dp"
tools:layout_editor_absoluteY="543dp"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Also curious to know how popular is the ConstraintLayout among the developers?
Is it advisable to use LinearLayout inside ConstraintLayout?
No... usually.
In general, the idea behind ConstraintLayout is that it allows you to position all of your children without having to nest any other ViewGroups inside the ConstraintLayout. As such, I would say that it is not advisable.
However, there are some things that a LinearLayout can do that a ConstraintLayout can't (mostly revolving around weighted spacing of views), and so if you need these particular corner cases in your layout, you won't have any option other than falling back to a LinearLayout.
how popular is the ConstraintLayout among the developers?
ConstraintLayout is relatively new, but it is quite powerful and certainly something that you ought to familiarize yourself with. It won't always be the perfect tool for the job at hand, but it will often allow you to easily create layouts you would otherwise spend hours on.
I can't speak to widespread adoption statistics, but I can say that I've seen tons of questions on this site about the correct usage of ConstraintLayout, so clearly devs around the world are starting to work with it.
As of the 2.0.0-alpha5 release of the constraintlayout library, it's now possible to declare a Flow virtual layout element within your ConstraintLayout which (as the name suggests) determines how referenced items are to flow (e.g. vertically, horizontally) within the ConstraintLayout. So it's no longer necessary to declare a LinearLayout within your ConstraintLayout.
For example, if you wanted items within your ConstraintLayout to flow vertically, you'd do so like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="I am the first TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="I am the second TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="I am the third TextView" />
<androidx.constraintlayout.helper.widget.Flow
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:constraint_referenced_ids="textView1,textView2,textView3"
app:flow_horizontalAlign="start"
app:flow_verticalGap="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can play around with the app:flow_ attributes in the Flow element to achieve different flow behaviour. For more information about the Flow element, refer to the release notes here. For an example, see here.
Related
Using ConstraintLayout I saw this problem: on phones, the resolution of my widgets is normal and takes up almost all of the
screen space:
But when I switch to the resolution of the tablets, all the widgets become small and cannot be viewed on the screen:
How to make the resolution of widgets look normal on all resolutions and devices?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/table_l"
android:layout_width="297dp"
android:layout_height="329dp"
android:layout_weight="1"
android:layout_x="57dp"
android:layout_y="202dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</TableRow>
</TableLayout>
<Button
android:id="#+id/st"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_x="120dp"
android:layout_y="112dp"
android:text="start"
app:layout_constraintBottom_toTopOf="#+id/table_l"
app:layout_constraintEnd_toEndOf="#+id/table_l"
app:layout_constraintHorizontal_bias="0.495"
app:layout_constraintStart_toStartOf="#+id/table_l"
app:layout_constraintTop_toTopOf="parent"
android:layout_weight="1"
app:layout_constraintVertical_bias="0.647" />
<TextView
android:id="#+id/X_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:layout_x="118dp"
android:layout_y="608dp"
android:text="x:"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/O_text"
app:layout_constraintStart_toStartOf="#+id/O_text"
app:layout_constraintTop_toBottomOf="#+id/O_text" />
<TextView
android:id="#+id/O_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:layout_x="116dp"
android:layout_y="661dp"
android:text="o:"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/table_l"
app:layout_constraintHorizontal_bias="0.153"
app:layout_constraintStart_toStartOf="#+id/table_l"
app:layout_constraintTop_toBottomOf="#+id/table_l"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="27dp"
android:layout_height="47dp"
android:layout_marginTop="36dp"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.139"
app:layout_constraintStart_toEndOf="#+id/O_text"
app:layout_constraintTop_toBottomOf="#+id/table_l"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_marginBottom="52dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.151"
app:layout_constraintStart_toEndOf="#+id/X_text"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:layout_constraintVertical_bias="0.571" />
</androidx.constraintlayout.widget.ConstraintLayout>
You should create layout xml files for different screen size. For example; If your app running in Tablet(7 inch), you must create new layout as a layout-sw600dp.
Look at this link for more details.
You should stop using fixed sizes and x/y positions for layouts. There might be exceptions, but in general, all views should be able to dynamically resize themselves. That means, you almost never use fixed values for widths but instead wrap_content or match_parent. After 4 years of android development I also have to find one case where I ever needed the layout_x and layout_y XML tags.
Otherwise, this layout will be small on big screens and it won't fit on small screens.
For 90% of layouts, all you need is ConstraintLayout and maybe LinearLayout. RelativeLayouts have become mostly obsolete.
Explaining how to properly arrange your ui would be to exhaustive here. Instead, I recommend you to take the time to go through a tutorial like this google codelab on building a responsive UI with constraintlayouts. If done correctly, you can build one UI which looks good an smartphones and tablets.
But if you want to have an entirely different layout for tablets, then #Mustafa Yanık's approach is correct. Then you need to create a second layout in a different subfolder.
I would like to position 2 views relative to each other but not simply w.r.t the top, bottom, left or right but in a proportionate way. Let me explain. Here are 4 scenarios of positioning:
Of these, 2) and 4) are easy to do and have in-built support provided by the standard layout containers such as RelativeLayout, ConstraintLayout but my current task requires a positioning depicted in scenarios 1)/3)
A simple solution to this problem involves setting different left/top margins for both the Views w.r.t parent but this means if the need arises to place both the Views together to some other position, all the margins shall have to change.
Instead, what I would like is to have some sort of relative positioning arrangement between these 2 views that keeps them relatively at "right" distance no matter where they are placed as a unit in the parent.
How can I achieve the same? An efficient solution(with flattened hierarchy, no view hacks) would be appreciated.
An efficient solution(with flattened hierarchy, no view hacks) would be appreciated., You can use ConstraintLayout with guidelines.
guidelines have app:layout_constraintGuide_percent attribute making them responsive to the screen size.
you can use it while adding your buttons the app:layout_constraintWidth_percent and app:layout_constraintHeight_percent attributes (not mandatory, you can constraint your views to the guidelines but I believe that it is more simple).
Here is an example for your wanted layout with flattened hierarchy:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/guideline2"
app:layout_constraintWidth_percent=".3" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHeight_percent=".1"
app:layout_constraintWidth_percent=".3" />
<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=".5" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".4" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".45" />
</android.support.constraint.ConstraintLayout>
It will look like this(I am adding screenshot from the preview for better understanding guidelines):
This was just an example but with those tools, you can create your layout however you would like to.
Some extra information
My solution does not contain any fixed size dimensions on my views, this will make the layout responsive(no need to build a layout for every screen size)
You may also find ConstraintLayout: Circular Positioning related to your question, but I don't think that this is the best thing for you in this specific case.
Yes it is possible using constraint layout checkout below XML code for Point 3.(Same point 2 will be implemeted let me know if you have query)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonA"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Add"
android:layout_marginTop="15dp"
/>
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/buttonA"
app:layout_constraintEnd_toEndOf="#id/buttonA"
app:layout_constraintTop_toBottomOf="#id/buttonA"
android:text="Add"
/>
</androidx.constraintlayout.widget.ConstraintLayout>`
Please check out below code this is kind of patch but works fine.Here we can put big block to relative to small block.As we have used constraint so will be stick together no matter wherever you put. let me know if i did any thing wrong.
Here we use one dummyView and also app:layout_constraintHorizontal_bias="0.1" for making it relative value changes from 0 to 1 like 1 means 100% stating left to small block smae way 0.5 means 50% from starting small blobk to left.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonA"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="Add"
android:layout_marginTop="15dp"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dummyView"
app:layout_constraintTop_toBottomOf="#id/buttonA"
app:layout_constraintStart_toStartOf="#id/buttonA"
app:layout_constraintEnd_toEndOf="#id/buttonA"
app:layout_constraintHorizontal_bias="0.1"/>
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/buttonA"
app:layout_constraintStart_toEndOf="#id/dummyView"
android:text="Add"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Android recently introduced Flow virtual layout but all of the examples I've seen show child Views that have the same width so it ends up laying out in a grid, instead of a jagged flow.
I've seen variable width handles for flexbox-layout and Dhaval Solanki's FlowLayout.
One other person asked a similar question (Which android layout to use for distributing variable width buttons to fill a screen?), but they were asking generally how to do it, whereas I'm asking specifically how to do it with Flow.
Can Flow handle variable-width Views? How?
Here is a simple example of how it can be achieved (ConstraintLayout:2.0.0-beta2):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.helper.widget.Flow
android:layout_width="0dp"
android:layout_height="wrap_content"
app:constraint_referenced_ids="text1,text2,text3,text4,text5"
app:flow_wrapMode="chain"
app:flow_horizontalStyle="packed"
app:flow_horizontalBias="0"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:background="#FF0000"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="That is a very long textview that is very, very long"
android:background="#00FF00"/>
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text3 which is somewhat long"
android:background="#0099FF"/>
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text4"
android:background="#999999"/>
<TextView
android:id="#+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text5"
android:background="#9900FF"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Result:
app:flow_wrapMode="chain" allows for the chain to wrap to the next line when there's not enough space
app:flow_horizontalStyle="packed" is necessary to be able to set the bias
app:flow_horizontalBias="0" aligns the Views to the left
app:flow_horizontalGap="Xdp" can be used to set a gap between the Views
Other wrap styles (spread and spread_inside) will not take the bias into account as they have a predefined way of laying out the Views
I am certainly newbie to Andorid Development, and have a knowledge of basic stuff, Relative Layout, Linear Layout, Intent, File Handling etc....
I need to build a project similar to some E-commerce app.
Here's an image of what I want.
How do I achieve the given view of products, as like in blogs or other websites.
Do I have to use List View?
And Please tell what do I have to use to make that "Add Filter Tags" section and how to achieve what I have shown in the picture.
Below is the code which will create skeleton for your UI requirement. You can modify it according to your need.
Your Activity/Fragment xml will look like :
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<com.google.android.material.chip.ChipGroup
android:id="#+id/entry_chip_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_parent">
</com.google.android.material.chip.ChipGroup>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/entry_chip_group"
/>
</android.support.constraint.ConstraintLayout>
You Adapter xml for RecyclerView will look like:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv_product"
android:layout_width="100dp"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Name"
app:layout_constraintStart_toEndOf="#id/iv_product"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Information"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_name" />
<TextView
android:id="#+id/tv_more_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More info"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_info" />
<TextView
android:id="#+id/tv_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_more_info" />
<TextView
android:id="#+id/tv_tags"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tags"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_data" />
</android.support.constraint.ConstraintLayout>
You should use Chips for your Filter tag. You can add them dynamically to your chip group. Below is the link for reference.
How to use Android Chips
A ListView would be the "default" way. I would also have a look at RecyclerView (a newer incarnation of the same idea). It handles scrolling and recycling the list elements as you scroll, which are all things you don't really want to do on your own.
You'll probably have a separate layout for the individual cards, probably mostly LinearLayouts (horizontal for image -> content, and then a vertical one to hold the content, and maybe a third horizontal one to list the tags).
For the tags, you might want to take a look at Material Design "chips", but honestly that's the part of this mockup that would have me the most concerned. You can make it look however you want, but I'm not sure what your designer means there exactly. Is that a static list of filtering options? Is that on a new page? In a dialog?
EDIT: And as for the top bar, check out the standard App Bar before reinventing the wheel there.
I would definitely go with Recyclerview or this tutorial for your products(images and the product description...) and FrameLayout for the top that includes logo and stuff and finally a regular RelativeLayout for the tags.
I make UI of many buttons to input text by constraint layout.
For example, the following image.
But,I feel strange that android studio become very slow as I put more UIs and adaptive hook allows I set, sometimes disappear(ex.some buttons' allow disapper head row above image).It should use very large memory and I guess free memory to calculate position and re-render UI.
Can I avoid this situation? or Alternative way to make same UI using another layout. I'm very nervous for this problem because I can't understand the best way to make grid flexible-scaling UI.Any tips will help me.
I could solve the problem using grid layout enclosing the buttons nested constraint view and it seem best way that relative positioning UI.
<?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">
<EditText
android:layout_width="456dp"
android:layout_height="64dp"
android:inputType="textPersonName"
android:text="Name"
android:ems="10"
android:id="#+id/editText"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent" />
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="8"
android:rowCount="5"
android:useDefaultMargins="true"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="32dp"
android:foregroundGravity="center_horizontal"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
app:layout_constraintVertical_bias="0.81">
<Button
android:text="button"
android:layout_width="88dp"
android:background="#drawable/oval_btn"
android:id="#+id/str_wa"
android:layout_height="88dp"
tools:layout_editor_absoluteY="520dp"
tools:layout_editor_absoluteX="529dp" /> ・・・・・・
And you can place what you like.