'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
Expected output:
The MovieDate
should align beside the MovieName
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>
Solution 1:[1]
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 TextView
s 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>
Solution 2:[2]
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
Solution 3:[3]
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>
Solution 4:[4]
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>
Solution 5:[5]
// 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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | snachmsm |
Solution 2 | chisom emmanuel |
Solution 3 | Bolzo |
Solution 4 | Black4Guy |
Solution 5 | Dhruv Sakariya |