First of all, this is the code I use for ListView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:contentDescription="#string/top_layer"
android:id="#+id/top_layer_Q1"
android:layout_width="fill_parent"
android:src="#drawable/top_bar"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/Quotelist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
In order to test the code, I created a temporary project in Studio, and the Output I got was Black text in white background. And when I added the same code to the project I am working, I get the output with a Black Background and white text.
Though I did not change any code, what might be causing this? What is the best fix for this?
Thanks,
EDIT1
Here is the styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
Try this:
Add this to your style.xml
<style name="ListStyle" parent="#android:style/Widget.ListView">
<item name="android:textColor">#FF000000</item>
<item name="android:background">#FFFFFFFF</item>
</style>
Then set it as the style for your listView
style="#style/ListStyle"
Related
I started learning Material Design with this video: https://www.youtube.com/watch?v=0hR2skWlb_U&t=183s
After some changes in the styles.xml and a new added styles.xml for v21 (for backward compatibility), My UI Screen is completely black (I have to set background color on my own) and elements like buttons do not work. Check this picture:
The textsize was nearly invisible, I had to make it bigger. But check the buttons - they are not even buttons! Yeah I did not add constraints yet, I just want to show you what's going on.
The xml code for the design should be fine, I just took it from another project of mine, but in case it is important here:
activity_main.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"
android:background="#ffffff"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_width="85dp"
android:layout_height="64dp"
android:text="Button"
android:textSize="20sp"
tools:layout_editor_absoluteX="127dp"
tools:layout_editor_absoluteY="97dp" />
<Button
android:id="#+id/button2"
android:layout_width="124dp"
android:layout_height="71dp"
android:text="Button"
android:textSize="20sp"
tools:layout_editor_absoluteX="125dp"
tools:layout_editor_absoluteY="223dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
The important changes - and I think that's what has caused the error - is this: I changed the styles.xml.
styles.xml:
<resources>
<!-- below api 21 -->
<style name="AppMaterialTheme" parents="SuperMaterialTheme">
</style>
<style name="SuperMaterialTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<!-- muss 500 tint sein -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- muss 700 tint sein -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!-- muss 200 tint sein -->
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
And I added another styles.xml for phones with API 21 or above, here is the structure:
the styles.xml under values-v21 looks like this:
values-v21/styles.xml:
<resources>
<style name="AppMaterialTheme" parents="SuperMaterialTheme">
</style>
</resources>
I have no idea what is going on and would be really thankful if someone can bring some light into the dark.
Thanks for every answer!
Change parent="Theme.AppCompat.Light" in style.xml to parent="Theme.MaterialComponents.Light", and if it's showing error there then check if you have added Material design dependency in your gradle file or not.
If you are using material library then it must needs to extend your app theme with the material theme
<style name="SuperMaterialTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
....
</style>
To keep it as short as possible.
This is my style for TextInputLayout
<style name="TextLabel" parent="Widget.AppCompat.AutoCompleteTextView">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/pure_white</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/pure_white</item>
<item name="colorControlNormal">#color/pure_white</item>
<item name="colorControlActivated">#color/pure_white</item>
<!-- When everything else failed I tried this but with no effect -->
<item name="android:background">#android:color/transparent</item>
</style>
And this is the implementation in the layout
<android.support.design.widget.TextInputLayout
android:theme="#style/TextLabel"
android:layout_margin="#dimen/activity_margin_basic_double"
android:layout_centerInParent="true"
android:id="#+id/team_name_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/new_team_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_team_create"
android:maxLines="1" />
</android.support.design.widget.TextInputLayout>
And this is what I get on the device (both physical and emulated):
But this is what I actually want and Android Studio preview actually shows it correctly, it just won't compile this way:
Any ideas how to get this sorted please? I've wasted few days trying to figure this one out but just can't figure the problem
Many thanks in advance!
Sloba
The issue is in your styles. You are applying Widget.AppCompat.AutoCompleteTextView to TextInputLayout with the results that you are seeing. You can change this parent style to AppTheme or move android:theme="#style/TextLabel" to the AutoCompleteTextView and not change the parent. I show the first way below.
This little video shows the changes I made to get what I think is what you want. I added a few things to better show how it is working. It may not be 100% of what you need, but it should get you over the threshhold.
Demo video
Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#FFcc9c00"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/team_name_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:theme="#style/TextLabel">
<AutoCompleteTextView
android:id="#+id/new_team_name"
android:layout_width="match_parent"
android:hint="Choose a Team Name"
android:layout_height="wrap_content"
android:maxLines="1" />
</android.support.design.widget.TextInputLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/team_name_container"
android:layout_margin="8dp"
android:hint="EditText hint" />
</RelativeLayout>
And 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="TextLabel" parent="AppTheme">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#android:color/white</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#android:color/white</item>
<item name="colorControlNormal">#android:color/white</item>
<item name="colorControlActivated">#android:color/white</item>
</style>
</resources>
I've following style.xml in res/values/ folder:
<!-- 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>
<item name="android:colorBackground">#000000</item>
</style>
and the following layout for my main activity, where I've used style="#style/AppTheme":
<?xml version="1.0" encoding="utf-8"?>
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
style="#style/AppTheme" // here I've used It.
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.kaushal28.wakeupplease.MainActivity">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:id="#+id/startAlarm" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/stop"
android:text="Stop"/>
</LinearLayout>
</RelativeLayout>
I've device with Android 4.2.2 Jelly Bean and emulator has latest Marsh mellow. I think the problem is because of this difference only. I've minimum SDK version 15 for this project.
I tried to change targetSDKVersion to 15 in Build.Gradle. But it couldn't solve my problem.
What should be displayed:
What is displaying:
I'm expecting Black color in background.
Try to use android:windowBackground instead of android:colorBackground
<!-- 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>
<item name="android:windowBackground">#android:color/black</item>
</style>
Why?
By your screen, I saw that you are trying to set window background. So, the best attribute to that is android:windowBackground.
Your AppTheme is not overriding android:windowBackground.. it was only overriding android:colorBackground.
Since you are not overriding android:windowBackground, Android will use the color defined in your parent theme (Theme.AppCompat.Light.DarkActionBar).
So, Android was using:
<item name="colorBackgroundFloating">#color/background_floating_material_light</item>
and
<color name="background_material_light">#color/material_grey_50</color>
<color name="material_grey_50">#fffafafa</color>
It is almost a white color.
Device vs Studio
I'll be honest.. I'm not totally sure why your device was ignoring android:colorBackground while emulator was using it...
Probably, is the API version or probably, it is just a normal behavior since your device shows the theme applied to an Activity and inside a whole context.. Your device will be always a little bit different from Android Studio Layout Preview tool.
For any instance, I recommend to use android:windowBackground if you want to sent whole window background...
android:colorBackground can affects not only the background of the main window but also of all the components e.g. dialogs unless you override it in the component layout. (this part was retrieved from here)
current layout
I have a problem related to xml layout, and I don't know how to add primary and primary dark color. Can anybody help me?
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView android:id="#+id/in"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
android:layout_weight="1"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText android:id="#+id/edit_text_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="bottom"/>
<Button android:id="#+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/send"/>
</LinearLayout>
</LinearLayout>
How it should look like
You should modify, or create if it didn't exists already the file styles.xml, in the values folder, like that :
<style name="MyMaterialTheme.Base" >
<!-- Primary Color -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">#color/colorAccent</item>
</style>
It gets it's values from colors.xml file.
Do you mean you need to change the color of action bar located at top most position right? Then do this:
so, ActionBar will not work for your target environment which is at API level 10 (Android 2.3.3).
Just in case, if you target for minimum API level 11, you can change ActionBar's background color by defining custom style, as:
<resources>
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">ANY_HEX_COLOR_CODE</item>
</style>
And, set "MyTheme" as theme for application/activity.
I am trying to follow this tutorial to create material design tool bar. I am at step 7 where my activity should have a color tool bar but my app looks like
for reference, here are my style.xml, color.xml, tool_bar.xml files
style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#color/ColorPrimary</item>
<item name="android:colorPrimaryDark">#color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
There was another style.xml in the same folder which has (21) next to it. I didn't make any changes to it though.
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ColorPrimary">#FF5722</color>
<color name="ColorPrimaryDark">#E64A19</color>
</resources>
tool_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
activity_main.xml
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
UPDATE
If i make changes in stylev21.xml file, I can see my app looks like whats in the tutorial. But if leave style-v21.xml unchanged and make changes in style.xml I don't see those changes. What style*.xml file shall i edit ?
Purpose of having different styles.xml is that you can add changes specific to the Android version. But then you need to maintain same changes in both the files.
If you are testing your application on device having Android version 5.0 lollipop then style defined in v21/styles.xml will reflect in your application. Otherwise common styles.xml
If you want the same output as displayed in tutorial then I would suggest few changes.
Edit your activity_main.xml
<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"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
P.S. I have just removed margin from RelativeLayout.
Edit both styles.xml and define style which contain no Action bar. E.g. "Theme.AppCompat.Light.NoActionBar"
After doing these changes your app will work perfectly on all devices.
I hope it help.
Change your theme to Theme.AppCompat.Light.DarkActionBar instead of NoActionBar.
Then you don't need to add add it in your layout XML file
Also change android:colorPrimary to colorPrimary (take off android:) and android:colorPrimaryDark to colorPrimaryDark.
Your image has the three dots for the context menu , its still showing the action bar . You must have the following line for tool bar to take effect
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
setSupportActionBar(toolbar); // Setting toolbar as the ActionBar with setSupportActionBar() call
}
Make your style.xml like this-
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
Reason - AppCompat search for text without "android:"