Android mask a bitmap with a transparent png - android

I have a png image with some transparent areas (like gradient-transparent) and I'd like to "add" this image to over a Bitmap and create a new Bitmap from these two.
is this possible in Android?

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="sliding banner here" />
<ImageView
android:id="#+id/slider_des"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginTop="40dp"
android:hint="text"
android:paddingBottom="20dp"
/>
</FrameLayout>
The above code can be modified to achieve what you want! the first imageview would be for your bitmap and 2nd for overlapping image view that you can placeyour transparent png in.

Related

Imageview shows border around photo that does not exist in the source image

I'm trying to display a simple image in an imageview and it seems to be adding a border around the photo that isn't there in the source image. I placed the imageview in the parent view and set the image to it, and in the editor you can see a small sliver of the border but when I run it on a device or emulator more of a border appears.
I tried removing a pixel off the size of the photo in case there was a border but that didn't fix it. Below are the photos of the emulator and the editor to show the difference.
Editor:
Emulator:
Any help would be greatly appreciated, thank you.
EDIT: added xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/activity_home_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="frolicindustries.strandstudybible.HomeScreen"
android:weightSum="1"
android:background="#android:color/background_light"
android:orientation="vertical"
android:baselineAligned="false">
<!--android:scaleType="fitCenter"-->
<!--android:cropToPadding="false"-->
<!--android:layout_weight="0.01"-->
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/About"
android:background="#drawable/aboutgradient"
android:layout_alignParentBottom="true"
android:layout_height="65sp"
android:layout_marginBottom="1dip"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/Extras"
android:layout_alignEnd="#+id/Extras"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/Extras"
android:background="#drawable/extragradient"
android:layout_height="65sp"
android:layout_above="#+id/About"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/WTFW"
android:layout_alignEnd="#+id/WTFW"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/Bible"
android:background="#drawable/biblegradient"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:elevation="0dp"
android:layout_height="65sp"
android:layout_marginLeft="-5dip"
android:layout_marginRight="-5dip"
android:layout_above="#+id/WTFW" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/WTFW"
android:background="#drawable/wtfwgradient"
android:layout_height="65sp"
android:layout_above="#+id/Extras"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/Bible"
android:layout_alignEnd="#+id/Bible"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<ImageView
android:id="#+id/imageView2"
android:src="#drawable/logo"
android:background="#null"
tools:targetApi="lollipop"
android:layout_width="match_parent"
android:adjustViewBounds="false"
app:srcCompat="#drawable/logo"
android:layout_alignRight="#+id/Bible"
android:layout_alignEnd="#+id/Bible"
android:layout_height="155sp" />
<ImageView
android:layout_width="match_parent"
android:src="#drawable/title"
android:id="#+id/imageView3"
android:layout_weight="0.29"
android:layout_height="wrap_content"
android:layout_above="#+id/Bible"
android:layout_alignRight="#+id/imageView2"
android:layout_alignEnd="#+id/imageView2"
android:cropToPadding="false"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_below="#+id/imageView2" />
</RelativeLayout>
Check this,
my xml
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#000"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.charu.its2017huree.MainActivity"
tools:showIn="#layout/app_bar_main"
android:orientation="vertical">
<ImageView
android:background="#FFF"
android:src="#drawable/amanda"
android:id="#+id/my_image_view"
android:layout_width="match_parent"
android:layout_height="300dp" />
</LinearLayout>
I have set an imageView and i found out it seems there is something wrong with it's left and right edges. I have given match_parent to my imageView already.So I add a background color to my imageView to find out what's going on.
But that's not enough for me i want to see the boundaries as well.It's there on your android mobile!
Settings >Developer Options >(scroll bit down) under category Drawing there is a option Show layout boundaries > Tick that option .. mm You get some kind of grids in your mobile.It's normal it will be gone when you untick that option.
Let's jump back to image view and see how it looks now!
Now i can clearly see a background color which i add in behind of the image
Also image view width boundary is fine,it's match_parent.You can see that from your layout boundaries.
MM sounds like image didn't fit properly then i try something with scaleType like android:scaleType="fitXY" and run and see how is it now .. all-right it seems she has taken the full space .. I mean in my imageView :D
This way you can clearly identify what'w wrong with your imageView
what is your image saved as? i would suggest .png extension. I would get the border when my images are jpg or anything else.

How to make image fit the whole width screen without blank space in android?

Tried to make image taken to fit the whole screen size width, and top
Picture output should be like this:
The output on the screen of my app is as below with blank space on top, left and right side.
My XML for the activity layout is below:
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/vestGlavnaSlikaLayout"
android:layoutDirection="ltr">
<ImageView
android:id="#+id/iv"
android:layout_width="match_parent"
android:fitsSystemWindows="false"
android:scaleType="fitXY"
android:layout_marginTop="-20dp"
android:focusable="false"
android:cropToPadding="false"
android:adjustViewBounds="true"
android:layout_alignParentBottom="false"
android:layout_alignParentRight="false"
android:layout_height="wrap_content"
android:layout_marginLeft="-20dp"
android:layout_alignParentEnd="false"
android:layout_marginRight="-20dp" />
<TextView
android:background="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tekstglavnevesti"
android:textColor="#android:color/background_light"
android:textSize="20dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:textStyle="normal|bold" />
</RelativeLayout>
My code to display the image:
ImageView iv = (ImageView) v. findViewById(R.id.iv);
Picasso.with(getActivity()).load(slikeZaVesti.get(0))
.into(iv); // jpg tag is pasrsed from html
As you l might observe, there are blank spaces at both left and right side of the image. Any way to make the image fit perfectly onto the screen?

Loaded Bitmap doesn't scale to container size

I have a ListView Item that uses a Drawable as a default icon and am allowing an override if an icon is specified. When I load the Bitmap for the specified icon and set it to the ImageView that holds the default Drawable item, the size of the specified icon is far smaller.
Both the Drawable and the specified Icon are 128px x 128px so I "assumed" that they'd both be the same size upon loading.
Here's a screenshot of the problem.
Here is the XML for the ListItem:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="6dip" >
<ImageView
android:id="#+id/events1_lv1_listitem_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="6dip"
android:contentDescription="#string/content_description_default_text"
android:src="#drawable/calendar" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/events1_lv1_listitem_headline"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/content_description_default_text"
android:gravity="center_vertical"
android:textSize="16sp" />
<TextView
android:id="#+id/events1_lv1_listitem_summary"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:contentDescription="#string/content_description_default_text"
android:ellipsize="marquee"
android:singleLine="true"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
And here is the snippet where I load the bitmap into the list item icon:
File headerImageFile = new File(src);
Bitmap image = BitmapFactory.decodeStream(new FileInputStream(headerImageFile));
events1_lv1_listitem_icon.setImageBitmap(image);
Any help would be most appreciated!
Avoid wrap_content. Set your images size to dp, and set scaleType to "fitXY".
The following will do for you*
<ImageView
android:id="#+id/events1_lv1_listitem_icon"
android:layout_width="128dp"
android:layout_height="128dp"
android:scaleType="fitXY"
android:layout_marginRight="6dp"
android:contentDescription="#string/content_description_default_text"
android:src="#drawable/calendar" />
Couldn't see your screen shot.
If your icon is 128px * 128px, you can set the layout_width and layout_height to 128px, then set the scaleType to fitXY or centerCrop. Like this:
<ImageView
android:id="#+id/events1_lv1_listitem_icon"
android:layout_width="128px"
android:layout_height="128px"
android:scaleType="fitXY"
android:layout_marginRight="6dip"
android:contentDescription="#string/content_description_default_text"
android:src="#drawable/calendar" />
As to the meaning of scaleType, you can see this link.

Converting FrameLayout as Bitmap

I have a FrameLayout that consist some Image views & one EditText. I am saving this layout as an image in the memory (external). First time when I set the images in imageviews everything goes fine i.e. the exact image is being saved (same as displaying on screen) but when after saving first time if I change any thing (text, image) it displays correctly on screen but in saved image it displays earlier image (first image).
XML of Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/imageWithoutFrame"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_centerInParent="true" >
<ImageView
android:id="#+id/withoutFrame_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/background" />
<ImageView
android:id="#+id/withoutFrame_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:layout_gravity="center" />
<EditText
android:id="#+id/withoutFrame_editableText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="30dip"
android:hint="Write here"
android:maxLength="60" />
</FrameLayout>
</RelativeLayout>
Code that change it in bitmap is:
Bitmap bm = null;
FrameLayout savedImage = null;
savedImage = (FrameLayout)findViewById(R.id.imageWithoutFrame);
savedImage.setDrawingCacheEnabled(true);
savedImage.buildDrawingCache();
bm = savedImage.getDrawingCache();
I used this bm for saving.
Thanks for helping.
to overcome with this problem I destroy the drawingcache after saving the image.
savedImage.destroyDrawingCache();

filling whole screen with background image!

hii! i am trying to fill an image onto my screen, but it is just covering around 75-80% part of whole screen, not whole screen .the codeblock i am using is as:
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FILL_PARENT,WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
and main.xml code snippt:
<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/homepage_image"
android:gravity="center"
><ImageButton
android:id="#+id/btnSequence"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/btn_sequence"
android:gravity="center_vertical"/>
<ImageButton
android:id="#+id/btnVideo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/btn_video"
android:gravity="center_vertical"
/>
<ImageButton
android:id="#+id/btnInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/btn_info"
android:gravity="center_vertical"
/>
</LinearLayout>
thanks
If image is less than device screen size android will default to that android:gravity="center" command that you gave it..is the image centered on screen? If so than that might be what is occurring..in which case you need to edit image to screen size of the device.
On my xml I do this to fill the hole screen with an image view:
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
**android:scaleType="fitXY"**
android:src="#drawable/*drawablename*" />
Of course be careful about the size and resolution of you image.

Categories

Resources