I'm trying to implement DashboardLayout (Pattern 3).
All ok when orientation is portrait:
But when orientation of app changes to album it looks like:
Here is the source code of DashboardLayout.java
Activity layout file as in example:
<?xml version="1.0" encoding="utf-8"?>
<com.example.ui.DashboardLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dashboard_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white" >
<Button
android:id="#+id/posts"
style="#style/DashboardButton"
android:drawableTop="#drawable/ic_db_posts"
android:onClick="onClick"
android:text="posts" />
***and four same buttons***
</com.example.ui.DashboardLayout>
style/DashboardButton:
<style name="DashboardButton">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:background">#drawable/db_buttons</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">#000000</item>
</style>
Background only for button pressed state:
<?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/db_button_bd_pressed" />
</selector>
Pressed:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:left="10dp"
android:top="20dp"
android:right="10dp"
android:bottom="20dp" />
<corners android:radius="10dp" />
<solid android:color="#a6cee1" />
</shape>
Where is the problem? Help me, please.
The Dashboardlayout just works if the number of buttons is even. You have an odd number, just insert an extra button with:
android:background="#null" or "#ffffffff"//transparent
So it will handle it like a extra button but it is transparent.
Related
i'm trying to make a simple rounded button like this
starting from this
The problem is that i don't want to lose the style (the ripple and the color change when you press it and the shadow). that would happen using a state-drawable as background.
How can i achieve it?
Just use the MaterialButton in the Material Components library with the app:cornerRadius attribute.
Something like:
<com.google.android.material.button.MaterialButton
android:text="NORMAL"
app:cornerRadius="16dp"
../>
<android.support.v7.widget.AppCompatButton
style="#style/buttonApp"
android:text="Normal" />
in res>values>styles.xml put this. and change padding, colors if you need.
<style name="buttonApp" parent="#style/Widget.AppCompat.Button.Borderless">
<item name="android:layout_height">#dimen/appButtonHeight</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:gravity">center</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:textColor">#color/colorWhite</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16sp</item>
<item name="android:background">#drawable/bg_button_orange</item>
</style>
You will get required press effect by 1 drawable for post 21 version, like below, but pre 21 version do not support ripple effect so you have to make some drawables background for press and non press effect, i have included final solution here
bg_button_orange.xml in res>drawables-v21>
(this is after 21 version android)
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/colorGreenAlpha" />
<corners android:radius="15dp" />
</shape>
</item>
<item android:drawable="#drawable/bg_button_not_selected" />
</ripple>
bg_button_orange.xml in res>drawables>
(this is for pre 21 version android)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_button_selected" android:state_pressed="true" />
<item android:drawable="#drawable/bg_button_selected" android:state_focused="true" />
<item android:drawable="#drawable/bg_button_selected" android:state_selected="true" />
<item android:drawable="#drawable/bg_button_not_selected" />
</selector>
bg_button_not_selected.xml in res>drawables
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorGreenLight" />
<corners android:radius="#dimen/appButtonRadius" />
</shape>
bg_button_not_selected.xml in res>drawables
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorGreen" />
<corners android:radius="#dimen/appButtonRadius" />
</shape>
put in res>values>dimens.xml
<dimen name="appButtonHeight">60dp</dimen>
<dimen name="appButtonRadius">30dp</dimen>
put in res>values>colors.xml
<color name="colorGreen">#009688</color>
<color name="colorGreenAlpha">#b0009688</color>
<color name="colorGreenLight">#27d4c4</color>
Button height should be double than button radius to get exact round corners.
You will get button like belo image with ripple effect on post 21 version and press effect before 21 version.
I have two images. In one is a number, the other is shadow. I need to show this two images as can be seen in the second photo.
This is my code. Right now it only shows or the number (when is not pressed), or the shadow(when is pressed).
How is possible to show both images when the user press the button?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_select" android:state_pressed="true"
android:alpha="0.75"/>
<item android:drawable="#drawable/number_1" android:state_enabled="true" />
<item android:drawable="#drawable/number_1" android:state_pressed="false"
/>
</selector>
this are the two images
this is the goal
Also I was trying using layerDrawable in this way, but didn't work:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_select" android:state_pressed="true"
android:alpha="0.75"/>
<item android:drawable="#drawable/number_1" android:state_enabled="true" />
</selector>
</item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/number_1" android:state_pressed="false"
/>
</selector>
</layer-list>
You should use two different images...
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_image" android:state_pressed="true"/>
<item android:drawable="#drawable/normal_image" android:state_pressed="false"/>
</selector>
You can use Relative Layout for that
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/iv_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_select"/>
<ImageView
android:id="#+id/iv_img"
android:layout_width="wrap_content"
android:padding="5dp"
android:layout_height="wrap_content"
android:background="#drawable/number_1"/>
</RelativeLayout>
Just change image of iv_img id GOOD LUCK
please change the drawable selector file with this code..
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:drawable="#drawable/number_1" />
<item android:bottom="#dimen/margin_5" android:left="#dimen/margin_5" android:right="#dimen/margin_5" android:top="#dimen/margin_5">
<bitmap android:src="#drawable/button_select" />
</item>
</layer-list>
</item>
<item android:drawable="#drawable/number_1" android:state_pressed="false"/>
Limitation ::
It can use for single image of number ..for multiple numbers you have to create different selector.xml for each one..
Please tell if need more explanation or help..
I am using the Xamarin sample at the following link:
Part 3 - Customizing a ListView's Appearance
The sample code is from the following file: CustomRowView.zip
Here is a screenshot of my running code: Emulator screenshot
The background color of the ListView items are in yellow.
May I please have some help to change this color to be the default color, or to choose this color?
I am not sure where to find this in code. I have looked in the XML layout files, but cannot find the correct item.
In the RelativeLayout, there is a reference to the following:
android:background="#drawable/CustomSelector"
And this is the contents of the file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:state_selected="false"
android:drawable="#color/cellback" />
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#E88A93"
android:endColor="#E88A93"
android:angle="270" />
</shape>
</item>
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/cellback" />
</selector>
Is this code relevant to the question?
Thanks in advance
The "yello background color" is the custom listview item's background color. In the toturial you referenced, you can find it in "/Resources/Layout/CustomView.axml" :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFDAFF7F"
android:padding="8dp">
<LinearLayout android:id="#+id/Text"
android:orientation="vertical"
...
...
android:layout_height="48dp"
android:padding="5dp"
android:src="#drawable/icon"
android:layout_alignParentRight="true"
/>
</RelativeLayout >
the android:background="#FFDAFF7F" is what you want to modify.
Your ListView is using CustomView.axml for each row. in CustomView.axml parent element (RelativeLayout) is using CustomSelector.xml from Drawable folder in android:background attribute. In this file you can change colors of three states (pressed, pressed & selected, none) as you wish.
Create a color.xml in your values file and defines your color(which color you wnt to set to your listview ite) here
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="magenta">#FF00FF</color>
<color name="yellow">#FFFF00</color>
<color name="light_grey">#ffb9b8bb</color>
</resources>
and then use these colors in your custom selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/light_grey" android:state_pressed="false" android:state_selected="false"/>
<item android:state_pressed="true"><shape>
<gradient android:angle="270" android:endColor="#E88A93" android:startColor="#E88A93" />
</shape></item>
<item android:drawable="#color/light_grey" android:state_pressed="false" android:state_selected="true"/>
</selector>
I never get it yellow, which should come after pressing an item in the list.
(I changed your sample to yellow for state_pressed=true.
Tks
Seli
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/light_grey" android:state_pressed="false" android:state_selected="false"/>
<item android:state_pressed="true">
<shape>
<gradient android:angle="270" android:endColor="#E88A93" android:startColor="#E88A93" />
</shape>
</item>
<item android:drawable="#color/yellow" android:state_pressed="false" android:state_selected="true"/>
</selector>
For example, say I have a color state list declared in XML, called example1.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="#color/red"
android:state_pressed="true" />
<item
android:color="#color/blue"
android:state_checked="true" />
<item
android:color="#color/green"
android:state_disabled="true" />
<item
android:color="#color/orange" />
</selector>
Then, I want to create example2.xml and I want it to be the exact same as example1.xml except I want the pressed color to be purple instead of red:
<item
android:color="#color/purple"
android:state_pressed="true" />
So example2.xml would end up acting like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="#color/purple" <-- note this value is different
android:state_pressed="true" />
<item
android:color="#color/blue"
android:state_checked="true" />
<item
android:color="#color/green"
android:state_disabled="true" />
<item
android:color="#color/orange" />
</selector>
but without all of the duplicate code. Also, if I want to change a color I can just change it in one place.
Is this possible?
I don't think you can do this on Android, You have to create multiple xml resources for different selector.
I have created dynamic text view at table row in table layout.
I want to highlight theh current row while I click row in table layout.
How can this be done?
Below 2 lines should work fine. When creating the rows in a method
row.setFocusable("true");
row.setFocusableInTouchMode("true");
The following layout options worked for me to make a table row clickable and respond visually like a button:
<TableRow style="#style/PlanAttribute" xmlns:android="http://schemas.android.com/apk/res/android"
android:focusable="true"
android:focusableInTouchMode="true"
android:onClick="onRowSelected"
android:clickable="true">
...
PlanAttribute style:
<style name="PlanAttribute">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/divider_drawable</item>
</style>
divider_drawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/divider_down"
android:gravity="fill"/>
</item>
<item android:state_focused="true">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/divider_selected"
android:gravity="fill"/>
</item>
<item
android:state_focused="false"
android:state_pressed="false">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/divider"
android:gravity="fill"/>
</item>
</selector>