Develop Reference

Keyboard won't show for EditText inside a ViewPager2 in a DialogFragment

I have a layout - let's call it layout A - with some EditTexts, which I inflate inside a DialogFragment and all goes well with them. I have another DialogFragment whose layout - let's call it layout B - has a ViewPager2 in it, and I use it with a FragmentStateAdapter which hosts fragments where I reuse layout A for each of them.
Now my problem is that when I tap on the EditTexts inside the ViewPager2, they seem to be getting focus (my grasp of that subject isn't perfect), the cursor starts showing and I can manipulate the text with it ("select", "select all", "cut", etc.), but the soft keyboard won't open up.
In the dialog without the viewPager, those same EditTexts work flawlessly and the keyboard opens up.
In the Android Manifest I have android:windowSoftInputMode="adjustPan"
(I use a single activity in my app).
What could be the problem?
My code:
Layout A:
<?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">
<TextView
android:id="#+id/title_text_view"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/double_margin"
android:layout_marginLeft="#dimen/double_margin"
android:text="#string/title_colon"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/title_edit_text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/title_edit_text" />
<EditText
android:id="#+id/title_edit_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
android:autofillHints="false"
android:ellipsize="end"
android:hint="#string/enter_track_title"
android:inputType="textCapWords|textMultiLine"
android:maxLines="2"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#id/position_edit_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/title_text_view"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/position_text_view"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/double_margin"
android:layout_marginLeft="#dimen/double_margin"
android:text="#string/number_dot"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/position_edit_text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/position_edit_text" />
<EditText
android:id="#+id/position_edit_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin"
android:layout_marginEnd="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
android:layout_marginBottom="#dimen/margin"
android:autofillHints="false"
android:ellipsize="end"
android:hint="#string/enter_track_position"
android:inputType="text"
android:maxLength="6"
android:maxLines="1"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#id/duration_text_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/position_text_view"
app:layout_constraintTop_toBottomOf="#id/title_edit_text"
tools:ignore="TextFields" />
<TextView
android:id="#+id/duration_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/duration_colon"
android:textStyle="bold"
android:layout_marginBottom="#dimen/double_margin"
app:layout_constraintBottom_toTopOf="#id/colon_text_view"
app:layout_constraintEnd_toEndOf="#id/seconds_picker"
app:layout_constraintStart_toStartOf="#id/minutes_picker"
app:layout_constraintTop_toBottomOf="#id/position_edit_text" />
<NumberPicker
android:id="#+id/minutes_picker"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/double_margin"
android:layout_marginLeft="#dimen/double_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/colon_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/duration_text_view" />
<TextView
android:id="#+id/colon_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin"
android:text="#string/colon"
android:textSize="42sp"
app:layout_constraintBottom_toBottomOf="#id/minutes_picker"
app:layout_constraintEnd_toStartOf="#id/seconds_picker"
app:layout_constraintStart_toEndOf="#id/minutes_picker"
app:layout_constraintTop_toTopOf="#id/minutes_picker"
app:layout_constraintVertical_bias="0.42000002" />
<NumberPicker
android:id="#+id/seconds_picker"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
app:layout_constraintBottom_toBottomOf="#id/minutes_picker"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/colon_text_view"
app:layout_constraintTop_toTopOf="#id/minutes_picker" />
</androidx.constraintlayout.widget.ConstraintLayout>
Layout B:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/edit_track_divider_1"
style="#style/divider"
android:layout_marginTop="#dimen/double_margin"
app:layout_constraintBottom_toTopOf="#id/left_arrow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/left_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/quadruple_margin"
android:layout_marginLeft="#dimen/quadruple_margin"
android:layout_marginTop="#dimen/double_margin"
android:background="#android:color/transparent"
android:contentDescription="#string/left_arrow_image"
android:scaleX="1.5"
android:scaleY="1.5"
app:layout_constraintBottom_toTopOf="#id/edit_tracks_pager"
app:layout_constraintEnd_toStartOf="#id/right_arrow"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/edit_track_divider_1"
app:srcCompat="#drawable/ic_action_left" />
<TextView
android:id="#+id/position_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="#id/left_arrow"
app:layout_constraintEnd_toStartOf="#id/right_arrow"
app:layout_constraintStart_toEndOf="#id/left_arrow"
app:layout_constraintTop_toTopOf="#id/left_arrow" />
<ImageButton
android:id="#+id/right_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/quadruple_margin"
android:layout_marginRight="#dimen/quadruple_margin"
android:background="#android:color/transparent"
android:contentDescription="#string/right_arrow_image"
android:scaleX="1.5"
android:scaleY="1.5"
app:layout_constraintBottom_toBottomOf="#+id/left_arrow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/left_arrow"
app:layout_constraintTop_toTopOf="#+id/left_arrow"
app:srcCompat="#drawable/ic_action_right" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/edit_tracks_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/edit_track_divider_2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/left_arrow" />
<View
android:id="#+id/edit_track_divider_2"
style="#style/divider"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/edit_tracks_pager" />
</androidx.constraintlayout.widget.ConstraintLayout>

I eventually found some "hackish" unsatisfying way to fix this issue... I have added a dummy EditText in the layout right above the ViewPager2 and set its visibility to gone. Now the EditTexts work as expected - i.e. the keyboard opens up. I have no idea why this works and therefore still don't know what caused the problem. I found this after playing around hopelessly for solutions. If anyone knows what caused the problem, why my solution practically solves it and what is the correct way to solve this - please let me know.

i get weird Result when i use layout_width=0 in a TextView

i'm trying to build a layout of a ViewHolder that looks like picture 1 for a RecyclerView but instead i get some weird result, it's a project in bignerdranch 3rd version of android books and i'm sure i'm doing everything same as the book.the expected View
but instead the layout looks like my result
and this is the xml code for this layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/crime_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="Crime Title"
android:textColor="#color/colorAccent"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/crime_solved"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/crime_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="Crime Date"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/crime_solved"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/crime_title" />
<ImageView
android:id="#+id/crime_solved"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_solved" />

If you use layout_width = 0, you should use additional property to your Views: android:layout_weight="1" that indicates the the relative width of views in parent layout. Add iy in each kid view, i think it will solve your problem.
And i don't understand why you use ConstraintLayout in such simple case, i think LinearLayout fits better here.

as you are new to android and to constraint layout ....
Here the guideline for naming convention we should follow for a long run in android . https://github.com/ribot/android-guidelines/blob/master/project_and_code_guidelines.md
As i can see hard coded text in your view , which is consider as bad practice in android . Always put your string in string file and your dimens (which is also hard code ) in dimens file . res < values < dimens .
And one surprised me alot is , why are you using orientation in constraint layout ?? Anyways i tried your view and hope this will work
<?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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white_50"
>
<TextView
android:id="#+id/crime_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="Crime Title"
android:textColor="#color/colorAccent"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/crime_solved"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/crime_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Crime Date"
android:paddingBottom="8dp"
android:textColor="#color/colorAccent"
app:layout_constraintStart_toStartOf="#id/crime_title"
app:layout_constraintEnd_toEndOf="#id/crime_title"
app:layout_constraintTop_toBottomOf="#+id/crime_title" />
<ImageView
android:id="#+id/crime_solved"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/crime_title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/crime_date"
app:srcCompat="#drawable/ic_solved" />
I have slight changes in the view , and removed some unnecessary code .In case of any doubt please let me know .

actionbar only in some activities?

I'm building an Android app and I'm wondering why some Activities show the Actionbar and some not. The actionbar itself is only showing the app package name. Two activities containing the same xml code have different behaviours. One shows the Actionbar with the app title the other one not.
The launcher activity also shows the actionbar with the app title.
Launcher Activity XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayoutxmlns: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=".activities.LoginActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"></LinearLayout>
<TextView
android:id="#+id/textpassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.441" />
<TextView
android:id="#+id/textlogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:textSize="30sp"
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"
app:layout_constraintVertical_bias="0.22" />
<EditText
android:id="#+id/passwordfield"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:ems="10"
android:inputType="textPassword"
android:text="Password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textpassword" />
<EditText
android:id="#+id/loginfield"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textlogin" />
<Button
android:id="#+id/loginbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Login"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordfield"/>
One of the two activities with strange behaviour:
<?xml version="1.0" encoding="utf-8"?>
<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView android:id="#+id/todo_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" />
Additionally I'd like to know how to change the App title in the Acionbar. There doesn't seem to be an option inside the xml defining the title. I think android studio sets this to the project name (which is a working title by me, not the actual "real" app name)? According to the documentation I can build my own app bar (https://developer.android.com/training/appbar/setting-up). Would this help?

To create Toolbar and use a custom title in it all you need to do is remember is that Toolbar is just a fancy ViewGroup so you can add a custom title like so:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
This means that you can style the TextView however you would like because it's just a regular TextView. So in your activity you can access the title like so:
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);

The starange behaviour you are getting might not be that strange.
The ActionBar by default show the application name that is set in the AndroidManifest.xml as android:label="#string/app_name" .
One direct way to use a different title for your actionbar in a particular activityis to give a lable to that activity in the AndroidManifest.xm ,as follows:-
<activity android:name=".Main2Activity" android:label="page2"></activity>
This might be the reason of the starange behavior.
And if the some activities are not showing actionbar that might be becouse of the theme of the activity in the manifest file.

How to make themes?

i have a list item, in that i have certain text views and image views. The thing is that the design that i have got has three themes in it dark, brown and light. Now if I want to change the background of a list item to any of these three colors, how do I set the background. Like if i change the theme of the app from settings, the list item background should change. How am I suppose to make the themes with different backgrounds?
<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="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="12dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="12dp">
<TextView
android:id="#+id/company_name_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/montserratlight"
android:text="Synergy Bizcon"
android:textColor="#color/textColorMediumThemeDark"
android:textSize="#dimen/fontMedium"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/schedule_imageview"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/company_name_textview"
app:srcCompat="#drawable/ic_watch" />
<TextView
android:id="#+id/date_time_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/montserratlight"
android:text="26 Apr 11:10 PM"
android:textColor="#color/textColorSmallThemeDark"
android:textSize="#dimen/fontExtraSmall"
app:layout_constraintStart_toEndOf="#id/schedule_imageview"
app:layout_constraintTop_toBottomOf="#id/company_name_textview" />
<TextView
android:id="#+id/pipe_textview"
android:layout_width="0.5dp"
android:layout_height="12dp"
android:layout_marginStart="6dp"
android:background="#color/textColorSmallThemeDark"
app:layout_constraintBottom_toBottomOf="#id/date_time_textview"
app:layout_constraintStart_toEndOf="#id/date_time_textview"
app:layout_constraintTop_toTopOf="#id/date_time_textview" />
<TextView
android:id="#+id/exhcange_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:fontFamily="#font/montserratlight"
android:text="BSE"
android:textColor="#color/textColorSmallThemeDark"
android:textSize="#dimen/fontExtraSmall"
app:layout_constraintBottom_toBottomOf="#id/pipe_textview"
app:layout_constraintStart_toEndOf="#id/pipe_textview"
app:layout_constraintTop_toTopOf="#id/pipe_textview" />
<TextView
android:id="#+id/rate_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:fontFamily="#font/montserratlight"
android:text="34567.58"
android:textColor="#color/textColorMediumThemeDark"
android:textSize="#dimen/fontMedium"
app:layout_constraintEnd_toStartOf="#id/add_imageview"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/points_change_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/montserratlight"
android:text="-21.10(-0.02%)"
android:textColor="#color/textColorSmallThemeDark"
android:textSize="#dimen/fontExtraSmall"
app:layout_constraintEnd_toEndOf="#id/rate_textview"
app:layout_constraintTop_toBottomOf="#id/rate_textview" />
<ImageView
android:id="#+id/add_imageview"
android:layout_width="16dp"
android:layout_height="16dp"
android:tint="#color/iconsColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add" />
</android.support.constraint.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:background="#color/listItemDivider" />
</Linear Layout>
Like i have this list item, i want to change constraint layouts background to may be dark or brown or light. I would eventually use style to give the background, but i do not know how? Can someone help? Thanks

How to give background color to Group in Constraintlayout

I have grouped 3 textview in a constraint layout. I have background to the group, but its not working.
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/text_color_3"
app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv" />
Is there anyway other round to do it.

According to the documentation, Group is only used for controlling the visibility of a set of widgets.
You can set the background to a View and constrain the view to how you desire the background to appear.
In the code sample below, after setting the background to the View with ID background, I constrained the top, left and right sides of the view to the parent and the bottom of the view to the last TextView in the group, which in this case is the TextView with ID textView3. I also added a 16dp bottom padding to textView3 so the background doesn't look weird. You could also use a Guideline for this.
Also note that the view background needs to be added before the group of views that need the background. If it's placed after the group of views, the background would be drawn over the group (and that's not what you want).
<?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="#444444">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFFFFF"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:text="TextView 3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2"/>
</android.support.constraint.ConstraintLayout>
I hope this helps.

Though the group is only for visibility purpose but you can easily put a background to group.
Group view doesn't have any width and height, so wrap content wouldn't be visible on actual screen.
Provide constraints to Group view and set background attributes.
Eg:
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="0dp" //match constraint
android:layout_height="0dp" //match constraint
android:background="#color/text_color_3"
app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv"
app:layout_constraintBottom_toBottomOf="#+id/frequency_tv"
app:layout_constraintEnd_toEndOf="#+id/price_tv"
app:layout_constraintStart_toStartOf="#+id/price_tv"
app:layout_constraintTop_toTopOf="#+id/price_tv" />
//below are your TextViews aligned vertically
<TextView android:id="#+id/price_tv"/>
<TextView android:id="#+id/currency_unit_tv" .../>
<TextView android:id="#+id/frequency_tv" .../>
Hope it helps :)

Group is useful for the visibility purpose in ConstraintLayout. ConstraintLayout is introduced to remove the hierarchy of the multiple ViewGroups(Layouts).
We can simply use for the background purpose. If you simply have 3 TextView and want to apply the background color to the TextView don't add it to any ViewGroup(Layout), just check 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"
android:background="#AAA">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFF"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
tools:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
</android.support.constraint.ConstraintLayout>
Result:
You can find the source here

Group is only used for controlling the visibility of Referenced Ids in app:constraint_referenced_ids. According to the documentation. Solution is just put views in a Viewgroup. I had to put all the views in ConstraintLayout to constrol the visibility + benefits of chaining views in CL.
<android.support.constraint.ConstraintLayout
android:id="#+id/area_range_constraint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
visibility = "View.VISIBLE"
>
<TextView
android:id="#+id/area_title_tv"
style="#style/filter_heading_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/STR_AREA"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/area_range_from"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:hint="#string/STR_MIN_AREA"
android:inputType="number"
android:maxLength="10"
android:text='#{searchQueryModel.areaMin==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMin())))}'
android:textAlignment="center"
android:textDirection="anyRtl"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/textView254"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/area_title_tv" />
<EditText
android:id="#+id/area_range_to"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:hint="#string/STR_MAX_AREA"
android:inputType="number"
android:maxLength="10"
android:text='#{searchQueryModel.areaMax==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMax())))}'
android:textAlignment="center"
android:textDirection="anyRtl"
android:textSize="14sp"
app:layout_constraintBaseline_toBaselineOf="#+id/textView254"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView254" />
<TextView
android:id="#+id/textView254"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/STR_TO"
android:textColor="#color/text_color_3"
android:textSize="#dimen/text_size_normal"
app:layout_constraintBaseline_toBaselineOf="#+id/area_range_from"
app:layout_constraintEnd_toStartOf="#+id/area_range_to"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/area_range_from" />
<TextView
android:id="#+id/area_range_value_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text='#{`(` + areaUnit + `)`}'
android:textColor="#color/colorPrimary"
android:textSize="#dimen/text_size_normal"
app:layout_constraintBottom_toBottomOf="#+id/area_title_tv"
app:layout_constraintStart_toEndOf="#+id/area_title_tv"
app:layout_constraintTop_toTopOf="#+id/area_title_tv" />
</android.support.constraint.ConstraintLayout>

Use the new Layer that was introduced in ConstraintLayout 2

As per the official documentation, group is only used to control the visibility and you cannot change the background of the views of a particular group.
Documentation: This class controls the visibility of a set of referenced widgets. Widgets are referenced by being added to a comma separated list of ids.
To change it dynamically, use for all the three TextViews.
textView.setBackgroundColor(Color.RED);
or
textView..setBackgroundColor(Color.parseColor("#ffffff"));