I want to achieve a look like this (from the material design specs) for my switch when it's in the off state:
notice that the thumb is white and has a black outline with a slight shadow. I haven't been able to replicate this at all - much less to replicate the "focused" and "pressed" states with the halo around the thumb. What is the correct way of doing this? Do I need to work with 9-patches or is there a way to do it just using themes and xml? I want to support api 16 and up, but I noticed that Switch supports 14 and up so that shouldn't in itself be an issue.
Code for my current switch:
<Switch
android:id="#+id/mySwitch"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
/>
In my app Styles.xml:
<item name="colorControlActivated">#color/myColor</item>
<item name="colorSwitchThumbNormal">#android:color/white</item>
<item name="android:colorForeground">#android:color/white</item>
Related
I have a chip with 100dp of width but the text is not centered how I can center the text.
I use androidx with material library, I've tried put android:textAlignment="center" and android:gravity="center" but not work
<com.google.android.material.chip.Chip
android:id="#+id/chip"
style="#style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="7:00" />
I have this
I want this
just now I faced with the same problem, and I solved it by set a chip property: android: textAlignment = "center". I tested your example and it works fine too, here the code that I tested:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.chip.Chip
android:id="#+id/chip"
style="#style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="7:00"
android:textAlignment="center"/>
</FrameLayout>
Also make sure that you don't set or change a chip's text alignment somewhere in your code.
The short answer:
Chips aren't meant to be used the way you are trying to use them. They are supposed to wrap your content. Therefore there isn't a clean way to align the text in the center.
There is a workaround tho, you can use Chip_textEndPadding and Chip_textStartPadding attributes, which will be kinda awkward I guess.
I don't really know what you are trying to achieve, I mean, what is your why? Is it a button? Is it suppose just to show some text?
Please describe the feature, or at least, part of it.
Anyway:
According to the material design guidelines
Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.
Does your feature as anything to do with this?
In case you want a clickable, circular component you can simply use material button.
There is a similar question that was asked at github.
as others said you can use textAlignment ...but i wanted to tell you that if your using a custom font it wont be perfectly vertically aligned. you can check here for explanation.
so i would make a custom style that inherits from chip styles and set the font padding for usage like this:
<style name="customStyle" parent="#style/Widget.MaterialComponents.Chip.Choice">
<item name="chipBackgroundColor">#color/white</item>
******* <item name="android:includeFontPadding">true</item> *************
</style>
then for the text appearance you can make another style:
<style name="CustomChipTextAppearance" parent="TextAppearance.MaterialComponents.Chip">
<item name="android:fontFamily">?attr/myFont</item>
<item name="android:textAlignment">center</item>
</style>
dont forget to force a bridge theme in xml:
<com.google.android.material.chip.Chip 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"
style="#style/customStyle"
**** android:theme="#style/Theme.MaterialComponents.Bridge" ****
***** android:textAppearance="#style/CustomChipTextAppearance" *******
app:chipMinHeight="38dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:chipStrokeWidth="2dp"
app:rippleColor="#android:color/transparent"
tools:chipText="my chip" />
Use isTextAlignmentResolved,
For example, chipname.isTextAlignmentResolved() to do this programmatically.
I'm trying to polish up some details about my app and I'm stuck on design of android Button widget. Up from Android 5.0 everything is fine with simple system Button, but problem starts when I start my app on lower versions - specifically 4.4.2 . System Button has no effect on click which is of course wrong UX. I'd like to avoid making multiple layouts for different android version and I think there is some way to solve this without making my own selector and using in in pre-Lollipop layouts, but I just can't find it. My Button layout looks as follows :
<Button
android:id="#+id/some_id"
android:layout_width="wrap_content"
android:layout_height="#dimen/size_48dp"
android:paddingLeft="#dimen/margin_32dp"
android:paddingRight="#dimen/margin_32dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
app:backgroundTint="#color/colorAccent"
android:textColor="#color/white"
android:text="#string/some_text"/>
As i said, on all post-lollipop version it has some effect (from android 6 it's ripple, before it just changes tint) but on Kitkat id does nothing. I tried using AppCompatButton, all sort of colorControlNormal, colorButtonNormal and I don't know what in styles but to no avail. Is there some "easy" way to solve this ?
You can create styles in both styles.xmlad v21 styles.xml
Below is code snippet of v21 styles.xml
<style name="ButtonRed" parent="Theme.AppCompat">
<item name="android:colorButtonNormal">#color/primary_red</item>
<item name="android:colorControlHighlight">#color/primary_red_dark</item>
<item name="android:textColor">#color/dash_title_color_white</item>
</style>
Below is code snippet of styles.xml
<style name="ButtonRed" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/primary_red</item>
<item name="colorControlHighlight">#color/primary_red_dark</item>
<item name="android:textColor">#color/dash_title_color_white</item>
</style>
Then you can use these styles as theme as given below
<Button
android:layout_width="wrap_content"
android:theme="#style/ButtonRed"
android:layout_height="wrap_content"
android:text="#string/recharge"
/>
Ripple type animation will only work from lollipop onwards. Below that the button will change colour state accordingly
Animations in material design give users feedback on their actions and provide visual continuity as users interact with your app. The material theme provides some default animations for buttons and activity transitions, and Android 5.0 (API level 21) and above lets you customize these animations and create new ones:
Touch feedback
Circular Reveal
Activity transitions
Curved motion
View state changes
Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. The default touch feedback animations for buttons use the new RippleDrawable class, which transitions between different states with a ripple effect.
Verify this Page
https://developer.android.com/training/material/animations.html#Touch
ANd Also these Answers will help you
how to create ripple effect for pre-lollipop
I need to know what is the best (and recommented) way to tint a Material Button (AppCompatButton) using the latest AppCompat (23.2.1 for the time being). I could have never imagined that it would be so frustrating! I tried most of the answers from here but either they wouldn't work or worked with unexpected results.
I need to keep backwards compatibility to api >= 9 And just need the ripple effect to be applied to >=21 nothing fancy. So what is the best way so far?
I'd appreciate if you could provide both xml and java code.
There are many ways to do that.
My favorite is the following:
<Button
android:id="#+id/activity_main_some_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.AppCompat.Button.Colored"
android:text="This is a button" />
This automatically tints the button with the accent color you (hopefully) set in your theme, while maintaining pressed states at API < Lollipop and Ripple >= Lollipop.
If nothing else works you could just tint the button yourself:
AppCompatButton myExampleButton = new AppCompatButton(getContext());
myExampleButton.setSupportBackgroundTintList(ContextCompat.getColorStateList(getContext(),
R.color.some_color));
Update
You can do the following to use a self defined color:
<style name="MyButtonTheme" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/someColor</item>
</style>
Define a new style with the desired color.
<Button
android:id="#+id/activity_main_some_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/MyButtonTheme"
android:text="This is a button" />
Set it to your button.
I try to make some XML layout in Android Studio. I need my app to be compatible with API 10 and higher. My layout have some switch buttons but Switch is for API 14 or higher. It is why I decide to use Toggle Button instead.
I have made custom selector drawable with two states. And problem starts now.
When I make XML like this:
<ToggleButton
android:id="#+id/reminderRepeatToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/toggleButton"
android:button="#drawable/ic_toggle_bg"
android:background="#android:color/transparent"/>
It works perfectly on android higher than API 10 but on 10 ToggleButton simply disappear.
I also tried something like this:
<ToggleButton
android:id="#+id/reminderRepeatToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/toggleButton"
android:background="#drawable/ic_toggle_bg"/>
and it works on API 10 but it looses it proportions. Any idea how to overcome this? Or maybe you advice different approach to the problem? (not making Toggle but something different).
Thanks for help!
style:
<style name="toggleButton">
<item name="android:buttonStyleToggle">#style/Widget.Button.Toggle</item>
<item name="android:textOn">#string/blank</item>
<item name="android:textOff">#string/blank</item>
</style>
<style name="Widget.Button.Toggle" parent="android:Widget">
<item name="android:background">#drawable/ic_toggle_bg</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
I have some problems using the new CardView
That's my current situation: I want to use a CardView to provide a Floating Action Button for all devices (also Pre-Lollipop)
my activity's layout looks like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cdcdcd"
android:focusable="false">
<include layout="#layout/toolbar"/>
<android.support.v7.widget.CardView
android:layout_width="58dp"
android:layout_height="58dp"
cardview:cardPreventCornerOverlap="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="18dp"
cardview:cardCornerRadius="29dp"
cardview:cardBackgroundColor="?attr/colorPrimary">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center"
android:layout_margin="12dp"
android:src="#android:drawable/ic_menu_edit"/>
</android.support.v7.widget.CardView>
Running the app on a Nexus 5 (4.4.4) the screen looks like this:
now I want to set the cardElevation by setting this in the xml
cardview:cardElevation="8dp"
After starting the app the button looks like this (it isn't a circle anymore):
It seems setting the card elevation also affects the view's dimensions... If you take now a closer look to picture #1 you can see, that this button isn't also a perfect circle.
Is there a way to figure that out? I also tried to set this
cardview:cardPreventCornerOverlap="false"
But it also has no affect
Thanks guys :)
Using CardView for FAB shadows is not the best idea. CardView is a layout, so it's pretty heavy. It's also very limited on pre-Lollipop versions. The shadow is not animated, corners pad the content and there's no ripple. Seems like there's no good method to achieve 100% FABs using only AppCompat.
In general I'm not happy being limited to AppCompat, so I wrote my own Button classes based on regular ones. I was able to achieve pretty good results as you can see on the screenshot. It's Gingerbread and there are animated shadows, ripples, vector graphics, etc. It's a pretty large repository, so I'm unable to give you a short solution here, but if you wish, check out the code on github.
You could try using the FAB from this MaterialDesign library if you're desperate for the shadow effect on older devices.
You can find the library at https://github.com/navasmdc/MaterialDesignLibrary
<com.gc.materialdesign.views.ButtonFloat
android:id="#+id/buttonFloat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="24dp"
android:background="#1E88E5"
materialdesign:animate="true"
materialdesign:iconDrawable="#drawable/ic_action_new" />
Alternatively you could create your own shadow resource in your drawables folder, and add the shape below your button, something like this:
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/black_alpha"/>
<corners android:radius="20dip"/>
And create a layer list resource where you include your button and the shadow
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shadow"/>
<item
android:drawable="#drawable/button"
android:bottom="4px" />
</layer-list>