main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:gravity="center"
android:color="#66FF0000"
>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/noua"
android:textStyle="bold"
android:textColor="#808080"
/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/zece"
android:textStyle="bold"
android:textColor="#808080" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/unspe"
android:textStyle="bold"
android:textColor="#808080" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/doispe"
android:textStyle="bold"
android:textColor="#808080"
/>
</LinearLayout>
This is my main.xml, I am trying to make the buttons the most transparent, but I want still to see them and I don't know what to add and where to add, please correct my xml with the low opacity on bottons. Premeditated thank you:D
check How to Set Opacity (Alpha) for View in Android
You can set transparency on background of objects, use #XX808080, where XX is the alpha/transparency value.
android:background="#80FF0000"
this will be a half-transparent red background.
You can set transparency on the button text using the textColor property in the same manner:
android:textColor="#80FF0000"
You can also achieve through code in an animation
AlphaAnimation alphaAnim = new AlphaAnimation(1.0f, 0.5f);
alphaAnim.setDuration (400);
myButton.getBackground().startAnimation(alphaAnim); // set alpha on background
or directly:
myButton.getBackground().setAlpha(0.5f); // added in API 11, sets alpha on background
both methods set the alpha to 50%
Lastly, you can try adding android:alpha for your XML:
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/zece"
android:textStyle="bold"
android:textColor="#808080"
android:alpha="0.5"
/>
You probably cant change its opacity with code, because they are 9patches. You need to create your own 9patch and set it to buttons as background. If you want a solid color, of course you can also use something like:
android:background="#80363636"
Here #AARRGGBB, how low you keep first two digits you get that opacity
in code, you can get an instance of the button and set the background drawable's alpha manually.
Button btn = (Button) findViewById(..);
btn.getBackground().setAlpha( a ); // where a : 0..255 : 0=transparent, 255=fully opaque
Related
I am using the default radio button without any customization. I would like to add padding to the left of the button icon. I have tried padding-left, but it is only changing the space between the icon and text.
I know it can easily achieve by using the drawable left and setting the button null, but it could lose the animation and default style.
My code
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="#+id/rb_bank"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_payment_method"
android:buttonTint="#color/colorPrimaryDark"
android:padding="15dp"
android:text="#string/bank"
android:textColor="#color/textColorSecondary"
android:textSize="16sp" />
Current output
you can wrap the material button in a LinearLayout, set your background android:background="#drawable/bg_payment_method" to the LinearLayout and give
margin_left to the radioButton
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_payment_method" >
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="#+id/rb_bank"
android:layout_marginLeft="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:buttonTint="#color/colorPrimaryDark"
android:text="#string/bank"
android:textColor="#color/textColorSecondary"
android:textSize="16sp" />
</LinearLayout>
How can I place drawableLeft and button text of AppCompatButton like in the image below?
I have tried to apply paddingLeft, but the text is moving away from the drawable to the right.
<android.support.v7.widget.AppCompatButton
android:id="#+id/filterBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_btn_filter"
android:paddingLeft="20dp"
android:text="#string/filter_by"
android:textAllCaps="false" />
And so far the result is looking like
Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/profileHeader"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp">
<android.support.v7.widget.AppCompatButton
android:id="#+id/findFriends"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_btn_search"
android:text="#string/find_friends"
android:textAllCaps="false" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/filterBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_btn_filter"
android:text="#string/filter_by"
android:textAllCaps="false" />
</LinearLayout>
And the interpreted requirement for making things clear.
Using layout_weight property am adjusting the width of both buttons and what i have to do is, the text should be in center of the button
and the drawable should be aligned near left of the text.
Any suggestion please?
use
android:drawablePadding=""
probably you can't, if you want like this then you have to make it using complex layout like this see
I have an image using an image view, towards the bottom of the image I want a semi transparent view (black in color) which will hold some text view in it. Something like this
I have got the text over the image, but now I am stuck on getting the black background sort of view. I tried
<TextView
android:background="#color/lightGrey"
android:text="Swiss Chalet - Play for a chance to win free app!"/>
however it only gives a grey background to the text.
Anyone knows how can I achieve this?
Try something like this in your background
android:background="#80000000"
You can find more info on setting transparency here
In your xml, use
android:alpha=".4"
This will set the alpha value of the view. Alpha is the transparency. You can adjust to increase or decrease transparency.
Without knowing how you implemented your layout, this is a shot in the dark, but it might be helpful.
<TextView
android:id="#+id/your_id_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Your text"
android:background:"#color/your_color"/>
In your colors.xml file (or wherever you're defining the color "lightGrey"), you can specify the alpha channel by adding two digits to the front of the hex code of the color (in the format AARRGGBB).
So for example, if your lightGrey colour is #555555, listing it as
<color name="lightGrey">#CC55555</color>
instead will give the color as 20% transparent and 80% opaque. 00 represents full opacity (0% transparency) and FF would correspond to 100% transparency (invisible). Hope this helps!
You could do it like this,
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.4"
android:background="#android:color/black"/>
<TextView
android:background="#color/lightGrey"
android:text="Swiss Chalet - Play for a chance to win free app!"/>
</FrameLayout>
Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/icmsLrnArtListItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_margin="3dp"
android:padding="5dp" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp" >
<ImageView
android:id="#+id/icmsImageThumb"
android:layout_width="match_parent"
android:layout_height="180dp"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/darker_gray"
android:textColor="#android:color/black"
android:text="Image Top text"
android:gravity="center"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/darker_gray"
android:ellipsize="end"
android:maxLines="2"
android:text="Image Bottom text"
android:textColor="#android:color/black"
android:shadowColor="#FFFFFF"
android:gravity="center"
android:shadowDx="2"
android:textStyle="bold"
android:shadowDy="2"
android:shadowRadius="2" />
</FrameLayout>
</LinearLayout>
Id like to achieve the effect seen in the image ive provided below.....possible?
I know how to do a gradient and I know how to set a imagebuttons src/bg to a drawable but i have nooooooo idea where to even start with pulling off both at the same time.
It's actually incredibly simple. To avoid overdraw by layering a bunch of views, just add a ColorFilter to your ImageView:
imageView.setColorFilter(Color.parseColor("#994dace3"), PorterDuff.Mode.SRC_OVER);
No added overdraw, and you can set whatever color you want, and experiment with different PorterDuff blending modes.
Example:
I know how to do a gradient and I know how to set a imagebuttons
src/bg to a drawable but i have nooooooo idea where to even start with
pulling off both at the same time
I think what you are referring to as being a gradient is actually a color with transparency value set. From what I can tell, you are looking for something like this:
You can achieve this using the following layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/the_picture"
android:src="#color/transparent_color" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Message!" />
</RelativeLayout>
The RelativeLayout is used to position the TextView over the ImageButton. The Picture is set as the background. The src is set to a color(any color) with a transparency value between 00(completely transparent) and ff (completely opaque). In the image above, I have used a transparency of 70. So, say you pick Green(#00ff00), add transparent value to it: #7000ff00 and add it to res/values/colors.xml. You can also use it directly as I have done below.
Here's the complete xml code for the activity in the pic above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/original" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/original"
android:src="#7000ff00" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Optional Message!"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
You can set a custom font to the TextView(as in the picture you've provided) in code.
In my app I've set a background image of the top level linearlayout and then to fade the background I set its alpha to .2 but this creates an odd problem in that it also sets the alpha for all children of the layout as well, even if I explicitly define a different alpha value in the children.
Is it possible to set the alpha value of a parent and not affect that of the child?
What is there a proper way to set the alpha on top level view without affecting the alpha on that views children?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll1"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#drawable/bg"
android:alpha="0.2">
<Button android:id="#+id/btn1"
android:text="Set 1"
android:layout_width="300px"
android:layout_height="150px"
android:layout_gravity="center"
android:background="#drawable/button1"
android:tag="1"
android:alpha="1"/>
<Button android:id="#+id/btn2"
android:text="Set 2"
android:layout_width="300px"
android:layout_height="150px"
android:layout_gravity="center"
android:background="#drawable/button2"
android:tag="2"/>
</LinearLayout>
That is exactly how it is intended to work.
Why not simply change the alpha of your background drawable "#drawable/bg" to 0.2?
Alternatively, try a FrameLayout with this basic structure:
<FrameLayout>
<ImageView
android:background="#drawable/bg"
android:alpha="0.2" />
<LinearLayout>
<Button />
<Button />
</LinearLayout>
</FrameLayout>
One way is to set the alpha value within the hash-code for color i.e. instead of #RRGGBB use #AARRGGBB. This makes sure that the alpha value isn't inherited.
You will need to use a framelayout. other wise your button is enlosed by a linearlayout with aplha set which will also affect the buttons.