How to use default android themes? - android

Hy
I created an android project, and I saw thet, tehe are two themes.xml file. In emulator, when I switch day and night mode, my application color schema is changes too.
I thought it is greate, because with thease themes it will be easy to create a day/night app, but I don't know how it works.
How can I define a new color item inside themes, and use this schema for layout background?
For example: There is an item in both themes
<item name="colorPrimary">#303F9F</item>
And I would like to create a new item for both themes.xml, and use it to set up fragment background color, but the intellisense doesn't find this element directly.
<item name="backgroundColor">#303F9F</item>

You can change color easily from where you define your theme in 'styles.xml'.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorSecondary</item>
<item name="colorPrimaryDark">#color/colorSecondaryDark</item>
<item name="colorAccent">#color/colorSecondaryAccent</item>
</style>
I have two themes in my app so if i change the color or anything in my theme i will define that color in my selected theme for example:
i want to change the background color of 'AppThemeDark' i just define the color like this
<item name="background">#color/"#fff67"</item>

copy this line in your first screen
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

Ok In constraintlayout background tag is not worked so I will fix this problem with the use of View.
<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>

Related

why can't I change hintTextAppearance via android:theme?

Hello all I am new to android themes and styles. According to official documentations
A style is a collection of attributes that specify the appearance for a single View . A style can specify attributes such as font color, font size, background color, and much more. A theme is a type of style that's applied to an entire app, activity, or view hierarchy—not just an individual view
But i can not change some attributes via android:theme attribute, but i can change via style
Here I have this style file:
<style name="Style.InputLayout" parent="Widget.Design.TextInputLayout">
<item name="errorTextAppearance">#style/ErrorTextAppearance</item>
<item name="hintTextAppearance">#style/HintTextAppearance</item>
<item name="errorEnabled">true</item>
</style>
<style name="HintTextAppearance" parent="TextAppearance.Design.Hint">
<!-- Inactive and Active label color-->
<item name="android:textColor">?attr/colorShadow</item>
</style>
<style name="ErrorTextAppearance" parent="TextAppearance.Design.Error">
<!-- Error text color-->
<item name="android:textColor">?attr/colorError</item>
</style>
And I have a TextInputLayout as:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tfUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Style.InputLayout"
android:hint="Username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.EditText"/>
</com.google.android.material.textfield.TextInputLayout>
This works as i expected. But when I change style attribute to android:theme in TextInputLayout like below:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tfUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Style.InputLayout"
android:hint="Username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.EditText"/>
</com.google.android.material.textfield.TextInputLayout>
It does not work. Why is that?
It does not work. Why is that?
<com.google.android.material.textfield.TextInputLayout
android:theme="#style/Style.InputLayout"
It doesn't work because it is wrong.
You can use something like:
<com.google.android.material.textfield.TextInputLayout
android:theme="#style/Style.MyColor"
...>
With:
<style name="MyColor" parent="">
<item name="colorPrimary">#color/.....</item>
</style>
In this way you can modify the theme attributes for that view and any child views, which is useful for overriding theme color palettes in a specific portion of your interface.
You can find more info in the official doc.
Use like this:
Use this code on styles
<style name="MyColor" parent="">
<item name="android:colorControlActivated">#color/colorTextGray</item>
<itemname="android:colorControlHighlight">#color/colorTextGray</item>
<item name="android:colorControlNormal">#color/colorTextGray</item>
</style>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layoutTextInput"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:theme="#style/MyColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline131"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline121"
app:layout_constraintTop_toBottomOf="#+id/ed_phone"
app:layout_constraintVertical_bias="0.0"
app:passwordToggleDrawable="#drawable/show_password_selector"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#color/colorWhite">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/ed_password_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:inputType="textPassword"
android:textColor="#color/colorWhite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline131"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline121"
app:layout_constraintTop_toBottomOf="#+id/ed_phone"
app:layout_constraintVertical_bias="0.0" />
</com.google.android.material.textfield.TextInputLayout>

ConstraintLayout TextView is not shown

I got the following problem in my ConstraintLayout
Layout 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?android:attr/actionBarSize"
android:orientation="horizontal"
android:paddingEnd="8dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/layout_titlemode"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textAlignment="center"
android:textColor="#color/colorUnactive"
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.5"/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
Styles (using AppTheme):
<resources>
<style name="AppTheme" parent="Theme.MultiBackStack">
<item name="android:textColorPrimary">#color/colorTextPrimary</item>
</style>
<style name="Theme.MultiBackStack" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimary</item>
<item name="android:textColorPrimary">#color/colorTextPrimary</item>
</style>
</resources>
This is what I expected due to preview:
I excepted that the TextView would take all the available space (like match_parent) and that the text is shown in the center of the view.
This is what is actually shown:
Instead, nothing is shown actually (I guess because of the layout_width="0dp")
The newest version of the constraint support library is added:
'com.android.support.constraint:constraint-layout:1.0.2'
What I tried in addition:
I added to the TextView app:layout_constraintWidth_default="wrap"
This let the TextView shown up, but it starts on the left and is not centered. How can I achieve to center the view ?
I can't determine why nothing is shown.
Thank you in advance for your helping!
try using theme.
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorPrimaryDark">#color/colorPrimaryD</item>
</style>
Try using this theme in style.xml file
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">

Android change color of home arrow in android.support.v7.widget.Toolbar

I am trying to change color of home arrow indicator in custom toolbar.
There is list of examples that I found but nothing worked for me.
Here is my layout
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/title_bar_toolbar_id"
app:theme="#style/ToolbarColoredBackArrow"
app:popupTheme="#style/AppTheme"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
android:colorControlNormal="#color/hamburger_color"
android:background="#color/custom_theme_color" >
<LinearLayout
android:id="#+id/base_title_bar_toolbar_id_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/activity_calendar_toolbar_change_view_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/select_semester_view"
android:layout_gravity="center_vertical"
android:padding="10dp" />
<TextView
android:gravity="center"
android:layout_gravity="center"
android:id="#+id/base_title_bar_toolbar_header"
android:layout_weight="0.1"
style="#style/CustomToolBarTitleStyleBase"
android:text="#string/calendar" />
<ImageView
android:padding="13dp"
android:id="#+id/activity_calendar_toolbar_save_date_to_calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/save_date_to_calendar"
android:layout_gravity="center_vertical|start" />
<ImageView
android:id="#+id/activity_calendar_toolbar_select_semester_to_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/select_semester_to_show"
android:layout_gravity="center_vertical|start"
android:padding="13dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
The styles are:
<style name="ToolbarColoredBackArrow" parent="AppTheme">
<item name="android:textColorSecondary">#color/hamburger_color</item>
<item name="android:textColorPrimary">#color/hamburger_color</item>
<item name="colorControlNormal">#color/hamburger_color</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">#style/MyActionBarTabText</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarTabTextStyle">#style/MyActionBarTabText</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/custom_theme_color</item>
<item name="android:titleTextStyle">#style/MyActionBar.TitleTextStyle</item>
<!-- Support library com`enter code here`patibility -->
<item name="background">#color/custom_theme_color</item>
<item name="titleTextStyle">#style/MyActionBar.TitleTextStyle</item>
</style>
I tried all possibilities that I found in examples,
but nothing worked for me.
Haha, this is one of the most frustrating styling issues in Android right now...
Try creating a style like this
<style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorSecondary">#000000</item>
</style>
and using it in your Activity (you will probably want to merge it with your current style, as it is just the parent and this one param that matters) and of course replace the #000000 with some other color.
First of all you don't need a separate ImageView for your arrow navigation button. Just use the one from support design resources which will resize automatically according to the screen size.
Drawable upArrow = getResources().getDrawable(android.support.v7.appcompat.R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
toolbar.setNavigationIcon(upArrow);

EditText not tinted in Accent color on lollipop devices

I'm Software Engineering student that just started learning android development a couple months ago during my spare time.
at the moment im making my first app while learning in the process and i ran into a problem.
I'm using a DialogFragment and for some reason the Accent color i use in my theme is overridden only in pre-lollipop devices (both emulator and physical).
you can notice that only the floating hint is tinted in lollipop.
my DialogFragment layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog_add_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:hint="#string/dialog_add_title_hint"
android:imeOptions="actionNext"
android:inputType="text"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_password_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:hint="#string/dialog_add_password_hint"
android:imeOptions="actionGo"
android:inputType="text"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/input_cancel"
style="?attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/input_confirm"
style="?attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_weight="1"
android:text="Add" />
</LinearLayout>
my values/styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorHighlight</item>
<!-- Context Action Mode will Overlay Toolbar -->
<item name="windowActionModeOverlay">true</item>
</style>
i already tried several solutions to no avail:
overriding colorControlActivated and colorControlNormal - only changes floating hint tint
changing the tint programmatically, but that only changes the underline while not focused:
Drawable background = InputTextLayout.getEditText().getBackground();
DrawableCompat.setTint(background, yourColor);
InputTextLayout.getEditText().setBackground(background);
using EditText alone, not wrapped in TextInputLayout, doesn't help either.
any ideas?
Thanks in Advance
after a thorough search through the internet i stumbled upon a question here in stackoverflow regarding animating a DialogFragment - here
the answer in that link referred to a post by a Google Engineer saying:
...DialogFragment is just a wrapper around a Dialog to help manage its lifecycle. Dialogs are top-level windows so their animations are window animations, just like when you use Dialog in all other situations. You thus control the animations of dialogs through the theme or explicit window animation style you have set in its WindowManager.LayoutParams.
so i decided to check how to theme the DialogFragment
& found this guide by CodePath - here
basically, in your App Theme, in order to override the Dialog Themes you have to add the following:
<style name="AppTheme" parent...>
....
<!-- this will override DialogFragment theme -->
<item name="android:dialogTheme">#style/MyDialogFragmentTheme</item>
<!-- this will override AlertDialog theme -->
<item name="android:alertDialogTheme">#style/MyAlertDialogTheme</item>
</style>
<style name="CustomAlertDialogTheme.Animation">
...
</style>
<style name="MyDialogFragmentTheme" parent="Theme.AppCompat.Light.Dialog">
...
</style>
in each of the theme you can override attributes like colorPrimary, colorAccent etc.
if using this method makes your DialogFragment appear without a title (it happend to me), then add the following to its style:
<item name="android:windowNoTitle">false</item>
Bonus - adding animations
in order to add animations to either the AlertDialog or DialogFragment, write the following in its style:
<style name="MyDialogFragmentTheme" parent="Theme.AppCompat.Light.Dialog">
...
<item name="android:windowAnimationStyle">#style/MyDialogFragmentTheme.Animation</item>
</style>
then you need to create a style for the animation, for example:
<style name="MyDialogFragmentTheme.Animation">
<item name="android:windowEnterAnimation">#anim/dialog_slide_in_up</item>
<item name="android:windowExitAnimation">#anim/dialog_slide_out_down</item>
<item name="android:interpolator">#android:interpolator/anticipate</item>
</style>
there's more info in the CodePath guide linked above.
note that this all takes place in values/styles.xml
hope this helps other people.

Android - Setting default style for EditText view is not working

I am trying to set default style for edit text view. In this example, I have set default style for editText as well as for textView.
Here is my styles.xml from values folder:
<resources>
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:editTextStyle">#style/AppTheme.EditText</item>
<item name="android:textViewStyle">#style/AppTheme.TextView</item>
</style>
<style name="AppTheme.EditText" parent="android:Widget.EditText">
<item name="android:textColor">#color/red</item>
<item name="android:padding">10dp</item>
</style>
<style name="AppTheme.TextView" parent="android:Widget.TextView">
<item name="android:textColor">#color/red</item>
<item name="android:padding">10dp</item>
</style>
</resources>
As shown in the snapshots below, I have added two editText and two textView in layout.
Here is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_marginTop="20dp"
android:text="TextView2" />
<EditText
android:id="#+id/editText1"
style="#style/AppTheme.EditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:layout_marginTop="20dp"
android:ems="10"
android:text="EditText1" >
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:layout_marginTop="20dp"
android:ems="10"
android:text="EditText2" >
</EditText>
</RelativeLayout>
Now the issue is, default style for textView works fine but for editText view it does not reflect the style. If I explicitly set style for editText then it reflects as expected (as done for editText1), but not by default. Text color for editText2 should be red but it's not. Am I missing something?
Hi prashant..just i copied your code in my project. for me its working
do you want like this? or anything else?

Categories

Resources