Develop Reference

TextView moving out of screen in RTL Layout in RelativeLayout - Android

I have a text view inside a RelativeLayout. It's working fine in LTR layout. But when I change it to RTL the view inside a RelativeLayout moves out of visible screen. I was checking it in Layout inspector and I could see it being out of the screen visible area. The view is visible but it's not in the screen.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:id="#+id/empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_empty"
android:layout_gravity="center" />
<TextView
android:id="#+id/empty_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingTop="12dp"
android:paddingRight="16dp"
android:textAlignment="center"
android:textColor="#color/data_color"
android:textSize="#dimen/text_medium"
android:gravity="center_horizontal" />
<RelativeLayout
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:minHeight="40dp">
<TextView
android:id="#+id/refresh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="#string/refresh" />
<ProgressBar
android:id="#+id/progress"
android:layout_width="#dimen/progressbar_width"
android:layout_height="#dimen/progressbar_height"
android:layout_centerInParent="true"
android:indeterminate="true"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
refresh_text is the TextView which is moving out of the visible region.

the issue is with relative layout use ConstraintLayout
try this code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:id="#+id/empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_empty"
android:layout_gravity="center" />
<TextView
android:id="#+id/empty_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingTop="12dp"
android:paddingRight="16dp"
android:textAlignment="center"
android:textColor="#color/data_color"
android:textSize="#dimen/text_medium"
android:gravity="center_horizontal" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:minHeight="40dp">
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:id="#+id/refresh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/refresh" />
<ProgressBar
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/progress"
android:layout_width="#dimen/progressbar_width"
android:layout_height="#dimen/progressbar_height"
android:indeterminate="true"
android:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>

CardView not fully Scrollable on my fragment

I am using a fragment to display cardview and a common Bottomnavigation for all fragments. Here I have more than 5 cards as per my data but I am not able to scroll to see all cards. only scrollable up to the second card and the second one is also not fully visible due to the bottom navigation.
main_activity.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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff293353"
android:paddingTop="20dp">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_above="#id/nav_view"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="#drawable/bottom_tab_style"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then Recycleview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_marginBottom="10dp"
android:weightSum="1"
android:layout_marginStart="70dp"
android:layout_marginEnd="70dp"
android:layout_gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:background="#drawable/left_enabled"
android:layout_weight="0.5"
android:textAlignment="center"
android:id="#+id/btn_normal"
android:text="#string/normal"
android:textColor="#color/white"
android:textStyle="bold" />
<TextView
android:id="#+id/btn_cognitive"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/right_disabled"
android:gravity="center"
android:text="#string/cognitive"
android:textAlignment="center"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_height="wrap_content">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</ScrollView>
Then cardview content
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:background="#drawable/cardstyle"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
card_view:cardBackgroundColor="#color/transparent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
card_view:cardCornerRadius="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3f4865"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
>
<TextView
android:id="#+id/txt_recordTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/poppins"
android:paddingStart="12dp"
android:text="Normal Test 01"
android:gravity="center_vertical"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text="No: of gait cycles"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p1_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="Details"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text="Stride Length"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p2_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="Details"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text=" Gait time"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p3_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="p2"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/info_button_style"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/total_n_gait_score"
android:textAlignment="center"
android:textColor="#FFF" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ProgressBar
android:id="#+id/card_progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:background="#drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="65"
android:progressDrawable="#drawable/card_progress" />
<TextView
android:id="#+id/text_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="60%"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/white" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
android:paddingBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:id="#+id/card_date"
android:text="date"
android:textColor="#FFF"
android:textSize="1sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:ellipsize="end"
android:maxLines="1"
android:text="time"
android:id="#+id/card_time"
android:textColor="#FFF"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Please check my code and help me with this.

This is wrong in your main_activity.xml for fragment android:layout_above="#id/nav_view", it is used for RelativeLayout. Instead use app:layout_constraintBottom_toTopOf="#id/nav_view". This will solve your second issue(the second one is also not fully visible due to the bottom navigation).
Change your ScrollView to NestedScrollView.
In your cardview content you don't need ConstraintLayout, LinearLayout is sufficient as root element (remove ConstraintLayout as you are not utilising its power of flat view hierarchy). And if your LinearLayout background can be moved to background for MaterialCardView then you don't need LinearLayout too.
For your recyclerview set the nestedScrollingEnabled to false either through xml or by code. Try these things, it will solve your problem.

How to Align LinearLayout to Bottom of Activity

I have the following activity_main.xml file, and I want to align the three buttons inside the LinearLayout to the bottom of the page. I've tried layout_alignParentBotton="true"
but that doesn't work.. is there any setting that would let me bring the linearLayout to the bottom of the activity?
thanks
<?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"
android:background="#color/blueBackground"
tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<TextView
android:id="#+id/main_title"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textSize="30dp"
android:textColor="#color/whiteText"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_centerHorizontal="true"
tools:layout_editor_absoluteY="89dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/quote_text"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="This is a random text"
android:textColor="#color/whiteText"
android:textSize="20dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="246dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

Change android:layout_alignParentBottom="true" to app:layout_constraintBottom_toBottomOf="parent". Here is an example that also stretches that layout to the width of the parent and centers the views within it
...
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
...

Add following Constraints to Your Linear layout .
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
Some of your views are not constraints properly. If you want to use RelativeLayout then try the solution below .
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blueBackground"
tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<TextView
android:id="#+id/main_title"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textSize="30dp"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="#+id/main_title"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/quote_text"
android:layout_width="match_parent"
android:layout_below="#+id/main_image"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerHorizontal="true"
android:text="This is a random text"
android:textSize="20dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
/>
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
/>
</LinearLayout>
</RelativeLayout>

Replace the parent constraint layout with a RelativeLayout

Try editing your layout this way:
<?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" android:background="#color/blueBackground" tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<LinearLayout android: layout_weight="1" android orientation="vertical" android:layout_width="match_parent" android:layout_height="0dp">
<TextView android:id="#+id/main_title" android:layout_width="368dp" android:layout_height="wrap_content" android:text="Daily Quotes" android:textSize="30dp" android:textColor="#color/whiteText" android:textAlignment="center" /> <ImageView android:id="#+id/main_image" android:layout_width="100dp" android:layout_height="100dp" app:srcCompat="#mipmap/ic_launcher_round" /> <TextView android:id="#+id/quote_text" android:layout_width="368dp" android:layout_height="wrap_content" android:text="This is a random text" android:textColor="#color/whiteText" android:textSize="20dp"/>
</LinearLayout>
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_alignParentBottom="true"> <ImageView android:id="#+id/previous_quote" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="#android:drawable/ic_media_previous"/> <ImageView android:id="#+id/share_quote" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <ImageView android:id="#+id/next_quote" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="#android:drawable/ic_media_next"/> </LinearLayout> </LinearLayout>
Note the layout weight in the Linear Layout.

Your root layout is a ConstraintLayout so you should position its children using the appropriate constraints listed in the documentation. In order to position the LinearLayout at the bottom center and wrap its content you should use the following:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
You can also optimize your layout by removing the LinearLayout altogether and constraining the three ImageViews in a horizontal chain as direct children of the root ConstraintLayout like this:
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/share_quote"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/next_quote"
app:layout_constraintStart_toEndOf="#id/previous_quote"/>
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/share_quote" />

Try this..
<?xml version="1.0" encoding="utf-8"?><?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"
android:background="#android:color/holo_blue_light">
<TextView
android:id="#+id/main_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#mipmap/ic_launcher_round"
tools:layout_editor_absoluteY="89dp" />
<TextView
android:id="#+id/quote_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="This is a random text"
android:textColor="#android:color/white"
android:textSize="20dp"
app:layout_constraintTop_toBottomOf="#id/main_image" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

How to set a layout over half sized screen height layout

The XML layout is 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="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/blue_bg">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign In"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="28dp"
android:layout_gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login Card"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="28dp" />
</LinearLayout>
</LinearLayout>
And it turns out that the second linear layout will be placed below to the first layout.I want the first layout size to be half of the screen and the second layout will be placed the bottom of the first layout not below to the first layout.
I am trying Ui like this
If anyone knows how do I solve this problem.please comment below :)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_light">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/round_rect"
android:layout_margin="20dp"
android:layout_centerInParent="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="name"
android:textSize="20sp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="password"
android:textSize="20sp"/>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:text="Sign in "
android:background="#android:color/holo_blue_light"/>
</LinearLayout>
</RelativeLayout>
You can see here output image that above code

use constraint layout for these types of layout. Drag and drop from palette and fix in preview. check sample
<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="#android:color/darker_gray">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="256dp"
android:background="#color/colorPrimary"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:padding="20dp"
android:text="SignIn"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="293dp"
android:layout_height="238dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="220dp"
android:background="#android:color/white"
android:orientation="vertical"
android:paddingTop="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.066">
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="Name" />
<EditText
android:id="#+id/editText3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign In" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

You can use a Frame layout. Inside use a linear layout for the colors with only 2 views for the background. Then add below the linear layout with all the ui components.

Using ConstraintLayout in CardView

Is it possible to use ConstraintLayout inside CardView for so that I can inflate it for a RecyclerView?
Current layout is like this but I want to display it inside a CardView.
https://i.stack.imgur.com/MeArp.png
Reference XML code:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:background="#drawable/touch_selector"
android:paddingBottom="#dimen/list_item_padding_vertical"
android:paddingLeft="#dimen/list_item_padding_horizontal"
android:paddingRight="#dimen/list_item_padding_horizontal"
android:paddingTop="#dimen/list_item_padding_vertical">
<ImageView
android:id="#+id/weather_icon"
android:layout_width="#dimen/list_icon"
android:layout_height="#dimen/list_icon"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:src="#drawable/art_clouds"/>
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/list_item_date_left_margin"
android:layout_marginStart="#dimen/list_item_date_start_margin"
android:textAppearance="#style/TextAppearance.AppCompat.Subhead"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toRightOf="#+id/weather_icon"
tools:text="Today, April 03"/>
<TextView
android:id="#+id/weather_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/secondary_text"
app:layout_constraintLeft_toLeftOf="#+id/date"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:text="Rainy"/>
<TextView
android:id="#+id/high_temperature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/forecast_temperature_space"
android:layout_marginRight="#dimen/forecast_temperature_space"
android:fontFamily="sans-serif-light"
android:textColor="#color/primary_text"
android:textSize="#dimen/forecast_text_size"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintRight_toLeftOf="#+id/low_temperature"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:text="19\u00b0"/>
<TextView
android:id="#+id/low_temperature"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:gravity="end"
android:textSize="#dimen/forecast_text_size"
app:layout_constraintBottom_toBottomOf="#+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:text="10\u00b0"/>
<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.5"/>
</android.support.constraint.ConstraintLayout>

Yep, it's possible! Put your ConstraintLayout xml code inside CardView. You can also check out various card view implementations done in compliance with Material design guidelines.

You have ConstraintLayout in the parent. Use it inside CardView for having ConstraintLayout.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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.support.v7.widget.CardView
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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/animals" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toBottomOf="#id/imageView">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title" />
<TextView
android:id="#+id/totalJokes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="100" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</FrameLayout>

For Androidx use it like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="#dimen/card_margin"
android:clickable="true"
android:elevation="8dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="#dimen/card_radius">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<androidx.constraintlayout.widget.Guideline
android:id="#+id/firsthline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/firstvline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/secondvline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7" />
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="bottom"
android:paddingStart="#dimen/text_padding"
android:paddingEnd="#dimen/text_padding"
android:textColor="#android:color/black"
android:textSize="#dimen/cuvantprincipal"
android:textStyle="bold" />
<TextView
android:id="#+id/subtitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#id/title"
android:gravity="top"
android:paddingStart="#dimen/text_padding"
android:paddingEnd="#dimen/text_padding"
android:textColor="#android:color/black"
android:textSize="#dimen/cuvantsecundar" />
<ImageView
android:id="#+id/playbutton"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="32dp"
android:src="#drawable/play" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>