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.
Related
I want to darken the background of a Textview and when I lower the alpha of the background it kinda becomes white. Can anyone help?
Here is my code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:gravity="center">
<ImageView
android:id="#+id/bg_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/abg32"
android:alpha="0.6"
android:scaleType="centerCrop"/>
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="10dp"
android:textAlignment="center"
android:textSize="17sp"
android:textColor="#color/colorWhite"
tools:text="#tools:sample/lorem/random" />
</RelativeLayout>
I have tried using the tint attribute but it doesn't work.
First Approach:
I can see that you have mentioned the tint attribute didnt work, could you provide the code you wrote? It could be some error in it. Either way you could perhaps try this and see if it works.
<ImageView
...
app:tint="#6F000000"/>
Second Approach:
Add a view on-top of you ImageView and set the background as color and opacity desired
<View
android:id="#+id/overlay_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:background=“#6F000000" />
*Make the width and height as same as your ImageView's height and width
I have set both the CardView's background and FrameLayout's to transparent yet the result is still a white color bg.
Is this some default behavior? What should I change to my xml layout file for having a transparent bg ?
Layout file :
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardBackgroundColor="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="140dp"
tools:layout_gravity="center">
<TextView
android:id="#+id/dayID"
android:textColor="#color/link_text_material_light"
android:textSize="26dp"
android:layout_marginLeft="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/monthID"
android:textColor="#color/link_text_material_light"
android:layout_marginLeft="60dp"
android:textSize="26dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/splashID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/link_text_material_light"
android:textSize="26dp"
android:layout_gravity="center"
android:gravity="center"
android:padding="20dp"
tools:text="Hero text" />
<TextView
android:id="#+id/sunbathMinsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/link_text_material_light"
android:textSize="26dp"
android:layout_gravity="bottom"
android:gravity="center"
android:padding="20dp"
tools:text="Hero text" />
</FrameLayout>
</android.support.v7.widget.CardView>
A transparent background can be obtained for any number of views within your XML.
This is a decent explanation for an imageview.
Set transparent background of an imageview on Android
Cardviews are a lot the same but have a little different attribute and are explained very well with the "app:cardBackgroundColor= "#android:color/transparent""
See this post for that type of attribute.
Transparent background on CardView - Android
Setting your cardView and the subsequent FrameLayout both to transparent will definitely get the job done and make both views transparent. However, the activity will always have a solid background. The Activity only doesn't have a solid background when you set a resource as the background and the views placed within that Activity will show the current background if they are set to transparent as seen in the links above.
Therefore, even though you have set your "views" to transparent, the Activity will always need a color or image to show the in background. Meaning that, yes you will still have a white background behind your cardView, unless you change that color.
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
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>
When I run layout on a specific XML file, I get this:
This tag and its children can be replaced by one <TextView/>
and a compound drawable
What change should be done for the following xml code:
<LinearLayout android:id="#+id/name_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:background="#drawable/grouplist_single_left_grey_area" >
<ImageView android:id="#+id/photo_image"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:paddingBottom="5dip"
android:paddingTop="5dip"
android:paddingRight="5dip"
android:paddingLeft="5dip"
android:layout_marginRight="5dip"
android:clickable="true"
android:focusable="true"
android:scaleType="fitCenter"
android:src="#*android:drawable/nopicture_thumbnail"
android:background="#drawable/photo_highlight" />
<TextView android:id="#+id/name"
android:paddingLeft="5dip"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
This is how it looks like on the screen:
The camera icon is the default. Clicking on that will give the user an option to choose another image.
To expand on Romain Guy's answer, here is an example.
Before:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="5dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My Compound Button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_drawable" />
</LinearLayout>
After:
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawableRight="#drawable/my_drawable" android:padding="5dp" />
Merge the TextView and the ImageView into one, by using TextView's setCompoundDrawable*() methods, or using android:drawableLeft.
Thought I would try to get some extra puntos for this as well: you can add padding between the image and the text using android:drawablePadding. https://stackoverflow.com/a/6671544/1224741
Add tools:ignore="UseCompoundDrawables" to <LinearLayout>.
Sometimes it is possible to replace ImageView (or multiple) and TextView with one TextView with compound drawable(s). There are NOT many parameters which can be applied to compound drawable using native API and this TextViewRichDrawable library, but if you can manage one TextView instead of using LinearLayout you should definitely use it.
The list of attributes and parameters which can be applied to compound drawables:
Size: (YES, really):
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:compoundDrawableHeight="24dp"
app:compoundDrawableWidth="24dp"/>
Even set vector resource as drawable:
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:drawableTopVector="#drawable/some_vector_drawble"
app:drawableEndVector="#drawable/another_vector_drawable" />
Drawable's Padding using native API android:drawablePadding -> link
Here is an example:
A LinearLayout which contains an ImageView and a TextView can
be more efficiently handled as a compound drawable (a single
TextView, using the drawableTop, drawableLeft, drawableRight
and/or drawableBottom attributes to draw one or more images
adjacent to the text).
If the two widgets are offset from each other with margins, this
can be replaced with a drawablePadding attribute.
There's a lint quickfix to perform this conversion in the Eclipse
plugin.
From: Android Official API docs!
When I followed the code above, text inside the TextView doesn't set properly.
You need to set its gravity to center|start to achieve what shown in the asked question.
The textview looks like this:
<TextView
android:id="#+id/export_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableLeft="#drawable/up_arrow"
android:drawableStart="#drawable/up_arrow"
android:gravity="center|start"
android:text="....."
android:textSize="#dimen/font_size15" >
</TextView>
the latest correct way at time of writing to add a compound drawable is using app:drawableStartCompat rather than android:drawableLeft.
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawablePadding="5dp"
app:drawableStartCompat="#drawable/my_drawable" />
You can refer this code for example
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/myName"
android:textAlignment="center"
android:textColor="#color/myColor"
app:drawableTopCompat="#drawable/image_name" />
If you don't want to change the ImageView and TextView, you can change the version in the AndroidManifest.xml as:
<uses-sdk`
android:minSdkVersion="8"
android:targetSdkVersion="18"
/>
If your version is android:targetSdkVersion="17" change it s "18".
Hope this will rectify. I did it and got it right
I don't know if this is an efficient solution. But using <androidx.appcompat.widget.LinearLayoutCompat> to wrap the imageView and TextView instead of <LinearLayout> will fix this error. Also by using LinearLayoutCompat, you will be able to adjust the image's width and height which you can't when using a drawableRight, drawableLeft, drawableTop or drawableBottom inside a TextView.
This warning is rather misleading. You can use a compound drawable using a TextView as others have suggested but it doesn't necessarily give you the desired result. You have very littler control over how you want your button to look like using a compound drawable, so it is better to just add tools:ignore="UseCompoundDrawables" and ignore this warning.
Another approach is embed the ViewImage into another LinearLayout (allow handle it with alone id):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/blue_3"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp" />
</LinearLayout>
<TextView
android:id="#+id/tvPrompt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp"
android:text="#string/xy" />
This tag and its children can be replaced by one <TextView/> and a compound drawable
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:contentDescription="."
android:padding="3dp"
android:src="#drawable/tab_home_btn">
</ImageView>
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="10sp"
android:textColor="#ffffff">
</TextView>
</LinearLayout>