Unable to equally align items in a linear layout - android

In my app I'm having a RecyclerView item.xml here I'm trying to align all items with linear layout but here problem is that when I set width of TextView to wrap_content if the text being set is too large it pushes out the other items inside the layout and makes them sometimes too small or sometimes they're completely pushed out of the layout here is my XML code which I'm using any help will be appreciated.
<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_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/songitemly"
android:weightSum="100"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imgscov"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="15dp"
android:scaleType="fitXY"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp" />
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgscov"
android:gravity="center"
android:singleLine="true"
android:textColor="#FCFAFA"
android:textSize="16dp" />
<TextView
android:id="#+id/sartist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:textColor="#D3D1D1"
tools:ignore="MissingConstraints" />
</LinearLayout>
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/playinganim"
android:layout_marginTop="5dp"
android:layout_width="25dp"
android:layout_weight="20"
android:visibility="invisible"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="playing.json"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/sname"
android:layout_height="25dp"
/>
<ImageView
android:id="#+id/imgmenu"
android:layout_marginTop="5dp"
android:layout_weight="10"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/playinganim"
android:src="#drawable/ic_dots_vertical_black_48dp"
android:layout_width="25dp"
android:layout_height="25dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Screenshot of recycler view
This is my code after setting width and height to 0dp:
<LinearLayout
android:id="#+id/songitemly"
android:weightSum="100"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:ignore="MissingConstraints">
<ImageView
android:id="#+id/imgscov"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="15dp"
android:scaleType="fitXY"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp">
<TextView
android:id="#+id/sname"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:singleLine="true"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#FCFAFA"
android:textSize="16dp" />
<TextView
android:id="#+id/sartist"
android:layout_width="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:textColor="#D3D1D1"
tools:ignore="MissingConstraints" />
</LinearLayout>
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/playinganim"
android:layout_marginTop="5dp"
android:layout_width="25dp"
android:layout_weight="20"
android:visibility="invisible"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="playing.json"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/sname"
android:layout_height="25dp"
/>
<ImageView
android:id="#+id/imgmenu"
android:layout_marginTop="5dp"
android:layout_weight="10"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/playinganim"
android:src="#drawable/ic_dots_vertical_black_48dp"
android:layout_width="25dp"
android:layout_height="25dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>


You can set the height/width as 0dp (depending on LinearLayout's orientation vertical/horizontal respectively) along with setting it's weight to match it with the constraints, i.e,
android:layout_width = "0dp"
android:layout_weight = "1.0"
Also, you can use the following for showing ellipses when text is too long :
android:ellipsize="end"
android:maxLines="1"


Try 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="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimary">
<LinearLayout
android:id="#+id/songitemly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<ImageView
android:id="#+id/imgscov"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginStart="15dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/a" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="#id/buttons"
android:orientation="vertical">
<TextView
android:id="#+id/sname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:textColor="#FCFAFA"
android:textSize="16sp"
tools:text="Test" />
<TextView
android:id="#+id/sartist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:textColor="#D3D1D1"
tools:ignore="MissingConstraints"
tools:text="Test" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/playinganim"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:layout_weight="20"
android:visibility="invisible"
app:lottie_autoPlay="true"
app:lottie_fileName="playing.json"
app:lottie_loop="true" />
<ImageView
android:id="#+id/imgmenu"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:layout_weight="10"
app:srcCompat="#drawable/a" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

Related

How to align to right on the same column in android layout

I have 2 text view and i want them to align horizontally at the same column. I tried to android:layout_toRightOf="#id/textName" but it seem like it goes to the bottom instead beside the textName
enter image description here
Expected output:
The MovieDate should align beside the MovieName
enter image description here
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/candy" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:layout_marginRight="100dp"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textdate"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="Movie Date"
android:textSize="15sp"
android:layout_toRightOf="#id/textName"/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

layout_toRightOf is an RelativeLayout param, it is no-op set for child of LinearLayout, so you can safely remove tihs line, it does nothing...
LinearLayout which is a parent of both TextViews should have set android:orientation="horizontal", thats for shure... but I see a lot of problems and potential improvements in your code, so maybe you should also set android:layout_height="wrap_content" for this LinearLayout and android:gravity="center_vertical" for outer one (first child of CardView), also remove android:layout_weight="2", its unnecessary as this layout have match_parent width
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/candy" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:layout_marginRight="100dp"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textdate"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="Movie Date"
android:textSize="15sp"/>
</LinearLayout>
</LinearLayout>

Use LinearLayout and set orientation to horizontal instead . See this 👇👇
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android: orientation="horizontal"
tools:context=".MainActivity">
<TextView android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"
android:gravity="center"
android:layout_gravity="center_vertical"
android:text="Movie Name"/>
<TextView android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"
android:gravity="center"
android:layout_gravity="center_vertical"
android:text="Movie Date"/>
</LinearLayout>
The layout_weight attribute with value of 50 gives equal portions to each children i.e 50% each

LinearLayout is the easiest solution in my opinion, but you could also try ConstraintLayout.
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_marginEnd="10dp"
android:src="#drawable/candy"
app:layout_constraintEnd_toStartOf="#id/textName"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#id/textdate"
app:layout_constraintStart_toEndOf="#id/imageview"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textdate"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:text="Movie Date"
android:textSize="15sp"
app:layout_constraintStart_toEndOf="#+id/textName"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Instead of using multiple LinearLayout you can use single ConstraintLayout and achieve same goal. Here is the modified code:
<?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="match_parent"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/candy" />
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:layout_marginRight="100dp"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="#id/imageview"
app:layout_constraintStart_toEndOf="#id/imageview"/>
<TextView
android:id="#+id/textdate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Movie Date"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/textName"
app:layout_constraintStart_toEndOf="#id/textName"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

// instead of Linearlayout use RelativeLayout and remove layout gravity.
<LinearLayout 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:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/googleg_disabled_color_18" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textdate"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/textName"
android:text="Movie Date"
android:layout_marginStart="15dp"
android:textSize="15sp" />
</RelativeLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>

How can I do toLeftOf for two Id's in same XML layout in Android?

In this below XML. there are Imageview and Progressbar are in same position. means if one is visible then other is Gone.
So, initially imageview is visible bydefault and p.bar visibility is gone. So when user click on delete button, delete visibility will be gone and p.bar will be visible. Now the problem is text is not overlapping for imageview because I did android:layout_toLeftOf="#+id/delete" in linear layout, but when p.bar is visible that time text are overlapping. How can I fix that?
Problem Image:
Code:
<?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:clickable="true"
android:focusable="true"
android:foreground="?selectableItemBackground"
app:cardCornerRadius="3dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_toLeftOf="#+id/delete"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">
<TextView
android:id="#+id/eventTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:textColor="#color/colorBlack"
android:textSize="18sp"
android:visibility="gone" />
<TextView
android:id="#+id/eventDes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventAttendee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventLocation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
</LinearLayout>
<ImageView
android:id="#+id/delete"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:clickable="true"
android:focusable="true"
android:tint="#color/colorBlack"
app:srcCompat="#drawable/ic_baseline_delete_24" />
<ProgressBar
android:id="#+id/progress_circular"
android:layout_centerVertical="true"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:visibility="gone" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
What I tried:
I tried to wrap ImageView and Progressbar into new relative/linear layout and that layout id, I used for toLeftOf, but it's not working

You can try this layout
<?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:clickable="true"
android:focusable="true"
android:foreground="?selectableItemBackground"
app:cardCornerRadius="3dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_toLeftOf="#+id/linear_layout_2"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">
<TextView
android:id="#+id/eventTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:textColor="#color/colorBlack"
android:textSize="18sp"
android:visibility="gone" />
<TextView
android:id="#+id/eventDes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventAttendee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventLocation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear_layout_2"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/delete"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:clickable="true"
android:focusable="true"
android:tint="#color/colorBlack"
app:srcCompat="#drawable/ic_baseline_delete_24" />
<ProgressBar
android:id="#+id/progress_circular"
android:layout_centerVertical="true"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:visibility="gone" />
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>

Why does my RecyclerView Layout width looks like its wrap content even though i put it match parent

so I have a recycler view layout that look like the image below. I set the width to match parent and in this layout it is like what I want it to be. So when I call this recycler layout to my home I want the view to be exactly like this.
Recycler Layout
but when I call the recycler view to my home layout and I try to run it why does it becomes like this? its like my width is wrap content. the width isn't full until the right side.
My recycler view when I run the app
here is my recyclerview layout xml code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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="90dp"
android:layout_margin="5dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginLeft="5dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:src="#mipmap/ic_launcher"
/>
<TextView
android:id="#+id/textViewTitle"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="20dp"
android:text="Plastik"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textViewCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
app:layout_constraintTop_toBottomOf="#+id/textViewTitle"
app:layout_constraintLeft_toRightOf="#+id/imageView"
android:text="Non Organik"
android:textSize="16sp"/>
<TextView
android:id="#+id/textViewPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Price"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginRight="5dp"
android:textSize="#dimen/font_medium"
android:textStyle="bold"/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
And this is my Home Layout xml code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical"
android:theme="#style/HomeTheme"
tools:context=".HomeFragment">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logog40w"
android:layout_width="150dp"
android:layout_height="60dp"
android:src="#drawable/logog4w"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/pohong4w"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentRight="true"
android:src="#drawable/pohong4w"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/user_name"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Name"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/pohong4w"
app:layout_constraintTop_toTopOf="#+id/logog40w" />
<TextView
android:id="#+id/jemputrutin_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:text="Status Penjemputan Rutin:"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pohong4w" />
<TextView
android:id="#+id/fragment_home_jemputrutin_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="STATUS"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#+id/jemputrutin_status"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/jemputrutin_status" />
<LinearLayout
android:id="#+id/layoutmainfeature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jemputrutin_status">
<android.support.v7.widget.CardView
android:id="#+id/jemput_rutin"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp"
>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_jemputrutin" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Jemput Rutin"
android:textColor="#000000"
android:textSize="12dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/antar_sendiri"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp">
<ImageView
android:id="#+id/img_antarsendiri"
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_antarsendiri" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Antar Sendiri"
android:textColor="#000000"
android:textSize="12dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/jemput_sekarang"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_jemputsekarang" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Jemput Sekarang"
android:textColor="#000000"
android:textSize="11dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<TextView
android:id="#+id/recyler_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Harga Per Kg"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/layoutmainfeature" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/recyler_title" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>

remove these two lines from recycler view and try again
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent
which makes your recycler view part like this
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintTop_toBottomOf="#+id/recyler_title" />

Dividing my cardview design issue

I am developing an app which i have to divide the cardview to 2 parts.
I have done this :
But i want to move my blue button to top as this image shows below and change the background color to grey :
This my custom layout code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:background="#color/Grey_300"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/Grey_50"
app:cardCornerRadius="3dp"
card_view:cardCornerRadius="0dp">
<RelativeLayout
android:layoutDirection="ltr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<ImageView
android:id="#+id/imageview_video"
android:layout_width="150dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_height="100dp" />
<TextView
android:id="#+id/txt_overimage"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingBottom="2dp"
android:paddingTop="2dp"
android:background="#color/myred"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="14sp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/txt_amazon_title"
android:layout_toRightOf="#+id/imageview_video"
android:layout_toEndOf="#+id/imageview_video"
android:layout_width="wrap_content"
android:textSize="15sp"
android:maxLength="100"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txt_datetimevideo"
android:layout_toRightOf="#+id/imageview_video"
android:layout_toEndOf="#+id/imageview_video"
android:textColor="#color/Grey_500"
android:layout_below="#+id/txt_amazon_title"
android:textSize="14sp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/bt_deal"
android:text="Voir le deal"
android:backgroundTint="#drawable/back_amazon"
android:textColor="#color/white"
android:textSize="14sp"
android:layout_below="#+id/txt_datetimevideo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<View
android:id="#+id/view_video"
android:layout_below="#+id/bt_deal"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider"
android:layout_marginTop="10dp"
/>
<ImageView
android:id="#+id/favorite"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:layout_below="#+id/view_video"
android:background="#drawable/favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</ScrollView>
</LinearLayout>
How can i do that ? Should i create another linearLayout and add the button inside the linearlayout ?
My updated code and image after adding linearlayout inside cardview :
updated code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:background="#color/Grey_300"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/Grey_50"
app:cardCornerRadius="3dp"
card_view:cardCornerRadius="0dp">
<LinearLayout
android:id="#+id/linear2"
android:background="#color/Grey_300"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/rela1"
android:background="#color/Grey_300"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/bt_deal2"
android:text="Voir le deal"
android:backgroundTint="#drawable/back_amazon"
android:textColor="#color/white"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layoutDirection="ltr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<ImageView
android:id="#+id/imageview_video"
android:layout_width="150dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_height="100dp" />
<TextView
android:id="#+id/txt_overimage"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingBottom="2dp"
android:paddingTop="2dp"
android:background="#color/myred"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="14sp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/txt_amazon_title"
android:layout_toRightOf="#+id/imageview_video"
android:layout_toEndOf="#+id/imageview_video"
android:layout_width="wrap_content"
android:textSize="15sp"
android:maxLength="100"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txt_datetimevideo"
android:layout_toRightOf="#+id/imageview_video"
android:layout_toEndOf="#+id/imageview_video"
android:textColor="#color/Grey_500"
android:layout_below="#+id/txt_amazon_title"
android:textSize="14sp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/bt_deal"
android:text="I HIDE BUTTON FOR REMOVING AFTER"
android:backgroundTint="#drawable/back_amazon"
android:textColor="#color/white"
android:textSize="14sp"
android:visibility="gone"
android:layout_below="#+id/txt_datetimevideo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<View
android:id="#+id/view_video"
android:layout_below="#+id/bt_deal"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider"
android:layout_marginTop="10dp"
/>
<ImageView
android:id="#+id/favorite"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:layout_below="#+id/view_video"
android:background="#drawable/favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</ScrollView>
</LinearLayout>

Try adding both your linearlayouts inside a parent linearlayout with orientation vertical.

How to properly layout an edit text horizontally in android?

I am trying to figure how I can properly layout an edit text in between two views so that It will take up the whole width nicely in all screen sizes.
Here is my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:src="#drawable/country_india"/>
<EditText
android:layout_width="250dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_gravity="bottom"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"/>
</LinearLayout>
Here is what it looks like:
Hope you guys can help!

Try this :-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:src="#drawable/country_india"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:contentDescription="#string/app_name" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Leave a comment" />
<ImageButton
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:contentDescription="#string/app_name" />
</LinearLayout>

Use this below code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_weight="3"
/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>

Add android:layout_weight="1" to editText
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:src="#drawable/country_india"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:contentDescription="#string/app_name" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Leave a comment" />
<ImageButton
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:contentDescription="#string/app_name" />
</LinearLayout>

you should be using android:layout_weight="1" instead of fixing the width if you'd like to fit the EditText to fit in.
<LinearLayout
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_width="50dp"
android:src="#drawable/country_india"/>
<EditText
android:hint="Leave a comment"
android:layout_gravity="bottom"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_width="0dp"/>
<ImageButton
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:src="#drawable/icon_pencil_2_small"/>
</LinearLayout>

I would do it this way if I were you. Populate the weight and you're good to go.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:weightSum="1.5">
<ImageView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:src="#drawable/country_india"
android:layout_weight="0.25"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Leave a comment"
android:layout_gravity="bottom"
android:layout_weight="1"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="50dp"
android:src="#drawable/icon_pencil_2_small"
android:background="#color/white"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:layout_weight="0.25"/>
</LinearLayout>

Try to make your Edittext layout_weight="1"in the middle of 2 ImageView (or something):
<?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="72dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/address_item_image_view"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_margin="5dp"
android:src="#drawable/com_facebook_tooltip_black_background"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:hint="This is an edit text"
android:layout_weight="1"/>
<ImageView
android:id="#+id/address_item_arrow_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/messenger_bubble_large_blue"/>
</LinearLayout>

Categories

Resources