I've read through a lot of questions on here about programmatically changing the color of a drawable, but they seem to not relate to actual layouts. When I try this:
RelativeLayout firstWord = (RelativeLayout)getActivity().findViewById(R.id.topBG);
Drawable layoutBG = firstWord.getDrawable();
firstWord = buttonBackground.mutate();
firstWord.setColorFilter(0xFFFF0000,Mode.MULTIPLY);
I get this error:
The method getDrawable() is undefined for the type RelativeLayout
I used a drawable to give my layout rounded corners but part of the app is that the background color changes on every click, so I need to know how to change the color in code.
Before moving to a drawable, I was using:
firstWord.setBackgroundColor(color);
Here is my drawable:
round_corners.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#000000" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
<corners
android:radius="25dp" />
</shape>
And here's my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".VulgarActivity"
android:id="#+id/bottomBG"
android:background="#ffffff"
>
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/drop_shadow"
>
</View>
<RelativeLayout
android:id="#+id/topBG"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/round_corners"
>
<TextView
android:id="#+id/leftWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Push"
android:textColor="#ffffff"
android:textSize="50sp"
android:shadowColor="#080808"
android:shadowRadius="10.0"
android:shadowDx="5"
android:shadowDy="5"
/>
</RelativeLayout>
</RelativeLayout>
Thanks in advance for any and all help :)
Just a thought:
I could change the color value in "round_corners.xml" to an #color reference (eg:
android:color="#color/switcher"
and putting this in the 'color' folder in values
<color name="switcher">#000000</color>
Would it be easier to programmatically change the color that way?
can you use these line instead, im getting the background drawable on the second line:
RelativeLayout firstWord = (RelativeLayout)getActivity().findViewById(R.id.topBG);
Drawable layoutBG = firstWord.getBackground();
buttonBackground = buttonBackground.mutate();
buttonBackground.setColorFilter(0xFFFF0000,Mode.MULTIPLY);
Related
How can I make an EditText with a drop-down in Android?
For reference i have added an image. I am trying to combine an edittext with spinner but I am not able to achieve the same.
Can anyone add suggestion or xml mockup?
Well, You can use a LinearLayout with a horizontal orientation and create a custom drawable for the rounded border.
Implementation
First, you need to draw the rounded border by creating a new Drawable resource file.
In your res/drawables folder create rounded_border.xml
rounded_border.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<stroke android:width="2dp" android:color="#2E2E2E" />
</shape>
</item>
</selector>
Then, you can add the LinearLayout to your layout as follows.
your_layout.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#drawable/rounded_border"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#null"
android:paddingHorizontal="16dp"
android:text="(504) 596-3245"
android:layout_weight="2"/>
<View
android:layout_width="2dp"
android:background="#2E2E2E"
android:layout_height="match_parent"/>
<Spinner
android:layout_width="0dp"
android:layout_height="match_parent"
tools:listitem="#layout/spinner_item_text"
android:layout_weight="1"/>
</LinearLayout>
Remarks
You can Customize the border width, color, and radius from the rounded_border.xml.
Final Results
could refer this lib demo : https://github.com/z2wenfa/SpinnerEditText
could use the lib directly
dependencies {
compile 'com.github.z2wenfa:SpinnerEditText:1.0.1'
}
or could refer: https://github.com/z2wenfa/SpinnerEditText/blob/master/spinneredittext-lib/src/main/java/com/z2wenfa/spinneredittext/SpinnerEditText.java
I have created a listview and added a border to it's items.
something like this:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal"
android:background="#drawable/listviewborderbox"
android:padding="10dp" >
<LinearLayout
android:id="#+id/sharedbyyouNameLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".70"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/sharedbyyoutext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/sampletext1"
android:textColor="#color/blackText"
android:textSize="14sp" />
<TextView
android:id="#+id/sharedbyyouselected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/sampletext2"
android:textColor="#color/blackText"
android:textSize="16sp"
tools:ignore="RtlHardcoded" />
</LinearLayout>
<LinearLayout
android:id="#+id/sharedbyyouLayoutforarrow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".10"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_next"
tools:ignore="RtlSymmetry,RtlHardcoded,ContentDescription" />
</LinearLayout>
</LinearLayout>
And I have ripple effect value in Drawable-v21 like this:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/white"> <item android:drawable="#color/footercolor"/> </ripple>
Border shape xml in drawable folder is this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/colorforbodybox" />
<corners android:radius="10dip"/>
<stroke android:width="2dip" android:color="#color/colorforborder" />
</shape>
Ripple effect works but ripple effect is shown outside the border line that I have drawn. Please check pic below:
How do I make the ripple effect not to cross the border in the list view?
To achieve rounded corner ripple effect change your ripple xml file to:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#android:color/white"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#color/footercolor"/>
</shape>
</item>
</ripple>
The problem I had was that the corner radius of my views was not a fixed value therefore using the xml suggested didn't work for me.
I needed a something that would adapt the ripple effect every time regardless of the shape used so...
I used a simple view extension:
fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { // Here you can pass the color you want for the ripple effect and assign a "default" value
val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
this.background = RippleDrawable(
rippleColor, // This is the color of the effect and needs to be a ColorStateList
this.background, // ( = content ) With this you use your view's background as the content of the ripple effect
this.background) // ( = mask ) With this the ripple will take the shape of the background and not "spill over". (Could be null IF you did set the previous variable "content = this.background")
}
OR, if you want to separate the two layers:
fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) {
val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
this.foreground = RippleDrawable( //Using the foreground allows you to give the view whatever background you need
rippleColor,
null, //Whatever shape you put here will cover everything you've got underneath so you probably want to keep it "null"
this.background)
}
Basically you give a view a background (rounded rectangle with borders in your case) then you can simply call the extension in your Activity/Fragment:
whateverView.addRippleEffect()
//or
whateverView.addRippleEffect(R.color.red)
See: https://developer.android.com/reference/android/graphics/drawable/RippleDrawable
1. Create the Ripple Drawable Contains the Backgound Shape
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?colorControlHighlight"> //defaul ripple color
<item>
<shape //the background shape when it's not being click
android:shape="rectangle">
<solid
android:color="#color/colorPrimary" />
<corners
android:radius="32dp" />
</shape>
</item>
</ripple>
2. Applying the Drawable to the View and REMOVE THE SHADOW
<Button
style="?borderlessButtonStyle" //remove the default shadow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_button" //here
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#android:color/white" />
Try setting clipToOutline of your View / ViewGroup to true, either in the code or through XML, it should limit the ripple's area accordingly (as long as you background shape matches the requirements, see the docs for more details).
I'm trying to create a button which is both transparent and has corner radius.Near the corners transparency is more than the rest of the button.How do I prevent it? I'm posting an image of it.
https://drive.google.com/file/d/0B8Yekz-VsuhmQzdQY0lfZHFONEU/view?usp=sharing`
<Button
android:layout_width="60pt"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/main_button_shapes"
android:text="#string/get_now"
android:textColor="#color/white"
android:layout_margin="10dp"
android:textStyle="bold" />
<resources>
<color name="mediumblue">#990000CD</color>
<color name="white">#ffffff</color></resources>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="30dp" />
<solid android:color="#color/mediumblue"/>
</shape>`
The easiest way of your problem is creating ImageButtons. Do your imagebutton's background image. Then add your image into drawable folder.
Then use it like:
<ImageButton
android:id="#+id/mybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/mybuttonbackimage" />
Don't forget use android:background="#null" for transparency of button.
You can create a XML with:
<corners android:radius="15dp"/>
<solid android:color="#color/your_color"/>
Then use this XML like this:
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/xml_name"
/>
I need to display the contact name initial letter inside circle like in lollipop contacts. I didn't find any solution.
The circle should different colour for each user.
You can follow this. If you wanna save time you can use this library.
Edit
The link may be invalid any point of time. So I want to add the details below this.
repositories{
maven {
url 'http://dl.bintray.com/amulyakhare/maven'
}
}
dependencies {
compile 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'
}
You can add which ever methodology you are following.
Basically you have to add one ImageView with same height and width and add this TextDrawable as a background of your view.
TextDrawable drawable = TextDrawable.builder()
.buildRect("A", Color.RED);
ImageView image = (ImageView) findViewById(R.id.image_view);
image.setImageDrawable(drawable);
The library has support for circle,square and rectangle drawables.
I didn't see any library for this but my solution is draw a circle in run time in a predefined layout in your xml use this :
How to draw circle by canvas in Android?
Then in your list adapter choose first letter of each name string using substring(0,1)
,and using setText() you can set list item textView to first letter.
If you need source code let me know to put it for you.
UPDATE:
I recently used very easy approach for this in one of my apps,
you should make a layout like this in your layout folder:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlWeekDay"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_gravity="right"
android:layout_margin="3dp"
android:background="#drawable/circle_shape">
<TextView
android:id="#+id/tvWeekDayFirstLetter"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text=" E "
android:textStyle="bold"
android:textColor="#color/colorPrimary"
android:textSize="20sp" />
</RelativeLayout>
And your shape in drawable folder as circle_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval"
android:dither="true">
<corners
android:bottomRightRadius="100dp"
android:bottomLeftRadius="100dp"
android:topLeftRadius="100dp"
android:topRightRadius="100dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="3dp">
<shape android:shape="oval"
android:dither="true">
<solid android:color="#color/white"/> <!-- this one is ths color of the Rounded Button -->
<corners
android:bottomRightRadius="100dp"
android:bottomLeftRadius="100dp"
android:topLeftRadius="100dp"
android:topRightRadius="100dp"/>
</shape>
</item>
</layer-list>
Then in your listView or recyclerview use this as the item to inflate.like this
Simple and small code to do this -
<com.google.android.material.button.MaterialButton
android:id="#+id/"
android:layout_width="40dp"
android:layout_height="50dp"
android:text="A"
android:clickable="false"
app:backgroundTint="#color/Blue200"
android:padding="0dp"
app:cornerRadius="50dp"
/>
By using a Material Card View and a Textview, it would be easy to create such a view.
<com.google.android.material.card.MaterialCardView
android:layout_width="50dp"
android:layout_height="50dp"
app:cardBackgroundColor="#color/red"
app:cardCornerRadius="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/initialTv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="AB" />
</com.google.android.material.card.MaterialCardView>
I am changing some button background colors before the activity is shown and when the buttons are displayed, they are missing the white space around them.
How do I get the buttons to be red, where the grey is, and keep the white spacing?
You probably have missed setting margin for layout. Actually there is a white space around your button so all the buttons are touched, so when you set background that white space also turns red. This should be okay I guess.!
Layout :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<Button
android:id="#+id/one"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="About"
android:layout_margin="5dp" />
<Button
android:id="#+id/two"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Gallery"
android:layout_margin="5dp"/>
<Button
android:id="#+id/third"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Media"
android:layout_margin="5dp"/>
</LinearLayout>
In strings.xml
<color name="red">#FF0000</color>
In Java
one = (Button) findViewById(R.id.one);
two = (Button) findViewById(R.id.two);
three = (Button) findViewById(R.id.third);
one.setBackgroundResource(R.color.red);
two.setBackgroundResource(R.color.red);
three.setBackgroundResource(R.color.red);
Output
Create a red_button.xml in drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="2dp"
android:color="#80FFFFFF" />
<corners android:radius="25dp" />
<gradient android:angle="270"
android:centerColor="#ff0000"
android:endColor="#ff0000"
android:startColor="#ff0000" />
</shape>
To get same shape as the default Button
You can play around with radius and stroke width and stroke color to get your Button as you want.
EDIT: You can add the color to original default Button like this:
Drawable d = yourButton.getBackground();
PorterDuffColorFilter filter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP); // or whatever color you like
d.setColorFilter(filter);