I am stuck in creating android top bar tabs and the search bar, as the following attached image.
I have already created simple tabs with text but the line of the selected is shown downside. Now the problem is to show the icons with and the selection line should be shown upside ? How would I do that ?
You could use a custom view containing a linear layout and an image . I am using a Textview and in the linear layout background attribute , i have added a drawable which is a selector for selected tab:-
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/tabsText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/tab_text_bg"
android:gravity="center"
android:paddingBottom="#dimen/dashboardtabpadding"
android:paddingTop="#dimen/dashboardtabpadding"
android:shadowColor="#android:color/white"
android:shadowDx="1.0"
android:shadowDy="1.0"
android:shadowRadius="2.5"
android:textColor="#color/dashboard_tab_selector"
android:textSize="#dimen/dashboardtab_heading_Text"
android:textStyle="bold" />
tab_bg_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item
android:state_selected="true"
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/tab_bg_selected"
/>
<!-- Inactive tab -->
<item
android:state_selected="false"
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/tab_bg_unselected"
/>
</selector>
and for that green part, you can use a layer list for selected and unselected tab. You can google on layer list. You can use below for selected tab :-
tab_bg_selected.xml
<!-- "background shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#C1C1C1" />
</shape>
</item>
<!-- background color -->
<item
android:top="5px">
<shape android:shape="rectangle" >
<solid android:color="#202222" />
</shape>
</item>
and in your main activity, you can inflate the above layout and use it in the setIndicator(View view) method.
I hope you got it.
Related
I have following spinner:
<Spinner
android:id="#+id/safe_network_time_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/spinner_selector"
android:entries="#array/schedule_edit_days_repeat"
android:popupBackground="#drawable/custom_dropdown_white_background"
android:spinnerMode="dropdown"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/divider4"
tool:listitem="#layout/custom_dropdown_spinner_button" />
The spinner_selector is:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:gravity="right|center_vertical" android:src="#drawable/down_red_arrow" />
</item>
</selector>
The dropdown list appears like this:
When I select an item of the dropdown list, if it is too long it overlaps the arrov bitmap. how can I avoid this?
Try using a layer-list
bg_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!-- This is the actual spinner background -->
<selector >
<!-- Feel free to use your own drawable for these states -->
<item android:state_window_focused="false" android:drawable="#drawable/bg_border_accent_thin"/>
<item android:state_pressed="true" android:drawable="#drawable/bg_border_accent_thin"/>
<item android:state_window_focused="true" android:state_pressed="false" android:drawable="#drawable/bg_border_grey_thin"/>
</selector>
</item>
<!-- This is the spinner drawable, use your custom drawable aswell. android:right does the magin to separate this drawable from the spinner content-->
<item android:drawable="#drawable/ic_ripple_arrow"
android:gravity="center_vertical|right"
android:right="16dp"/>
</layer-list>
Edit 02/02/2020
My apologies for a weekend-long lunch.
If you are using the androidx dependencies (which I suggest you do) here's the code that I use to properly add spacing between the text and the selected item in the spinner.
On your layout.xml
<!-- The line I think you need is the one giving padding to the right -->
<androidx.appcompat.widget.AppCompatSpinner
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingRight="36dp"
android:background="#drawable/bg_spinner"
android:popupBackground="#drawable/bg_spinner_popup"/>
The bg_spinner.xml is the one provided a couple of lines above.
And the popup one doesn't really matter, since it gives some directives on how to paint a background, nothing important but here it is either way...
bg_spinner_popup.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android
android:shape="rectangle">
<corners android:radius="3dp"/>
<solid android:color ="#android:color/white"/>
<stroke android:width="5px" android:color="#color/primaryColor"/>
</shape>
I cannot wrap my head around this, I want to set the initial background color of my list view items to grey, but they only take the right background color after I have selected them (and deselected) the first time. Which attributes are not configured properly in the first item definition?
<?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="#color/grey" />
<item android:state_pressed="true" android:drawable="#color/red"/>
</selector>
Also tried to set the background of the list view item directly, but then the selector does not have any effect anymore.
For list items define a selector drawable:
res/drawable/list_item_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:state_pressed="true" android:drawable="#color/red" /> <!-- Pressed state -->
<item android:state_enabled="true" android:state_focused="true" android:drawable="#color/black" /> <!-- Focused state -->
<item android:state_enabled="true" android:state_selected="true" android:drawable="#color/orange" /> <!-- Selected state -->
<item android:drawable="#color/gray" /> <!-- Default state -->
</selector>
Set the above drawable as background for individual list item:
res/layout/list_item.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="?android:attr/listPreferredItemHeight"
android:background="#drawable/list_item_background" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listitem" />
</LinearLayout>
Use the above custom layout for creating the list items:
String[] mStrings = {"One", "Two", "Three", "Four"};
ListView list = (ListView) rootView.findViewById(R.id.list);
list.setAdapter(new ArrayAdapter<String>(this.getActivity(), R.layout.list_item, R.id.listitem ,mStrings));
I would suggest trying with the following definition:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/red"/>
<item android:drawable="#color/grey" />
</selector>
State List Drawables try matching in order. If you want a "default" drawable for many cases, it should be the last one, with no state flags. From docs:
During each state change, the state list is traversed top to bottom
and the first item that matches the current state is used—the
selection is not based on the "best match," but simply the first item
that meets the minimum criteria of the state.
Also tried to set the background of the list view item directly, but then the selector does not have any effect anymore.
If I am not mistaken, selector is drawn behind the list item(by default). Since you set solid grey color to your list item, the red color from the selector doesn't show. You can confirm this by changing the way you have defined #color/grey - try adding a low alpha value to it. In this case the red color should come through.
You can of course change this behavior by setting android:drawSelectorOnTop="true" - default is false. The list item will however be hidden when the selector is drawn on top.
Anyway - from what you have said, you want the items to have #color/red background when pressed and #color/grey background otherwise.
See if the following satisfies your requirements:
Selector drawable for list item views:
<?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:color/transparent"/>
<item android:drawable="color/grey" />
</selector>
For the listSelector attribute, only provide the color value:
<ListView
....
....
android:listSelector="#color/red" >
</ListView>
In a few words, the item background color is transparent when the list item is pressed - allowing the listSelector red color to be visible. In all other cases, the grey color is visible.
You need to create a listselector.xml under your drawable folder
<?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>
Then inside your listview add :
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:listSelector="#drawable/listselector" />
The selector should be similar to the one below:
List_selector.xml
<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>
Then in the drawables folder, you need to create the following 2 files:
gradient_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#cfcfcf"
android:centerColor="#737374"
android:endColor="##3e3e3e"
android:angle="270" />
</shape>
gradient_bg_hover.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#7f0000"
android:centerColor="#660000"
android:endColor="#4c0000"
android:angle="270" />
</shape>
Finally, in the listview, you need to add the following line of code:
android:background="#drawable/list_selector"
Hope this helps :)
I have some buttons with transparent background in my app. Now, I want to customize them to maintain that transparent background, but when they are pressed, the backgroud should become green.
I know that are lots of topics about custom buttons here on SO, I have readed several of them, also lots of tutorials from google. And although it may seem an easy task, I'm not getting it to work.
This is an example code of my buttons:
<Button
android:id="#+id/accept_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#drawable/button_state"
android:text="#string/btnaccept"
android:textStyle="bold" />
And this is the selector xml file buton_state.xml where I've defined the background color change for diferent button states:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button focused and pressed-->
<item android:state_pressed="true"
android:state_focused="true" >
<shape>
<solid
android:color="#color/LightGreen" />
</shape>
</item>
<!-- Button Default-->
<item android:state_pressed="false"
android:state_focused="false" >
<shape>
<solid
android:color="#android:color/transparent" />
</shape>
</item>
</selector>
This file is in res/drawable folder.
In my app, the button gets correctly a default transparent background, but this background color doesn't change to green when focused nor pressed.
try this may be help you,
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/LightGreen" /> <!--pressed -->
<item android:drawable="#android:color/transparent" /> <!-- Normal -->
</selector>
Use Selector
<?xml version="1.0" encoding="utf-8"?>
<item android:drawable="#drawable/numpad_button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
and then
<Button
android:id="#+id/button1"
android:background="#drawable/Selector File Name"
android:layout_width="200dp"
android:layout_height="126dp"
android:text="Hello" />
Does any one knows how can i skin an android button to look like this:
a busy cat http://www.11sheep.com/temp/picForSO.jpg
Thanks in advance,
Lior
The following layout files will product a button with 5px radius, of course u input your own color and change the solid color to gradient to match ur screenshots, then on the button change the text colour to white or something.. I dont have time for examples now.. good luck though.
and lastly you have to apply them as background to your button like this
<Button
android:id="#+id/btnLoveThisOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Love me love u too!"
android:background="#drawable/button_background" <!-- Yes look at me -->
/>
button_background_normal.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/button_background_normal_color"/> <!-- Change this to your own colour -->
<corners android:radius="5px"/>
<stroke android:width="1dp" android:color="#20ffffff"/>
</shape>
button_background_pressed.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/button_background_pressed_color"/> <!-- Change this to your own colour -->
<corners android:radius="5px"/>
</shape>
button_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:state_pressed="false"
android:drawable="#drawable/button_background_normal" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:drawable="#drawable/button_background_normal" />
</selector>
I know two ways to make it:
a Button or TextView with an image having that engraving rectangle, for stretch, use 9.patch :)
a Button or TextView with transparent background and a selector drawing the shape border
However, I don't know exactly how they did as shown in your picture.
I tried to change the background color of the toggle button using XML file as white color, but the toggle button is totally damaged. It looks like all the button was covered with white.
There is no indication of ON or OFF on the toggle button when I have changed the color of the toggle button to white. Is there is another way to change the background which will not damage the indication of the toggle button?
<ToggleButton android:id="#+id/togglebutton"
android:layout_width="100px"
android:layout_height="46px"
android:background="#ffffff"
android:layout_above ="#+id/save"
android:textOn="DAY"
android:textOff="NIGHT" />
This is how my XML code look for the toggle button.
Yes, there is a way to change the background as you wish, but you have to use a selector like this as background:
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/some_image" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/some_other_image" />
<item
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/some_image1" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/other_image" />
</selector>
For #Drawable, etc. (you can use a color or make a gradient. Check this for more information about gradients.
Follow this way to make your ToogleButton have background color red when On and green when OFF
First, create tooglebutton_selector.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/togglebutton_on"
android:state_checked="true" />
<item android:drawable="#drawable/togglebutton_off"
android:state_checked="false"
/>
</selector>
Second, create togglebutton_on.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ff0000" /> // red color
</shape>
Third, create togglebutton_off.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#00FF00" /> // green color
</shape>
Finally, in your ToggleButton
<ToggleButton
android:id="#+id/btnMon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tooglebutton_selector" //set background of ToggleButton to tooglebutton_selector
/>
When you decompile your SystemUI.apk, you should go to the following file: SystemUI/res/values/colors.xml
Then change the following line:
#ff000000
#ffffffff
#80000000
#ffadc1d6
#ffffffff
#ffe6e6e6