Style TextView like a Spinner with appcompat v21 - android

I want to make a TextView look like a spinner with the new Material style.
I managed to do it with "Widget.Material.Light.Spinner" style, but I didn't find any alternative in AppCompat (v21) resources.
My xml:
<TextView
android:id="#+id/sp_league_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
tools:text="Premier league"
style="#android:style/Widget.Material.Light.Spinner"
android:textColor="#android:color/white" />

I'd go with:
style="#style/Widget.AppCompat.Spinner"
But feel free to pick another one:

The style solution didn't work for me, but I've found another solution:
I use AppCompatButton instead, and have this :
XML:
<android.support.v7.widget.AppCompatButton
android:background="#drawable/abc_spinner_mtrl_am_alpha"
... />
Java:
((AppCompatButton)findViewById(...)).setSupportBackgroundTintList(new ColorStateList(new int[][]{new int[0]}, new int[]{0xff52A1E8}));
EDIT: seems it won't work well anymore, but found another solution :
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
</style>
It's true that it's for the action bar , but it should work for other cases too.

I Tested the the solutions mentioned here 1.Using style="#style/Widget.AppCompat.Spinner) and
2.Using Widget.AppCompat.Light.Spinner.DropDown.ActionBar
Both these works only on Android 5.x And Above Devices and do not work well for Android devices running on 4.x and below.
Hence, I am posting my solution for those who wanted to have a Drop-down like effect to TextView for all devices.
App needs to create a Drawable inside drawable folder in App, let's say dropdown_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/ic_icon_arrow"
android:gravity="end" />
And then simply use this as a background for the TextView as below:
<TextView
android:id="#+id/mySpinnerTextView"
android:background="#drawable/dropdown_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

In AndroidX, use style="#style/TextAppearance.AppCompat.Widget.TextView.SpinnerItem"

Related

AppCompat Support for RTL

I've been recently looking into supporting RTL text and layouts. According to this post android will natively support and switch layoutDirection automatically for API-17, which is why the Start and End gravities were added. The issue now is how to support this in a similar way for pre API-17.
This question has been asked many times before, with the general solution being to inspect the locale or text, then set gravity as needed. At least it would require less effort than a solution like this.
The reason I'm revisiting this question now is because I have noticed an update to support-v7-appcompat which now contains classes such as AppCompatTextView and LinearLayoutCompat. As far as I know, the point of these support libraries is to mimic the default behavior of later Android releases.
I created a layout to test this.
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80ccffee">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
When I give textview an arabic string, it is correctly detected as RTL text and automatically right-aligned on an API-17 device, where as the same does not happen on an API-10 device. It's possible that I misunderstood the purpose of AppCompatTextView, but the presence of GravityCompat.START suggests to me that its intended as a workaround.
I then wrapped the textview in a LinearLayoutCompat instead in the hopes that the layout's direction will influence it, but no luck.
So my question is: is there a mechanism in the new AppCompat update which can be used to support RTL without having to set each TextView's gravity in code?
Yes, there is!
You can achieve what you want by overriding default attributes of theme as described below:
Go to res -> values -> styles.xml
override attributes like this:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="android:textDirection">rtl</item>
<item name="android:gravity">start</item>
</style>

How to customize AppCompatButton color

I saw new appCompat controls are available here. And implemented it in android app, but I don't find any specific way of customizing its color.
Just like if we set accent color in style, the edit text automatically catches it. But it is not working in case of AppCompatButton.
Does anybody find something regarding this?
See here: Coloring Buttons in Android with Material Design and AppCompat
To summarize, you can use the tintBackground attribute on the button itself or you can use colorControlNormal (or a combination).
Also, you can just use Button and it'll get converted to an AppCompatButton as long as you're using the theme and inheriting from AppCompatActivity correctly.
Examples from the linked URL
theme.xml:
<item name="colorButtonNormal">#color/button_color</item>
v21/theme.xml
<item name="android:colorButtonNormal">#color/button_color</item>
or
<Button
android:id="#+id/add_remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/bg_remove_btn_default"
android:textColor="#android:color/white"
tools:text="Remove" />
Use the SupportLib with AppCompatButton like this:
<android.support.v7.widget.AppCompatButton
android:id="#+id/add_remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/bg_remove_btn_default"
android:textColor="#android:color/white"
tools:text="Remove" />
app is a mxlns: xmlns:app="http://schemas.android.com/apk/res-auto"
so the backgroundTint works also for preLollipop

CardView compatibility problems on Pre-Lollipop

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>

Android: keep blue background after ListView selection

I have a ListView, and it works great on a phone. Now I am making a tablet UI, with the ListView on the left and details on the right.
When I touch an item, it flashes blue as long as it is pressed. I want to keep that blue color until another item is selected, just like the Gmail app on the Nexus 7.
What is the cleanest way to achieve that? I'd rather avoid setting backgrounds manually, I assume there is a way to mark an element as the "active" one and theme it accordingly.
What is the cleanest way to achieve that?
What you are looking for is known as the "activated" state. To make this work:
Step #1: In res/values-v11/, have a style resource that implements activated. For example, for a new project that has the AppTheme declaration defined there, go with something like:
<resources>
<style name="AppTheme" parent="android:Theme.Holo.Light"></style>
<style name="activated" parent="AppTheme">
<item name="android:background">?android:attr/activatedBackgroundIndicator</item>
</style>
</resources>
Step #2: Define the same style in res/values/ for any older devices, just as a stub style resource, so references to it continue to work:
<resources>
<style name="AppTheme" parent="android:Theme.Light"/>
<style name="activated" parent="AppTheme"/>
</resources>
Step #3: In your layout XML resource for the row in the ListView, add style="#style/activated" to the list of attributes of the root element
Step #4: Set the ListView to be a single-choice list, such as the following line in a ListFragment:
getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
You can see this in action in this sample project, this sample project, and this sample project. For more background on those first two samples, see this SO question: Complete Working Sample of the Gmail Three-Fragment Animation Scenario?
Using
android.R.layout.simple_list_item_activated_1
instead of
R.layout.simple_list_item_checkable_1.
Just for somebody checking someday.
after days of search and pulling my hair i just found out that activatedBackgroundIndicator is also available in ActionBarSherlock styling system. Most of the devs which develop backwards compatible apps, use ActionBarSherlock,so using ActionBarSherlock is a good option for most cases. So instead of using android:background="?android:attr/activatedBackgroundIndicator" which will give errors in android versions prior to 11, just use: android:background="?activatedBackgroundIndicator"
here is the example row layout xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
//note the activatedBackgroundIndicator
android:background="?activatedBackgroundIndicator"
android:minHeight="?android:attr/listPreferredItemHeight"
android:paddingBottom="2dip"
android:paddingTop="2dip" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:textSize="15sp" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:paddingRight="5dip"
android:textSize="20dip" />
</LinearLayout>

Use Android 4.0 styled toggle-button

What I'm trying to do
I'm trying to use in my Layout the Android 4.0 styled togglebutton. For this I selected the Theme = Theme.Holo.Light . When I take the togglebutton from there its that square with the green line, if the button is enabled.
But I'd like to use the togglebutton like they got in there config on top (take a look at the printscreen).
Question
How can I use thise togglebutton? Some Codesnippets or a quick tutorial would be great!
Best Regards
safari
Picture
New Edit: I now did a full backport of the Switch back to API Level 8 and put in on github:
https://github.com/ankri/SwitchCompatLibrary
The old post with my custom implementation of the Switch:
I'm a bit late to the party but I had the same problem. I took the source code from the other post in this thred and made my own version of the switch.
You can find the source code and documentation on my website
This is what it looks like:
edit: Updated link and picture
UPDATE: New images work on both light and dark backgrounds. Original images still available.
Also, as someone points out in the comments, make sure to save them as "*.9.png", i.e. "switch_on_on_db.9.png", etc.
Ankri's answer is great, but alittle heavy. Also, he uses the 4.2 style switches as opposed to the older (and in my opinion, prettier) 4.1 style buttons. For a quick fix, I made a drawable so that you can style your togglebutton to look like a switch.
First, here is the button style:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/switch_on_on_db" android:state_checked="true" android:state_pressed="true"/>
<item android:drawable="#drawable/switch_on_on_db" android:state_checked="true" android:state_focused="false"/>
<item android:drawable="#drawable/switch_off_off_db" android:state_checked="false" android:state_pressed="true"/>
<item android:drawable="#drawable/switch_off_off_db" android:state_checked="false" android:state_focused="false"/>
</selector>
which refer to these images:
Download the original images from here:
Old Off
Old On
Finally, you can style the togglebutton like so:
<ToggleButton
android:id="#+id/ParamToggleButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/toggletoswitch"
android:textOff=""
android:textOn=""/>
UPDATE:
Jelly Bean versions (though not identical) are now available:
Old Off
Old On
If your app targeting api level 14 or higher. Use Switch widget and make sure your application's theme is "Theme.Holo" or "Theme.Holo.Light"
However, if you want to target api level under 2.3 you have to make custom layout.
I think It's quite messy to explain about that, I'll give you an example.
You can find the "Switch" button's real implementaion in here.
Well, You can just get that source and put in your project. You'll have some error but it's not that difficult to resolve it.
Great solution above...thanks! (no name given?)
I thought someone might be able to use my xml that worked for me to make the togglebutton look like a switch:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:orientation="horizontal" >
<TextView
android:id="#+id/tv_switchToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_marginTop="0dip"
android:text="#string/shake_to_add"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<ToggleButton
android:id="#+id/switchToggle"
android:layout_width="75dp"
android:layout_height="20dp"
android:layout_margin="5dip"
android:background="#drawable/togglebutton"
android:textOff=""
android:textOn="" />
</LinearLayout>
#drawable/togglebutton refers to the selector described above. Thanks again!

Categories

Resources