Develop Reference

How can I replicate this UI behaviour

How can I replicate this behaviour in an Android app, is only for learning purposes. I do know that in the bottom half they are using a recyclerview, but in the upper part where they are displaying the "You have 4.983 to spend" part I dont know how to add it, how do they split the screen to have them both? This is what I want to replicate

Please post the code or implementation which you have tried before asking the question, which will be helpful for others to answer your question.
This can be implemented easily within the same xml layout file.
Or
Can also be done with multiple fragments split in one activity or fragment.
Think each TextView ImageView or any Widget as to be placed properly into one layout. Just for an example for you to set i have created this which took me 5 mins to build similar layout design like one you have posted, the final result is not same, because details are to be customized.
So import this xml into your file and see how it looks. Also learn using ConstraintLayout.
activity_main.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:orientation="vertical">
<TextView
android:id="#+id/you_have_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="You have"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/amount_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$ 4,983"
android:textSize="36sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#id/you_have_text"
app:layout_constraintTop_toBottomOf="#id/you_have_text" />
<androidx.cardview.widget.CardView
android:id="#+id/first_card"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toStartOf="#id/second_card"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/amount_text">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Funds"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/second_card"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toStartOf="#id/third_card"
app:layout_constraintStart_toEndOf="#id/first_card"
app:layout_constraintTop_toBottomOf="#id/amount_text">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Transfer"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/third_card"
android:layout_width="100dp"
android:layout_height="100dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/second_card"
app:layout_constraintTop_toTopOf="#id/first_card">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Pay Bill"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/list_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
app:cardCornerRadius="24dp"
app:cardElevation="16dp"
app:layout_constraintTop_toBottomOf="#id/first_card">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintTop_toBottomOf="#id/first_card"
tools:listitem="#layout/item_list" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
item_list.xml :
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/item_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:fontFamily="serif-monospace"
android:padding="8dp"
android:textSize="32dp"
android:textColor="#000000"
tools:text="McDonalds" />

How to design a recyclerview with each item containing 2 buttons beside an imageview in andorid

I am trying to make a recyclerView where each of the items in the list will show an imageView with 2 buttons on the right of the imageview. I have tried but not really getting there. Some help would be really great.
Here is what i want:
What i tried:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgVw_contact"
android:layout_width="0dp"
android:layout_height="#dimen/album_cover_height_details"
android:layout_margin="5dp"
android:layout_marginStart="4dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="8dp"
android:clickable="true"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher"
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" />
<TextView
android:id="#+id/txtVw_contactName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgVw_contact"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:text="myColors"
android:textColor="#color/album_title"
android:textSize="#dimen/album_title"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imgVw_contact" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#drawable/ic_newok"
app:layout_constraintBottom_toBottomOf="#+id/imgVw_contact"
app:layout_constraintEnd_toEndOf="#+id/imgVw_contact"
app:layout_constraintHorizontal_bias="0.931"
app:layout_constraintStart_toStartOf="#+id/imgVw_contact"
app:layout_constraintTop_toTopOf="#+id/imgVw_contact"
app:layout_constraintVertical_bias="0.409" />
</android.support.constraint.ConstraintLayout>
and the result is:
I cant find a reason for why the images are getting round.
Also I have tried to use a drawable for button background but no matter what i create either new image asset or vector asset it becomes huge when i use it as background(as you can see in the screenshot).

Here is the design you need using ConstrainLayout -
<?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/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgVw_contact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:clickable="true"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txtVw_contactName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:text="myColors"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/imgVw_contact" />
<Button
android:layout_marginTop="8dp"
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_clear_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/btn"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_check_circle_black_24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The corresponding layout image is -

Ok I got it. I found out the reasons behind my issues.
issue 1: There is a ic_launcher.xml(anydpi) inside mipmap which is a round cornered one. So when I was setting ic_launcher as background it takes this one .
issue 2: the images used inside the buttons get the full height width of button and becomes huge.

I have see your layout . and try to make it . Here is the code
Try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/house1" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentRight="true"
android:paddingRight="5dp"
android:layout_centerVertical="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_highlight_off_black_24dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_vpn_key_black_24dp"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>

How to center align views in Android layout

I am trying to build the following layout on Android:
As indicated by the dotted lines:
- The two TextViews should be left aligned.
- The ImageView should be center aligned with the title TextView
The labels should be anchored relative to the parent and each other as indicated in the sketch.
I have tried to implement this using ConstrainedLayout which gets me pretty far. But the tricky part is the alignment of image and title.
I would need an attribute like layout_constraintCenter_toCenterOf which unfortunately does not exist.
EDIT: ### removed hard-coded height ###
There was an unwanted hardcoded height in my code (marked in example below). After removing that it works fine for me.
But the question stands: What is the 'right' way to center-align views?
My solution feels like a hack.
#######################################
This is what I got so far:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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"
android:padding="5dp">
<ImageView
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="0dp"
### edit: this line must go:
### android:layout_height="19dp"
android:layout_marginStart="158dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:id="#+id/detailText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="subtitle" />
</android.support.constraint.ConstraintLayout>
I have tried to work around by aligning top and bottom which looks right in the preview but causes glitches in the real app:
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
Maybe ConstrainedLayout is the wrong tool for the job altogether.
What is the 'right way' to implement this layout in Android?

You may try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:src="#drawable/connected_icon_png" />
<View
android:layout_width="10dp"
android:layout_height="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:text="Title Label"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:maxLines="2"
android:text="Content that you want" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"/>
</LinearLayout>
</LinearLayout>
You may able to do further edit if you need.
Happy Coading
Snapshot:

use your widgets inside relative layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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"
android:layout_centerInParent="true"
android:padding="5dp">
<ImageView
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:src="#color/colorAccent"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="19dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:ellipsize="end"
android:text="abcjdnadnaadjdndd"
android:layout_toRightOf="#id/image1"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:layout_toRightOf="#id/image1"
android:textAlignment="center"
android:layout_below="#id/titleText"
android:id="#+id/detailText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:text="sadhbhaeadhbaedn"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
tools:text="subtitle" />
</RelativeLayout>

Lottie Animation Dynamic Text Animation

I need to set text for a LottieAnimationView, but the documentation isn't helping me much
I tried adding a text view on the layout, but it doesn't seem to do anything.
<com.airbnb.lottie.LottieAnimationView
android:background="#color/trans_100"
android:id="#+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center"
/>

I don't think you can put a text in the animation because is like an image (you don't have the source for edit this).
However, if you use relative or constraintlayout you can do the trick by using:
In relative layout:
<TextView
android:paddingTop="-10dp"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center" />
In constraintlayout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="350dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:layout_height="match_parent">
<com.airbnb.lottie.LottieAnimationView
android:background="#color/trans_100"
android:id="#+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:paddingTop="10dp"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_value"
android:textSize="20sp"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#null"
app:textAllCaps="false" />
</androidx.constraintlayout.widget.ConstraintLayout>
Right now i am doing a test with the information a gave you with a Lottie Animation I am working in ConstraintLayout a this is the result:

Color of TextView shows as white on a real device with ConstraintLayout

I have been trying my hands on ConstraintLayout and so far I have liked it a lot except now I have run into a peculiar problem. The same layout, if I design using a RelativeLayout displays the color of the contained TextViews as the default text color(greyish) but with ConstraintLayout, it shows white.
This happens on both a real device as well as an emulator with Android 5.0 but not on emulator(7.0). Does anyone know, why might this be happening?
Also, the obvious solution seems to be manually styling the color of the TextView in the layout to what it should be but that seems like a hack than a solution. I would be interested in knowing, why this is happening in the first place and if this hack is the only solution? (I prefer not fixing it by forcing a color on TextView as the behavior is correct on Android 7.0)
EDIT: Forgot to mention that the Layout Editor shows them both as black/greyish so that is also a cue that the actual color should not be white.
For your reference, here are the 2 layouts that are more or less same(there is a Button in one of them and TextView instead of Button in the other) in which one is faulty.
The layout that shows it white(issue in focus):
<?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="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:background="#color/lightGrey">
<android.support.constraint.ConstraintLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:paddingBottom="10dp"
android:elevation="2dp"
android:id="#+id/constraintLayout">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:id="#+id/linearLayout"
tools:layout_editor_absoluteY="16dp">
<TextView
android:text="#string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tutor_name"/>
<TextView
android:text="#string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/skill_set"/>
<TextView
android:text="#string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/tutor_types" />
<TextView
android:text="#string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:id="#+id/display_pic"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/holo_red_light" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tutor_rating"
android:layout_below="#+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="#color/colorAccent"
app:srb_fillColor="#color/colorPrimary"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
app:layout_constraintRight_toRightOf="#+id/display_pic"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/display_pic"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6796875" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/tutor_requested_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:text="Requested time"
android:textStyle="italic"
android:layout_marginStart="32dp"
android:layout_marginBottom="8dp"
android:layout_below="#+id/constraintLayout" />
</RelativeLayout>
The layout that shows it black/greyish(default as it should be)
<?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="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="#color/lightGrey"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:elevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:paddingBottom="10dp"
android:paddingEnd="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingStart="10dp"
android:paddingTop="10dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:layout_toLeftOf="#+id/display_pic"
android:layout_toStartOf="#+id/display_pic"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:id="#+id/linearLayout2">
<TextView
android:text="#string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tutor_name"/>
<TextView
android:text="#string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/skill_set"/>
<TextView
android:text="#string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/tutor_types" />
<TextView
android:text="#string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:id="#+id/display_pic"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:srcCompat="#android:color/holo_red_light" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tutor_rating"
android:layout_below="#+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="#color/colorAccent"
app:srb_fillColor="#color/colorPrimary"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
android:layout_marginTop="2dp" />
<Button
android:id="#+id/request_tutor"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/linearLayout2"
android:layout_marginTop="14dp"
android:background="#color/lighterGrey"
android:minHeight="25dp"
android:minWidth="80dp"
android:text="Request"
android:textAppearance="#style/TextAppearance.AppCompat" />
</RelativeLayout>
</FrameLayout>
(Note: Although I tried using a Barrier below, it is in ConstraintLayout 1.1.0 beta and I would strictly refrain from using a beta version for production in this case)
EDIT 2: Following #rami-jemli 's advice, here is the ConstraintLayout with a barrier with the problem still persisting.
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:background="#color/lightGrey"
android:id="#+id/constraintLayout">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:id="#+id/linearLayout">
<TextView
android:text="#string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tutor_name"/>
<TextView
android:text="#string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/skill_set"/>
<TextView
android:text="#string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/tutor_types" />
<TextView
android:text="#string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:id="#+id/display_pic"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/holo_red_light" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tutor_rating"
android:layout_below="#+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="#color/colorAccent"
app:srb_fillColor="#color/colorPrimary"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
app:layout_constraintRight_toRightOf="#+id/display_pic"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/display_pic"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6796875"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="250dp" />
<TextView
android:id="#+id/tutor_requested_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Requested time"
android:textStyle="italic"
android:layout_below="#+id/constraintLayout"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/barrier"
app:layout_constraintStart_toStartOf="#+id/linearLayout"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp" />
<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="tutor_rating,linearLayout"
tools:layout_editor_absoluteY="126dp" />
</android.support.constraint.ConstraintLayout>
Output:(Dummy data)

I cannot believe this! I found the answer.
From the question, it is not possible to pinpoint what could be wrong because problem is not with the layout, RecyclerView, AppCompat or ConstraintLayout. The problem is with something called the Themed Context. I have been passing around application context in almost all cases but it turns out where the layout is concerned, it is recommended to pass in Activity instance itself(which is a Themed context because it extends ContextThemeWrapper --more on this a bit later).
So, for example, when we are instantiating a LayoutManager for a RecyclerView, we would pass in Activity instance. When we are inflating a layout item for a RecyclerView, we would again use the Activity.
Talking in this context, ContextThemeWrapper takes conceptual precedence as stated here and Activity subclasses it.
Also mentioned is,
ContextThemeWrapper will apply your application theme
The snippet of code I've shared above does not make this immediately
clear, however, you can write your own tests to verify this. The best
way I can think of doing this is to create a simple app with a
ListView that uses android.R.layout.simple_list_item_1 to display
items. Make your apps theme Light by default and then initialize your
ArrayAdapter using getApplicationContext(). You’ll notice that the
text is either not visible or barely visible because it will be white
by default whereas your theme should call for default text to be
black. Change the code, so that your code initializes the array
adapter with “this” (i.e the Activity) or simply getContext() and
you’ll see the text turns black.
And,
Do not use getApplicationContext() with LayoutInflater, unless you really do want to ignore your theme.
Hats off to #sockeqwe for his answer on SwitchCompat that gave me this idea.
Note: Previously, I had mentioned that this might be a bug in ConstraintLayout. I take that back and apologies to the folks working on ConstraintLayout(which I have found totally awesome!)
Lastly, thanks to all the folks who gave their precious time reading my question and churning their brainpower for answer.

The way you are using ConstraintLayout now is wrong. You are not getting its performance benefits. There is no need for all the other ViewGroups (RelativeLayout, etc.) and the nested layouts.
In your case, you need to use only one ConstraintLayout as a parent layout with no nested level.
Use Chains instead of LinearLayout.
Try to achieve this and update your question with the new code.
Let's see what you get.