I am using spinner in my layout and its appearance is as follows:
I want to increase the spinner size to make it more attractive and visible.
here is spinner xml and activity snippet.
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner_room"
android:layout_below="#id/Toolbar_Room"
android:textSize="52sp"
android:prompt="#string/room_prompt"
android:spinnerMode="dropdown"
android:dropDownSelector="#drawable/img_small_box_green"
android:drawSelectorOnTop="true"></Spinner>
Create a custom layout for your Spinner and inflate it through an adapter.
Check out this.
http://abhiandroid.com/ui/custom-spinner-examples.html
I have created spinner with card view check this you may like this design.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_5"
android:background="#android:color/white"
app:cardElevation="#dimen/margin_2"
app:contentPaddingBottom="#dimen/margin_5"
app:contentPaddingTop="#dimen/margin_5">
<Spinner
android:id="#+id/sp_filter_status"
style="#style/Widget.Spinner"
android:background="#drawable/spinner_expand_black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="0dp" />
</android.support.v7.widget.CardView>
drawable/spinner_expand_black
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item>
<shape>
<solid android:color="#android:color/white" />
<padding
android:bottom="#dimen/margin_1"
android:left="#dimen/margin_1"
android:right="#dimen/margin_1"
android:top="#dimen/margin_1" />
</shape>
</item>
<item>
<bitmap
android:gravity="end"
android:src="#mipmap/ic_action_expand_more" />
</item>
</layer-list>
#mipmap/ic_action_expand_more is image of bottom arrow you can find from material icon site.
Style
<style name="Widget.Spinner" parent="Widget.AppCompat.Spinner.DropDown">
<item name="android:background">?android:selectableItemBackground</item>
<item name="android:dropDownSelector">?android:selectableItemBackground</item>
<item name="android:divider">#null</item>
<item name="overlapAnchor">true</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:textSize">#dimen/text_16</item>
<item name="android:focusableInTouchMode">true</item>
<item name="android:focusable">true</item>
</style>
put your Spinner inside CardView.
it will look more better.
Related
I use bottomNavigation.
I wanna fill the icon with the color "not the outside of the icon" when selected.
How can I do that?
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:paddingTop="2dp"
android:background="#FFFFFF"
android:theme="#style/BottomNavigationTextStyle"
app:labelVisibilityMode="labeled"
app:itemIconSize="24dp"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:menu="#menu/buttom_navigation_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
Use the itemIconTint attribute:
<com.google.android.material.bottomnavigation.BottomNavigationView
app:itemIconTint="#color/my_selector"
..>
and define a selector like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="1.0" android:color="..." android:state_checked="true"/>
<item android:alpha="0.6" android:color="..."/>
</selector>
Use custom made images as per your requirement. You would need to add 2 images one for the active state and for deactive state.
Create a selector home_icon_selector.xml for your icon
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_active_icon_here" android:state_selected="true" />
<item android:drawable="#drawable/your_active_icon_here" android:state_pressed="true" />
<item android:drawable="#drawable/your_active_icon_here" android:state_checked="true" />
<item android:drawable="#drawable/your_deactive_icon_here" />
</selector>
Update your menu buttom_navigation_menu to use the selector above
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_home"
android:enabled="true"
android:icon="#drawable/home_icon_selector"
android:title="#string/tab_title_home"/>
</menu>
I have 2 buttons ( left and right ) with one background drawable.
The background has corners on the right side.
I don't want to create one more background just for a change the side of the corners to left, so how can I rotate the background with corners on right in the XML file to put the corners on left?
I've tried to add android:rotation="180dp" but it's not worked for me:
<Button
android:background="#drawable/toggle_buttons"
android:id="#+id/btnLogin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/login"
android:textAllCaps="false" />
<Button
android:background="#drawable/toggle_buttons"
android:id="#+id/btnSignUp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/sign_up"
android:textAllCaps="false" />
code for the drawable background as below
<item>
<shape android:shape="rectangle">
<solid android:color="#color/background_color"/>
<corners android:bottomRightRadius="100dp" android:topRightRadius="100dp"/>
<stroke android:color="#color/text_color" android:width="0.5dp"/>
</shape>
</item>
You don't need a custom background. You can use the standard MaterialButton in the Material Components Library and apply a shapeAppearanceOverlay:
<com.google.android.material.button.MaterialButton
app:strokeWidth="..."
app:strokeColor="#color/...."
app:shapeAppearanceOverlay="#style/left"/>
<com.google.android.material.button.MaterialButton
app:strokeWidth="..."
app:strokeColor="#color/...."
app:shapeAppearanceOverlay="#style/right"/>
with:
<style name="right">
<item name="cornerSize">50%</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerSizeTopLeft">0dp</item>
</style>
<style name="left">
<item name="cornerSize">50%</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeTopRight">0dp</item>
</style>
I want to make BottomNavigationView Menu in UpperCase, How can i do that without using 3rd party library?
Here is my xml code:
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:foreground="?attr/selectableItemBackground"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:menu="#menu/navigation" />
And navigation.xml as follows:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/home_icon"
android:title="#string/title_home"
/>
<item
android:id="#+id/navigation_deals"
android:icon="#drawable/ic_deals"
android:title="#string/deals" />
<item
android:id="#+id/navigation_myBookings"
android:icon="#drawable/ic_my_bookings"
android:title="#string/title_my_bookings" />
<item
android:id="#+id/navigation_more"
android:icon="#drawable/ic_more"
android:title="#string/title_more" />
</menu>
Try this
Create a style like this BottomNavigationViewStyle
<style name="BottomNavigationViewStyle">
<item name="android:textAllCaps">true</item>
<item name="android:textSize">15sp</item>
</style>
Than use like this
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:foreground="?attr/selectableItemBackground"
app:menu="#menu/navigation"
app:theme="#style/BottomNavigationViewStyle" />
OUTPUT
Apply this theme to your bottom navigation
<style name="AppTheme2" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textAllCaps">true</item>
</style>
I have a border that I made for a button that should be enabled when the button is clicked on.
<Button
android:id="#+id/imageView_red"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:src="#drawable/border" />
My question is how can I enable/disable this drawable? Does java provide a solution for this?
I tried looking at this post, but it didn't seem to answer that question
Android - border for button
All you need to do is you have to put the selector drawable in the button like this
<Button
android:id="#+id/button1"
android:background="#drawable/selector_xml_name"
android:layout_width="200dp"
android:layout_height="126dp"
android:text="Hello" />
And the drawable like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<stroke android:width="10dp"/>
</shape>
</item>
<item android:state_pressed="false">
<shape>
<stroke android:width="0dp"/>
</shape>
</item>
I have a listview settup using an custom array adapter the list appears fine I have used an gradient ans the background of each item which also appears but the code also states to change gradient on tapping which doesnot occur below are my xml's
main.xml
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="0.1dp"
android:listSelector="#drawable/list_selector"
/>
row_list.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/txtListText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="20dp"
android:textSize="35sp"
android:textColor="#545454"
android:background="#drawable/ogbg"
/>
</LinearLayout>
list_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selector style for listrow -->
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/ogbg" />
<item android:state_pressed="true"
android:drawable="#drawable/ogpress" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/ogpress" />
</selector>
ogbg.xml// normal background gradient
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FFFAFAFA"
android:centerColor="#FFFFFFFF"
android:endColor="#FFFFFFFF"
android:angle="90"/>
</shape>
ogpress.xml//gradient to change on tapping
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FF05c1ff"
android:endColor="#7F05c1ff"
android:angle="90"/>
</shape>
I had a similar problem in the past. Try to switch the order of your selector items, I don´t know why, but the behavior of a selector depends on the order of items. If this doesn´t work, try to deparate "selected" and "pressed". Do an extra item for every state.