I have a question which I can't find an answer to and really have to solve.
I am trying to change the background for the tab layout indicator but JUST FOR IT, i.e. if the entire tablayout is green and the tablayoutindicator height is 4dp I want the ENTIRE bottom 4dp of the tablayoutview will be in another color (lets say red) is that possible?
Before you answer please note I'm not talking about app:tabIndicatorColor property but on the entire height of the tabIndicator (regardless of the tabIndicator itself).
For example, on the attached image the app:tabIndicatorColor is white but the background of it is black while the entire view is a gardient of blue.
Edit -
I managed to do it using a FrameLayout having the bottom view in black while the tablayout is above it with its properties, I'm still looking for a more "clean" way to achieve the same thing
To achieve what you are looking for you can try the following
Create a selector tab_layout_selector
<?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">
<layer-list>
<!-- Stripe bottom indicator color -->
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#color/red" android:width="4dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
Finally, in your TabLayout add
<android.support.design.widget.TabLayout
<!-- Whole tab background -->
android:background="#color/white"
<!-- Line color -->
android:tabBackground="#drawable/tab_layout_selector"
.... Others....
/>
Related
I was changing the background of an edit view in Android and I did it with a drawable that contains the following code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFF" />
<corners
android:radius="7dp" />
</shape>
Then add it with the "android: background" property to the style of my input:
<style name="inputPrimary">
<item name="android:background">#drawable/btn_rounded_background</item>
<item name="android:padding">9dp</item>
</style>
I don't know if I am very detailed but I find that the text in my Edit view is vertically misaligned (a little but it becomes noticeable enough)
My edit text
What can I do?
Set the individual padding of the view either in styles or layout xml,then adjust the top and bottom padding to the pressie level you need the text to be.Be careful of the height of the view as the text height+padding top+padding bottom should be less than the views height.
android:paddingBottom="10dp"
android:paddingTop="9dp"
android:paddingLeft="9dp"
android:paddingRight="9dp"
I am trying to create a simple layout that would look similar to a TabLayout but I don't need to have actual tabs. It would just be acting like a plain button.
I am not sure if this should be done via background drawable (to handle change of state and color of line) or via just views.
Any suggestions on this?
You can make separate buttons / relative / image layouts as buttons. And change fragments in frameLayout. I can't say it is good practice but at the same time I don't know your situation. But Im sure it will work and you can easy custom each part of the process and view.
Use a customized TabLayout
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="40dp" // select your height
app:tabBackground="#drawable/buttons_selector" // this to customize tabs
app:tabSelectedTextColor="#color/your_tab_text_color"
app:tabTextAppearance="#style/TabTextAppearance"
app:tabIndicatorHeight="0dp" // hide the indicator line
app:tabGravity="fill" // or center
app:tabMode="fixed" // or scrollable
>
drawable buttons_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- drawable for selected tab -->
<item
android:drawable="#drawable/button_selected"
android:state_selected="true"/>
<!-- drawable for unselected tab -->
<item
android:drawable="#drawable/button_not_selected"
android:state_selected="false"/>
</selector>
drawable button_not_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- unselected tab background -->
<solid
android:color="#android:color/transparent" />
drawable button_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" />
<!-- color of the selected tab -->
<solid
android:color="#color/your_color"/>
</shape>
You can play with colours, radius, etc.
I want to make a weekly calendar, where every day is a custom checkbox with objective to look like the image bellow:
(http://i.imgur.com/WjIKCd0.png)
When the user clicks on a day (Monday in this case), the "background" and "button" checkbox changes as well the text color...
I made the drawables and it seems to work fine... check bellow the code:
Checkbox layout:
<CheckBox
android:id="#+id/selectMonday"
android:layout_width="40dp"
android:layout_height="40dp"
android:button="#drawable/ic_none"
style="#style/CheckBoxBackgroundView"
android:onClick="selectDay"
android:text="#string/monday_letter"
android:gravity="center"
android:checked="true"/>
(the drawable "ic_none", is simple a 135x135 "transparent" image with nothing in it...)
Style (CheckBoxBackgroundView):
<style name="CheckBoxBackgroundView">
<item name="android:background">#drawable/background_day_week_picker_box_selector</item>
<item name="android:textColor">#color/text_color_day_week_picker_box_selector</item>
<item name="android:textSize">#dimen/text_spinner_text</item>
<item name="android:textStyle">bold</item>
</style>
Background Selector (background_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="#drawable/background_day_of_week_picker_unselected" />
<item android:state_checked="true"
android:drawable="#drawable/background_day_of_week_picker_selected" />
</selector>
Background selected (background_day_of_week_picker_selected):
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- view background color -->
<solid
android:color="#color/red_color" >
</solid>
<!-- view border color and width -->
<stroke
android:width="3dp"
android:color="#color/transparent">
</stroke>
<!-- Here is the corner radius -->
<corners
android:radius="10dp" >
</corners>
</shape>
and finally the color selector (text_color_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:color="#color/red_color"></item>
<item android:state_checked="true"
android:color="#color/white"></item>
</selector>
I tried this in several devices... in some, it appears like it suppose to, in others the text disappears and it looks like this:
(http://i.imgur.com/Jy9FrPS.png)
probably is coincidence, but all the devices that worked are below 5 inches...
is there anything wrong with my code that I'm not seeing? anyone have any suggestions?
Thanks in advance
The problem is that the 135x135 button drawable is pushing the text out of the bounds of your CheckBox's width. Instead of using a drawable, you can just set android:button="#color/transparent".
I tried making a 9 patch image and setting that as background as many solutions suggest but that didn't change the border color when the edittext is selected. In fact, there is no border now, just the image of the edittext. How can I simply change the border color of it? To be for example blue instead of yellow.
Try this :
According to Vikram's answer
Create a xml file with the following in drawable (say
backwithborder.xml):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00000000" />
<stroke android:width="1dip" android:color="#ffffff" />
</shape>
and for the EditText user attribute
android:background="#drawable/backwithborder"
Other answers that may help you :
Change edittext border color
How to set border color for EditText
You need to make a selector when the Edittext is focused or selected the image changes of the Edittext.
sample:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="#android:drawable/edittext_pressed"/> //9patch for pressed
<item
android:state_focused="true"
android:drawable="#drawable/edittext_focused"/> //9patch for focused
<item
android:drawable="#android:drawable/edittext_normal"/> //9patch for normal
</selector>
This selector is then added in the background of the Edittext.
Use the below step to change the border color.
editText.Background.SetColorFilter(Color.Red);
I am looking to style the tab indicator like pininterest where the indicator does not look like the normal "android" style . Is there some attribute where i can set the indicator height ?Please look into the following image .
It might be not a proper solution, and question is really old, but as I haven't found any proper solutions, this is how I did it:
I created a layerList file called indicator:
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
</shape>
</item>
<item android:bottom="3dp">
<shape android:shape="rectangle">
<solid android:color="#efefef" />
</shape>
</item>
</layer-list>
And just set it as my tab indicator background:
<style name="CustomTabPageIndicator" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#drawable/indicator</item>
</style>
I've also applied this theme to my actionBar:
<style name="MyActionBarTheme" parent="android:style/Widget.Holo.ActionBar">
<item name="android:actionBarTabStyle">#style/CustomTabPageIndicator</item>
</item> </style>
It works because in indicator.xml first shape is lower shape, which is actual indicator, and to I set its height by providing bottom padding for another shape which color is identical to actionbar color.
just set layout_height attribute in your layout file:
com.viewpagerindicator.TitlePageIndicator
android:layout_height="#dimen/indicator_height"
Using the material design TabLayout, You can set the height with app:tabIndicatorHeight
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="4dp" />