I have 10 TextViews inside 1 Constraint Layout. What i would like to achieve is to have the Constraint Layout have some elevation to make it seem like all 10 textviews are basically above my background. But i would like to keep the background of my layout to take the background of the phone so have the Constraint layout have a transparent background. Any way i can achieve this?
I saw various posts here about this but they actually want the layout colored in and not transparent and that is where this one differs from theirs.
I have tried way to do it with shapes using a rectangle but the shadow of the elevation will only appear if i make the rectangle visible.... and not transparent.
<android.support.constraint.ConstraintLayout
android:id="#+id/topBorder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintTop_toBottomOf="#id/tvTitle">
<TextView
android:id="#+id/tvIon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:text="#string/Ion"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tvIonResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="5dp"
android:text="#string/ResultPlaceHolder"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvSn1_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/sn1_1"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvIon" />
<TextView
android:id="#+id/tvSn1_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="#string/ResultPlaceHolder"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/tvIonResult" />
<TextView
android:id="#+id/tvSn1_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/sn1_3"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSn1_1" />
<TextView
android:id="#+id/tvSn1_3_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="10dp"
android:text="#string/ResultPlaceHolder"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSn1_Result" />
<TextView
android:id="#+id/tvSn2_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/sn2_1"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSn1_3" />
<TextView
android:id="#+id/tvSn2_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/sn2_3"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/tvSn2_1" />
<TextView
android:id="#+id/tvSn2_3_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="#string/ResultPlaceHolder"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/tvSn2_1_Result" />
<TextView
android:id="#+id/tvSn2_1_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="10dp"
android:text="#string/ResultPlaceHolder"
android:textSize="18sp"
android:textColor="#android:color/black"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSn1_3_Result" />
</android.support.constraint.ConstraintLayout>
This is my xml for what i tried
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#00ffffff"/>
<stroke android:color="#00000000"/>
</shape>
</item>
</layer-list>
if you want to create a transparent activity on android
Add the following style in your res/values/styles.xml
file Here’s a complete file:
<style name="AppTheme.Transparent" paren="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
then In the AndroidManifest.xml:
<activity
android:name=".WhateverNameOfTheActivityIs"
android:theme="#style/AppTheme.Transparent">
</activity>
If you do not want your layout to be completely transparent
then in your layout add this to ConstraintLayout
android:background="#80000000"
If you add this line to the Constraint Layout xml it will become transparent: android:background="#android:color/transparent". This will make the background see through and show what ever is bellow or overlapping.
Related
I have a button and I gave the cornerRadius attribute. In the xml code, the app appears o be curved but when I run the app, the button is rectangular in shape.
<?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/res_item"
android:forceDarkAllowed="false"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="70dp">
<ImageView
android:id="#+id/res_item_image"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:src="#drawable/ic_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.494" />
<TextView
android:id="#+id/res_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/salsa"
android:text="Name"
android:textColor="#color/black"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/add"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#id/res_item_image"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/res_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/salsa"
android:text="price"
app:layout_constraintTop_toBottomOf="#id/res_item_name"
app:layout_constraintStart_toEndOf="#id/res_item_image"
android:layout_marginLeft="20dp"
android:textColor="#color/tomato_red"
android:textSize="18sp" />
<Button app:cornerRadius="20dp"
android:id="#+id/add"
android:layout_width="70dp"
android:layout_height="40dp"
android:layout_margin="20dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="30dp"
android:text="Add"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Instead of this button I also used material button, but still the same happens. It appears to be curved in the XML design, but it isn't in the app.
If you are using a Material theme, then you have to use app:shapeAppearance instead of app:cornerRadius. See details
At first create a shape style in your styles.xml:
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerSize">20dp</item>
</style>
And in your Button, remove app:cornerRadius and use this shape style:
<com.google.android.material.button.MaterialButton app:shapeAppearance="#style/ShapeAppearance.App.SmallComponent"
android:id="#+id/add"
android:layout_width="70dp"
android:layout_height="40dp"
android:layout_margin="20dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="30dp"
android:text="Add"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
Create a new file in the drawable folder called for example ripple.xml and use this code:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/primary">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary"/>
<corners android:radius="20dp" />
</shape>
</item>
</ripple>
And now use the created file as background for your button:
<Button
android:id="#+id/add"
android:layout_width="70dp"
android:layout_height="40dp"
android:layout_margin="20dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="30dp"
android:text="Add"
android:background="#drawable/ripple"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
If you want to create rounded corner button then
Create a xml file in your drawable folder like button_shape.xml and paste the following code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#50B771" />
<corners android:radius="5dp" />
</shape>
Then set the selector file into your button in the xml:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textColor="#ffffff"
android:background="#drawable/button_shape"
android:text="Buttons" />
If you have again doubt on this you can ping me.
I am using custom rounded backgrounds for dialogs in my Android Studio app but am running into a problem. I have specified the color of the shape to be white but would like to have it change to black for dark mode (as the text automatically changes and is unreadable with the white background). I cannot figure out how to do this.
Here is the rounded background xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<corners android:radius="25dp" />
</shape>
Here is how I create my dialog:
var myDialog: Dialog
myDialog = Dialog(this.requireContext())
myDialog.setContentView(R.layout.popup_deposit);
myDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
myDialog.show()
R.layout.popup_deposit:
<?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:background="#drawable/rounded"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/textDepAmount"
android:layout_width="228dp"
android:layout_height="68dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:ems="100"
android:hint="0"
android:importantForAutofill="no"
android:inputType="number"
app:layout_constraintEnd_toStartOf="#+id/buttonDepAll"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/buttonDepAll"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_marginEnd="10dp"
android:text="#string/all"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textDepAmount"
app:layout_constraintTop_toTopOf="#+id/textDepAmount" />
<TextView
android:id="#+id/textView4"
android:layout_width="244dp"
android:layout_height="49dp"
android:text="#string/how_much_money_would_you_like_to_deposit"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/buttonBack"
app:layout_constraintTop_toTopOf="#+id/buttonBack" />
<Button
android:id="#+id/buttonConfirmDeposit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="2dp"
android:enabled="false"
android:text="#string/deposit"
app:cornerRadius="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textDepAmount" />
<ImageButton
android:id="#+id/buttonBack"
android:layout_width="54dp"
android:layout_height="50dp"
android:layout_marginTop="16dp"
android:contentDescription="#string/back"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_arrow_back_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Does anybody know how to do this? Any answers would be appreciated
This question already has answers here:
MaterialButton size difference to Button
(2 answers)
Closed 1 year ago.
Basically, I want the white button view not to have that grey padding, while retaining the button properties, so the click can be visible. This is my xml code below, I already tried adding a shape as the background but that removes the click animation that I want, I also tried just having a TextView with a TouchListener to create an animation but I was told that that is not good practice because of accessibility:
<?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="250dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardCornerRadius="10dp"
app:cardPreventCornerOverlap="false">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/alertBackground">
<TextView
android:id="#+id/alertTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:gravity="center"
android:text="TextView"
android:textColor="?attr/colorOnPrimary"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/alertMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:ems="12"
android:gravity="center"
android:text="#string/alert_message_incorrect_password"
android:textColor="?attr/colorOnPrimary"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alertTitle" />
<Button
android:id="#+id/alertButton"
android:layout_width="0dp"
android:layout_height="50dp"
android:backgroundTint="#color/alertBackground"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/alertButton2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/separator" />
<Button
android:id="#+id/alertButton2"
android:layout_width="0dp"
android:layout_height="50dp"
android:backgroundTint="#color/alertBackground"
android:textColor="#color/white"
app:layout_constraintTop_toBottomOf="#id/separator"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/alertButton" />
<View
android:id="#+id/separator"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginTop="16dp"
android:background="#color/separator_grey"
app:layout_constraintBottom_toTopOf="#+id/alertButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/alertMessage" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
Check the style if used any.
Mark the width and height as match constraints.
you can create custom drawable and use them as background in button ...
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#4CAF50"/>
</shape>
and apply in button
android:background="#drawable/yourcustomview"
You can set minWidth, minHeight, insetTop, insetBottom by zero.
So like this.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:padding="0dp"
android:minHeight="0dp"
android:minWidth="0dp"
android:insetTop="0dp"
android:insetBottom="0dp" />
I have date picker which I've tried to customize to a different style but to no avail.
I want to show a DatePicker and not a DatePickerDialog.
In the layout design tab on Android Studio, the DatePicker's background color is black and the text color is white.
However, the datePicker occupies space on the device screen but is not visible.
I've also tried to change the AppTheme.
The DatePicker code is below:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.AgeFragment">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_medium"
android:text="Sign up"
android:textColor="#color/titleBlack"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
app:srcCompat="#drawable/ic_baseline_arrow_back_24"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:fontFamily="#font/roboto_medium"
android:text="When's your birthday?"
android:textColor="#color/titleBlack"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="sans-serif-condensed"
android:text="Your birthday won't be shown publicly"
android:textColor="#7A7474"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<DatePicker
android:id="#+id/date_picker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:calendarViewShown="false"
android:calendarTextColor="#android:color/holo_green_dark"
android:background="#android:color/holo_red_dark"
android:datePickerMode="spinner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
tools:targetApi="lollipop" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:background="#color/pinkBtnBackground"
android:fontFamily="sans-serif-medium"
android:text="Next"
android:textAllCaps="false"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/date_picker2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#android:color/transparent</item>
<item name="android:background">#android:color/white</item>
<item name="android:textColor">#color/textColor</item>
<item name="android:datePickerStyle">#style/DatePickerStyle</item>
</style>
<style name="DatePickerStyle">
<item name="android:calendarTextColor" tools:ignore="NewApi">#android:color/holo_green_dark</item>
<item name="backgroundColor">#android:color/holo_red_dark</item>
</style>
The result is still the same. I've searched for answers but none provides a solution to this problem.
Any help or reference to a documentation that provide an explanation would be highly appreciated.
Try removing <item name="android:background">#android:color/white</item> from the style. It is messing with your current Layout
this is my XML file. I am having trouble while running my app. I have already created same GUI for registration activity but getting problem while designing login activity. I have declared tools:background = "#color/colorPrimary" but unable get colorPrimary . what should I do to solve this error. why I am getting this error. Help me.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:background="#color/colorPrimary"
tools:context="com.example.pratikrathi.registerapp.RegisterActivity">
<EditText
android:id="#+id/reg_email_text"
android:layout_width="0dp"
android:layout_height="54dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="200dp"
android:backgroundTint="#android:color/white"
android:ems="10"
android:hint="#string/email_hint"
android:inputType="textEmailAddress"
android:paddingVertical="16dp"
android:textColor="#android:color/white"
android:textColorHint="#color/whiteTransparentHalf"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_progress" />
<EditText
android:id="#+id/reg_password_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:backgroundTint="#android:color/white"
android:ems="10"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:paddingVertical="16dp"
android:textColor="#android:color/white"
android:textColorHint="#color/whiteTransparentHalf"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/reg_email_text" />
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:backgroundTint="#color/colorAccent"
android:paddingBottom="20dp"
android:paddingTop="20dp"
android:text="#string/login_btn_text"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/reg_password_text" />
<Button
android:id="#+id/login_reg_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:backgroundTint="#android:color/white"
android:paddingBottom="20dp"
android:paddingTop="20dp"
android:text="#string/login_reg_btn_text"
android:textAllCaps="false"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Simply change tools:background="#color/colorPrimary" to android:background="#color/colorPrimary",
since tools is used for visibility inside android studio in preview
add following code, where you want to apply backgroung:
style="#style/style1"
values/style.xml
<style name="style1">
<item name="android:background">#drawable/custom_color</item>
</style>
drawable\custom_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/custom_color" />
</shape>
</item>
values\colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="custom_color">#123456</color>
</resources>