Problem creating a custom ListView selector - java

When I try clicking on a a listview item no selector is shown. Here is my ListView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/streamRelativeLayout">
<ListView android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="#+id/streamListView" android:cacheColorHint="#00000000" android:fadingEdge="none" android:listSelector="#drawable/swipeview_list_selector"> </ListView>
<TextView android:layout_centerInParent="true" android:layout_height="wrap_content" android:id="#+id/noStreamTextView" android:layout_width="wrap_content" android:text="No Stream Available" android:visibility="invisible"></TextView>
<ProgressBar android:layout_centerInParent="true" android:layout_height="wrap_content" android:id="#+id/streamProgressBar" android:layout_width="wrap_content"></ProgressBar>
</RelativeLayout>
Here is my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_focused="true"
android:drawable="#drawable/stocks_gradient" />
<item android:state_pressed="true"
android:drawable="#drawable/stocks_gradient" />
<item android:state_focused="true"
android:drawable="#drawable/stocks_gradient" />
</selector>
Here is the gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ECECEC"
android:centerColor="#F6F6F4"
android:endColor="#F8F8F6"
android:angle="90"
android:dither="true"
/>
</shape>
I am also setting the background color to alternate in getView()
int colorPos = position % colors.length;
v.setBackgroundColor(colors[colorPos]);

If you mean that selected item is not displayed the way you want, then that's because you missed the state_selected case:
<item android:state_selected="true" android:drawable="..."/>

The first issue I see is that all of your states use the same drawable, so you wouldn't see a change when you click on it. And you haven't accounted for all of the cases, for example you have no default state.

i need to set the selectorontop property to true.

Related

How to change background color/shape of a Radiobutton when selected/deselected

I am adding radiobuttons programatically to a RadioGroup in a for loop. I want my buttons to have a certain background color when not checked, and another when they are checked (only one can be selected at once). My problem is that I also want this background to be a rounded rectangle. I have it working partially, but whenever I select an answer, it will set that button's background to white, but it won't reset any of the other buttons.
I understand that I need some type of selector object, to add the toggle behavior that is expected from the radiogroup. I was able to find some examples of that, but they only showed how to set a solid color as a background. I need to use this rounded corner shape. So, my trouble is figuring out how to blend the two. I could be going about this completely wrong. If there is a better approach to achieving what I want, I would prefer to use that rather than salvage what I've already tried.
I was able to get close by creating two XML files, each with a shape object and its own background color. If a radiobutton is selected, its style gets set to the radio_button_checked" style. But, I know I am approaching this wrong because the other checked button does not toggle off. I can basically click all of the buttons and get them all to have white backgrounds. I know there is a better way to do this, I just don't know what it is
Here is the loop where I add the buttons, along with the change listener for radiogroup rg (rg is my RadioGroup and answers is just a HashMap of strings. They don't affect anything related to this problem. The buttonTintList line is just there to change circle color)
for(int i = 0; i < answers.size(); i++)
{
RadioButton rb = new RadioButton(context);
rb.setTextColor(ContextCompat.getColor(context, R.color.colorPrimaryDark));
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
rb.setButtonTintList(ColorStateList.valueOf(ContextCompat.getColor( context, R.color.colorAccent)));
}
rb.setBackground(context.getResources().getDrawable(R.drawable.radiobutton_style_unchecked));
rb.setText(answers.get(i));
rb.setWidth(800);
rb.setHeight(150);
rb.setTextSize(18);
rb.setLayoutParams(params);
rg.addView(rb);
}
/* Store the answer */
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb= (RadioButton)group.findViewById(checkedId);
answer = rb.getText().toString();
rb.setBackground(context.getResources().getDrawable(R.drawable.radiobutton_style_checked));
}
});
Here is the XML for unchecked buttons (radiobutton_style_unchecked.xml)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="6dp" />
<gradient
android:angle="45"
android:centerColor="#color/colorPrimaryLight"
android:centerX="35%"
android:endColor="#color/colorPrimaryLight"
android:startColor="#color/colorPrimaryLight"
android:type="linear" />
<padding
android:bottom="5dp"
android:left="0dp"
android:right="0dp"
android:top="5dp" />
</shape>
The style for checked buttons is exactly the same, but with white instead of colorPrimaryLight
Here is what it looks like with nothing selected:
Here is what it looks like when one item is selected.
And this is what happens when I select more than one
Try this
<?xml version="1.0" encoding="utf-8"?>
<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:background="#android:color/holo_blue_light"
android:orientation="vertical">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/radio_background"
android:padding="10dp"
android:text="Yes" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/radio_background"
android:padding="10dp"
android:text="No" />
</RadioGroup>
</LinearLayout>
#drawable/radio_background
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white" android:state_checked="true" />
<item android:drawable="#color/colorAccent" android:state_checked="false" />
</selector>
OUTPUT
UPDATE
<?xml version="1.0" encoding="utf-8"?>
<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:background="#android:color/holo_blue_light"
android:orientation="vertical">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/test"
android:padding="10dp"
android:text="Yes" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/test"
android:padding="10dp"
android:text="No" />
</RadioGroup>
</LinearLayout>
#drawable/test
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/radio_selected" android:state_checked="true" />
<item android:drawable="#drawable/radio_normal" />
</selector>
#drawable/radio_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#android:color/white" />
<padding
android:bottom="5dp"
android:left="0dp"
android:right="0dp"
android:top="5dp" />
</shape>
#drawable/radio_normal
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#color/colorAccent" />
<padding
android:bottom="5dp"
android:left="0dp"
android:right="0dp"
android:top="5dp" />
</shape>
OUTPUT
I suggest you have 3 drawable xml
radio_checked.xml(the effect you want to be checked)
radio_unchecked.xml (the effect you want to be unchecked)
radio_custom_drawable.xml
In this xml you have to do something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/radio_checked" />
<item android:state_checked="false"
android:drawable="#drawable/radio_unchecked" />
</selector>
And then in your code change this
rb.setBackground(context.getResources().getDrawable(R.drawable.radiobutton_style_checked));
to
rb.setBackground(context.getResources().getDrawable(R.drawable.radio_custom_drawable));

Android: FragmentTabHost Widget not displaying Title

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.

How to change checkbox like this?

I need to change checkbox from
to
I found that to change color of tick mark you have to put selectors:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checked" />
<item android:state_checked="false" android:drawable="#drawable/unchecked" />
</selector>
In xml:
<CheckBox
android:id="#+id/cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/your_selector"/>
create xml file
coustom_check_box.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checked" />
<item android:state_checked="false" android:drawable="#drawable/unchecked" />
</selector>
In checkbox set android:button property to the custom_checkbox_design.xml drawable like
android:button="#drawable/coustom_check_box"
<CheckBox
android:id="#+id/checkBoxCustomized1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Coustom Checkbox"
android:checked="true"
android:button="#drawable/coustom_check_box"
android:textSize="20dp" />
icons
Create a drawable custom_cheackbox:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/checkbox_not_selected"android:state_checked="false"/>
<item android:drawable="#drawable/checkbox_selected" android:state_checked="true"/>
<item android:drawable="#drawable/checkbox_not_selected"/>
</selector>
add your custom background inside custom_checkbox android:button="#drawable/custom_cheackbox"
<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_selector"
android:text="CheckBox"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/Black" />

Android change item's list layout

I have a DrawerLayout with navigation menu(there is list of menu elements), I want to change some properties. Currently it looks like this
and I need something like:
So how is it possible to change color text, imageview tint, marginLeft and small green line?
List item is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/mynavigationbackground"
android:paddingLeft="20dp"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/navigation_item_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/ic_menu_gallery"
android:tint="#109039"/>
<TextView
android:id="#+id/navigation_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gallery"
android:textStyle="bold"
android:textColor="#109039"/>
</LinearLayout>
For change background color I use these xml files:
mynavigationbackground:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/navigationactivated" android:state_pressed="true"></item>
<item android:drawable="#drawable/navigationactivated" android:state_focused="true"></item>
<item android:drawable="#drawable/navigationactivated" android:state_activated="true"></item>
<item android:drawable="#drawable/navigationnoactivated"></item>
</selector>
navigationactivated:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#4064D864"></solid>
</shape>
and navigationnoactivated:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"></solid>
</shape>
I tried to use tint and margin properties in these files but it doesn't work.
Is there any way to make this effect in xml?
I tried to do it programmatically (by onClick), but still nothing.
See this answer. it could be useful.
It is about inverted colors and I see your images and one is the opposite of the other.
Invert colors of drawable Android

how to customize image button in android

i am new in android development , it very difficult to design customized user interface in
android . i have a image button that have default shap is ractangle i need do it as
rounded
shap please help me .
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#82B210"
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=".SettingActivity" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/makeconfess" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton1"
android:layout_alignRight="#+id/imageButton1"
android:layout_below="#+id/imageButton1"
android:layout_marginTop="27dp"
android:text=" Make a\nConfess"
android:textColor="#FFFFFF"
android:textAppearance="?android:attr/textAppearanceMedium" />
To create a circle shape of button firstly you have to create an xml in drawable folder
circle_shape_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#666666"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
use this xml in button background as
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_shape_drawable"
android:text="#string/hello_world" />
You can define a Button or ImageButton with a xml file and save it into the drawable folder. In this way you can provide different states for your button (pressed, focused, normal, ...).
For example:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_selected="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_focused="true" android:drawable="#drawable/btn_action_hover" />
<item android:drawable="#drawable/btn_action_normal" />
</selector>
To be sure your button will be displayed correctly on any resolution/screen size, I would suggest to use 9 patch drawables as explained in http://developer.android.com/tools/help/draw9patch.html.
in the drawable folder in the res folder
Create a android xml file and named as cbutton.xml
Then enter the bellow code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="#drawable/pressselected">
</item>
<item android:state_focused="true"
android:drawable="#drawable/presshighlight">
</item>
<item android:drawable="#drawable/press"></item>
</selector>
Then set this file as background of your ImageButton like in below.
<LinearLayout xmlns:android = http://schemas.android.com/apk/res/android
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="Click to view Custom Button Action"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/press"
android:layout_gravity="center"
android:layout_marginTop="30dp"
/>
</LinearLayout>
xml to create a button in Android
<?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="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="#drawable/one" />
<! -- android:background property is used to apply background to a to button. And #drawable/one means there is a image name as one in your drawable folder we are applying it as background to this button. -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Code to define rounded corner button
<? xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> //Defines the shape of button you wants
<solid android:color="#eeffff"/>
<corners android:bottomLeftRadius="8dp" //how much curve you want from bottom left corner
android:bottomRightRadius="8dp"//how much curve you want from bottom right corner
android:topLeftRadius="8dp""//how much curve you want from top left corner
android:topRightRadius="8dp"/> "//how much curve you want from top right corner
</shape>
default shape of button is rectangle so now I will tell you how to create round button
For that you again need to create an xml file in your drawable folder, and name it as button_shape.xml
The codes for button_shape.xml are as follows:
Code to define button shapes
<? xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android=http://schemas.android.com/apk/res/android android:shape="oval" >
//There are many other shapes also available they are rectangle,ring,line and oval
<solid android:color="#ffcccc"/> //applying the colour to the button.
<stroke android:width="2dp"
android:color="#ffffff"/>
</shape>

Categories

Resources