Android Relative Layout Selector - android

How do I change the color of a Relative Layout Shape ? To work it like a button.
I tried to do it using a selector.
This is the code i used.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlGPS"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#drawable/relative_selector"
>
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tvs1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_below="#+id/tvl1"
android:layout_toLeftOf="#+id/iv1"
android:text="you can here protect ... "
android:textColor="#color/gray" />
<TextView
android:id="#+id/tvl1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/iv1"
android:text="GPS"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</RelativeLayout>
relative_selector.xml In here I'm doing the changes using selector.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/relative_focus"/>
<item android:state_pressed="true" android:state_enabled="false"
android:drawable="#drawable/relative_clicked" />
<item android:drawable="#drawable/relative_background"/>
</selector>
relative_background.xml This is the shape.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<stroke android:width="1dp" android:color="#636161" />
<padding android:left="5dp"
android:top="2dp"
android:right="2dp"
android:bottom="5dp" />
<corners android:radius="6dp" />
<solid android:color="#88ffffff"
/>
</shape>
In "relative_clicked.xml" and "relative_focus.xml" I only changed the colors.
relative_focus.xml
<stroke android:width="1dp" android:color="#ffff00" />
relative_clicked.xml
<solid android:color="#88ffff00"/>
All .xml files are in drawable folder.
I want to work this like a button.Is someone having any idea?

From your selector xml:
<item android:state_pressed="true"
android:state_enabled="false"
android:drawable="#drawable/relative_clicked" />
Will it work if you remove state_enabled?
<item android:state_pressed="true"
android:drawable="#drawable/relative_clicked" />

Related

Android: Center background shape in textView

I use shape as background in TextView.
But I have no idea how can I center text.
screen
My shape:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/colorPrimary" />
<corners android:radius="30.0dip" />
<size
android:height="50dp"
android:width="190dp" />
</shape>
</item>
</selector>
Styles:
<style name="AppTheme.TextView" parent="#android:style/Widget.TextView">
<item name="android:background">#drawable/text_view_shape</item>
<item name="android:textColor">#android:color/white</item>
</style>
My Layout :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tutorial_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/img_two"
tools:context="com.....TutorialFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tutorial_new_job"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView"
style="#style/AppTheme.TextView"
android:layout_marginTop="200dp"
android:layout_gravity="center_horizontal"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tutorial_its_easy"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView2"
style="#style/AppTheme.TextView"
android:layout_marginTop="34dp"
android:layout_gravity="center_horizontal" />
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/colorPrimary" />
<corners android:radius="30.0dip" />
<size
android:height="50dp"
android:width="190dp" />
<padding
android:left="50dp"
android:right="50dp">
</padding>
</shape>
</item>
</selector>
plus android:gravity="center" for TextView
Use android:gravity="center_horizontal" or android:textAlignment="center_horizontal"

Inside the spinner how to set imageview at the right corner

<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/spinner1_day"
android:layout_width="70dp"
android:layout_height="40dp"
android:src="#drawable/edit_text_style"
android:text="Day"
android:textStyle="normal"
android:textSize="15dp"
android:fontFamily="sans-serif-light"
android:drawSelectorOnTop="true"
android:entries="#array/Day"
android:dropDownWidth="fill_parent"
android:background="#drawable/downimage"/>
<Spinner
android:id="#+id/spinner2_month"
android:layout_width="70dp"
android:layout_height="40dp"
android:background="#drawable/edit_text_style"
android:text="Day"
android:textStyle="normal"
android:textSize="15dp"
android:fontFamily="sans-serif-light"
android:drawSelectorOnTop="true"
android:entries="#array/Day"
android:layout_gravity="center_horizontal"
android:layout_weight="0.81"
android:layout_marginLeft="10dp"
/>
</LinearLayout>
i used android:dropDownWidth="fill_parent" and android:background="#drawable/downimage" but the image will be set as background.how can is set imageview inside the spinner at the right corner?
<LinearLayout
android:id="#+id/layoutSpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/input_field"
android:orientation="horizontal"
android:padding="5sp">
<Spinner
android:id="#+id/spinner_area"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="9"
android:background="#null"
android:entries="#array/state"
android:gravity="center"
android:prompt="#string/area_prompt"
android:spinnerMode="dropdown" />
<ImageView
android:id="#+id/errow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5sp"
android:src="#drawable/arrow1" />
</LinearLayout>
Use this
Create an XML in drawable folder with any name for example spinner_bg.xml and add the following lines
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#504a4b" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_ab_default_holo_dark_am" /> // you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list></item>
</selector>
Add the following lines to your styles.xml which is inside values folder
<style name="spinner_style" >
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
Now add this style to your spinner as
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/spinner_style"
android:popupBackground="#cccccc" />
For more detail visit here. Android add arrow image to spinner
Try drawableRight property in XML to set it on right side on spinner:
android:drawableRight="#drawable/downimage"
I have solved this problem on my side by using following simple code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/ambilwarna_arrow_down" />
</RelativeLayout>
Hope this will work for you .Keep coding
try to create a custom spinner using FrameLayout, I using this, and works well
<FrameLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/border_spinner_select_location"
>
<Spinner
android:spinnerMode="dialog"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/spinner_provinsi"
android:prompt="#string/promp"
android:background="#drawable/spinner_pressed"
></Spinner>
<ImageView
android:layout_width="23dp"
android:layout_height="30dp"
android:src="#drawable/ico_arrow_select_white_xxhdpi"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="25dp"
/>
</FrameLayout>
for border line :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke android:width="2dp"
android:color="#android:color/white" />
</shape>
for effect when your press the spinner
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#android:color/white" />
<item android:state_pressed="true"
android:drawable="#color/deep_white_pressed_spinner" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#android:color/holo_blue_bright" />
<item android:drawable="#color/semi_white_transparant" />
</selector>
dummy.xml (drawable should be of very less size-24dp)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list android:opacity="transparent">
<item android:width="100dp" android:gravity="right">
<bitmap android:src="#drawable/down_button_dummy_dummy" android:gravity="center"/>
</item>
</layer-list>
</item>
</selector>
layout snippet be like...
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:cardElevation="5dp"
>
<Spinner
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/dummy">
</Spinner>
</android.support.v7.widget.CardView>

Change edittext backgroundTint Color

Here is my editext, i want to change bottom line color of edittext. i use android:backgroundTint but its only work in API 21 and above it.
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:backgroundTint="#color/edittintcolor"
android:drawableLeft="#drawable/lock"
android:hint=" Password"
android:padding="15dp"
android:textColor="#color/edittintcolor"
android:textColorHint="#color/edittintcolor"
android:textSize="18sp"
android:typeface="serif" />
I want to change this color using XML or style not in java code
bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FDEEF4" />
<corners
android:radius="15dp" />
<stroke android:width="1dip" android:color="#F9966B" />
<EditText
android:id="#+id/password"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/bd=g"
android:hint="#string/password"
android:inputType="textPassword" >
</EditText>
Create a drawable xml for your edittext background.. Use this following code..
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<!--background color of box-->
</shape>
</item>
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#android:color/white" />
<!-- color of edittext line -->
</shape>
</item>
</layer-list>
and set that drawable xml as your edittext background. :)
use command like below in edit text
<EditText
android:id="#+id/password"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/edittextborder"
android:hint="#string/password"
android:inputType="textPassword" >
<requestFocus />
</EditText>
then proceed with below code inside drawable folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FDEEF4" />
<corners
android:radius="15dp" />
<stroke android:width="1dip" android:color="#F9966B" />
EDEEF4 represents the tint color
We can achieve by using two ways,
Method 1:
We can design background image using selector drawable,
create backgroundEditText.xml in drawable,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false"
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_window_focused="false"
android:state_enabled="false"
android:drawable="#drawable/textfield_disabled" />
<item
android:state_pressed="true"
android:drawable="#drawable/textfield_pressed" />
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/textfield_selected" />
<item
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_focused="true"
android:drawable="#drawable/textfield_disabled_selected" />
<item
android:drawable="#drawable/textfield_disabled" />
textfield_pressed.9.png
[![textfield_pressed.9][4]][4]
textfield_selected.9.png
[![textfield_selected.9][5]][5]
We need to set backgroundEditText for EditText in layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/edit1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/edit1_text"
android:inputType="text"
android:background="#drawable/edit_text"
/>
</LinearLayout>
[![Final Output ][6]][6]
Method 2:
Using android.support.v4 support library, we can give backward compatibility.
You can use this site to generate your own EditText style.
Generate drawable and set it as background, like:
android:background="#drawable/generated_theme_edit_text"

Spacing between image and text in the button

I want to create a button as it is in the first picture. But my output is like in the second picture. How can i achieve the correct spacing between image and text in the button and also the shadow as it is in the first picture. How can i achieve this.
My code is as follows
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:left="2dp" android:top="4dp">
<shape>
<solid android:color="#1E90FF" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<!-- SHADOW LAYER -->
<item android:left="4dp" android:top="4dp">
<shape>
<solid android:color="#C0C0C0" />
</shape>
</item>
<!-- CONTENT LAYER -->
<item android:bottom="5dp" android:right="4dp">
<shape>
<solid android:color="#DADADA" />
</shape>
</item>
</layer-list>
</item>
try with this code this is running code you can use this code ..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/lla"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#CCCCCC"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="FIND PRODUCTS"
android:layout_marginLeft="5dp"
android:layout_gravity="center"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
Try this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><layer-list>
<item android:left="2dp" android:top="4dp"><shape>
<solid android:color="#1E90FF" />
</shape></item>
</layer-list></item>
<item><layer-list>
<!-- SHADOW LAYER -->
<item android:left="3dp" android:top="3dp"><shape>
<solid android:color="#C0C0C0" />
</shape></item>
<!-- CONTENT LAYER -->
<item android:bottom="3dp" android:right="3dp"><shape>
<solid android:color="#DADADA" />
</shape></item>
</layer-list></item>
</selector>
xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/back"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ImageView
android:id="#+id/iconLeft"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginTop="10dp"
android:src="#drawable/ic_photos" />
<TextView
android:id="#+id/txtLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/iconLeft"
android:text="Find Product"
android:textSize="16sp" />
<ImageView
android:id="#+id/iconRight"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginTop="10dp"
android:src="#drawable/ic_photos" />
</RelativeLayout>

When i alter radio button style xml - changes dont reflect

Im trying to make custom Radio buttons. Found an article which looked great (Article) but when i try doing what is said here, it doesnt update at all. Would a base theme prevent me from making custom radio buttons? My code below:
Layout xml
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/radioGroup"
android:background="#drawable/country_select_radio_button">
<RadioButton
android:id="#+id/ke_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/SouthAfrica"
android:layout_alignStart="#+id/SouthAfrica"
android:layout_alignTop="#+id/SouthAfrica"
android:layout_marginTop="35dp"
android:background="#drawable/country_select_radio_button"
android:text="Kenya"
android:layout_gravity="center_horizontal"
android:checked="false" />
<RadioButton
android:id="#+id/za_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btn_za"
android:layout_centerHorizontal="true"
android:layout_marginBottom="125dp"
android:text="South Africa"
android:checked="true"
android:layout_gravity="center_horizontal" />
</RadioGroup>
button style xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/b"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="#drawable/a"
android:state_pressed="true" />
<item
android:drawable="#drawable/a"
android:state_checked="true" />
<item
android:drawable="#drawable/b" />
a.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#fff" />
<stroke
android:width="2dp"
android:color="#FF0000" />
b.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#FF0000" />
<stroke
android:width="2dp"
android:color="#555555" />
no matter what i change, the style of the button stays the default?
what am i doing wrong?
u need to set the android button property in your xml
<RadioButton
android:id="#+id/ke_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/radio_button_selector"
android:padding="#dimen/text_padding"
android:paddingLeft="10dp"
/>
wher radio_button selector is your custom xml file for radio button
please use below selector xml file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radiobutton1" android:state_checked="false"/>
<item android:drawable="#drawable/radiobutton2" android:state_checked="true"/>
<item android:drawable="#drawable/radiobutton1"/>
</selector>
put 2 images for testing as radiobutton1 and radiobutton2 and test

Categories

Resources