i'm trying to create fully customize radio button in my app (android).
i have 3 radio button that helps the user pick size, this is why each radio button is in different size (L,M,S). i have one picture i want to be shown in each radio button in different size. when the user pick the relevant size it should change the background of it.
i'm having very hard time with it and running in with lots of problems...
this is the Radio group (i tried different methods in each button to check what is right)
*this is inside a relative layout
<RadioGroup
android:id="#+id/pizzaSizeRadioGroup"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/Largesize"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:button="#drawable/size_selector"
android:contentDescription="#string/largesize"
android:padding="1dp"
android:scaleType="fitCenter" />
<RadioButton
android:id="#+id/Mediumsize"
android:layout_width="26dp"
android:layout_height="26dp"
android:adjustViewBounds="true"
android:background="#drawable/size_selector"
android:contentDescription="#string/mediumsize"
android:padding="3dp"
android:scaleType="fitCenter" />
<RadioButton
android:id="#+id/Smallsize"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginLeft="10dp"
android:adjustViewBounds="true"
android:button="#drawable/size_selector"
android:contentDescription="#string/smallsize"
android:padding="2dp"
android:scaleType="fitCenter" />
</RadioGroup>
and i built a selector
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/size_select"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="#drawable/size_select"
android:state_pressed="true" />
<item
android:drawable="#drawable/size_select"
android:state_checked="true" />
<item
android:drawable="#drawable/size_unselect" />
</selector>
and XML objects - size_select
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/pizzasize">
<shape android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#A9D0F5" />
</shape>
</item>
</layer-list>
and size_unselect
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/pizzasize">
<shape android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
this is what i get (left is L then M and then S)
Related
I'm trying to implement my own color picker and I want to make stroke around the color when its clicked. But i have to do it programmatically which is difficult for me.. If someone can give me a hand that would be great
layout.xml
<TableRow style="#style/colour_palette_row">
<TextView
android:id="#+id/col_1"
style="#style/colour_palette_button"
android:background="#48ff00"
android:text="#string/number_one" />
<TextView
android:id="#+id/col_2"
style="#style/colour_palette_button"
android:background="#drawable/rounded_textview"
android:text="#string/number_two" />
<TextView
android:id="#+id/col_3"
style="#style/colour_palette_button"
android:text="#string/number_three" />
<TextView
android:id="#+id/col_4"
style="#style/colour_palette_button"
android:text="#string/number_four" />
<TextView
android:id="#+id/col_5"
style="#style/colour_palette_button"
android:text="#string/number_five" />
</TableRow>
drawable/rounded_textview.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/circle" />
</selector>
drawable/circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#9FE554" />
<size
android:height="60dp"
android:width="60dp" />
</shape>
Also currently i'm using new file for each color if there are some suggestions about that it would be nice.
This is perhaps a bit hard to explain, so I included a picture to show you what I mean.
I have three images in Android Studio. They should all be alined to match and the middle part should expand as the text on top of the graphic expands (the middle height should equal the text height I suppose). Have been sitting with this for awhile now but don't get anywhere.
Do I add code in xml? Something like android:layout_height="#id/textView"
Is it better to do relative constraints in xml or constraints in UI?
In xml, how do I do relative constraints to other children? I know code like android:layout_alignParentTop, android:layout_alignChildTop, but how do I set distance to children?
If I read this correctly, you want the centre image and text view to adjust height based on the height of the text. The simplest way of doing that would be using your middle image as a stretchable background to the text view and similarly for the header and footer views, preferably using 9-patch PNG images.
Solution 1: Using 9-patch PNG images
Here is an example XML with 9-patches to show how this works.
N.B. The example contains two layouts, each enclosing a single TextView with header and footer views. The first TextView has a single line of text, the second has two lines.
<LinearLayout
android:layout_width="320dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/top" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="32sp"
android:padding="5dp"
android:gravity="center_horizontal"
android:text="A line of text"
android:background="#drawable/middle" />
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/bottom" />
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="10dp" />
<LinearLayout
android:layout_width="320dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/top" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="32sp"
android:padding="5dp"
android:gravity="center_horizontal"
android:text="A line of text\nAnother line of text"
android:background="#drawable/middle" />
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/bottom" />
</LinearLayout>
Nine-Patches
top.9.png:
middle.9.png:
bottom.9.png:
Example output
Solution 2: All XML
Alternatively, you could do it all in XML using <shape> and <layer-list> drawables instead of the 9-patch PNG images. Here is a modified version of the above to work with XML drawables.
This example shows rounded corners on the border as an added bonus, but beware it can be tricky to draw complex compound shapes using XML as there are only a small number of primitive shapes you can use.
Note also that this version relies on the addition of dimension resources to ensure everything matches up.
res/values/dimens.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android" >
<dimen name="layout_width">320dp</dimen>
<dimen name="header_height">15dp</dimen>
<dimen name="header_inset_height">5dp</dimen>
<dimen name="inset">5dp</dimen>
<dimen name="inset_width">310dp</dimen>
<dimen name="footer_height">15dp</dimen>
<dimen name="corner_radius">10dp</dimen>
<dimen name="inset_radius">5dp</dimen>
</resources>
res/drawable-nodpi/header.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#ffff00ff" />
<corners
android:radius="#dimen/corner_radius"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<size
android:width="#dimen/layout_width"
android:height="#dimen/header_height" />
</shape>
</item>
<item
android:top="#dimen/inset"
android:left="#dimen/inset"
android:right="#dimen/inset">
<shape android:shape="rectangle">
<solid android:color="#ffffff00" />
<corners
android:radius="#dimen/inset_radius"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<size
android:width="#dimen/inset_width"
android:height="#dimen/header_inset_height" />
</shape>
</item>
</layer-list>
res/drawable-nodpi/body.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#ffff00ff" />
<size android:width="#dimen/layout_width"/>
</shape>
</item>
<item
android:left="#dimen/inset"
android:right="#dimen/inset">
<shape android:shape="rectangle">
<solid android:color="#ffffff00" />
<size android:width="#dimen/inset_width" />
</shape>
</item>
</layer-list>
res/drawable-nodpi/footer.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#ffff00ff" />
<corners
android:radius="#dimen/corner_radius"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
<size
android:width="#dimen/layout_width"
android:height="#dimen/footer_height" />
</shape>
</item>
<item
android:bottom="#dimen/inset"
android:left="#dimen/inset"
android:right="#dimen/inset">
<shape android:shape="rectangle">
<solid android:color="#ffffff00" />
<corners
android:radius="#dimen/inset_radius"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
<size
android:width="#dimen/inset_width"
android:height="#dimen/header_inset_height" />
</shape>
</item>
</layer-list>
res/layout/activity_main.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:fitsSystemWindows="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="#dimen/layout_width"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="#dimen/header_height"
android:background="#drawable/header" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="32sp"
android:padding="5dp"
android:gravity="center_horizontal"
android:text="A line of text"
android:background="#drawable/body" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/footer_height"
android:background="#drawable/footer" />
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="10dp" />
<LinearLayout
android:layout_width="#dimen/layout_width"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="#dimen/header_height"
android:background="#drawable/header" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="32sp"
android:padding="5dp"
android:gravity="center_horizontal"
android:text="A line of text\nAnother line of text"
android:background="#drawable/body" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/footer_height"
android:background="#drawable/footer" />
</LinearLayout>
</LinearLayout>
Example output:
I created a Spinner style file, because I'd like to have a nice looking spinner.
Now if I click on the spinner i don't get anymore the default dropdown menu, but a dialog, to select an item from the spinner. How can I change it back to dropdown?
XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/radiosection">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/headerkernlochrechner"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="162dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
<Spinner
android:id="#+id/steigungsspinner"
style="#style/SpinnerTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView2"
android:layout_marginTop="62dp"
android:spinnerMode="dropdown" />
</RelativeLayout>
The Spinner Style:
<style name="SpinnerTheme" parent="android:Widget.Spinner">
<item name="android:background">#drawable/bg_spinner</item>
</style>
And the Spinner Style Background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="0.33dp" android:color="#0fb1fa" />
<corners android:radius="0dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#android:drawable/arrow_down_float" />
</item>
</layer-list>
</item>
</selector>
Thank you for help :D
Now I find a answer:
I had to add in the XML of the spinner the line:
android:spinnerMode="dropdown"
Now it works!
Im trying to design a custom TabWidget with FragentTabHost following these two guides for the tab layout:
https://maxalley.wordpress.com/2014/09/08/android-styling-a-tab-layout-with-fragmenttabhost-and-fragments/
http://joshclemm.com/blog/custom-android-tabs/
Im building FragmentTabHost with three fragments, the first fragment have a expandable list view.
Everything works fine, i can set backgroundcolor, the icon (if i want to) and the indicator works as well, as the divider does(if i want to) but the tabtitle does not appear for some reason and i cant find the reason why it dont show up.
If i remove tab_indicator.xml from android:background="#drawable/tab_indicator" in tab_layout.xml and set the backgroundcolor to whatever color the tab title shows up, but then i obviuosly dont get the indicators.
Do anyone have a clue whats wrong and what im missing. I have tried to solve this problem and searching för some days now and it starts to get very frustrating because its seems like something simple.
tab_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/tab_indicator">
<TextView
android:id="#+id/tabText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:textColor="#drawable/tab_text"
android:textSize="15dp"
/>
</LinearLayout>
tab_indicator.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states-->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected" />
<!-- Focused states-->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected" />
<!-- Pressed-->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_pressed" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_pressed" />
</selector>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.app.FragmentTabHost
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tabHost"
android:layout_gravity="center_horizontal"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="35dp"
android:showDividers="middle"
android:layout_weight="0"
android:orientation="horizontal"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</FrameLayout>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
tab_selected.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="-7dp" android:bottom="0dp" android:left="-7dp" android:right="-7dp">
<shape
android:shape="rectangle">
<padding android:left="10dp"
android:top="15dp"
android:right="10dp"
android:bottom="15dp" />
<stroke android:width="4dp" android:color="#FF00ccff" />
<solid android:color="#2fff00"
/>
</shape>
</item>
</layer-list>
Solved it, if i change android:layout_height in FragmentTabHost and TabWidget it displays the text, simple as that. But in my tast the height is to big ^^ I want it to be smaller like 35dp and it can be done if i change the padding in tab_selected.xml, _unselected and _pressed, and then i can change the height in TabWidget activity_main.xml else the text wont fit the tab.
I'm having a slight issue here with this listview:
<ListView android:id="#+id/employees_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="2dp"
android:paddingRight="1dp"
android:background="#drawable/borderlist"
android:choiceMode="singleChoice"
android:listSelector="#48ad82"
android:layout_below="#id/employees_header">
</ListView>
Which contains this layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row_employee"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="13dp"
android:paddingBottom="13dp"
android:descendantFocusability="blocksDescendants">
<RadioButton android:id="#+id/radio_employee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:focusable="false"/>
<TextView
android:id="#+id/text_employeename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_toRightOf="#id/radio_employee"
android:layout_marginTop="3dp"
android:layout_marginLeft="5dp"
android:focusable="false" />
</RelativeLayout>
EDIT2: Simplifying the question as much as I can:
When I select an element on the list, it changes color due to the android:listSelector. When I call notifyDataSetChanged() in the code, that color disappears until I scroll the list up or down. How can I make the color not disappear?
Someone answered to use a selector like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape>
<solid android:color="#48ad82" />
</shape>
</item>
<item>
<shape>
<solid android:color="#unselectedcolor" />
</shape>
</item>
</selector>
I set this selector as a background. It does not work at all. The color of the elements do not even change when I select them
Edit1: To specify, the color re-appears when I scroll the list.
Add this code to your RelativeLayout:
android:background="#drawable/list_item_selector"
Add this file to your drawable folder
list_item_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape>
<solid android:color="#48ad82" />
</shape>
</item>
<item>
<shape>
<solid android:color="#unselectedcolor" />
</shape>
</item>
</selector>
EDIT: And remove android:listSelector="#48ad82" from your ListView