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

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>

Related

Recyclerview items text look different on different devices

I am working on an activity that has three recyclerviews.
My issue is that the output is different on different devices.
I am testing the app on my real device and on the Android Studio emulators, and the output is right. But I have some customers users who say that the output is wrong.
Here is my screen shot with the right output:
And this is the wrong output on some devices:
I have tried changing text size, but with no success.
I ask you where should I start looking for a solution, at recyclerview or at item view?
EDIT
Activity Layout:
<?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="match_parent"
android:background="#f2f2f2">
<LinearLayout
android:id="#+id/cabeceraTicket"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/cardview_dark_background"
android:orientation="horizontal">
<TextView
android:id="#+id/txtTicket"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Ticket: "
android:textColor="#color/cardview_light_background"
android:textSize="18sp" />
<TextView
android:id="#+id/txtSalon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Salón: "
android:textColor="#color/cardview_light_background"
android:textSize="18sp" />
<TextView
android:id="#+id/txtMesa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Mesa:"
android:textColor="#color/cardview_light_background"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/botones"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/cabeceraTicket"
android:orientation="horizontal">
<Button
android:id="#+id/btnTodo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Menu/Ticket" />
<Button
android:id="#+id/btnMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Menu" />
<Button
android:id="#+id/btnTicket"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Ticket" />
</LinearLayout>
<LinearLayout
android:id="#+id/botones2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/botones"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/btnRegresar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#009688"
android:text="Salir"
android:textColor="#color/white" />
<Button
android:id="#+id/btnMarchar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Marchar todo"
android:textColor="#color/white" />
</LinearLayout>
<Button
android:id="#+id/btnConectar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:visibility="gone" />
<LinearLayout
android:id="#+id/menus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/botones2"
android:orientation="vertical">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Menú"
android:textSize="24sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/lmenu1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/l0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_previous" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewMenu0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:orientation="horizontal">
</android.support.v7.widget.RecyclerView>
<ImageView
android:id="#+id/r0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_next" />
</LinearLayout>
<LinearLayout
android:id="#+id/lmenu2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:visibility="visible">
<ImageView
android:id="#+id/l1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_previous" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewMenu1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:orientation="horizontal">
</android.support.v7.widget.RecyclerView>
<ImageView
android:id="#+id/r1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_next" />
</LinearLayout>
<LinearLayout
android:id="#+id/lmenu3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:visibility="visible">
<ImageView
android:id="#+id/l2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_previous" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewArticulos1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:orientation="horizontal">
</android.support.v7.widget.RecyclerView>
<ImageView
android:id="#+id/r2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_next" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ticket"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/menus"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/titulo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Ticket"
android:textSize="24sp"
android:textStyle="bold" />
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/titulo"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:listSelector="#drawable/list_selector"
android:state_activated="true" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
First recyclerview item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:cardCornerRadius="4dp"
app:cardElevation="1dp"
app:cardMaxElevation="2dp">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="center_horizontal|center_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="4"
android:autoSizeMaxTextSize="15sp"
android:autoSizeMinTextSize="8sp"
android:autoSizeTextType="uniform"
android:gravity="center|center_horizontal|center_vertical"
android:padding="12dp"
android:text="Canada"
android:textAllCaps="false"
android:textColor="#color/red_A700"
android:textSize="30sp"
android:textStyle="bold"
app:autoSizeMinTextSize="20sp"
app:fontFamily="sans-serif" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Second recyclerview item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:cardCornerRadius="4dp"
app:cardElevation="1dp"
app:cardMaxElevation="2dp">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:autoSizeMaxTextSize="15sp"
android:autoSizeMinTextSize="8sp"
android:autoSizeTextType="uniform"
android:gravity="center|center_horizontal|center_vertical"
android:padding="12dp"
android:text="Canada"
android:textAllCaps="false"
android:textColor="#color/red_A700"
android:textSize="30sp"
android:textStyle="bold"
app:autoSizeMinTextSize="20sp"
app:fontFamily="sans-serif" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Third recyclerview item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:cardCornerRadius="4dp"
app:cardElevation="1dp"
app:cardMaxElevation="2dp">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:autoSizeMaxTextSize="15sp"
android:autoSizeMinTextSize="8sp"
android:autoSizeTextType="uniform"
android:gravity="center|center_horizontal|center_vertical"
android:padding="12dp"
android:text="Canada"
android:textAllCaps="false"
android:textColor="#color/red_A700"
android:textSize="30sp"
android:textStyle="bold"
app:autoSizeMinTextSize="20sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
your code contain like this,
<RelativeLayout
android:id="#+id/relative"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="center_horizontal|center_vertical"></>
you need to change the item layout fixed length width
I would suggest not to set values for the textsize in your xml at all (either in dp or sp). Let each user choose their preferred textSize by changing the system-wide font size in the device's Settings--->Display--->FontSize.
Just make sure any container for these textViews (the parent layout of each textView) can accommodate textViews of varying sizes. One way this can be accomplished, is by setting the container's width and height values to 'WrapContent' if possible.
My answer should be viewed like a shift in your approach to text sizes in general, rather than a specific answer to a specific problem like the one you are facing. There may well be easier and faster solutions if you just want to quick-fix your current issue.

Unable to equally align items in a linear layout

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>

Can't put LinearLayout to the bottom of page android studio

I want to make a chat layout. I want to put Edittext and Button on the bottom of the screen. I already tried using gravity : bottom and alignParentBottom : true, but it doesn't give any effect about that.
This is my code
<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=".chat">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/friendChat"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Nama"
android:textSize="20dp"
android:paddingTop="10dp"
android:paddingLeft="40dp"
android:textColor="#android:color/white"
android:background="#color/starbuck"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/friendChat"
android:paddingTop="20dp"
android:orientation="horizontal"
android:id="#+id/friendChatContainer"
android:paddingLeft="10dp">
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/avatar" />
<TextView
android:id="#+id/friendChatContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:textSize="16dp"
android:textColor="#android:color/white"
android:text="haloooo"
android:background="#color/starbuck"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/friendChatContainer"
android:paddingTop="20dp"
android:orientation="horizontal"
android:gravity="right"
android:paddingRight="10dp"
android:id="#+id/myChat"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:textSize="16dp"
android:textColor="#android:color/white"
android:text="haloooo"
android:background="#color/starbuck"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/myChat"
android:gravity="bottom">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="Write a message"
android:inputType="text"
android:paddingHorizontal="10dp"
android:text="" />
<ImageButton
android:id="#+id/sendChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:padding="20dp"
android:layout_marginHorizontal="10dp"
android:background="#drawable/send"/>
</LinearLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
This is what it looks like with that code :
The EditText and ImageButton supposed on the bottom of the screen.
If you don't want to modify basic structure of layout file, just modify two places as the following comments:
...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/myChat"
android:layout_alignParentBottom="true" //add this line
android:gravity="bottom">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="Write a message"
android:inputType="text"
android:paddingHorizontal="10dp"
android:text="" />
<ImageButton
android:id="#+id/sendChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" //delete this line
android:scaleType="fitCenter"
android:padding="20dp"
android:layout_marginHorizontal="10dp"
android:background="#drawable/ic_launcher_background"/>
</LinearLayout>
...
Why are you using a RelativeLayout inside of your ConstraintLayout.
Firstly I suggest you use either the Relative Layout or the ConstraintLayout.
I give you an example for the ConstraintLayout
<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=".chat">
<TextView
android:id="#+id/friendChat"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Nama"
android:textSize="20dp"
android:paddingTop="10dp"
android:paddingLeft="40dp"
android:textColor="#android:color/white"
android:background="#color/starbuck"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/friendChat"
android:paddingTop="20dp"
android:orientation="horizontal"
android:id="#+id/friendChatContainer"
android:paddingLeft="10dp"
app:layout_constraintTop_toBottomOf="#id/friendChat">
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/avatar" />
<TextView
android:id="#+id/friendChatContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:textSize="16dp"
android:textColor="#android:color/white"
android:text="haloooo"
android:background="#color/starbuck"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/myChat"
android:gravity="bottom"
app:layout_constraintBottom_toBottomOf="parent">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="Write a message"
android:inputType="text"
android:paddingHorizontal="10dp"
android:text="" />
<ImageButton
android:id="#+id/sendChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:padding="20dp"
android:layout_marginHorizontal="10dp"
android:background="#drawable/send"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
This Framework should work for you accordingly. I deleted the one Textview, but you can edit it if you like.
You do not have to put it into another layout aswell. You can just use the android:constraint... in the textview itself.
With best regards
Just add android:layout_alignParentBottom="true" in your Bottom LinearLayout and remove android:layout_gravity="center" from send button. The final code is below.
<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=".chat">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/friendChat"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Nama"
android:textSize="20dp"
android:paddingTop="10dp"
android:paddingLeft="40dp"
android:textColor="#android:color/white"
android:background="#color/starbuck"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/friendChat"
android:paddingTop="20dp"
android:orientation="horizontal"
android:id="#+id/friendChatContainer"
android:paddingLeft="10dp">
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/avatar" />
<TextView
android:id="#+id/friendChatContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:textSize="16dp"
android:textColor="#android:color/white"
android:text="haloooo"
android:background="#color/starbuck"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/friendChatContainer"
android:paddingTop="20dp"
android:orientation="horizontal"
android:gravity="right"
android:paddingRight="10dp"
android:id="#+id/myChat"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:textSize="16dp"
android:textColor="#android:color/white"
android:text="haloooo"
android:background="#color/starbuck"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_below="#+id/myChat"
android:gravity="bottom">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="Write a message"
android:inputType="text"
android:paddingHorizontal="10dp"
android:text="" />
<ImageButton
android:id="#+id/sendChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:padding="20dp"
android:layout_marginHorizontal="10dp"
android:background="#drawable/send"/>
</LinearLayout>
</RelativeLayout>
Please avoid if any resource name is changed

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" />

fixed width LinearLayout

I'm trying to get two linear layout side by side and put content inside of it.
I want the two linear layouts to be side by side, but the left one should take about 3/4 of the screen and the right one the rest of it.
This is my code: https://gitlab.com/snippets/1682040
But the two linear layouts always change the width and the height depending on the content.
How can I have two linear layouts side by side with fixed width and height?
A better solution with RelativeLayout is always welcome.
This is the result:
Use layout_weight property of LinearLayout and android:weightSum property for parent layout.
Do Something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="15dp"
android:weightSum="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".75" // For First layout to 3/4
android:background="#color/colorPrimary"
android:gravity="left|center"
android:orientation="vertical">
//First Layout content Here
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".25" // For Second layout to rest of screen
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical">
//Second Layout Content Here
</LinearLayout>
</LinearLayout>
I know that you asked for a solution with the LinearLayout but I suggest you to solve this problem with the ConstraintLayout. You will get incredible performance improvements without nested view.
In this sample I added a vertical guideline at 75% of from the left of the screen. I have only to remove the nested LinearLayouts and add the constraints to your views!
Try it out!
<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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="628dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorPrimary"
android:gravity="left|center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/repository_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:textColor="#color/blue"
android:textSize="20dp" />
<TextView
android:id="#+id/repository_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:text="AAAAA"
android:textColor="#color/gray"
android:textSize="15dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_camera" />
<TextView
android:id="#+id/repository_fork_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="#color/orange"
android:textSize="20dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:src="#drawable/ic_menu_camera" />
<TextView
android:id="#+id/repository_star_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="#color/orange"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="0dp"
android:layout_height="628dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/user_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:textColor="#color/blue" />
<TextView
android:id="#+id/first_last_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mock Name"
android:textColor="#color/lightGray" />
</LinearLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
Try this give Your first LinearLayout android:layout_weight=".75" so it can take 3/4 space in screen
than assign android:layout_weight="0.25" to Your second LinearLayout so it can take remaining space
<?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="horizontal"
android:padding="15dp"
android:weightSum="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.75"
android:background="#color/colorPrimary"
android:orientation="vertical">
<TextView
android:id="#+id/repository_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:textColor="#color/colorBlue"
android:textSize="20dp" />
<TextView
android:id="#+id/repository_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:text="AAAAA"
android:textColor="#color/colorGreen"
android:textSize="15dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_camera" />
<TextView
android:id="#+id/repository_fork_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="#color/colorPrimary"
android:textSize="20dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:src="#drawable/ic_menu_camera" />
<TextView
android:id="#+id/repository_star_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="#color/colorPrimary"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/user_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:textColor="#color/colorBlue" />
<TextView
android:id="#+id/first_last_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mock Name"
android:textColor="#color/colorRed" />
</LinearLayout>
</LinearLayout>
Seems like both of the weights are set to "1". Have you tried ".5"?
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorPrimary"
android:layout_weight="0.50"
android:gravity="left|center">
Try this I have added weight
<?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="horizontal"
android:padding="15dp"
android:weightSum="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".75"
android:background="#color/colorPrimary"
android:gravity="left|center"
android:orientation="vertical">
<TextView
android:id="#+id/repository_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:textColor="#color/blue"
android:textSize="20dp" />
<TextView
android:id="#+id/repository_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:text="AAAAA"
android:textColor="#color/gray"
android:textSize="15dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_camera" />
<TextView
android:id="#+id/repository_fork_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="#color/orange"
android:textSize="20dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:src="#drawable/ic_menu_camera" />
<TextView
android:id="#+id/repository_star_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="#color/orange"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".25"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/user_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:textColor="#color/blue" />
<TextView
android:id="#+id/first_last_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mock Name"
android:textColor="#color/lightGray" />
</LinearLayout>
</LinearLayout>
First remove weightSum attribute from parent layout.
If you want your first layout to be 3/4 of you should put weight 0.75 and 0.25 (1/4) for the other one like here:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorPrimary"
android:layout_weight=".75"
android:layout_gravity="left"
android:gravity="left|center">
<TextView
android:id="#+id/repository_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:textColor="#color/blue"
android:textSize="20dp"/>
<TextView
android:id="#+id/repository_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="2"
android:ellipsize="end"
android:text="AAAAA"
android:textColor="#color/gray"
android:textSize="15dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_camera"/>
<TextView
android:id="#+id/repository_fork_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="#color/orange"
android:textSize="20dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_camera"
android:layout_marginLeft="15dp"/>
<TextView
android:id="#+id/repository_star_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
android:textColor="#color/orange"
android:textSize="20dp"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorAccent"
android:layout_weight=".25"
android:gravity="center">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/user_image"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:textColor="#color/blue"/>
<TextView
android:id="#+id/first_last_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mock Name"
android:textColor="#color/lightGray"/>
</LinearLayout>
try this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".75"
android:orientation="vertical"
android:visibility="visible">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#000"
android:textSize="16dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_txt"
android:gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".25"
android:orientation="vertical"
android:visibility="visible">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#000"
android:textSize="16dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_txt"
android:gravity="center"
/>
</LinearLayout>
</LinearLayout>
Change the weight sum to 4 in the parent layout and add weight as 3 for child linear layout so it can take 3/4 space and 1 to child linear layout so that it will take the remaining space.
<?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="horizontal"
android:padding="15dp"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#color/colorPrimary"
android:gravity="left|center"
android:orientation="vertical">
//Your contents
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical">
//Your contents
</LinearLayout>
</LinearLayout>

Categories

Resources