I'm trying to following the documentation from Material 3 for checkboxes:
https://github.com/material-components/material-components-android/blob/master/docs/components/Checkbox.md
At the very beginning it states:
Note: <CheckBox> is auto-inflated as
<com.google.android.material.button.MaterialCheckBox> via
MaterialComponentsViewInflater when using a Theme.Material3.*
theme.
This does not seem to work for me, can someone please explain why the checkbox is not auto-inflated as a MaterialCheckBox?
Both theme files are using: Theme.Material3.*
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.ParentChildCheckboxes" parent="Theme.Material3.Light.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.ParentChildCheckboxes" parent="Theme.Material3.Dark.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_200</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_200</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
Layout file:
<?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">
<CheckBox
android:id="#+id/checkbox_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/label_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<CheckBox
android:id="#+id/checkbox_child_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/label_child_1"
app:layout_constraintStart_toStartOf="#+id/checkbox_parent"
app:layout_constraintTop_toBottomOf="#+id/checkbox_parent" />
<CheckBox
android:id="#+id/checkbox_child_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/label_child_2"
app:layout_constraintStart_toStartOf="#+id/checkbox_parent"
app:layout_constraintTop_toBottomOf="#+id/checkbox_child_1" />
<CheckBox
android:id="#+id/checkbox_child_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/label_child_3"
app:layout_constraintStart_toStartOf="#+id/checkbox_parent"
app:layout_constraintTop_toBottomOf="#+id/checkbox_child_2" />
<CheckBox
android:id="#+id/checkbox_child_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/label_child_4"
app:layout_constraintStart_toStartOf="#+id/checkbox_parent"
app:layout_constraintTop_toBottomOf="#+id/checkbox_child_3" />
</androidx.constraintlayout.widget.ConstraintLayout>
Activity file:
package com.example.parentchildcheckboxes
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.parentchildcheckboxes.databinding.ActivityMainBinding
import com.google.android.material.checkbox.MaterialCheckBox.STATE_INDETERMINATE
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
val checkBoxParent = binding.checkboxParent
checkBoxParent.checkedState = STATE_INDETERMINATE
}
}
I cant use .checkedState on checkBoxParent because it's not treated as a MaterialCheckBox:
When I hover on the val checkBoxParent , I see: val checkBoxParent: CheckBox and expected: val checkBoxParent: MaterialCheckBox.
When I change: val checkBoxParent = binding.checkboxParent to: val checkBoxParent = binding.checkboxParent as MaterialCheckBox:
val checkBoxParent = binding.checkboxParent as MaterialCheckBox
checkBoxParent.checkedState = STATE_INDETERMINATE
it works fine.
Why is the checkbox not auto-inflated as a MaterialCheckBox? as stated in the documentation?
Changing the <CheckBox> tag to: <com.google.android.material.checkbox.MaterialCheckBox> solved the issue for me:
<?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">
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/checkbox_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/label_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/checkbox_child_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/label_child_1"
app:layout_constraintStart_toStartOf="#+id/checkbox_parent"
app:layout_constraintTop_toBottomOf="#+id/checkbox_parent" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/checkbox_child_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/label_child_2"
app:layout_constraintStart_toStartOf="#+id/checkbox_parent"
app:layout_constraintTop_toBottomOf="#+id/checkbox_child_1" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/checkbox_child_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/label_child_3"
app:layout_constraintStart_toStartOf="#+id/checkbox_parent"
app:layout_constraintTop_toBottomOf="#+id/checkbox_child_2" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/checkbox_child_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/label_child_4"
app:layout_constraintStart_toStartOf="#+id/checkbox_parent"
app:layout_constraintTop_toBottomOf="#+id/checkbox_child_3" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I want to change the colour of OK and Cancel text colour in date picker dialogue to black , but it remains white only. I used
<item name="android:textColor">#000000</item>
in the date picker style , to change the colour of the OK text but it is not working !! What's the problem and how to change its colour ?
// themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.DOBCalc" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="fontFamily">#font/font9</item>
</style>
<style name="datepicker" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#color/txtBg</item>
<!--selected Item color-->
<item name="colorControlActivated">#color/txtBg</item>
<!-- arrow bordercolor(<>)-->
<item name="android:selectableItemBackgroundBorderless">#color/white</item>
<!-- Highlight item color-->
<item name="colorControlHighlight">#color/bgColor</item>
<!--Calender Background color -->
<item name="android:windowBackground">#color/white</item>
<!-- Ok Cancel Color-->
<item name="android:textColor">#000000</item>
<!-- Week TextColor-->
<item name="android:textColorSecondary">#color/txtBg</item>
<!-- Calender Number color arrow color (< >) -->
<item name="android:textColorPrimary">#000000</item>
<!--day , month-->
<item name="android:textColorPrimaryInverse">#ffffff</item>
<!-- year-->
<item name="android:textColorSecondaryInverse">#ffffff</item>
</style>
// MainActivity.kt file
package com.nandini.android.dobcalc
import android.app.DatePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import java.text.SimpleDateFormat
import java.util.*
class MainActivity : AppCompatActivity() {
private var dateTv : TextView?=null
private var minTv : TextView?=null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val btnDatePicker : Button = findViewById(R.id.btnDatePicker)
dateTv=findViewById(R.id.date_tv)
minTv=findViewById(R.id.min_tv)
btnDatePicker.setOnClickListener {
datePicker()
}
}
private fun datePicker ()
{
val myCalender = Calendar.getInstance()
val year = myCalender.get(Calendar.YEAR)
val month = myCalender.get(Calendar.MONTH)
val day = myCalender.get(Calendar.DAY_OF_MONTH)
val dpd = DatePickerDialog(this,R.style.datepicker,
{ _, selectedYear, selectedMonth, selectedDay ->
Toast.makeText(this,"Year was $selectedYear , ${selectedMonth+1}'s $selectedDay day.",Toast.LENGTH_SHORT).show()
val selectedDate="$selectedDay/${selectedMonth+1}/$selectedYear"
dateTv?.text = selectedDate
val sdf= SimpleDateFormat("dd/MM/yyyy",Locale.ENGLISH)
val theDate=sdf.parse(selectedDate)
theDate?.let {
val selectedDateInMin=theDate.time / 60000
val currentDate=sdf.parse(sdf.format(System.currentTimeMillis()))
currentDate?.let {
val currentDateInMin=currentDate.time/60000
val differenceInMin = currentDateInMin-selectedDateInMin
minTv?.text=differenceInMin.toString()
}
} },year,month,day)
dpd.datePicker.maxDate=System.currentTimeMillis()-86400000
dpd.show()
}
}
// activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#color/bgColor"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calculate your"
android:textSize="25sp"
android:textStyle="bold"
android:textAllCaps="true"
android:layout_marginTop="16dp"
android:textColor="#color/txtColor" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Age"
android:textSize="25sp"
android:padding="10dp"
android:background="#color/txtBg"
android:textStyle="bold"
android:textAllCaps="true"
android:layout_marginTop="16dp"
android:textColor="#color/txtColor" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Minutes"
android:textSize="25sp"
android:textStyle="bold"
android:textAllCaps="true"
android:layout_marginTop="16dp"
android:textColor="#color/txtColor" />
<Button
android:id="#+id/btnDatePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#D9EADD"
android:layout_margin="16dp"
android:text="Select Date"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#color/txtBg"/>
<TextView
android:id="#+id/date_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00.00.00"
android:layout_marginTop="16dp"
android:textAllCaps="true"
android:textColor="#color/txtColor"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Minutes"
android:textSize="20sp"
android:textStyle="bold"
android:textAllCaps="false"
android:layout_marginTop="8dp"
android:textColor="#98B0A8" />
<TextView
android:id="#+id/min_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="35sp"
android:textStyle="bold"
android:textAllCaps="true"
android:layout_marginTop="25dp"
android:textColor="#color/txtColor" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Minutes"
android:textSize="25sp"
android:textStyle="bold"
android:textAllCaps="false"
android:layout_marginTop="8dp"
android:textColor="#98B0A8" />
</LinearLayout>
//colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#1d302b</color>
<color name="purple_700">#0f1815</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="bgColor">#49796B</color>
<color name="txtColor">#ffffff</color>
<color name="txtBg">#2c4940</color>
<color name="buttonBg">#D9EADD</color>
</resources>
Add this code :-
dpd.show()
dpd.getButton(DatePickerDialog.BUTTON_NEGATIVE).setBackgroundColor(Color.GREEN)
xml attributes:
colorOnPrimary -> For the text color of OK/CANCEL buttons
You must add this attribute to the dialog style.
Want to change the focused hint Edittext colour but it is not changing. What's the matter ? Have used all the attributes in the edit Text theme but yet it's not changing.I have changed the parent theme from MaterialComponents to App Compat , is it becoz of that ?
This is my themes.xml file.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.QuizApp" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:windowFullscreen">true</item>
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="fontFamily">#font/font10</item>
</style>
<style name="heading_name" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="fontFamily">#font/font1</item>
<item name="textFillColor">#2B0031</item>
</style>
<style name="EditTextTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#color/purple_gray</item>
<item name="colorControlActivated">#color/purple_gray</item>
<item name="colorControlHighlight">#color/purple_gray</item>
<item name="hintTextColor">#color/purple_gray</item>
<item name="android:textColorHint">#color/purple_gray</item>
<item name="boxStrokeErrorColor">#color/purple_gray</item>
</style>
<style name="Theme.QuizApp.NoActionBarAndStatusBar" >
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:fitsSystemWindows">true</item>
<item name="fontFamily">#font/font10</item>
</style>
<style name="progressBarBlue" parent="#style/Theme.AppCompat">
<item name="colorAccent">#4568dc</item>
</style>
<style name="Theme.QuizApp.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.QuizApp.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
This is the activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_layout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/screen_background"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">
<TextView
style="#style/heading_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:fontFamily="#font/font1"
android:gravity="center"
android:shadowColor="#450750"
android:shadowDx="1.5"
android:shadowDy="1.5"
android:shadowRadius="1.6"
android:text="Quiz App !"
android:textColor="#color/white"
android:textColorHighlight="#8F22A1"
android:textColorHint="#7F1491"
android:textSize="55sp"
android:textStyle="bold" />
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
app:cardElevation="50dp"
app:cardMaxElevation="100dp"
app:cardUseCompatPadding="false"
android:layout_marginEnd="20dp"
app:cardCornerRadius="12dp"
android:background="#color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/font3"
android:gravity="center_horizontal"
android:text="Welcome ! "
android:textColor="#000000"
android:textSize="40sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Please Enter Your Name "
android:textStyle="bold"
android:textSize="20sp"
android:gravity="center_horizontal"
android:layout_marginTop="16dp"
android:textColor="#color/black"/>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.Material3.TextInputEditText.OutlinedBox"
android:layout_marginTop="20dp">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"
tools:text="Nandini"
android:textCursorDrawable="#drawable/cursor"
android:inputType="textCapWords"
android:textColor="#000000"
android:shadowColor="#color/purple_gray"
android:theme="#style/EditTextTheme"
android:textColorHighlight="#color/purple_gray"
android:textColorLink="#color/purple_gray"
android:backgroundTint="#color/purple_gray"
app:hintTextColor="#color/purple_gray"
android:outlineAmbientShadowColor="#color/purple_gray"
android:textColorHint="#color/purple_gray"/>
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="#+id/btn_start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Start Quiz"
android:textStyle="bold"
android:elevation="100dp"
android:stateListAnimator="#null"
android:layout_gravity="center_horizontal"
android:background="#drawable/button_bg"
android:textColor="#color/white"
android:textSize="20sp"/>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
This is MainActivity.kt file.
package com.nandini.android.quizapp
import android.content.Intent
import android.os.Bundle
import android.view.Window
import android.view.WindowManager
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val btn_start : Button =findViewById(R.id.btn_start)
val et_name : EditText=findViewById(R.id.et_name)
btn_start.setOnClickListener {
if(et_name.text.isEmpty())
{
et_name.setError("")
Toast.makeText(this, "Enter name",Toast.LENGTH_LONG).show()
}else{
val intent = Intent(this,QuizQuestionActivity::class.java)
intent.putExtra(Constants.USER_NAME,et_name.text.toString())
startActivity(intent)
}
}
}
}
Firstly, I would start using the Material Design library in order to be up to date.
So I would add in my build.gradle (app) :
implementation 'com.google.android.material:material:1.5.0'
Then your style should look something like this:
<style name="Theme.QuizApp" parent="Theme.MaterialComponents.DayNight">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:windowFullscreen">true</item>
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<item name="textAppearanceSubtitle1">#style/TextAppearance.App.test</item>
<!-- Customize your theme here. -->
</style>
<style name="TextAppearance.App.test" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="hintTextColor">#color/purple_gray</item>
<item name="colorControlNormal">#color/purple_gray</item>
<item name="colorControlActivated">#color/purple_gray</item>
<item name="colorControlHighlight">#color/purple_gray</item>
<item name="android:textColorHint">#color/purple_gray</item>
<item name="boxStrokeErrorColor">#color/purple_gray</item>
</style>
Don't know how your design should look like in the XML so I just left the remaining attributes as it was in the style.
and your MainActivity should become:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val btn_start: Button = findViewById(R.id.btn_start)
val et_name: TextInputLayout = findViewById(R.id.et_name)
btn_start.setOnClickListener {
if (et_name.editText?.editableText.isNullOrEmpty()) {
et_name.setError("")
Toast.makeText(this, "Enter name", Toast.LENGTH_LONG).show()
}else{
val intent = Intent(this,QuizQuestionActivity::class.java)
intent.putExtra(Constants.USER_NAME,et_name.text.toString())
startActivity(intent)
}
}
}
}
Lastly, in your activity layout you will use that style we created (You will have to adjust that on your project):
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Default"
style="#style/TextAppearance.App.test"
android:layout_margin="10dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/default_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
/>
</com.google.android.material.textfield.TextInputLayout>
Let me know if it worked, In my small test project it looks good :)
My small suggestions in general are:
Do not to use findViewById since it is not good for performance for the app if you get in the future a lot of views inside your XML. I would suggest you to use viewBinding or DataBinding.
Try to add the same amount of spaces between your code so that it looks cleaner
Try to extract your Strings, dimensions into xml so that you can re-use them here you can find an article about it https://suragch.medium.com/using-dimens-xml-in-android-10dec2fe485c and one for strings https://riptutorial.com/android/example/13829/working-with-strings-xml-file
I use material. I'm going to use a color for TextInputLayout for the backdrop, but something like the one below! hint background not change.i used style and wanted to make changes but it didn't work. In the layout itself I tried to apply the changes again! How to fix this problem?
NOTE
background of label username in picture that not transparent and it covers some of the TextInputEditText
in build.gradle
implementation 'com.google.android.material:material:1.1.0'
in style
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="textAppearanceSubtitle1">#style/TextAppearance.App.Subtitle1</item>
<item name="textAppearanceCaption">#style/TextAppearance.App.Caption</item>
<item name="shapeAppearanceSmallComponent">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light"/>
<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
<item name="android:textColorTertiary">#color/white</item>
<item name="android:textColorTertiaryInverse">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
in layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/linUsername"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:hint="#string/label_username"
android:textColorHint="#AEB0C6"
app:boxBackgroundColor="#33385E"
app:boxStrokeColor="#color/red"
app:endIconDrawable="#drawable/ic_clear_white_24dp"
app:endIconMode="password_toggle"
app:endIconTint="#AEB0C6"
app:hintTextColor="#AEB0C6"
app:startIconDrawable="#drawable/ic_info_outline_white_24dp"
app:startIconTint="#AEB0C6">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:textColor="#color/white"
android:textColorHint="#color/white"
app:hintTextColor="#AEB0C6" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:fontFamily="#font/iran_sans_mobile"
android:text="login"
android:visibility="visible"
app:cornerRadius="#dimen/radiusButton" />
</LinearLayout>
You may use custom edit text with border, so you can easily set your desired background. For example try this code:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:background="#drawable/boarder"
android:paddingLeft="5dp"
android:text="input"
app:endIconMode="password_toggle"
app:endIconTint="#EF0707" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="7dp"
android:background="#fff"
android:text="Label" />
</RelativeLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="login"
android:visibility="visible"
app:cornerRadius="10dp" />
</LinearLayout>
boarder.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#03A6F0" />
<corners android:radius="12dp" />
</shape>
Also see here: Custom edit text with borders
If you don't like to use custom edit text, you can modify your code this way:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/linUsername"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username"
android:textColorHint="#ED0A0A"
app:boxBackgroundColor="#1A33385E"
app:endIconMode="password_toggle"
app:endIconTint="#AEB0C6">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtUsername"
android:background="#drawable/boarder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:textColor="#fff"
android:text="User"
android:textColorHint="#fff"
app:hintTextColor="#AEB0C6" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="login"
android:visibility="visible"
app:cornerRadius="10dp" />
</LinearLayout>
And in boarder.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#8033385E"/>
<corners android:radius="12dp" />
</shape>
Output will be:
I have this error when i start Activity with Layout in Xamarin.Android project. How to fix this?
All android nuget packages v. 28.0.0.3
Android.Views.InflateException: 'Binary XML file line #1: Binary XML file line #1: Error inflating class android.suppot.design.widget.NavigationView'
XAML
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/drawerLayout"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include
layout="#layout/include_main"
/>
</LinearLayout>
<android.suppot.design.widget.NavigationView
android:id="#+id/navView"
android:layout_height="match_parent"
android:layout_width="300dp"
android:background="#android:color/white"
android:layout_gravity="start"
app:headerLayout="#layout/headerlayout"
app:menu="#menu/navmenu"
/>
</android.support.v4.widget.DrawerLayout>
NavMenu
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item
android:id="#+id/navProfile"
android:title="Профиль"
android:icon="#mipmap/ic_person"/>
<item android:id="#+id/navPayments"
android:icon="#mipmap/ic_wallet"
android:title="Транзакции"/>
<item android:id="#+id/navHistory"
android:title="История"
android:icon="#mipmap/ic_history"
/>
<item
android:id="#+id/navPromo"
android:title="Промо"
android:icon="#mipmap/ic_discount"
/>
<item
android:id="#+id/navSupport"
android:title="Поддержка"
android:icon="#mipmap/ic_support"
/>
<item
android:id="#+id/navAbout"
android:title="О нас"
android:icon="#mipmap/ic_about"
/>
</group>
</menu>
Include_main
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main Layout"
android:textSize="20sp"
android:gravity="center"
android:layout_gravity="center"
/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
header_layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#android:color/white"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<Refractored.Controls.CircleImageView
android:id="#+id/accoutImage"
android:layout_height="100dp"
android:layout_width="100dp"
android:layout_gravity="center"
android:src="#drawable/account"
android:scaleType="centerCrop"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/accountTitle"
android:layout_gravity="bottom"
android:gravity="center"
android:text="UserName"
android:layout_marginBottom="12dp"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="bottom"
android:background="#android:color/holo_blue_dark"/>
</FrameLayout>
styles.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="Theme.Splash"
parent="Theme.AppCompat.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">#drawable/splash</item>
</style>
<style name="Theme.Register" parent="Theme.AppCompat.NoActionBar">
<item name="windowNoTitle">true</item>
</style>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette ->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/colorAccent</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
You have misspelled the word support. Just try to replace
<android.suppot.design.widget.NavigationView>
with
<android.support.design.widget.NavigationView>
Besides, make sure the nuget:Refractored.Controls.CircleImageView have been installed, otherwise the code will report the error as well.
Note:
I have tested that It doesn't matter if the namespace is Refractored.Controls.CircleImageView or refractored.controls.CircleImageView.They all works.
try to change refractored.controls.CircleImageView instead of Refractored.Controls.CircleImageView in your header_layout :
<refractored.controls.CircleImageView
android:id="#+id/accoutImage"
android:layout_height="100dp"
android:layout_width="100dp"
android:layout_gravity="center"
android:src="#drawable/account"
android:scaleType="centerCrop"
/>
and :
<android.support.design.widget.NavigationView>
instead of:
<android.suppot.design.widget.NavigationView>
I want to build a theme for my app. But it seems like my LiestView item don't apply the values.
This is the styles.xml:
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:textViewStyle">#style/TextView</item>
</style>
<style name="TextView" parent="android:Widget.TextView">
<item name="android:layout_margin">8dp</item>
<item name="android:padding">0dp</item>
<item name="android:textColor">#87000000</item>
<item name="android:textSize">18sp</item>
</style>
in my activity i use a Listview with Custom Adapter but the TextViews from my item.xml did'nt have a margin:
<LinearLayout 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"
android:clickable="true"
android:orientation="vertical"
tools:context="de.resper.enigma2chromecast.mainLive" >
<TextView
android:id="#+id/channelName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="#string/hello_world" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:id="#+id/channelLine1"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
what ever you designed xml, put in android manifest file in application theme
<application android:theme="#style/CustomTheme">