How can I replicate this behaviour in an Android app, is only for learning purposes. I do know that in the bottom half they are using a recyclerview, but in the upper part where they are displaying the "You have 4.983 to spend" part I dont know how to add it, how do they split the screen to have them both? This is what I want to replicate
Please post the code or implementation which you have tried before asking the question, which will be helpful for others to answer your question.
This can be implemented easily within the same xml layout file.
Or
Can also be done with multiple fragments split in one activity or fragment.
Think each TextView ImageView or any Widget as to be placed properly into one layout. Just for an example for you to set i have created this which took me 5 mins to build similar layout design like one you have posted, the final result is not same, because details are to be customized.
So import this xml into your file and see how it looks. Also learn using ConstraintLayout.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/you_have_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="You have"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/amount_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$ 4,983"
android:textSize="36sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#id/you_have_text"
app:layout_constraintTop_toBottomOf="#id/you_have_text" />
<androidx.cardview.widget.CardView
android:id="#+id/first_card"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toStartOf="#id/second_card"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/amount_text">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Funds"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/second_card"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toStartOf="#id/third_card"
app:layout_constraintStart_toEndOf="#id/first_card"
app:layout_constraintTop_toBottomOf="#id/amount_text">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Transfer"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/third_card"
android:layout_width="100dp"
android:layout_height="100dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/second_card"
app:layout_constraintTop_toTopOf="#id/first_card">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Pay Bill"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/list_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
app:cardCornerRadius="24dp"
app:cardElevation="16dp"
app:layout_constraintTop_toBottomOf="#id/first_card">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintTop_toBottomOf="#id/first_card"
tools:listitem="#layout/item_list" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
item_list.xml :
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/item_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:fontFamily="serif-monospace"
android:padding="8dp"
android:textSize="32dp"
android:textColor="#000000"
tools:text="McDonalds" />
Related
I am new in Android and somewhere didnt understand how it works. I has this XML code
<?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:id="#+id/mainWindow"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/katalog"
android:layout_width="388dp"
android:layout_height="179dp"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintStart_toStartOf="parent">
<TableRow
android:id="#+id/row"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView // problem is here
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stock"
android:textSize="18sp" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
</TableLayout>
<Button
android:id="#+id/button3"
android:layout_width="135dp"
android:layout_height="51dp"
android:text="Stuff"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="135dp"
android:layout_height="51dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:text="Person"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="135dp"
android:layout_height="51dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:text="card"
app:backgroundTint="#07464E"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5" />
</androidx.constraintlayout.widget.ConstraintLayout>
And i have another one with almost same options. But this one doesn't displayed. Also java class has few action listeners for buttons, and nothing for TableLayuout. But another java class with table layout doesnt have anything with code, like that
public class admpanel extends lk{
private TableLayout table;
#SuppressLint("SetTextI18n")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.admpanel);
}
}
And thats works.
P.S. another one TableLayout doesnt displayed because im forgot to use "id" for pieces, then i fixed it. But now im idk
EDIT: That code start work if i am delete ImageView. How to use Image View? Pointed problem
The issue with your code is that the code has not specified a proper android:src or app:srcCompat for the imageView which is necessary to inflate the UmageView to some height or it considers the height as 0dp resulting in the ImageView not show up. tools:src is used just to show the image in the XML design tab to have an idea of how much space or how the view will look. The image specified can not be used for showing it in the application. I have updated your code for a better design and also added a proper image for your ImageView(Resource here). Save the image in your drawable folder as a12_logo. Check this code and comment if you have any issues ahead.
Also, if the purpose of this TableLayout is to use it for showing a list of items, switch to RecyclerView for better performance and easy data handling.
Also, your Buttons have fixed height and width which is not ideal as the buttons might get out of the screen for some devices so I have added better code for the buttons.
<?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:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/katalog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
app:layout_constraintBottom_toTopOf="#id/button3">
<TableRow
android:id="#+id/row"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_column="0"
android:src="#drawable/a12_logo" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stock"
android:textSize="18sp" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
</TableLayout>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Stuff"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:text="Person"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toEndOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:text="card"
app:backgroundTint="#07464E"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5" />
</androidx.constraintlayout.widget.ConstraintLayout>
For some strange reason, the TextViews in my ConstraintLayout won't budge to show all text and it appears to go over the screen's boundaries. I already tried using app:layout_constrainedWidth="true" with android:layout_width="wrap_content" but that didn't have any effect in changing the positioning, leading me to think what would happen to the '1C' and '1D' text views when I add longer text in those.
Current result
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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"
android:layout_marginBottom="20dp"
app:cardUseCompatPadding="true"
android:background="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayoutA"
android:padding="12dp"
android:foreground="?android:attr/selectableItemBackground">
<!--Constraint 1-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayoutTitle"
android:layout_marginBottom="10dp">
<ImageView
android:id="#+id/ibA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ibA"
app:layout_constraintTop_toTopOf="parent"
app:layout_constrainedWidth="true"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<!--Constraint 2-->
<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:id="#+id/constraintLayout">
<ImageView
android:id="#+id/ivA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/ivA"
style="#android:style/TextAppearance.Medium"/>
<TextView
android:id="#+id/tvC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toTopOf="#+id/tvD"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/tvB"
style="#android:style/TextAppearance.Medium"/>
<ImageView
android:id="#+id/ivD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="#+id/ivA"
app:layout_constraintStart_toStartOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/tvD"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivD"
app:layout_constraintTop_toBottomOf="#+id/tvC"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Suraj Vaishnav's suggestion
Because there is no constraint from the right(or end) side, add this app:layout_constraintEnd_toEndOf="parent" to tvA,tvB and so on.
Update:
apply both constraints: start and end and set the width 0dp. here are the working properties for tvB:
<TextView
android:id="#+id/tvB"
app:layout_constraintStart_toEndOf="#+id/ivA"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
...
I guess you can do the same things for tvC & tvD, let me know if you face any issue.
I am developing android app and how can I create ui like below picture
and below my xml I have played around but it is not giving expected output any suggestion will be greatly appreciated and hints welcome I dont know where exactly I am making mistake
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardPreventCornerOverlap="false"
card_view:cardCornerRadius="50dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/articleTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/articleSource"
android:paddingBottom="45dp"
android:text="22222222"
tools:layout_editor_absoluteX="25dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
android:layout_width="60dp"
android:contentDescription="#string/bbc_sport"
android:layout_height="60dp"/>
<TextView
android:id="#+id/articleSource"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="90dp"
android:text="News blalalalal"/>
<TextView
android:id="#+id/articleTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="90dp"
android:text="News blalalalal"/>
</androidx.constraintlayout.widget.ConstraintLayout
>
</androidx.cardview.widget.CardView>
If you mean item list you maybe can do this
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="85dp"
android:layout_marginStart="16dp"
android:contentDescription="bbc"
tools:background="#color/colorPrimary" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#id/imageView"
android:ellipsize="end"
android:lines="3"
android:maxLines="3"
android:text="1\n2\n3\n" />
<ImageView
android:id="#+id/imageCategory"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_below="#id/articleTitle"
android:layout_marginStart="16dp"
android:layout_toEndOf="#id/imageView"
tools:background="#color/colorPrimary" />
<TextView
android:id="#+id/articleCategory"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_below="#id/articleTitle"
android:layout_marginStart="16dp"
android:layout_toEndOf="#id/imageCategory"
android:gravity="center|start"
android:text="Onefootbal" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_below="#id/articleTitle"
android:layout_alignParentEnd="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#id/articleCategory"
android:gravity="center|start"
android:text="- 1h"
android:textColor="#android:color/darker_gray" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
If you are looking for a way to build the whole screen I'd suggest you using Epoxy library by Airbnb https://github.com/airbnb/epoxy
You will basically treat this screen as RecyclerView which has 2 types of layouts - item without image (as the one on top) and item with image (all the bottom ones).
It will take some time to learn the library but it will be very handy especially if your layout is reusable and other screens use similar items
I am trying to build the following layout on Android:
As indicated by the dotted lines:
- The two TextViews should be left aligned.
- The ImageView should be center aligned with the title TextView
The labels should be anchored relative to the parent and each other as indicated in the sketch.
I have tried to implement this using ConstrainedLayout which gets me pretty far. But the tricky part is the alignment of image and title.
I would need an attribute like layout_constraintCenter_toCenterOf which unfortunately does not exist.
EDIT: ### removed hard-coded height ###
There was an unwanted hardcoded height in my code (marked in example below). After removing that it works fine for me.
But the question stands: What is the 'right' way to center-align views?
My solution feels like a hack.
#######################################
This is what I got so far:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="5dp">
<ImageView
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="0dp"
### edit: this line must go:
### android:layout_height="19dp"
android:layout_marginStart="158dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:id="#+id/detailText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="subtitle" />
</android.support.constraint.ConstraintLayout>
I have tried to work around by aligning top and bottom which looks right in the preview but causes glitches in the real app:
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
Maybe ConstrainedLayout is the wrong tool for the job altogether.
What is the 'right way' to implement this layout in Android?
You may try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:src="#drawable/connected_icon_png" />
<View
android:layout_width="10dp"
android:layout_height="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:text="Title Label"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:maxLines="2"
android:text="Content that you want" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"/>
</LinearLayout>
</LinearLayout>
You may able to do further edit if you need.
Happy Coading
Snapshot:
use your widgets inside relative layout.
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:padding="5dp">
<ImageView
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:src="#color/colorAccent"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="19dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:ellipsize="end"
android:text="abcjdnadnaadjdndd"
android:layout_toRightOf="#id/image1"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:layout_toRightOf="#id/image1"
android:textAlignment="center"
android:layout_below="#id/titleText"
android:id="#+id/detailText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:text="sadhbhaeadhbaedn"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
tools:text="subtitle" />
</RelativeLayout>
Recently, I started using Constraint layout but today encountered very strange behaviour using it. When I am using RelativeLayout as root instead of ConstraintLayout in fragment_holiday.xml output is as expected but I want to know what is wrong with ConstraintLayout. My code is as follows for fragment,item_row
And I am getting output with constraint layout as(And on scrolling it is showing different beheviour as you can see in screenshot I am sharing) ---
fragment_holiday.xml
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.thepsi.psidashboard.Fragments.HolidayFragment">
<com.thepsi.psidashboard.CustomViews.CustomDatePicker
android:id="#+id/customDatePicker_holiday"
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"
app:dateFormat="MONTH_YEAR"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycle_view_holiday"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/general_margin_eight_dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/customDatePicker_holiday" />
</android.support.constraint.ConstraintLayout>
item_holiday.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="24 - January - 2017"
android:textColor="#color/colorPrimaryDark"
/>
<TextView
android:id="#+id/textView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="Saturday"
android:layout_alignParentEnd="true"
android:textColor="#color/colorPrimaryDark"
/>
<TextView
android:id="#+id/textView27"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:text="Mahavir Jayanti"
android:textAlignment="center"
android:textColor="#android:color/black"
android:layout_below="#+id/textView25"
/>
</RelativeLayout>
Expected Design -
Can someone tell me what I am missing here?
Try this...
Change the width of recyclerview as matchparent
Yeah! as per the documentation the widget in ConstraintLayout doesn't support matchparent as width.
We have to assign the width as 0dp and use constraintStart_toStartOf="parent" and constraintEnd_toEndOf="parent" to reflect matchparent like you used.
But the solution I gave will work on some cases as you have.
Try to to update the item_holiday.xml like the below xml. I just added three labels and added their constraint properties.
You will need to edit the label propertied as per your requirement.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginEnd="88dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.888"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginEnd="88dp"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Try following.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView25"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="24 - January - 2017"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toStartOf="#+id/textView26"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView26"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="right"
android:text="Saturday"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#+id/textView25"
app:layout_constraintTop_toTopOf="#+id/textView25" />
<TextView
android:id="#+id/textView27"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:text="Mahavir Jayanti"
android:textAlignment="center"
android:textColor="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView25" />
</android.support.constraint.ConstraintLayout>
I've had a similar issue with height and vertical constraints in a recycler view and finally ended up using new support library version 27.0.2 and constraint-layout version 1.1.0-beta4 to get expected behavior.
Recommend everyone to bump to those versions if having some weird behaviors in constraint layouts.