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.
Related
Create a login page. but I don't know what problem this code
login button don't work change color when I clicked!
I want to when I click then change color button
why doesn't changed that 'LOGIN' button?
how I can solve this?
activity_login.xml
<?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"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_login"
android:clickable="true"
android:gravity="center"
android:paddingLeft="32dp"
android:paddingRight="32dp">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_user" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="LOGIN"
android:textColor="#fff"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
selector xml ->
btn_login.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#4DAEEA" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#00ff00" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#999" />
<corners android:radius="30dp" />
</shape>
</item>
</selector>
you should make LinearLayout behave like a button by adding style and removing background , follow these steps
<LinearLayout
......
style="#style/btn_stand"
.......
>
</LinearLayout>
My style definition for the button:
<style name="btn_stand" parent="AppBaseTheme">
<item name="android:background">#drawable/btn_stand_sel</item>
<item name="android:textColor">#drawable/btn_stand_text_color</item>
<item name="android:minHeight">48dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
</style>
My #drawable/btn_stan_sel file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- disabled state -->
<item android:drawable="#drawable/btn_stand_disabled" android:state_enabled="false"/>
<!-- enabled and pressed state -->
<item android:drawable="#drawable/btn_stand_pressed" android:state_enabled="true" android:state_pressed="true"/>
<!-- enabled and focused state -->
<item android:drawable="#drawable/btn_stand_focused" android:state_enabled="true" android:state_focused="true"/>
<!-- enabled state -->
<item android:drawable="#drawable/btn_stand_enabled" android:state_enabled="true"/>
</selector>
My drawable file repeated for each state just with different colors for each state:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/stroke" />
<solid android:color="#color/blue" />
<corners android:radius="6dp" />
</shape>
this was an example that works for me , hope you use it and choose the color you want
Add android:focusable="true"to your linear layout xml code.
In the event that that doesn't work, you can try to replace android:background=#drawable/btn_login with android:foreground="?android:attr/selectableItemBackground".
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>
In my project I have a ViewPager that is not linked to the action bar and I'm having problems with setting the font size of the text for the tabs. I'm using ViewPagerIndicator (v2.4.1) in combination with ActionBarSherlock (v4.3.1).
The layout I'm using is:
<com.viewpagerindicator.TabPageIndicator
android:id="#+id/artistIndicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/artistPager"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:minHeight="50dp" />
This is within a LinearLayout inside a ScrollView. The layout works as expected and I see no problems with the interaction between the ScrollView and my ViewPager.
Styling of the ViewPager and tabs is done with the following XML:
<style name="ArtistIndicatorTheme" parent="AppTheme">
<item name="vpiTabPageIndicatorStyle">#style/ArtistInfoTabPageIndicator</item>
</style>
<style name="ArtistInfoTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#drawable/tab_background</item>
<item name="background">#android:color/white</item>
<item name="android:textAppearance">#style/ArtistInfoTabPageIndicator.Text</item>
</style>
<style name="ArtistInfoTabPageIndicator.Text" parent="#style/TextAppearance.TabPageIndicator">
<item name="android:textColor">#drawable/tab_text_color</item>
<item name="android:textSize">#dimen/activity_position_artistinfo_font_size</item>
<item name="android:textStyle">bold</item>
</style>
The background of the tabs is handled by the following XMLs to create a actual tab-style look:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_background_unselected" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_background_selected" />
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_background_unselected" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_background_selected" />
</selector>
And the two shape XMLs for selected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/text_inverted" />
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip">
<shape android:shape="rectangle" >
<solid android:color="#color/text_inverted" />
</shape>
</item>
</layer-list>
and unselected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/text_inverted" />
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip" android:right="2dip">
<shape android:shape="rectangle" >
<solid android:color="#color/text_important" />
</shape>
</item>
</layer-list>
The current font size is set by the following dimension:
<dimen name="activity_position_artistinfo_font_size">15dp</dimen>
Any indication on what I'm doing wrong?
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.
I have an ImageButton and a LinearLayout wrapping that button, like this:
<LinearLayout
android:id="#+id/homeButtonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/p_buttons_background"
android:orientation="vertical" >
<ImageButton
android:id="#+id/homeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:background="#drawable/home_icon"
android:onClick="goBackToCameraScreen" />
</LinearLayout>
I put a background around the ImageButton in the LinearLayout, as you can see above.
I want to be able to change that background (that is, the background of the LinearLayout, not the background of the ImageButton) when the user clicks on the ImageButton. I could do that programmatically, but I want to do that via XML. I could easily change the background of the ImageButton by writing a selector, like this:
<?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/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
That's EXACTLY what I want, except that I want to change the LinearLayout background, and not the ImageButton background. How can I create a XML selector just like the one above, but that actually changes the background of the LinearLayout instead of the ImageButton background??
Thank you in advance!! =)
Set the selector to your LinearLayout and add android:descendantFocusability="blocksDescendants" to it.
In selector, replace all button backgrounds with layout backgrounds.
<LinearLayout
android:id="#+id/homeButtonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/layout_bg_selector"
android:orientation="vertical"
android:descendantFocusability="blocksDescendants">
<ImageButton
android:id="#+id/homeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:background="#drawable/home_icon"
android:onClick="goBackToCameraScreen" />
</LinearLayout>
selector layout_bg_selector.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#F0F0F0" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#00F000" /> <!-- focused -->
<item android:drawable="#0000F0" /> <!-- default -->
</selector>
I think the questioner is dead by now :XD
but this is the solution
add this two lines of code to your layout:
android:clickable = "true"
and
android:focusable = "true"
the main sample is
we have this constraint layout like :
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutSample"
android:layout_width="150dp"
android:layout_height="120dp"
android:background="#drawable/layout_selector"
android:clickable="true"
android:focusable="true">
</androidx.constraintlayout.widget.ConstraintLayout>
and the ( layout_selector.xml ) like this :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_pressed" android:state_pressed="true" /> <!-- pressed -->
<item android:drawable="#drawable/bg_focused" android:state_focused="true" /> <!-- focused -->
<item android:drawable="#drawable/bg_default" /> <!-- default -->
</selector>
and for ( bg_pressed.xml ) and ( bg_focused.xml ) and ( bg_default.xml ) as we used in selector before we need to declare them in drawable folder like :
bg_pressed.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
<stroke
android:width="2dp"
android:color="#00ff00" />
</shape>
bg_focused.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
<stroke
android:width="2dp"
android:color="#ff0000" />
</shape>
bg_default.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
</shape>
now put your image view or something else inside the layout and try
some clicks :) (read the question!)
hope this will help you ...