Make ImageView have dark transparency - android

I want to add the transparent black color on top of the image and make it darker.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/rest_image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
I can set the alpha parameter but the color change is in white.
I want to make the darker image like this.
How can i do it in xml or Java code. I will set it based on condition.?
Thanks.

What you need is called tinting. Apply a tint to your ImageView:
<ImageView
...
app:tint="#6F000000"
/>

Easiest/Fastest solution would be in XML
Add a second layer (can be a View, doesn't have to be an ImageView) on top of your ImageView, with the desired color/alpha. Show/Hide it when needed.
<ImageView
android:id="#+id/rest_image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<View
android:id="#+id/overlay_image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background=“#color/yourColorWithAlpha"
/>
</RelativeLayout>

You can add foreground tint with tint mode.
Make sure you add alpha channel in your foreground color.
foreground="##AARRGGBB"
AA = alpha channel in HEX
R,G,B = Red, Blue, Green.
<ImageView
android:id="#+id/vidthumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:foreground="#96222f3e"
android:foregroundTintMode="src_atop"/>

Try this second imageview will set the transparent color. Adjust the height according to your need.
500000 - last 4 digits stands for black color and first two stands for alpha you want to set.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/rest_image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#500000"
/>
</RelativeLayout>

Related

How to fill the whole background with my image? Android

I can't seem to fill my background with the image that I have chosen it is in ConstraintLayout how to fix this?
<ImageView
android:id="#+id/background_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background" />
this is my code of the ImageView
Add a scale type in your Image View.
<ImageView
android:id="#+id/background_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background"
android:scaleType="center"/>

How to add Image without this white background?

enter image description here
Here it is a XML file,
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardBackgroundColor="#fff2f2"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="12dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/tick"
android:id="#+id/image2"/>
</LinearLayout>
And Mainactivity.java,
item2List.add(new Items2(R.drawable.checked));
The default color of CardView is White. If you want to change it to some other color use following code.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/white">
</android.support.v7.widget.CardView>
or you can set cardBackgroundColor to transparent(if you don't want any color) by setting cardBackgroundColor as
app:cardBackgroundColor="#android:color/transparent"
Set app:cardBackgroundColor="#android:color/transparent" instead of app:cardBackgroundColor="#fff2f2".
This will take background of your Image rather than force white background.
Here, I have no idea about your image is .png or .jpeg, but if your image is not .png then take .png image and if you have already taken .png image than set cardview background transparent.
Here, use the cardBackgroundColor attribute to remove color and set transparent and cardElevation attribute to remove the drop shadow.
Please try below:-
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardElevation="0dp"
app:cardBackgroundColor="#android:color/transparent" >
If you you use API level 21 and higher and in case of cardBackgroundColor not work properly you can use android:backgroundTint. In my case it works.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardElevation="0dp"
android:backgroundTint="#android:color/transparent">

Android: Non-transparent text on transparent image

I need to put text on transparent image, but my text goes transparent too.
Update: I have an Activity background which is a picture, than I have LinearLayout with background as transparent picture, and in that Layout I need a TextView with text without transparency.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/img_background"
android:fitsSystemWindows="true"
tools:context="team.com.ContactUsActivity">
>
<LinearLayout
android:id="#+id/linearLayoutContactUsData"
android:layout_width="match_parent"
android:layout_height="200dip"
android:background="#drawable/img_contact_us"
android:alpha="0.4"
>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#FFFFFF"
android:textSize="18dip"
android:text="Phone: 111-111-111"
/>
</LinearLayout>
Any suggestions?
Just remove android:alpha.
If you don't, the TextView will inherit the container property, causing it to be transparent, instead of fully visible.
TextView backgrounds are transparent by default.

Transparent background on CardView - Android

I want to do transparent background on CardView.
I know backgroundColor but i have image on my Layout.
Do you know how do it? Or something which work as cardview but i will set a transparent background?
Regards
Setup your CardView to use the cardBackgroundColor attribute to remove color and cardElevation attribute to remove the drop shadow. For example:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myCardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardElevation="0dp">
For a full list of supported attributes see here: https://developer.android.com/reference/android/support/v7/widget/CardView.html
If you are using an older API, you will need to call these two functions on your CardView instead:
myCardView.setCardBackgroundColor(Color.TRANSPARENT);
myCardView.setCardElevation(0);
in SDK version 21 or higher steps to make Android CardView transparent.
Set android:backgroundTint="#android:color/transparent". This is CardView attribute to set background.
Set android:cardElevation="0dp" to remove the shadow.
For example, here is small xml code to create transparent CardView
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="#android:color/transparent"
app:cardElevation="0dp" />
In my case, I used the attribute android:backgroundTint="#color/some_color",it is only used en API level 21 and higher. And color #50000000 for example.
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="3dp"
app:cardElevation="0dp"
android:backgroundTint="#color/negro_label"
>
use app:cardBackgroundColor="#android:color/transparent"
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
app:cardCornerRadius="16dp"
app:cardElevation="16dp"
app:cardBackgroundColor="#android:color/transparent" >
<--inside cardlayout-->
</android.support.v7.widget.CardView>
This should work on API 17
cardView.setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));
Just add background color app:cardBackgroundColor="#0000"
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="#0000">
You must have cardView to make image circle shape
<androidx.cardview.widget.CardView
android:layout_width="50dp"
android:layout_height="50dp"
app:cardCornerRadius="25dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:elevation="0dp"
app:cardBackgroundColor="#00424242"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/play_icon"
android:padding="5dp"
android:background="#19000000"
android:contentDescription="TODO" />
</androidx.cardview.widget.CardView>

Show transparent color highlight on a View when clicking it

So. You know how when you click a post in the Google+ app, the entire View becomes blue. I want to do that as well, but with an ImageView.
I have the following code snippet, setting the actual image as the background and the selector as the main resource. This looks good, but doesn't respect scaleType for the background image:
<ImageView
android:id="#+id/painting_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/img"
android:src="#drawable/selector"
android:scaleType="centerCrop" />
By the way, #drawable/selector is just a selector that shows a tranparent color for state_pressed:
<item android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#44521400" />
</shape></item>
How can I make this work while respecting the scaleType?
Wrap your ImageView in a FrameLayout, and define the FrameLayout to be clickable. Be careful to assign the onClick event to the FrameLayout, and not to the ImageView, or the effect will break! Also note that foreground has been set to a selector, not background.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:foreground="#drawable/imagebutton_selector" >
<ImageView
android:id="#+id/painting_image"
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop" />
</FrameLayout>
ScaleType is only applied to the src drawable, not the background. Consider using the second option with an overlay view where you'll be implementing the click action, like this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/painting_image"
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop" />
<View
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#drawable/imagebutton_selector"
android:onClick="onImageClick" />
</FrameLayout>

Categories

Resources