Listview row getting highlighted making the widgets invisible - android

I have generated a Listview using fortysevendegree swipelistview library. I want to highlight the selected Listview row with a specific color and not the default highlighter in android. i have done the following code but my whole row gets the color and the widgets get masked. If i remove the android:drawSelectorOnTop="true" there is no Highlight on the row. Can anyone please tell me what to do? My codes are as below::
myactivity.xml
<com.fortysevendeg.swipelistview.SwipeListView
android:id="#+id/swipy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
swipe:swipeFrontView="#+id/front"
swipe:swipeBackView="#+id/back"
android:focusable="true"
android:focusableInTouchMode="true"
android:listSelector="#drawable/list_selector"
android:drawSelectorOnTop="true"
android:dividerHeight="1dp"
swipe:swipeMode="right"
/>
listselector.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/list_item_bg_normal" android:state_activated="false"/>
<item android:drawable="#drawable/list_item_bg_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/list_item_bg_pressed" android:state_activated="true"/>
</selector>
list_item_bg_normal.xml in drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/list_background"
android:endColor="#color/list_background"
android:angle="90" />
</shape>
list_item_bg_pressed.xml in drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/list_background_pressed"
android:endColor="#color/list_background_pressed"
android:angle="90" />
</shape>

Related

Shadow in center on click image view

i am trying to show rounded shadow in center when status is pressed.
but it is giving full view (rectunglar) shadow in current case.
here is what i am trying...
1. left_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape >
<solid android:color="#ffffff"></solid>
</shape>
</item>
<item android:state_focused="true"><shape>
<solid android:color="#40454a"></solid>
</shape></item>
<item><shape>
<solid android:color="#40454a"></solid>
</shape></item>
</selector>
here is the xml layout where i am applying ...
<RelativeLayout
android:id="#+id/relative_activity_camera_bottom"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:background="#layout/footer_color" >
<LinearLayout
android:id="#+id/bottom_layout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#android:color/transparent"
android:gravity="center_vertical"
android:weightSum="1.0" >
<ImageView
android:id="#+id/captureImage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#layout/left_button"
android:src="#layout/camera_image"
/>
<ImageView
android:id="#+id/recordButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:src="#layout/videocamera_image"
android:background="#layout/left_button"
android:onClick="startRecording"
/>
</LinearLayout>
</RelativeLayout>
original condition-
current case- (but i want to show white only in center)
For example, use a selector :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/gradient_round_press_effect" android:state_selected="true" android:state_window_focused="false"/>
<item android:drawable="#drawable/gradient_round_press_effect" android:state_selected="true"/>
<item android:drawable="#drawable/gradient_round_press_effect" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="#drawable/gradient_round_press_effect_inverse" android:state_selected="false"/>
</selector>
With two drawable shapes, the first when clicked (gradient_round_press_effect):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:endColor="#color/clr_the_color_behind"
android:gradientRadius="130"
android:startColor="#66000000"
android:type="radial" />
</shape>
Adapt the size of the radius with the size of the button
For start color use #66FFFFFF if you want white (66 is for the transparency)
For end color maybe you can use transparent ? i didn't try this
and when not clicked define your own colors (gradient_round_press_effect_inverse) not really "inverse" but this is an example of another gradient. You can just use a color instead
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:centerColor="#color/clr_gradient2"
android:endColor="#color/clr_gradient1"
android:startColor="#color/clr_gradient3"
android:type="linear" />
</shape>

Selector for list view

I have a selector for different states of the list view. I have selected a grey colour for the background but its not working ,pressed state is working fine but my list view background is still white, and when I select the list item its colour changes to grey which I have chosen for the background and the background is still white.
Please help ,Sorry for the silly question as I am new to android.
My list view is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/activatedBackgroundIndicator">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector">
</ListView>
</FrameLayout>
Selector xml is:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg" />
<item android:state_pressed="true"
android:drawable="#drawable/gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg_hover" />
</selector>
pressed_state xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#78DDFF"
android:centerColor="#16cedb"
android:endColor="#09adb9"
android:angle="270" />
</shape>
background xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#D5DDE0"
android:centerColor="#e7e7e8"
android:endColor="#CFCFCF"
android:angle="270" />
</shape>
Apply your selector to the ListView item, I mean the viewgroup of the row.xml or whatever name you have defined for the listview item.

Custom Background image for a Textview

I am trying to create clickable textbox that highlights like a listview item when pressed. I have my own background image that i want to use so i cannot use
android:background="?android:attr/selectableItemBackground"
Is there a way i can achieve the blue "glow" affect when i click on the textbox while using my own background image for the textbox? Currently, my textview looks like:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title"
style="#style/ListSeparatorTextViewStyle"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:focusable="true"/>
UPDATE:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:background="?android:attr/selectableItemBackground"
android:state_pressed="true" />
<item android:drawable="#drawable/list_section_divider_holo_custom"></item>
</selector>
you can create a drawable for background of textview same below
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" ><!-- this drawable display when you press textView -->
<shape android:shape="rectangle" >
<gradient android:startColor="#fa7905"
android:endColor="#fcc96b"
android:angle="90"
></gradient>
</shape>
</item>
<item android:drawable="your drawable">
<!-- this drawable show when you dont press textview -->
</item>
</selector>

android how to set border in listview

This is my code which work fine, I just want to add border at top and bottom of listview. So, My question is how to add border at top and bottom of listview. Note: I just want to add only border and where I can place border? Any help will be appreciated. Thanks
<ListView android:id="#+id/listCategory"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadeScrollbars="true"
android:fastScrollEnabled="true"
android:listSelector="#drawable/listview_selector"
android:dividerHeight="1dp"
android:layout_below="#+id/gridlayout"
android:visibility="gone"/>
listview_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="#drawable/listview_selector_focussed" />
<item android:state_pressed="true" android:drawable="#drawable/listview_selector_pressed" />
</selector>
listview_selector_focussed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#0a89f1" android:endColor="#56768d" android:angle="90" />
</shape>
listview_selector_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#0a89f1" android:endColor="#56768d" android:angle="90" />
</shape>
Add a header and footer, they will serve you as a border
In your Activity where you will declare your ListView;
View v=new View(this);
v.setLayoutParams(new LayoutParams(<width>,>height>));
v.setBackgroundColor(<your color>);
ListView list=(ListView)findViewById(R.id.listCategory);
list.addHeader(v);
list.addFooter(v);
In your layout file at your parent layout element
<YourParentLayoutElement
...
android:paddingTop="<your_value>"
android:paddingBottom="<your_value>"
>

tablayout design on android

I need the tabbar background is set white. Also I need to have the selected tab background color set to pink and the remaining tabs (unselected tab) background color set to blue. My existing code is shown below. What do I need to change in it?
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:background="#ffffffff"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffffff" >
<TabWidget
android:id="#android:id/tabs"
android:background="#drawable/tabicon"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:background="#ffffffff"
android:layout_height="fill_parent"/>
</LinearLayout>
</TabHost>
tab_indicator.xml:
<?xml version="1.0" encoding="utf-8"?>
<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_v4" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_selected_v4" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/tab_focus" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_focus" />
<!-- Pressed -->
<item android:state_pressed="true"
android:drawable="#drawable/tab_press" />
</selector>
tab_unselected_v4.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape>
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
/>
</shape>
</item>
</selector>
tab_focus.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient BgColor for listrow Selected -->
<gradient
android:startColor="#5e8fb7"
android:centerColor="#5e8fb7"
android:endColor="#5e8fb7"
/>
</shape>
tab_selected.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#5e8fb7"
android:centerColor="#5e8fb7"
android:endColor="#5e8fb7"
/>
</shape>
tab_press.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#FFFFFF"
android:centerColor="#FFFFFF"
android:endColor="#FFFFFF"
/>
</shape>
EDIT:
i have added below code.now my background color is change white.but my selected item and unselected item color is not set the needed color.please help me.give me some good solutions.
tabicon.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape>
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="90"
/>
</shape>
</item>
<item android:state_focused="true">
<shape>
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="90" />
</shape>
</item>
</selector>
also added below java code:
for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
{
tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_indicator);
}
tabHost.getTabWidget().setCurrentTab(0);
tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.tab_indicator);
}
public void onTabChanged(String tabId) {
// TODO Auto-generated method stub
for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
{
tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_indicator);
}
tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.tab_indicator);
}
}
EDIT:
Here i have to set the selected background color and unselected background color is successfully.
Now i wish to need the one implementation here.
The first tab width is larger than second and third tab width.how can i do this????
please help me.
Here the dashboard tab is larger than order and customer tab.please help me.how can i design and develop this.
This is my output:
i wish to need the o/p is like below image:
EDIT:
Here i have to use this code on my style.xml:
<style name="CustomTheme" parent="#android:style/Theme">
<item name="android:tabWidgetStyle">#style/CustomTabWidget</item>
</style>
<style name="CustomTabWidget" parent="#android:style/Widget.TabWidget">
<item name="android:textAppearance">#style/CustomTabWidgetText</item>
</style>
<style name="CustomTabWidgetText"
parent="#android:style/TextAppearance.Widget.TabWidget">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
Afterthat add below line on AndroidManifest.xml file:
<activity android:name="MyTabActivity" android:theme="#style/CustomTheme">
Now i have successfully changed my fontsize and color and style on tabhost.
I think it will be better if you put the TabWidget in a LinearLayout which has a white background similar to the following:
<LinearLayout
android:id="#+id/ll_tab_widget"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white" >
<TabWidget
android:id="#android:id/tabs"
android:background="#drawable/tabicon"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Also, for setting the selected and unselected color, you can create an xml with a RelativeLayout whose background is a selector(with different images or colors for selected and unselected states), like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabsLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector_selected_unselected">
</RelativeLayout>
You can then inflate the TabHost.TabSpec indicator by the above xml.
In case you find any difficulty, you can post the same.
All the best!
If you want the first tab width to be larger than the second and third one, you can have a separate xml for it and specify the width accordingly. I am talking about this xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabsLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector_selected_unselected">
</RelativeLayout>
While inflating the tab indicator, you can inflate different tab indicators with different xmls.

Categories

Resources