Develop Reference

Divider decoration for constraint layout flow helper children

As you may know, you can set a RecyclerView.ItemDecoration for RecyclerView's Items. However, I want to achieve something similar to that but for ConstraintLayout's Flow.
Currently, I can create multiple divider views and put them inside my flow after each normal view but that can be cumbersome when my Flow has multiple views and that's not DRY and is an example of repeating yourself. Also, it's worth noting that you cannot reference the same view more than once in Flow so you cannot create a divider view and reference it multiple times in different positions. Pragmatically I can create a custom background/style for TextView with a line under them to somehow replicate a divider but what if Flows children are not TextView?
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 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_gravity="center"
android:layout_margin="4dp"
android:checkable="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/product_item_detail_flow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
android:padding="8dp"
app:constraint_referenced_ids="product_item_category,materialDivider,product_item_name,materialDivider2,product_item_price"
app:flow_verticalGap="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/product_item_image"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.divider.MaterialDivider
android:id="#+id/materialDivider"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<com.google.android.material.divider.MaterialDivider
android:id="#+id/materialDivider2"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/product_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
tools:text="#tools:sample/lorem" />
<TextView
android:id="#+id/product_item_category"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="14sp"
tools:text="#tools:sample/lorem" />
<TextView
android:id="#+id/product_item_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
tools:text="#tools:sample/us_zipcodes" />
<ImageView
android:id="#+id/product_item_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/product_image"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/product_item_detail_flow"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent=".33"
tools:srcCompat="#tools:sample/avatars" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
Consider another flow like this with multiple views that putting a divider after each item is not wise in my opinion:
So in short how can I create a divider item decoration for constraint layout's flow children?
Edit: both of these flows are actually item for a recyclerview

I didn't find a way to achieve this using ConstraintLayout and Flow, however, this can be achieved using FlexboxLayout. Because FlexboxLayout has a dividerDrawable attribute that automatically puts a divider between child views.
After adding the FlexboxLayout library to your app/module you can use it like this:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:alignItems="stretch"
app:dividerDrawable="#drawable/flex_divider"
app:flexDirection="column"
app:showDivider="middle">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="63dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="126dp" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
and for #drawable/flex_divider create this:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size
android:width="2dp"
android:height="2dp" />
<solid android:color="?colorPrimaryDark" />
</shape>
This ultimately results in:

Drawable file wont change color in Dark Mode

Im currently working on a LoginActivity, I wanted to make an rounded Linear to put the Edittext's inside, I used an XML file to round the corners of them, but the only problem is, that they wont change their color in dark mode.
I already used the colors from the #colors file, but it wont affect at all, I tried to use cardview instead of a Linearview with an drawable file as background, but it breaks the layout.
XML:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/design_default_color_on_primary"/>
<stroke android:width="0dp" android:color="#B1BCBE" />
<corners android:radius="20dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
LoginActivity.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"
tools:context=".LoginActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="#drawable/login_bg1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/loginbg"
android:elevation="25dp"
android:orientation="vertical"
android:gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:layout_marginVertical="20dp"
android:textStyle="bold"
android:textSize="30sp"
android:textColor="#color/design_default_color_primary"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="44dp"
android:layout_marginStart="44dp"
android:padding="10dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:background="#drawable/edittext_box"
android:elevation="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_email"/>
<EditText
android:id="#+id/Email"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="#null"
android:hint="Email"
android:inputType="textEmailAddress"
android:textColorHint="#color/design_default_color_primary"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="44dp"
android:layout_marginStart="44dp"
android:padding="10dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:background="#drawable/edittext_box"
android:elevation="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_password"/>
<EditText
android:id="#+id/Password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="#null"
android:hint="Password"
android:inputType="textPassword"
android:textColorHint="#color/design_default_color_primary"/>
</LinearLayout>
<Button
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Login"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Maybe someone knows to fix this issue.

To support dark mode you need a separate colors.xml file for the night version. To create colors file for night mode. Follow these steps.
Right-click on values folder
New > Value Resource File
In the Available Qualifiers search for Night mode and click on the (>>) button.
From the drop-down select Night
Name the file as colors
And define all the night mode colors here
Names of the colors will be the same as the Non-Night colors file
Another way to create colors.xml for night mode is
On the top left corner click on Android and Switch to project,
Go to folder app > src > main > res and create a new folder and name it values-night and inside that folder create an XML file named colors.xml

Having an issue coloring custome xml button

I'm having an issue coloring a custom button. For some reason, it seems like no matter what coloring change I want to apply (text or background) the button remains the same.
I notice the button.xml has the desired color and the right shape though it doesn't appear the button background-color property on the activity
the button from an activity
<Button
android:id="#+id/button2"
android:layout_width="162dp"
android:layout_height="53dp"
android:background="#drawable/button"
android:text="#string/button"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.132"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/messagTextView"
app:layout_constraintVertical_bias="0.804" />
custome button shape
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="50sp"/>
<solid android:color="#color/redAdobeXD"/>
</shape>

If you are using material components (which is probably the case if this is a relatively new project) then you style the Button in another way:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context=".FirstFragment">
<Button
android:id="#+id/button"
style="#style/Widget.MaterialComponents.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="32dp"
android:text="I am a Button!"
android:textColor="#color/white"
app:backgroundTint="#FF0000"
app:cornerRadius="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Things to notice are:
style="#style/Widget.MaterialComponents.Button"
android:textColor="#color/white"
app:backgroundTint="#FF0000" (would be #color/redAdobeXD in your case)
app:cornerRadius="50dp"
There is no need for an extra xml and setting that on the button etc. (only in more custom cases).
You can read more about available options on the ContainedButton here

Is it possible to make Country Code Picker Library look like material drop down menu (outlined)?

I'm creating an app which has google's material text input layout and I want to add country code dropdown in the app. I liked Country Code Picker Library but I want to make it look like the outlined box like other text fields. Please help me.
Thanks in advance
Check Screenshots :
How Country Code looks:
How I want it to look:

You can override a library UI by making an exact layout name used in the library. For example, if the library have the following layout:
layout_code_picker.xml
You need to create the same layout in your project with the same views id in the layout.
Or the last option, fork the library.

Yes. You can hide components of CCP if you need. Here is what I could achieve:
<?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"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/countryHolder"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#drawable/rounded_corner"
android:padding="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.hbb20.CountryCodePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_showArrow="false"
app:ccp_showFlag="false"
app:ccp_showNameCode="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imgClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_cancel_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/countryLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:background="#android:color/white"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:text="Country"
app:layout_constraintBottom_toTopOf="#+id/countryHolder"
app:layout_constraintStart_toStartOf="#+id/countryHolder"
app:layout_constraintTop_toTopOf="#+id/countryHolder" />
</androidx.constraintlayout.widget.ConstraintLayout>
and here is used rounded_corner.xml drawable
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="8dp"/>
<stroke android:color="#555555" android:width="1dp"/>
</shape>

**here is my code **
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical">
<!--<com.google.android.material.textfield.TextInputLayout
android:id="#+id/sign_mob_no"
android:layout_width="match_parent"
android:layout_height="40dp"
android:hint="Mobile Number"
android:inputType="phone">-->
<RelativeLayout
android:id="#+id/relativeLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="21dp">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/mobile_no"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start"
android:hint="Mobile Number"
android:orientation="horizontal"
android:paddingLeft="0dp"
app:counterMaxLength="5">
<com.google.android.material.textfield.TextInputEditText
style="#style/loginfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:imeOptions="actionNext"
android:inputType="phone"
android:maxEms="11"
android:maxLength="12"
android:maxLines="1"
android:singleLine="true"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
</RelativeLayout>
<com.hbb20.CountryCodePicker
android:id="#+id/ccp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_gravity="center_vertical"
android:layout_marginBottom="0dp"
android:gravity="center|start"
android:paddingTop="10dp"
app:ccpDialog_backgroundColor="#color/white"
app:ccp_contentColor="#color/black"
app:ccp_countryAutoDetectionPref="SIM_NETWORK_LOCALE"
app:ccp_defaultPhoneCode="91"
app:ccp_hintExampleNumber="true"
app:ccp_showFlag="true"
app:ccp_showNameCode="false"
app:ccp_textSize="14dp">
</com.hbb20.CountryCodePicker>
<!--</com.google.android.material.textfield.TextInputLayout>-->
</RelativeLayout>
**and add dependency. this worked for me **

Android layout Issue - showing differently on different devices.

I have some xml which working fine with api level above 17 but showing differently on phones api below same. My minSDK is 15.
Should i make layout v-17 , v-16 , v-15 separately or is there any other way around which works for all three at once.?
XML showing different behaviour on devices:
<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:id="#+id/verify_number_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/app_name_id"
android:layout_marginLeft="17dp"
android:layout_marginRight="17dp"
android:animateLayoutChanges="true"
android:orientation="vertical"
android:visibility="visible"
tools:context=".activities.LoginActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="46dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="24dp"
android:layout_marginTop="30dp"
android:background="#drawable/outline"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="1">
<customViews.TextViewPlus
android:id="#+id/tv_state_code"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:gravity="center|center_horizontal"
android:text="#string/country_code_text"
android:textColor="#color/text_color"
android:textSize="16sp"
app:font="OpenSans-Regular.ttf" />
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#android:color/white" />
<customViews.EditTextPlus
android:id="#+id/et_mobile"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center|center_horizontal"
android:layout_marginLeft="8dp"
android:layout_weight="0.7"
android:gravity="start|center_vertical"
android:hint="#string/mobile_number_hint"
android:imeOptions="actionDone"
android:inputType="phone"
android:maxLength="10"
android:maxLines="1"
android:background="#android:color/transparent"
android:textColor="#color/textview_color_selector"
android:textCursorDrawable="#null"
android:textSize="16sp"
app:font="OpenSans-Regular.ttf" />
</LinearLayout>
<customViews.ButtonPlus
android:id="#+id/next_button"
android:layout_width="match_parent"
android:layout_height="46dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/outline"
android:gravity="center"
android:text="#string/next_button"
android:textColor="#color/textview_color_selector"
android:textSize="17sp"
app:font="Oswald-Light.ttf" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="46dp"
android:layout_gravity="center_horizontal"
android:indeterminate="true"
android:indeterminateTint="#color/text_color"
android:visibility="invisible" />
</LinearLayout>
outline.xml drawable used above and showing differently :
<?xml version="1.0" encoding="utf-8"?><!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<stroke
android:width="0.7pt"
android:color="#FFFF" />
<corners
android:bottomLeftRadius="55dp"
android:bottomRightRadius="55dp"
android:topLeftRadius="55dp"
android:topRightRadius="55dp" />
</shape>
above xml image on device above 17:
image on below api 17:
Please suggest some way around.

I think your corners value is to large(larger than half of view height) in your background drawable.
Try like this:
<corners
android:bottomLeftRadius="23dp"
android:bottomRightRadius="23dp"
android:topLeftRadius="23dp"
android:topRightRadius="23dp" />

Please modify the corners Drawable and change the Radius.Need to decrease the Radius size like this-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<stroke
android:width="0.7pt"
android:color="#FFFF" />
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>
Thanks