How to make vertical line fit with cardview? - android

i want to ask help for how to add vertical line in left side of cardview?
Current result
Expected result
This is the code
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/cvRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:cardBackgroundColor="#color/lightPink"
app:cardCornerRadius="#dimen/spacing_x">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/viewLine"
android:layout_width="#dimen/spacing"
android:layout_height="0dp"
android:background="#color/coral"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivLogo"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="#dimen/spacing_h"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/viewLine"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_error_rounded" />
<androidx.constraintlayout.widget.Group
android:id="#+id/groupDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="tvTitle,tvSubTitle" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tvTitle"
style="#style/TextParagraph2.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing"
android:layout_marginTop="#dimen/spacing_h"
android:layout_marginEnd="#dimen/spacing_x"
android:textColor="#color/darkGreyBlue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/ivLogo"
app:layout_constraintTop_toTopOf="parent"
tools:text="Sorry, it’s not you, It’s us." />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tvSubTitle"
style="#style/TextParagraph3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing"
android:layout_marginTop="#dimen/spacing_small_x"
android:layout_marginEnd="#dimen/spacing_x"
android:layout_marginBottom="#dimen/spacing_h"
android:textColor="#color/darkGreyBlue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/ivLogo"
app:layout_constraintTop_toBottomOf="#id/tvTitle"
tools:text="Internal server problem. Please try again later" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Is my code correct, if not please tell me ?
I already try many ways but still not find the match solution, If you know how fix this issue, please comment bellow, thanks
sorry for my bad english


I took your code and ran it. You are using AppCompat libraries, I'm not sure if that was the problem but I'm using androidx and it seems to work well. I just added some dummy properties for color and dimensions.
This is my result:
<?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/frameLayout9"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.maincontent.DummyFragment">
<androidx.cardview.widget.CardView
android:id="#+id/cvRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:cardBackgroundColor="#color/colorPrimary"
app:cardCornerRadius="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/viewLine"
android:layout_width="20dp"
android:layout_height="0dp"
android:background="#color/gradientEndNoDarkMode"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivLogo"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/viewLine"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_error_rounded" />
<androidx.constraintlayout.widget.Group
android:id="#+id/groupDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="tvTitle,tvSubTitle" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/ivLogo"
app:layout_constraintTop_toTopOf="parent"
tools:text="Sorry, it’s not you, It’s us." />
<TextView
android:id="#+id/tvSubTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/ivLogo"
app:layout_constraintTop_toBottomOf="#id/tvTitle"
tools:text="Internal server problem. Please try again later" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Hope it helps!

Related

Fragments ConstraintLayout is cut of in FrameLayout of activity

I have an activity LoginActivity and a fragment SignupSocialFragment.
The fragment is loaded inside of the FrameLayout inside the activity.
The problem is, that the LinearLayout (social_login_footer) in fragment which is constrained to the bottom of its parent is cut of when the fragment is displayed in the activity.
When I add padding/margin to the social_login_footerI can shift it into view but this does not work reliable.
Can anyone help with why the bottom part is cut of?
Shouldnt the ConstraintLayout match the height of its parent FrameLayout.
Code
activity_login.xml
<?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/login_constraint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBlack"
tools:context=".ui.login.LoginActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/login_constraint_2"
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_toTopOf="parent">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/login_lottie_animation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:lottie_autoPlay="true"
app:lottie_fileName="background_rotation.json"
app:lottie_loop="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/login_logo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.050000012"
app:srcCompat="#drawable/logo_white" />
<TextView
android:id="#+id/login_logo_subtitle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="#string/slogan"
android:textColor="#color/colorWhite"
android:textSize="16sp"
android:translationY="-10dp"
app:layout_constraintEnd_toEndOf="#+id/login_logo"
app:layout_constraintStart_toStartOf="#+id/login_logo"
app:layout_constraintTop_toBottomOf="#id/login_logo" />
<FrameLayout
android:id="#+id/login_content"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
app:layout_constraintTop_toBottomOf="#+id/login_logo_subtitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_login_social.xml
<?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"
android:background="#300000CC "
android:paddingStart="32dp"
android:paddingEnd="32dp"
tools:context=".ui.login.SignupSocialFragment">
<TextView
android:id="#+id/login_social_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/montserrat_light"
android:text="#string/login_subtitle"
android:textAlignment="center"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/social_login_email"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/social_login_email"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="#string/email_signup_btn"
app:layout_constraintBottom_toTopOf="#+id/social_login_facebook"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_social_text" />
<Button
android:id="#+id/social_login_facebook"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="8dp"
app:icon="#drawable/facebook_logo"
app:iconGravity="textStart"
app:layout_constraintBottom_toTopOf="#+id/social_login_google"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/social_login_email" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/social_login_google"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginTop="16dp"
android:background="#color/colorWhite"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/social_login_facebook">
<TextView
android:id="#+id/social_login_google_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/google_signup_btn"
android:textColor="#android:color/black"
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" />
<ImageView
android:id="#+id/social_login_google_logo"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="8dp"
android:src="#drawable/googleg_standard_color_18"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/social_login_google_txt"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/social_login_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="4dp"
android:text="#string/already_member"
android:textSize="16sp"
android:clickable="true"
android:focusable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/social_login_google" />
<LinearLayout
android:id="#+id/social_login_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:id="#+id/login_version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_version"
android:layout_marginEnd="4dp"
android:textSize="12sp" />
<TextView
android:id="#+id/login_policy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text="#string/privacy_link"
android:textSize="12sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Layout blueprints
Rendered on Nexus 5X API 28

After wasting some hours of my precious lifetime I have finally found it.
The problem is caused by the ImageViews android:adjustViewBounds="true" attribute.
After removing it everything works as expected.

Try adding android:fitsSystemWindows="true" to fragment_login_social.xml first child view

ConstraintLayout how to pack keeping the same ratios of distance

I have a layout that exceeds the view boundaries after applying all the margins I'm looking for. I read that applying a chain will make it keep the same ratios while packing all the elements inside the view boundaries.
<?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">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tut_first_img"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintTop_toBottomOf="#+id/img" />
</android.support.constraint.ConstraintLayout>
This is what's happening without margins after all margins applied it will exceed the view screen. How can I compact it while keeping the ratios? Also, how can I center all views in a vertical line?

Here is the code as per your use case, pls. check:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintBottom_toTopOf="#+id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg"
app:layout_constraintBottom_toTopOf="#+id/Texto2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/common_full_open_on_phone"
app:layout_constraintBottom_toTopOf="#+id/botao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img" />
</android.support.constraint.ConstraintLayout>
I hope it helps you, looking forward if any further help is required from my end.
Screenshot:

Try this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="dsadsadsadsadasd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="gggggg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/botao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="ggggggggggggggggggggg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Just copy paste it and let me know if it works.

I hope that the below mentioned code helps you in achieving your desired layout.
<?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"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintBottom_toTopOf="#id/texto1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/Texto2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/img" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/sym_def_app_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/texto1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/botao" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Screenshot (of the UI achieved by the above code):
The chain symbol (right most symbol; below the first view in the layout) can be used to toggle and thus apply different chain styles (as per your need), if you aren't familiar with ConstraintLayout.

Align layout at the bottom of the screen

I would like to have the same as on the enclosed image with the scanning information widgets (progressbar, textview and button) to stay at the bottom of the screen. However when I run my app they go at the top of the screen when the ListView is empty.
I tried a lot of methods described in other topics, but I still could not make it work.
Do you have some suggestions about which layout I should use in this case?
<?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">
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ListViewDevices">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="#string/scan_in_progress"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/pause_scan"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
</android.support.constraint.ConstraintLayout>

This is the way I did it an app I worked on previously. Using a RelativeLayout as the main shell we are able to position elements in any way inside it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="10"
android:background="#color/white"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="#color/grey_font">
<ProgressBar
android:id="#+id/progressBarDevice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="12dp" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_centerVertical="true"
android:layout_marginLeft="24dp"
android:layout_toRightOf="#id/progressBarDevice"
android:text="Scanning" />
<Button
android:layout_marginRight="16dp"
android:layout_centerVertical="true"
android:background="#color/orange_pay"
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:text="PAUSE" />
</RelativeLayout>
</RelativeLayout>

I would first simplify the layout by flattening it slightly. Removed the FrameLayout that holds the bottom Constraint.. Then made the listViewDevices constrain bottom to top of the bottom contraint layout (which i have called scanner)..
Looks correct in my layout editor.
<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">
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toTopOf="#id/scanner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/scanner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/ListViewDevices"
app:layout_constraintBottom_toBottomOf="parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="SCANNING FOR NEW DEVICES..."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="PAUSE"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>

I would rather prefer to add LinearLayout as root layout.
So when you scroll down or up then it will not scroll with your layout when its empty.
So when your listview is empty then also it will be in the bottom of the screen only.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ListViewDevices">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="#string/scan_in_progress"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/pause_scan"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</LinearLayout>
</FrameLayout>
</LinearLayout>

Thank you for your answers but none of them works. Sometimes it looks fine in Android Studio but when I test my application on a real phone the widgets are displayed on top of the screen.
If I will find a working solution I will post it here.

How to handle the following case for ConstraintLayout, when one of the targets of layout_constraint visibility changed to View.GONE

I want to avoid nested layout, to improve my app performance.
Hence, I tried the following
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="30dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/title_text_view"
android:background="#ffd600"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Title\nTitle"
app:layout_constraintEnd_toStartOf="#+id/pin_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/pin_text_view"
android:background="#ff0000"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Pin" />
<TextView
android:id="#+id/body_text_view"
android:background="#304ffe"
android:textColor="#ffffff"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/title_text_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="Body" />
</android.support.constraint.ConstraintLayout>
The output is as follow.
During runtime, I might change the visibility of title_text_view (yellow) to View.GONE.
But, it will looks like the follow. I don't wish pin_text_view (red) to be covered up by body_text_view (blue)
What I wish to have is
One of the way to overcome, is after changing the visibility of title_text_view (yellow) to View.GONE, I need use Java code to manual update app:layout_constraintTop_toBottomOf of body_text_view (blue) - Android : How to programatically set layout_constraintRight_toRightOf "parent"
From
<TextView
android:id="#+id/body_text_view"
...
app:layout_constraintTop_toBottomOf="#+id/title_text_view"
to
<TextView
android:id="#+id/body_text_view"
...
app:layout_constraintTop_toBottomOf="#+id/pin_text_view"
But, this will make my code more difficult to be maintained.
Is there any easier way, without involving Java code, and without nested layout?

You can use a barrier, which is available in ConstraintLayout since version 1.1
So if you are using an older version of ConstraintLayout, change the dependency for ConstraintLayout in your build.gradle to
implementation 'com.android.support.constraint:constraint-layout:1.1.0'
or a later version.
Then add the barrier to your layout like following:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="30dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/title_text_view"
android:background="#ffd600"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Title\nTitle"
app:layout_constraintEnd_toStartOf="#+id/pin_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/pin_text_view"
android:background="#ff0000"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Pin" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="title_text_view,pin_text_view" />
<TextView
android:id="#+id/body_text_view"
android:background="#304ffe"
android:textColor="#ffffff"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/barrier"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="Body" />
</android.support.constraint.ConstraintLayout>
For further information see this link

you can get closest to your requirement using below code without adding any extra code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="30dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/title_text_view"
android:background="#ffd600"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Title\nTitle"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="#+id/pin_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/pin_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#ff0000"
android:text="Pin"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="#+id/body_text_view" />
<TextView
android:id="#+id/body_text_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:background="#304ffe"
android:text="Body"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_text_view" />
OR if you want to do some extra xml code you can do something like this using guidelines feature in constraintLayout:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp">
<TextView
android:id="#+id/title_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#ffd600"
android:padding="5dp"
android:text="Title\nTitle"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toStartOf="#+id/pin_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.09" />
<TextView
android:id="#+id/pin_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#ff0000"
android:text="Pin"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="#+id/body_text_view" />
<TextView
android:id="#+id/body_text_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:background="#304ffe"
android:text="Body"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>

TimeLine like iOS Path app

I want to make a timeline like this
I tried to make it and its working for match_parent contents but for less there is no bottom line here is the picture
and this is my XML code I use ConstraintLayout and I used match_constraint for bottom and top lines
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/red"
app:cardBackgroundColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/circleImageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:padding="15dp"
android:id="#+id/tv"
android:text="125125125"
/>
</android.support.v7.widget.CardView>
<View
android:layout_width="0.6dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#797979"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/circleImageView"
app:layout_constraintStart_toStartOf="#+id/circleImageView"
app:layout_constraintTop_toBottomOf="#+id/circleImageView" />
<ImageView
android:id="#+id/circleImageView"
android:layout_width="6dp"
android:layout_height="6dp"
android:layout_marginEnd="4dp"
android:background="#drawable/circle_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.01"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.06999999" />
<View
android:layout_width="0.6dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#797979"
app:layout_constraintBottom_toTopOf="#+id/circleImageView"
app:layout_constraintEnd_toEndOf="#+id/circleImageView"
app:layout_constraintStart_toStartOf="#+id/circleImageView"
app:layout_constraintTop_toTopOf="parent" />
can anyone please help me to fix this problem? I want to draw a bottom line even without match_parent content

Categories

Resources