I'm making my first app in android studio. It's going well so far, but I've come across this stumbling block:
I have absolutely no idea how to edit already defined colours.
Here's some screenshots from two of the activities:
Inside the layout .xml code i have coloured everything like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutReset"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/resetNutsButton"
android:layout_width="300dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_margin="30dp"
android:background="#drawable/round_corners"
android:backgroundTint="#color/Accent1" //Accent colour
android:fontFamily="#font/lemonmilkregular"
android:text="Reset nuts"
android:textAlignment="center"
android:textColor="#color/Back1" //grey
android:textSize="25sp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Everything in the project has been coloured using the colors.xml file and, as you can see from the 2nd picture, I would like to add the option to choose an accent colour to be used everywhere that is currently red.
I've looked through many questions and I can see that editing any of the resource files during runtime is not possible, so I was wondering what the best way is to go about this.
As I said, this is my first app, so I may just be missing something simple.
Any input is appreciated, and if you need any more details please tell me.
It's true, you're not able to edit colours or themes at runtime.
You could potentially try something like (in styles.xml):
<!-- Colors -->
<style name="Indigo">
<item name="colorPrimary">#color/indigoColorPrimary</item>
<item name="colorPrimaryDark">#color/indigoColorPrimaryDark</item>
<item name="colorAccent">#color/indigoColorAccent</item>
</style>
<style name="Blue">
<item name="colorPrimary">#color/blueColorPrimary</item>
<item name="colorPrimaryDark">#color/blueColorPrimaryDark</item>
<item name="colorAccent">#color/blueColorAccent</item>
</style>
<style name="Red">
<item name="colorPrimary">#color/redColorPrimary</item>
<item name="colorPrimaryDark">#color/redColorPrimaryDark</item>
<item name="colorAccent">#color/redColorAccent</item>
</style>
And then in your code:
getTheme().applyStyle(R.style.Blue, true);
Also remove any places in your layouts where you're explicitly setting the colours, you just want it to use the theme's colours:
android:backgroundTint="#color/Accent1"
Themes are immutable, so you can't.
Related
How can I style the slider, for example change colors for its track and thumb etc using xml?
slider.xml:
<com.google.android.material.slider.Slider
android:id="#+id/settingsMission_changeShakeDif_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:stepSize="20.0"
android:theme="#style/SliderTheme"
android:valueFrom="0.0"
android:valueTo="40.0"
app:labelBehavior="gone" />
themes.xml
<style name="SliderTheme" parent="Widget.MaterialComponents.Slider">
<!-- Add attributes here -->
<item name="trackColorActive">#238ae6</item>
<item name="trackColorInactive">#a7bada</item>
<item name="tickColor">#13161d</item>
<item name="thumbColor">#238ae6</item>
</style>
When I do it like this, the color of my slider did not change (it remained the default purple color)
And when I try to run the app and open the bottom sheet dialog that has the slider, the app crashes. I am getting this runtime error too:
Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.AppCompat (or a descendant).
Found this useful article that solved my problem:
https://github.com/material-components/material-components-android/issues/1145
changes made to code:
slider.xml
<com.google.android.material.slider.Slider
android:id="#+id/settingsMission_changeShakeDif_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:stepSize="20.0"
android:theme="#style/AppTheme"
android:valueFrom="0.0"
android:valueTo="40.0"
app:labelBehavior="gone"
app:thumbColor="#238ae6"
app:tickColor="#13161d"
app:trackColorActive="#238ae6"
app:trackColorInactive="#a7bada" />
themes.xml
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
I'm styling the CalendarView in Android Studio and I already achieved to change the selected color
with the following code:
layout:
<CalendarView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/CalenderViewCustom"
android:dateTextAppearance="#style/CalenderViewDateCustomText"
android:weekDayTextAppearance="#style/CalenderViewWeekCustomText">
</CalendarView>
styles.xml:
<style name="CalenderViewCustom" parent="Theme.AppCompat">
<item name="colorAccent">#color/mainSelectedColor</item>
</style>
<style name="CalenderViewDateCustomText" parent="android:TextAppearance.DeviceDefault.Small">
<item name="android:textColor">#color/colorBlack</item>
</style>
<style name="CalenderViewWeekCustomText" parent="android:TextAppearance.DeviceDefault.Small">
<item name="android:textColor">#color/colorBlack</item>
</style>
The problem is that my result does not show the year and the month like you can see in the result:
I already tried to change the header attributes like headerMonthTextApperance but nothing seems to work for me.
Hi you cant use this library
https://github.com/SundeepK/CompactCalendarView
full performance and customizable
<com.github.sundeepk.compactcalendarview.CompactCalendarView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/compactcalendar_view"
android:layout_width="fill_parent"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:layout_height="250dp"
app:compactCalendarTargetHeight="250dp"
app:compactCalendarTextSize="12sp"
app:compactCalendarBackgroundColor="#ffe95451"
app:compactCalendarTextColor="#fff"
app:compactCalendarCurrentSelectedDayBackgroundColor="#E57373"
app:compactCalendarCurrentDayBackgroundColor="#B71C1C"
app:compactCalendarMultiEventIndicatorColor="#fff"
/>
There's a style called Widget.Material.Button that has an animation effect that I really like (it makes a "splash" around your click), and I want to be able to reuse it in my code.
I'm trying to make it have a transparent background color, since it is gray by default which does not look good when applied to my ViewGroup objects.
Is there an easy way to keep the animation, but get rid of the background color?
I already tried setting the property android:background="#android:color/transparent", but that causes the animation to completely stop working.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#android:style/Widget.Material.Button"
tools:targetApi="lollipop">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, world!"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is just another line of text."/>
</LinearLayout>
As mentioned in this blog under 'Clickable Views', you can use android:background="?attr/selectableItemBackground:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="?attr/selectableItemBackground">
...
</LinearLayout>
Sorry for giving the wrong bit initially. The problem as looking a bit deeper is the background color is defined already as part of whatever you are using for your MaterialTheme extension for color highlights. Ironically, they have sources from transparent elsewhere but not here ?
What you want to so is make TWO new xml files to define your properties
In vales-v21/styles.xml you can redefine these any way you like or eliminate values you don't want to override
IF YOU JUST WANT THE RIPPLE, USE THE DRAWABLE CODE DEFINED AT THE BOTTOM
<style name="MyMaterialButton" parent=android:Widget.Material.Button>
<item name="background">#drawable/material_background_ripple</item>
<item name="textAppearance">?attr/textAppearanceButton</item>
<item name="minHeight">48dip</item>
<item name="minWidth">88dip</item>
<item name="stateListAnimator">#anim/button_state_list_anim_material</item>
<item name="focusable">true</item>
<item name="clickable">true</item>
<item name="gravity">center_vertical|center_horizontal</item>
</style>
Then your button background style
/drawable-v21/material_background_ripple.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/PICK_RIPPLE_COLOR_HERE">
<item android:drawable="#drawable/btn_default_mtrl_shape" />
</ripple>
Redacted:
Have you tried
customView.getWindow().setBackgroundDrawableResource(R.color.transparent);
?
I can't seem to get an image and text to work in portrait mode on menu items in the action bar no matter what I try. I even tried to force android portrait orientation
My XML:
<item android:id="#+id/menu_save"
android:icon="#drawable/content"
android:orderInCategory="100"
android:title="New Group"
android:showAsAction="withText|always" />
Has anyone figured this out?
From the config.xml file of the native ActionBar:
values:
<bool name="config_allowActionMenuItemTextWithIcon">false</bool>
values-480dp:
<bool name="config_allowActionMenuItemTextWithIcon">true</bool>
To answer your question:
No you can't do that, if the devices width is smaller than 480dp. (Unless you want to create a custom rom with a modded framework)
Ahmad's answer makes clear why this is not possible. It is annoying that the action bar is not easier to customise.
One quick and dirty solution is to put two buttons in the menu, remove the icon from one and give the second a different name. Then in the corresponding java file, replicate the functionality for the extra button in onOptionsItemSelected. This gets over having to create a custom view for the action bar.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
<item android:id="#+id/action_done"
android:icon="#drawable/ic_done"
android:title="#string/done"
yourapp:showAsAction="always" />
<item android:id="#+id/action_done2"
android:title="#string/done"
yourapp:showAsAction="always" />
<item android:id="#+id/action_cancel"
android:icon="#drawable/ic_cancel"
android:title="#string/cancel"
yourapp:showAsAction="always" />
<item android:id="#+id/action_cancel2"
android:title="#string/cancel"
yourapp:showAsAction="always" />
</menu>
I also saw this answer but didn't try it: withText in split ActionBar #Google Calendar Method. This is how it is done in Google Calendar but also relies on a custom view replacing the action bar.
The easiest way to do it is:
<menu 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"
tools:ignore="AppCompatResource">
<item
android:id="#+id/action_nexo"
android:title="title"
app:actionLayout="#layout/custom_menu_item"
app:showAsAction="always"/>
</menu>
custom_menu_item.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/nexo_tile_short"
android:clickable="true"
android:focusable="true"
android:textSize="#dimen/text_size_small"
android:textStyle="bold"
android:textColor="?attr/actionMenuTextColor"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="#dimen/padding_small"
android:paddingBottom="#dimen/padding_small"
android:src="#drawable/nexo"/>
</LinearLayout>
when i customize title bar in view by adding a image, i face an issue as the images is not fixed to the edges accurately. I have attached the image where you can see space between the window margin and image added. How to overcome this problem. Below are the code that i have used to customize the title bar. Can anyone help me to fix this issue.
java code :
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.home_view);
this.getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,
R.layout.upwindow);
layout code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="32dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/up_bar"
android:src="#drawable/up_bar" />
<TextView
android:id="#+id/pagename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Sify MyStorage"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
create style xml in values folder :
<resources>
<style name="CustomWindowTitleBackground" />
<style name="CustomTheme" parent="android:Theme">
<item name="android:windowTitleSize">32dp</item>
<item name="android:windowTitleBackgroundStyle">#style/CustomWindowTitleBackground
</item>
</style>
</resources>
then refer it in manifest as :
android:theme="#style/CustomTheme">
this will solve it .
hope this help .
Do you have different images for different resolutions? It might be that your image simply does not fit that space, and that you need a larger one. Be careful though, you might run into issues with your app working across different platforms with scaling.
You need to play a little with styling in order to override this behavior. Define a custom theme (style) as below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="customTitle">
<item name="android:background">#drawable/up_bar</item>
</style>
<style name="myTheme" parent="android:Theme">
<item name="android:windowTitleBackgroundStyle">#style/customTitle</item>
</style>
</resources>
and then use this theme in your activity by applying android:theme="#style/myTheme" to your desired activity tag in AndroidManifest.xml
requestWindowFeature(Window.FEATURE_NO_TITLE);
and setBackground to your layout in layout file...
Like,,,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent" android:background="#drawable/up_bar" <---Add this
android:layout_height="32dp">
and Remove imageview from xml