I would like to align two of my TextViews based on the Imageview. How would I be able to achieve that gravity:center effect on these TextViews responsively? I have tried making the adjusting the margins but then it doesn't work properly since the different phone will have different resolutions and screen sizes so it appears to be distorted on other phones.
Here is what I am trying to do:
See the Image
Code I tried (Constraint Layout is in AndroidX) :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/Constraintlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/photo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/photo" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="58dp"
tools:layout_editor_absoluteY="420dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="128dp"
tools:layout_editor_absoluteY="420dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="226dp"
tools:layout_editor_absoluteY="420dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="296dp"
tools:layout_editor_absoluteY="420dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can try this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/Constraintlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/avatars" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/avatars" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline5"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="#id/imageView1"
app:layout_constraintGuide_percent="0.25"
app:layout_constraintStart_toStartOf="#id/imageView1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="#id/imageView2"
app:layout_constraintGuide_percent="0.75"
app:layout_constraintStart_toStartOf="#id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Try this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/Constraintlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/photo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/photo" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintStart_toStartOf="#id/imageView1"
app:layout_constraintTop_toBottomOf="#id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#id/imageView1"
app:layout_constraintStart_toEndOf="#id/textView1"
app:layout_constraintTop_toBottomOf="#id/imageView1" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#id/textView4"
app:layout_constraintStart_toStartOf="#id/imageView2"
app:layout_constraintTop_toBottomOf="#id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#id/imageView2"
app:layout_constraintStart_toEndOf="#id/textView3"
app:layout_constraintTop_toBottomOf="#id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>
You should try with Linear layout like this:
<?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="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="center"
android:padding="5dp"
android:src="#drawable/ic_person_pin"
android:tint="#color/colorPrimaryDark" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="TextView"
android:textColor="#000"
android:textSize="12sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textColor="#000"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="center"
android:padding="5dp"
android:src="#drawable/ic_person_pin"
android:tint="#color/colorPrimaryDark" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#000"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#000"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
This a xml code
Related
I am trying to convert this layout to ConstrainLayout ,relativeLayout1 layout_height must be 60dp,how do I convert this layout to ConstraintLayout?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/imageView1"
android:orientation="vertical">
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/imageView2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView1"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintVertical_bias="0.3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView1"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintVertical_bias="0.74" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textview2"
app:layout_constraintTop_toTopOf="parent">
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is one possible conversion. Here are a few notes about this conversion:
Setting the size of the ImageView to 60dp then constraining things to that effectively sets the height of the "row" to 60dp. If the text in the text views is long (or large font) it can still overflow the row. That was true with the relative layout too.
Setting the vertical chain style for text views 2 and 3 to "packed" mimics what the internal linear layout does. If you just want them to be aligned to the top of the image then the chain is not necessary.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1"
/>
<TextView
android:id="#+id/textview2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="#id/imageView1"
app:layout_constraintBottom_toTopOf="#id/textView3"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toStartOf="#id/imageView2"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toBottomOf="#id/textview2"
app:layout_constraintBottom_toBottomOf="#id/imageView1"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toStartOf="#id/imageView2"
app:layout_constraintHorizontal_bias="0.0"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="1"
/>
<TextView
android:id="#+id/textview4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="#id/imageView2"
app:layout_constraintBottom_toTopOf="#id/textView5"
app:layout_constraintStart_toEndOf="#id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toBottomOf="#id/textview4"
app:layout_constraintBottom_toBottomOf="#id/imageView2"
app:layout_constraintStart_toEndOf="#id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I would like to have a layout in which I put other layouts (e.g. constrained layout) and those layouts should have rims and colored areas. So I guess I have to change the background but I do not know how. Here is a screenshot of my current fragment and I highlited the things that I would like to add:
Basically it should look somehow similar to Desired layout.
Here is the XML-layout file that I have
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_marginTop="#dimen/_28sdp"
android:layout_width="#dimen/_220sdp"
android:layout_height="#dimen/_240sdp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.93"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.75">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_30sdp"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_190sdp"
android:orientation="vertical"></LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_20sdp"
android:orientation="horizontal"></LinearLayout>
</LinearLayout>
<Button
android:id="#+id/navigation_button_language"
android:layout_width="#dimen/_31sdp"
android:layout_height="#dimen/_31sdp"
android:background="#drawable/navigation_buttom"
android:text="Dummy"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="#dimen/_9ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.02" />
<TextView
android:id="#+id/textView_language"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_3ssp"
android:text="Dummy"
android:textColor="#121212"
android:textSize="#dimen/_9ssp"
app:layout_constraintEnd_toEndOf="#+id/navigation_button_language"
app:layout_constraintStart_toStartOf="#+id/navigation_button_language"
app:layout_constraintTop_toBottomOf="#+id/navigation_button_language" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="#dimen/_240sdp"
app:layout_constraintBottom_toBottomOf="#+id/linearLayout"
app:layout_constraintEnd_toStartOf="#+id/linearLayout"
android:layout_marginLeft="#dimen/_6sdp"
android:layout_marginRight="#dimen/_6sdp"
android:background="#color/colorGrey"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/linearLayout"
app:layout_constraintVertical_bias="0.447">
<ScrollView
android:layout_width="47dp"
android:layout_height="44dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test Name"
android:textColor="#000000"
android:textSize="#dimen/_14ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_QuantityText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_1sdp"
android:text="Quantity: "
android:textSize="#dimen/_9ssp"
app:layout_constraintEnd_toEndOf="#+id/textView_Name"
app:layout_constraintStart_toStartOf="#+id/textView_Name"
app:layout_constraintTop_toBottomOf="#+id/textView_Name" />
<TextView
android:id="#+id/textView_QuantityNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textSize="#dimen/_9ssp"
app:layout_constraintBottom_toBottomOf="#+id/textView_QuantityText"
app:layout_constraintStart_toEndOf="#+id/textView_QuantityText"
app:layout_constraintTop_toTopOf="#+id/textView_QuantityText" />
<TextView
android:id="#+id/textView_TableNumberText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_1sdp"
android:text="Table: "
android:textSize="#dimen/_9ssp"
app:layout_constraintEnd_toEndOf="#+id/textView_QuantityText"
app:layout_constraintStart_toStartOf="#+id/textView_QuantityText"
app:layout_constraintTop_toBottomOf="#+id/textView_QuantityText" />
<TextView
android:id="#+id/textView_TableNumberValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:textSize="#dimen/_9ssp"
app:layout_constraintBottom_toBottomOf="#+id/textView_TableNumberText"
app:layout_constraintStart_toEndOf="#+id/textView_TableNumberText"
app:layout_constraintTop_toTopOf="#+id/textView_TableNumberText" />
<ImageButton
android:id="#+id/imageButton_message"
android:layout_width="#dimen/_25sdp"
android:layout_height="#dimen/_25sdp"
android:layout_marginTop="8dp"
android:background="#drawable/ic_baseline_markunread_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.221"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView_TableNumberText" />
<ImageButton
android:id="#+id/imageButton_video"
android:layout_width="#dimen/_25sdp"
android:layout_height="#dimen/_25sdp"
android:background="#drawable/ic_baseline_videocam_24"
app:layout_constraintBottom_toBottomOf="#+id/imageButton_message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.827"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageButton_message" />
<TextView
android:id="#+id/textView_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_1sdp"
android:text="Message"
app:layout_constraintEnd_toEndOf="#+id/imageButton_message"
app:layout_constraintStart_toStartOf="#+id/imageButton_message"
app:layout_constraintTop_toBottomOf="#+id/imageButton_message" />
<TextView
android:id="#+id/textView_Video"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Video"
android:layout_marginTop="#dimen/_1sdp"
app:layout_constraintEnd_toEndOf="#+id/imageButton_video"
app:layout_constraintStart_toStartOf="#+id/imageButton_video"
app:layout_constraintTop_toBottomOf="#+id/imageButton_video" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Any idea how I can do that? I'd highly appreciate every comment and would be thankful for your help.
Reminder: Does nobody have any idea how I can do that? I have seen such layouts quite often so it should not be extremely unsual what I want to do.
Answer:
Make a drawable -> rim.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="#dimen/space_lg"
android:height="#dimen/space_lg"
android:color="#color/#fff"
android:dashGap="#dimen/space_sm" />
</shape>
and in the layout just use:
android:background="#drawable/rim"
drawable -> rim.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<stroke
android:width="3dp"
android:color="#0FECFF"/>
</shape>
Then, following your desired layout (in the picture), I made a simplified corresponding layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/outerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.35" />
<View
android:id="#+id/v_left_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#drawable/rim"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Left Side"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toTopOf="#id/v_left_background" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/ll_navbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/holo_green_dark"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toBottomOf="#id/textView_Name">
<ImageView
android:id="#+id/iv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toStartOf="#id/iv_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<ImageView
android:id="#+id/iv_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toStartOf="#id/iv_3"
app:layout_constraintStart_toEndOf="#id/iv_1"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<ImageView
android:id="#+id/iv_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iv_2"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<TextView
android:id="#+id/tv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Order sheet"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_1"
app:layout_constraintStart_toStartOf="#id/iv_1"
app:layout_constraintTop_toBottomOf="#id/iv_1" />
<TextView
android:id="#+id/tv_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Order"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_2"
app:layout_constraintStart_toStartOf="#id/iv_2"
app:layout_constraintTop_toBottomOf="#id/iv_2" />
<TextView
android:id="#+id/tv_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Arrange products"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_3"
app:layout_constraintStart_toStartOf="#id/iv_3"
app:layout_constraintTop_toBottomOf="#id/iv_3" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintBottom_toTopOf="#id/button_okay"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toBottomOf="#id/ll_navbar" />
<Button
android:id="#+id/button_okay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/holo_green_light"
android:text="Okay"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#id/v_left_background"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background" />
<View
android:id="#+id/v_right_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#drawable/rim"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The screen then looks somewhat like this:
Constraint-wise:
(You can check the previews in the xml's design tab, I hope the constraints in the code are verbose enough for you to be able to follow)
UPDATE
Code without guideline:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/outerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<View
android:id="#+id/v_left_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#drawable/rim"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.35" />
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Left Side"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toTopOf="#id/v_left_background" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/ll_navbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/holo_green_dark"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toBottomOf="#id/textView_Name">
<ImageView
android:id="#+id/iv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toStartOf="#id/iv_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<ImageView
android:id="#+id/iv_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toStartOf="#id/iv_3"
app:layout_constraintStart_toEndOf="#id/iv_1"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<ImageView
android:id="#+id/iv_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_delete"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iv_2"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
<TextView
android:id="#+id/tv_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Order sheet"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_1"
app:layout_constraintStart_toStartOf="#id/iv_1"
app:layout_constraintTop_toBottomOf="#id/iv_1" />
<TextView
android:id="#+id/tv_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Order"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_2"
app:layout_constraintStart_toStartOf="#id/iv_2"
app:layout_constraintTop_toBottomOf="#id/iv_2" />
<TextView
android:id="#+id/tv_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Arrange products"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#id/iv_3"
app:layout_constraintStart_toStartOf="#id/iv_3"
app:layout_constraintTop_toBottomOf="#id/iv_3" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintBottom_toTopOf="#id/button_okay"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background"
app:layout_constraintTop_toBottomOf="#id/ll_navbar" />
<Button
android:id="#+id/button_okay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/holo_green_light"
android:text="Okay"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#id/v_left_background"
app:layout_constraintEnd_toEndOf="#id/v_left_background"
app:layout_constraintStart_toStartOf="#id/v_left_background" />
<View
android:id="#+id/v_right_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#drawable/rim"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="1"
app:layout_constraintStart_toEndOf="#id/v_left_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.6" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have the following XML layout -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/shopping_cart_holder_root_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/very_light_grey"
android:paddingBottom="#dimen/marketplace_15dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:background="#drawable/shopping_cart_image_border"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/activity_checkout_cart_imageView"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/shopping_cart_holder_item_quantity_tv"
android:layout_width="35dp"
android:layout_height="25dp"
android:layout_gravity="end"
android:alpha="0.6"
android:background="#color/color_black"
android:elevation="1dp"
android:gravity="center"
android:maxLines="1"
android:textAlignment="center"
android:textColor="#color/white"
android:textStyle="bold"
app:autoSizeMaxTextSize="16sp"
app:autoSizeMinTextSize="10sp"
app:autoSizeStepGranularity="2sp"
app:layout_constraintStart_toEndOf="#+id/activity_checkout_cart_imageView"
app:layout_constraintTop_toTopOf="parent"
tools:text="1" />
</FrameLayout>
<LinearLayout
android:id="#+id/shopping_cart_holder_infobox_viewgroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:layout_marginTop="#dimen/marketplace_15dp"
android:layout_marginEnd="0dp"
android:orientation="vertical">
<TextView
android:id="#+id/shopping_cart_holder_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="#font/noto_sans"
android:lines="1"
android:textSize="16sp"
android:textStyle="bold"
app:autoSizeMaxTextSize="16sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeStepGranularity="2sp"
tools:text="Unavailable Name" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/marketplace_cart_holder_by" />
<TextView
android:id="#+id/shopping_cart_holder_vendor_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:fontFamily="#font/noto_sans"
android:text="#string/activity_shopping_cart_vendor_name" />
</LinearLayout>
<TextView
android:id="#+id/shopping_cart_holder_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/noto_sans"
android:text="#string/marketplace_cart_holder_0_price"
android:textSize="16sp"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/marketplace_cart_holder_attribute_recyclerview"
tools:itemCount="2"
android:orientation="vertical"
tools:listitem="#layout/marketplace_cart_attribute_holder"
tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/shopping_cart_holder_quantity_viewgroup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_marginTop="#dimen/marketplace_15dp"
android:orientation="horizontal"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/shopping_cart_holder_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/noto_sans"
android:text="#string/activity_shopping_cart_qty"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="#+id/shopping_cart_holder_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/shopping_cart_holder_quantity_picker_viewgroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/shopping_cart_holder_delete"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_qty"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/shopping_cart_holder_imgMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/minus"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/shopping_cart_holder_product_quantity_picked_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:text="#string/shopping_cart_holder_0"
android:textColor="#android:color/black"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#id/shopping_cart_holder_imgMinus"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_imgMinus"
app:layout_constraintTop_toTopOf="#+id/shopping_cart_holder_imgMinus" />
<ImageView
android:id="#+id/shopping_cart_holder_imgPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:src="#drawable/plus"
app:layout_constraintStart_toEndOf="#+id/shopping_cart_holder_product_quantity_picked_tv"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/shopping_cart_holder_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/noto_sans"
android:src="#drawable/remove3x"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have inside this holder a ConstraitLayout that is disabled from view in a certain stage in my app.
As you can see, once I disable the ConstraintLayout from sight the inner RecyclerView gets cut in half.
here is the layout of the inner RV -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/very_light_grey"
android:orientation="horizontal">
<TextView
android:id="#+id/marketplace_cart_attribute_holder_attribute_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:textSize="16sp"
tools:text="Attribute Name:" />
<TextView
android:id="#+id/marketplace_cart_attribute_holder_attribute_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:textSize="16sp"
tools:text="Value" />
</LinearLayout>
What am I missing the causes the RV to get cut in half that does not happen when I have the bottom layout visible?
Add margin bottom -
android:layout_marginBottom="15dp"
to your LinearLayout to avoid the issue for a number of different screen sizes:
<LinearLayout
android:id="#+id/shopping_cart_holder_infobox_viewgroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="7dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:layout_marginEnd="0dp"
android:orientation="vertical">
Solved - I have a redundant marginTop in my LinearLayout.
I am developing android app and I want to show full texts on the left side and imageview on the right side but textviews not fitting all screen and imageview not showing at all
below my xml where I have implemented view logic with constrainlayout
below my xml where I have implemented view logic with constrainlayout
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55" />
<ImageView
android:id="#+id/postImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/userId"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="25dp"
android:layout_marginLeft="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/postTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Secondary"
app:layout_constraintEnd_toStartOf="#id/postImage"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/userId" />
<TextView
android:id="#+id/postTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTitle" />
<TextView
android:id="#+id/postDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTime" />
</androidx.constraintlayout.widget.ConstraintLayout>
Use layout_constraintStart_toEndOf="#id/guideline" to your TextView. Check below Layout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55" />
<ImageView
android:id="#+id/postImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/userId"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginLeft="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/postTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Secondary"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/userId" />
<TextView
android:id="#+id/postTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintTop_toBottomOf="#id/postTitle" />
<TextView
android:id="#+id/postDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTime" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output:
With android:justificationMode="inter_word" to TextView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/userId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Placeholder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/postTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Secondary"
app:layout_constraintEnd_toStartOf="#id/postImage"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/userId" />
<TextView
android:id="#+id/postTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTitle" />
<TextView
android:id="#+id/postDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:text="Tertiary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/userId"
app:layout_constraintTop_toBottomOf="#id/postTime" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/postImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
I am using chained view in constraint layout. Now I want the intermediate space between two text views to be removed.As the buttons at the bottom are at distance. I am trying to move them from design layout but its not happening as well. How to do it.Following is my xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="23dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linearLayout2">-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="16dp"
android:layout_marginTop="70dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="32dp"
android:layout_marginTop="26dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<!-- </LinearLayout>-->
<!-- <LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/linearLayout"
>-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:layout_marginBottom="58dp"
android:layout_marginEnd="213dp"
android:layout_marginTop="58dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textViewHeader" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="67dp"
android:layout_marginStart="90dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="63dp"
android:layout_marginEnd="89dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4" />
<!-- </LinearLayout>-->
</android.support.constraint.ConstraintLayout>
At the bottom there are two text views,placed horizontally and there is space between them. Thanks much :)
To remove space between two chained view, simply add the following line to the first item in the chain:
app:layout_constraintHorizontal_chainStyle="packed"
To read more about chain styles:
Official Android documentation
Medium article
You have to add Guideline
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="23dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linearLayout2">-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="16dp"
android:layout_marginTop="70dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="32dp"
android:layout_marginTop="26dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<!-- </LinearLayout>-->
<!-- <LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/linearLayout"
>-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:layout_marginBottom="58dp"
android:layout_marginEnd="213dp"
android:layout_marginTop="58dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textViewHeader" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="67dp"
android:gravity="center"
app:layout_constraintEnd_toStartOf="#+id/guideline1"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="63dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline1" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<!-- </LinearLayout>-->
</android.support.constraint.ConstraintLayout>
About Guideline in ConstraintLayout:
Utility class representing a Guideline helper object for ConstraintLayout. Helper objects are not displayed on device (they are marked as View.GONE) and are only used for layout purposes. They only work within a ConstraintLayout. [...]
For more details, there is good documentation:
https://developer.android.com/reference/android/support/constraint/Guideline.html