How to create individual background for PagerSlidingTabStrip? - android

I am using PagerSlidingTabStrip and I am trying to make some custom view for it. How can I achieve the rounded selected state background like below in the screenshot?

First of all, create a selector xml(custom_background.xml) file as below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/some_ripple" android:state_pressed="true" />
<item android:drawable="#drawable/some_ripple" android:state_focused="true" />
<item android:drawable="#android:color/transparent" />
</selector>
The same then can be applied to your PagerSlidingTabStrip view in your layout xml file
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/channel_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="#color/theme_color"
android:textColor="#color/text_color_near_black"
app:pstsDividerColor="#00000000"
app:pstsIndicatorColor="#color/highlight_color"
app:pstsIndicatorHeight="4dp"
app:pstsShouldExpand="true"
app:pstsTabBackground="#drawable/custom_background" />
Hope this solved your problem. If you face any issues, do ask again.

Related

Android button effect does not work

I want to use 2 pictures for one button to make a effect when user click it.
I think I did properly but, the effect does not work.
Specifically, the button background set to camera_button_after.jpg which is meant for pressed state and does not change when it is clicked.
Could you tell me what's wrong? I'll be very appreciated.
Here is the main_frame.xml which contains buttons.
main_btn1.xml, main_btn2.xml, main_btn3.xml are selectors.
Those three selectors have same structure and also same problem..
<?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/button001"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/main_btn1"
android:text=" Mood"
android:textSize="30dp"/>
<Button
android:id="#+id/button002"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/main_btn2"
android:text=" Mood Lists"
android:textSize="30dp"/>
<Button
android:id="#+id/button003"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/main_btn3"
android:text=" Help"
android:textSize="30dp" />
</LinearLayout>
Here is the main_btn1.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="false"
android:drawable="#drawable/camera_button_before" />
<item
android:state_pressed="true"
android:drawable="#drawable/camera_button_after"/>
</selector>
One more question is..I think the eclipse doesn't fully recognize the pictures and xml files. I cleaned the project few times and reboot the eclipse but it they still have question mark like below
I was facing the similar problem. I tried the below code. I did get this solution from stack overflow itself, but do not have its link for reference. So writing the code snippet for xml in drawable folder. Do remember to provide the right image names :)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/image1" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/image2" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/image3" />
<item
android:state_enabled="true"
android:drawable="#drawable/image4" />
</selector>
Let me know how it works for you.
Replace your xml with this.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/camera_button_before" />
<item
android:state_pressed="true"
android:drawable="#drawable/camera_button_after"/>

Change Color onClick and background on Focus

i have a ListView in my Navigation Drawer and want it looks like the Playstore App or Youtube App.
Means onClick changing FontColor for Example to red and when i just hold it the background should turn grey.
Do i have to use 2 onitemclicklistener?
<?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="48dp">
<ImageView
android:id="#+id/icon"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="#string/DrawerListIcon"
android:src="#drawable/ic_home"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/icon"
android:textSize="14sp"
android:textStyle="bold"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#color/DrawerListFontColor"
android:gravity="center_vertical"
android:paddingRight="40dp"
android:paddingLeft="0dp"/>
</RelativeLayout>
Tried with Item and Selector. First thing Font Color don't change when i pressed the Button. Second the background of the Relative Layout turns blue insead of Grey.
drawer_list_font.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="#color/DrawerListFontColorPressed"
/>
<item android:color="#color/DrawerListFontColor"/></selector>
drawer_list_background.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="#color/DrawerListBackgroundFocused"
/>
<item
android:color="#color/DrawerBackground"
/></selector>
I had to use android:drawable instead of background on the relative Layout. On the Textview Android Stuio accepted android:color.
This is changed by changing view from ur java file at every click event u can change the view. U have to make multiple view ie xml files for that. Which are dynamically changed or u can also send parameters to a function and create an xml at runtime but that will be too deep for u
No need for listeners at all.
A better approach here is to create drawable XML's with definitions for every state ("pressed", "focused", etc).
Check out Color State List resources
For example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false"android:color="#80000" />
<item android:state_focused="true" android:state_pressed="true" android:color="#ff0000" />
<item android:state_focused="false" android:state_pressed="true" android:color="#ff0000" />
<item android:color="#color/DrawerListFontColor" />
</selector>

Android state list for compound drawable

Is it possible to define state list for compound drawables in Android?
This is my button in layout xml:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_top"
android:text="#string/button_text" />
This is my drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="#drawable/btn_top_enabled" />
<item android:drawable="#drawable/btn_top_disabled" />
</selector>
This works for background, but its not working for drawableTop. The first state is always displayed. Is this even possible in Android, and if so am I missing something?
look ad TextView.java source code and you will see that yes, you can use StateListDrawable as a compound Drawable that displays according to TextView state
Try:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="#drawable/btn_top_enabled" />
<item android:state_activated="true" android:drawable="#drawable/btn_top_enabled" />
<item android:drawable="#drawable/btn_top_disabled" />
</selector>
And
button.setActivated(true);

Image selector not working well

This is my problem: I have an ImageView and I assign a selector to it, so the image have to change when I touch it. The problem is that the image doesn't change.
The selector has a different name than the image sources, so that is not a problem. When I touch the image, the app does an http call, so I think that there is the problem, but I don't know how to solve this.
Selector xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/pat_login_button_pressed"
android:state_selected="true" />
<item android:drawable="#drawable/pat_login_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/pat_login_button"
android:state_selected="false" />
</selector>
ImageView xml:
<ImageView
android:id="#+id/login_button"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:src="#drawable/pat_login_button_selector" />

selector not working with layout and image view

I want to use selector for a layout and image view..But it is not working for me.
When I changed image view to imagebutton or button, it works fine. Any help will be greatly appreciated.. Thanks in advance..
here is the xmls I used..
<?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/bg"
/>
<item
android:drawable="#drawable/bg_01" />
</selector>
The layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_height="fill_parent">
<ImageButton
android:layout_width="100dp"
android:layout_height="50dp"
android:text="layout tester"
android:textColor="#000000"
android:textStyle="bold"
android:paddingTop="10dp"
android:src="#drawable/testselector"
android:layout_gravity="center_horizontal" />
</LinearLayout>
I ran into this problem just now. You'll have to set the LinearLayout to clickable. You can either do this in the XML with
android:clickable="true"
Or in code with
yourLinearLayout.setClickable(true);
try this
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/lastread_ok" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/lastread_ok" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/lastread_ok_selected" />
<item android:drawable="#drawable/lastread_ok" />
</selector>
you can use your image instead of lastread_ok & lastread_ok_selected
use the id of imageview instead of linear layout and setclicklistener for imageview itself, it will work!!
You have to change src to background
or
ImageButton to ImageView and alse write android:clickable="true"in ImageView attributes.
For me it helped to not assign the attribute android:clickable to the layout but to the ImageView instead. I just wanted the image to be clickable though, not the containing layout.
setOnClickListener() for selectable components solved the problem

Categories

Resources