Currently, I am trying to create a UI for my app and came across a design of the Amazon Android app. I was very interested in the following:
My question now is: What does this UI element consist of? I would have thought of two CardViews within one Cardview. This is my current approach:
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvAddress"
android:layout_width="0dp"
android:layout_height="100dp"
app:strokeColor="#color/color_user_address_border"
app:strokeWidth="1dp"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toStartOf="#+id/margin_right"
app:layout_constraintStart_toStartOf="#+id/margin_left"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="50dp"
app:strokeWidth="0dp"
app:cardCornerRadius="0dp" />
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="50dp"
app:strokeWidth="0dp"
app:cardCornerRadius="0dp" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
It's pretty close, but my border is much thicker and looks kinda ugly.
Edit: Finished XML Layout
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cvAddress"
android:layout_width="0dp"
android:layout_height="152dp"
android:layout_marginTop="8dp"
android:background="#drawable/rounded_background_address"
app:layout_constraintEnd_toStartOf="#+id/margin_right"
app:layout_constraintStart_toStartOf="#+id/margin_left"
app:layout_constraintTop_toBottomOf="#+id/tvUserDataAddressHeadline">
<TextView
android:id="#+id/tvAddAddress"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Add new Address"
android:textColor="#color/color_text_dark"
android:textSize="16sp"
app:drawableEndCompat="#drawable/ic_arrow_big"
app:drawableTint="#color/color_text_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/color_divider"
app:layout_constraintBottom_toBottomOf="#+id/tvAddAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAddAddress" />
<TextView
android:id="#+id/tvShippingAddress"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Shipping Addresses"
android:textColor="#color/color_text_dark"
android:textSize="16sp"
app:drawableEndCompat="#drawable/ic_arrow_big"
app:drawableTint="#color/color_text_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAddAddress" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/color_divider"
app:layout_constraintBottom_toBottomOf="#+id/tvShippingAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvShippingAddress" />
<TextView
android:id="#+id/tvBillingAddress"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Billing Addresses"
android:textColor="#color/color_text_dark"
android:textSize="16sp"
app:drawableEndCompat="#drawable/ic_arrow_big"
app:drawableTint="#color/color_text_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvShippingAddress" />
</androidx.constraintlayout.widget.ConstraintLayout>
Pictures
Clicking first item
Clicking second item
Clicking third item
Your border is "much thicker" because you have two cardviews there I think.
I would not make the internal items a Cardview. You can have the rounded external border with a CardView or with any ViewGroup and a background with a rounded corner.
The items inside are/could/should be normal TextViews with a "drawable end" set to the disclosure triangle/arrow/caret (you name it).
You can make each item a ConstraintLayout and have two separate widgets as well (a TextView and an Image View) for much granular control.
UPDATE
Based on your final design, I made some changes.
Here's how it looks in the editor:
The key to not use the uneeded CardView is to give the replacing layout (a ConstraintLayout) a background with rounded corners.
To do so, create a Drawable (in the res/drawable folder), I called mine for this example "rounded_background.xml".
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1dp" android:color="#android:color/darker_gray" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
Tweak at will.
I then, modified your Layout to be a bit "flatter".
Because you want each individual item to be clickable and have its own "ripple boundaries" You can wrap the Text/Images in their own ConstraintLayout.
So Version 1, looks like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/rounded_background">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayoutGroupAndRippleEffectOne"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="Meine Bestellungen"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="16dp"
android:contentDescription="#null"
android:src="#android:drawable/ic_input_add"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView"
app:tint="#android:color/darker_gray" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/vBorderOne"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/constraintLayoutGroupAndRippleEffectOne" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayoutGroupAndRippleEffectTwo"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/vBorderOne">
<TextView
android:id="#+id/textViewTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="Spar-Abo-Artikel"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="16dp"
android:contentDescription="#null"
android:src="#android:drawable/ic_input_add"
app:layout_constraintBottom_toBottomOf="#+id/textViewTwo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textViewTwo"
app:tint="#android:color/darker_gray" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/vBorderTwo"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/constraintLayoutGroupAndRippleEffectTwo" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayoutGroupAndRippleEffectThree"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/vBorderTwo">
<TextView
android:id="#+id/textViewThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="Adressen"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="16dp"
android:contentDescription="#null"
android:src="#android:drawable/ic_input_add"
app:layout_constraintBottom_toBottomOf="#+id/textViewThree"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textViewThree"
app:tint="#android:color/darker_gray" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
(NOTE: I replaced all your local stuff with colors/icons from "android").
The hierarchy here is:
CL
CL1
TV + IV
DIVIDER
CL2
TV + IV
DIVIDER
CL3
TV + IV
CL
If you didn't need to modify the ImageView (or provide special click to the actual image view that is different from the actual text view... you could flatten this even further into something like
CL
TV1
DIVIDER
TV2
DIVIDER
TV3
CL
It would be more like:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/rounded_background">
<TextView
android:id="#+id/textViewOne"
android:foreground="?attr/selectableItemBackground"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Meine Bestellungen"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:drawableTint="#android:color/darker_gray"
app:drawableEndCompat="#android:drawable/ic_input_add" />
<View
android:id="#+id/vBorderOne"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/textViewOne" />
<TextView
android:id="#+id/textViewTwo"
android:foreground="?attr/selectableItemBackground"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Spar-Abo-Artikel"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/vBorderOne"
app:drawableTint="#android:color/darker_gray"
app:drawableEndCompat="#android:drawable/ic_input_add" />
<View
android:id="#+id/vBorderTwo"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/textViewTwo" />
<TextView
android:id="#+id/textViewThree"
android:foreground="?attr/selectableItemBackground"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Adressen"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/vBorderTwo"
app:drawableTint="#android:color/darker_gray"
app:drawableEndCompat="#android:drawable/ic_input_add" />
</androidx.constraintlayout.widget.ConstraintLayout>
Which looks like:
I didn't play with margins/paddings/etc. but you get the idea.
This is "better" in the sense that you only have a bunch of flat views.
Honestly, the TextView image (drawableEnd/Start/Top/Bottom) is a lot less customizable than a regular ImageView but if all you need is a icon, it can work for you.
I hope that helps.
Related
I'm doing some design in constraintlayout that is give me a pain. I have an image at the left, two text in a vertical orientation that is align at the end of this image and I have other constraints at right with an image and text.
If I type a long text in the two text that i have in a vertical orientation the text cover the constraint that I have at right of my view. That I want to do is if this text is long can't cover this constraint, have to expand to other line.
This is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="8dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_error" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textColor="#color/app_primary_medium"
android:textSize="15sp"
app:layout_constraintStart_toEndOf="#+id/image_slider"
app:layout_constraintTop_toTopOf="#+id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraint_undo_button"
android:layout_width="31dp"
android:layout_height="match_parent"
android:layout_marginEnd="24dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="14dp"
android:layout_height="16dp"
android:src="#drawable/icon_loop"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/icon_loop"
tools:visibility="visible" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="Ree"
android:textColor="#color/app_primary_medium"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_undo" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I recommend you use only one parent view and read about Guideline view, Constraints Chains and Barriers. So a possible solution could be the next:
And the code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<!-- In the parent constraint group add your custom background -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_80_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="#id/guideline_80_percent"
app:layout_constraintStart_toEndOf="#id/image_slider"
app:layout_constraintTop_toTopOf="#id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="#id/image_slider"
app:layout_constraintEnd_toEndOf="#id/txt_title_animation_native_cart"
app:layout_constraintStart_toStartOf="#id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t adfadf adflkjadfkj adlkjadflk" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="16dp"
android:layout_height="16dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#id/text_undo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guideline_80_percent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/text_undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/image_undo"
app:layout_constraintStart_toStartOf="#id/image_undo"
app:layout_constraintTop_toBottomOf="#id/image_undo"
tools:text="Ree" />
</androidx.constraintlayout.widget.ConstraintLayout>
First, you don't need two nested constraint layouts, one is enough.
Then just set the text with endToStartoOf image_undo and set the width to 0dp instead of wrap_content
Just do this:
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
app:layout_constraintEnd_toStartOf="#+id/constraint_undo_button"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />
I have a ConstraintLayout with 3 views inside.
<?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/localPeerContainer"
android:layout_width="120dp"
android:layout_height="180dp"
android:background="#color/colorPrimary">
<TextView
android:id="#+id/localPeerCircleText"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_gravity="center"
android:background="#drawable/circle_white"
android:padding="16dp"
android:text="UU"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#color/colorWhite"
app:autoSizeMaxTextSize="32sp"
app:autoSizeMinTextSize="12sp"
app:autoSizeStepGranularity="2sp"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="#+id/localPeerSurfaceView"
app:layout_constraintEnd_toEndOf="#+id/localPeerSurfaceView"
app:layout_constraintStart_toStartOf="#+id/localPeerSurfaceView"
app:layout_constraintTop_toTopOf="#+id/localPeerSurfaceView" />
<org.webrtc.SurfaceViewRenderer
android:id="#+id/localPeerSurfaceView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/localPeerHeader" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/localPeerHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/localPeerSpotLight"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="16dp"
android:background="#drawable/circle_accent"
android:padding="3dp"
android:src="#drawable/ic_spot_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#color/colorWhite" />
<ImageView
android:id="#+id/localPeerExitSpotLight"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="end"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:background="#drawable/circle_accent"
android:padding="3dp"
android:src="#drawable/ic_close_24dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
When i run the application, i clearly see the two ImageViews. But after 2-3 seconds that the SurfaceViewRenderer shows my camera preview, the SurfaceViewRenderer is on the Front of every view. How can i prevent that from happening because i want the ImageViews to be on front always!
Use 0dp for the height of SurfaceViewRenderer, currently, its height is set to match_parent. It's taking the whole screen.
I am trying to achieve the below in my xml but currently when I my textView does not wrap the text as exepcted but instead pushes the the text down and the imageButton far. I am wondering how can I achieve this having in mind the texts can be bigger and need to wrap and fit in nicely without pushing the button away? below is my code sample
<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">
<ImageView
android:id="#+id/hospitalButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
app:image="#drawable/hospital_btn"
app:layout_constraintEnd_toStartOf="#+id/guidelineCenterButton"
app:layout_constraintHorizontal_bias="0.5"
app:startsChecked="true" />
<View
android:id="#+id/buttonDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="32dp"
android:layout_marginTop="42dp"
android:background="#color/white_"
app:layout_constraintBottom_toTopOf="#+id/hospitalGroup"
app:layout_constraintTop_toBottomOf="#id/hospitalButton" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/hospitalGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#id/buttonDivider">
<TextView
android:id="#+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/id_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/midTextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Get ID" />
<TextView
android:id="#+id/midTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/mid_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/submitButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageButton
android:id="#+id/submitButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="32dp"
android:background="#drawable/submitbackground"
android:src="#drawable/submit_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/animation"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="16dp"
android:elevation="3dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="#+id/submitButton"
app:layout_constraintEnd_toEndOf="#+id/submitButton"
app:layout_constraintStart_toStartOf="#+id/submitButton"
app:layout_constraintTop_toTopOf="#+id/submitButton"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/spinner" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/submitGroupDivider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/hospitalGroup" />
</androidx.constraintlayout.widget.ConstraintLayout>
From your description it's not clear what you wanted to do but here is the solution you can apply to make your view as a picture you uploaded.
Just apply height & width of midTextView to 0dp
Note: don't know what your idTextView will do it's not clear as per your layout structure.
<TextView
android:id="#+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="#string/id_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Get ID" />
<TextView
android:id="#+id/midTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center_vertical"
android:layout_marginEnd="30dp"
android:text="#string/mid_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/submitButton"
app:layout_constraintStart_toEndOf="#id/idTextView"
app:layout_constraintTop_toTopOf="parent"
/>
I tried to add on the top right corner of my app a notificationBar which shows how many msgs are in the inbox.
Later on I want to add a custom drawable to my background, for now I added only a black color as bg to reach my goal, as you can see on the left side of my image: This is a TextView constraint to the END of my ImageView. I want my Background to go behind the imageview BUT not to go outside of its dimensions neither to start before the imageview (you would see the top left and bottom right corner of the textview - rectangle
I'm stuck on that with the following Code:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black"
app:layout_constraintStart_toEndOf="#+id/imageView"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 MSGs"
android:textColor="#color/white"
android:paddingStart="#dimen/default_padding"
android:padding="#dimen/small_padding"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/ic_contact"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How can I fix this?
If no other view is constrained to the TextView you can simply apply a negative "x" translation to the TextView: android:translationX="-15dp". I chose -15dp but it could be another negative value that works for your layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/msg_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:padding="#dimen/small_padding"
android:paddingStart="#dimen/default_padding"
android:text="0 MSGs"
android:textColor="#color/white"
android:translationX="-15dp"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
android:background="#drawable/ic_contact"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
SebastienRieu's solution should work but you may need to add a margin to the start of the TextView to hide its top-left and bottom-left corners.
change constraint of textview to start with imageView and add text alignment to textview
<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/msg_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/black"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0 MSGs"
android:textColor="#color/white"
android:paddingStart="#dimen/default_padding"
android:padding="#dimen/default_padding"
android:textAlignment="textEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/ic_contact" />
</androidx.constraintlayout.widget.ConstraintLayout>
Constraint layout works as a frame layout. For such designs, we can use guidelines. Guidelines work greats for such a view .
I have made a few changes in your layout, I hope this can be helpful.
<?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/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text_msg_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black_primary"
android:paddingStart="#dimen/space_28"
android:text="0 MSGs"
android:textAlignment="textEnd"
android:textColor="#color/white_color"
android:layout_marginEnd="#dimen/space_28"
android:paddingEnd="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
android:layout_margin="#dimen/space_28"
android:background="#drawable/ic_contact"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
Below link, you can use to get more info on guidelines https://constraintlayout.com/basics/guidelines.html
I have a strange problem where the text in a TextView is not being displayed if it's wrapping to a new line.
This screenshot shows my issue:
The bold text is causing a word to wrap to the next line but it's not being shown. This is what it looks like without the bold:
And this is what it looks like if I force two lines using android:lines="2":
This is the code I'm using:
<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:breakStrategy="simple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've tried setting the width to wrap_content and changing the padding and margins but nothing works.
I should mention this layout is a row in a RecyclerView if that makes a difference.
<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:textStyle="bold"
android:text="Episode 1010 Christina Hendericks"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/episode_row_item_title_thumbnail"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
android:layout_marginRight="8dp"/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
android:text="Yesterday"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="01:02:24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_download"
android:layout_marginTop="4dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try using the above layout with correct drawables