I have read in a blog entry that in ConstraintLayout 2.0.0, a way was introduced to create a flow of views. What I exactly want to achieve:
I have several TextViews with a fixed size next to each other. Depending on screen size, some TextViews should be pushed into the next line.
Example on big screen with six TextViews:
[AAA] [BBB] [CCC] [DDD]
[EEE] [FFF]
Example on small screen with six TextViews:
[AAA] [BBB]
[CCC] [DDD]
[EEE] [FFF]
I already saw this Stackoverflow question proposing to use a FlexboxLayout, but there is a comment saying that the same thing now can be achieved using ConstraintLayout.
Anybody can give me an example on how to achieve the desired behavior using ConstraintLayout? I was not able to find any instructions about this. Thanks in advance.
You can achieve this by adding a androidx.constraintlayout.helper.widget.Flow virtual view inside the androidx.constraintlayout.widget.ConstraintLayout and by referencing all your textviews with app:constraint_referenced_ids attribute.
Example below shows how I've achieved it.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[AAAAAAAA]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[BBBBBBBB]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[CCCCCCCC]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[DDDDDDDD]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[EEEEEEEE]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[FFFFFFFF]"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/flow1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
app:constraint_referenced_ids="text1,text2,text3,text4,text5,text6"
app:flow_horizontalBias="0"
app:flow_horizontalGap="10dp"
app:flow_horizontalStyle="packed"
app:flow_verticalBias="0"
app:flow_wrapMode="chain"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Play around with app:flow_ attributes to change the arrangement of the textviews such as alignment, margin, etc.
https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow
Final result should look like below depending on your screen size.
Related
I have this section into my layout:
<RelativeLayout
android:id="#+id/title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/keyline_4"
android:paddingTop="10dp"
android:paddingRight="#dimen/keyline_4"
app:layout_constraintTop_toBottomOf="#+id/avatar_layout"
android:visibility="visible">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/flag_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginRight="#dimen/keyline_0"
android:layout_toLeftOf="#+id/title"
android:src="#drawable/ic_modify"
android:visibility="visible"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
style="#style/ProfileTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="TEST TEST"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/update_icon"
android:layout_width="#dimen/keyline_4"
android:layout_height="#dimen/keyline_4"
android:layout_toRightOf="#+id/title"
android:layout_marginLeft="#dimen/keyline_0"
android:src="#drawable/ic_modify"
android:visibility="visible"/>
</RelativeLayout>
The result (on layout editor): it's OK
But if the text is long like this, the icons disappear...
How to keep icons into the screen (left and right)? The text should be wrapped between these 2 icons.
Thank you very much!
Right now you are constraining the text to the parent and the images to the text. You need to constrain the images to the parent and the text to the images.
To accomplish this, you would need to use a ConstraintLayout instead ofyour RelativeLayout. It might look like this (I added my own values where you were using dimen):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/update_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_toRightOf="#+id/title"
android:src="#drawable/ic_modify"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:paddingLeft="26dp"
android:paddingRight="26dp"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true"
app:layout_constraintStart_toEndOf="#id/update_icon"
android:text="TEST this is a super long, long, long, long, long, long, long version of the test TEST"
app:layout_constraintEnd_toStartOf="#id/flag_icon"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/flag_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginStart="384dp"
android:src="#drawable/ic_modify"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This would give you something like for long text:
and something for short text:
This turned out to be a challenging question for me. After struggling several hours I couldn't get the solution by means of neither LinearLayout, nor RelativeLayout nor ConstraintLayout. I too look forward to see a solution by either of the layouts mentioned (or any other).
Meanwhile, in case you're tight with time, I'd suggest an option that is rather a workaround than solution. Namely, you might consider using drawableStart and drawableEnd attributes for the AppCompatTextView, so the resulting layout would look as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:drawableStart="#mipmap/ic_modify"
android:drawableEnd="#mipmap/ic_modify"
android:text="TEST TEST TEST TEST TEST TEST TEST TEST"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true" />
</RelativeLayout>
Note, that for testing I used #mipmap/ic_launcher shipped with a default Android Studio project. The ic_launchers are of square size for each screen resolution group. You might need to do the same with ic_modify to prevent its stretching in width.
Another option, if applicable, might be creating a custom view.
I would like to divide my screen in two halves using constraint layout? I can only find examples for relative and linear layouts could someone help me out? I attached a screenshot as to how I would like it to look.Image attached
The best way to do this is to use a <GuideLine />
<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/guideline"
app:layout_constraintGuide_percent="50%"
android:orientation="horizontal"/>
<TextView
android:text="Text 1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/button"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline" />
<TextView
android:text="Text 2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/button"
android:gravity="center"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
For more information on android constraint layout guidelines, you can read their official documentation here
Here's another great article for learning on how to used guidelines
I have a problem with correct display of ImageView. I want to display ImageView inside ConstraintLayout. On preview it looks exactly as i need, but when i'm starting it on device it looks completly dirrerent. This layout is places inside recycle view. What is wrong with this code?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/promotionRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:background="#fff"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/promotionImageLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintHeight_default="spread"
android:background="#color/colorPrimary">
<ImageView
android:id="#+id/promotionImageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#mipmap/ic_start_promotion"
android:background="#mipmap/ic_start_promotion"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHeight_min="150dp" />
<ImageView
android:id="#+id/fadeGradientImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#drawable/fade_image_background" />
<TextView
android:text="Sample title"
android:textSize="16sp"
android:textStyle="bold"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="6dp"
android:textColor="#ffffff"
android:id="#+id/promotionNameTextView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:paddingBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/promotionDescriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:layout_marginTop="12dp"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:text="Sampe description" />
</LinearLayout>
EDIT: Deep explanation:
I want to create row for RecycleView. Each row have to contains image, title and description. Title have to be in the left bottom corner of the image. Description have to be below the image. After that i have to put gradient (black in the bottom) into the image. Screen with "Preview" is exactly what i need.
EDIT2: Everything with this layout is ok. It is working as expected, i forget that i made some changes in kotlin code... Sory for problem.
First things first, every view should apply the attribute rules of its parent ViewGroup. ConstraintLayout doesn't support match_parent. It supports the 0dp value which means "match constraint". This way the view will expand to fill the constraint bounded space.
Next, ConstraintLayout was created to achieve a flat view hierarchy for better layout performance. So, never nest it inside a LinearLayout as it has the chains feature to get the same behavior in a more flexible way. Plus, you can achieve the structure with a ConstraintLayout at the top level .
Another thing, If you are going to define the same margin in all directions, you can just use layout_margin.
Finally, you have overdraw problems. ConstraintLayout is flexible enough to allow us to position views as backgrounds and help us avoid overlapped backgrounds.
Here's a solution:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/promotionRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/promotion_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#mipmap/ic_start_promotion"
app:layout_constraintHeight_min="150dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/shadow"
android:layout_width="0dp"
android:layout_height="80dp"
android:adjustViewBounds="true"
android:background="#drawable/fade_image_background"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/promotion_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Sample title"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/promotion_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:padding="12dp"
android:text="Sampe description"
android:textSize="13sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/promotion_image" />
</android.support.constraint.ConstraintLayout>
Try it. Hope this helps!
First of all, trying to write more presicely what do you want? Display image view inside layout it's somthing common words. As for your code, beside you don't have any constraints. You have strange view height, for second ImageView:
android:layout_height="match_parent"
It may overlay all other children view, it's very strange parameter.
<TextView
android:id="#+id/textViewGuessGame"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:text="Guess Game"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="6dp" />
<TextView
android:id="#+id/textViewGameRules"
android:layout_width="wrap_content"
android:layout_height="61dp"
android:text="Game rules: guess the wrong number and you loose a point. Guess the right number and get one point "
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.13"
tools:layout_editor_absoluteY="54dp" />
<TextView
android:id="#+id/textViewResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="Points : 0 "
tools:layout_editor_absoluteY="233dp"
app:layout_constraintHorizontal_bias="0.455" />
<Button
android:id="#+id/buttonL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="37dp"
tools:layout_editor_absoluteY="146dp" />
<Button
android:id="#+id/buttonR"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="208dp"
app:layout_constraintBaseline_toBaselineOf="#+id/buttonL" />
I want to make it so the two buttons go next to each other and text view game rules under the textviewguessgame. I am trying to make it so they do not go in the left corner all staked up together. Is there a video i could look at too so i don't have to keep asking questions each time?
Everything depends on the layout you are using. Looks like you are using ConstraintLayout but you didn't copy all the xml code. I recommand RelativeLayout, things aren't complicated in RelativeLayout and it is used to make layouts for different screen sizes.
Here's android developers official page tutorial for RelativeLayout.
https://developer.android.com/guide/topics/ui/layout/relative.html
Sometimes you want to use another layout but in your case RelativeLayout will be just fine.
According to your layout specifications, I think linear layout with vertical orientation is the best deal.Try below code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textViewGuessGame"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:gravity="center"
android:layout_gravity="center"
android:text="Guess Game"
android:textSize="24sp"/>
<TextView
android:id="#+id/textViewGameRules"
android:layout_width="wrap_content"
android:layout_height="61dp"
android:padding="5dp"
android:text="Game rules: guess the wrong number and you loose a point. Guess the right number and get one point " />
<TextView
android:id="#+id/textViewResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Points : 0 "/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/buttonL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/buttonR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"/>
</LinearLayout>
</LinearLayout>
I am struggling creating the UI for a list item which should look like this:
I am trying to build a similar layout for my list items like in the picture above. However, I am stuck, because I don't exactly know, how to nest the views so the sell-buttons has the same height as both textviews.
If I use the RelativeLayout than I cannot use the layout_weight attribute anymore which position the views evenly horizontally on the screen.
However, if I use the LinearLayout than I cannot use the relative-attributes like alignTop and so on. I am trying to nest the views in a way so I can achieve this, however I am failing so far... (sry for my poor english skills)
This is what I have so far, however I still cannot get the desired result:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="80dp"
android:padding="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="45dp">
<TextView
android:id="#+id/productname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Google Pixel" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/productname"
tools:text="699$" />
<TextView
android:id="#+id/quantity_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
tools:text="Quantity" />
<TextView
android:id="#+id/quantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/quantity_textview"
android:layout_centerHorizontal="true"
tools:text="31" />
</RelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_alignParentRight="true"
tools:text="SELL"
android:layout_alignParentTop="true" />
</RelativeLayout>
I'd recommend ConstraintLayout. This will allow you to set the top of the button to be constrained to the top of first text view, the bottom of the button to be constrained to the bottom of the second text view, and maintain the even distribution left to right with a horizontal chain.
Here's a an example I just threw together for funsies:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="0dp"
android:text="TextView"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView4"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:text="Google Pixel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintLeft_toLeftOf="#+id/textView2"
app:layout_constraintRight_toRightOf="#+id/textView2"
tools:text="6995" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintLeft_toRightOf="#+id/textView2"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toTopOf="parent"
tools:text="Quantity" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/textView4"
app:layout_constraintRight_toRightOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4"
tools:text="31" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintLeft_toRightOf="#+id/textView4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:text="Sell" />
</android.support.constraint.ConstraintLayout>
This gives you this layout in the preview:
And this is what the preview looks like showing the constraints. You can see the button being constrained to the two views (dashed lines), and the chain across the "Google Pixel" label, the "Quantity" label, and the button that keeps everything evenly distributed.
Note that if you want the button to be smaller to shrink down to match the bottom of the second text view, you have to set the button's minHeight attribute to 0. You'll probably also have to replace the default background of the button if you want pixel-perfect alignment of the top and bottom as the default background drawable has some built-in padding.
Hope that helps!
Try using Frame Layout, with it you will be able to align your views according to your need.
Or you can use a listview with a custom adapter for creating this kind of view. You can refer to this link
http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/