Android add border image to ImageView - java

Is it possible to add a bitmap as border of an ImageView in android dynamically in Java?
I have already tried the following:
Image view in XML and border as shape the result is wrong I want to add bitmap in border.

You have got multiple options:
Place an other View with the border (also imageview) above your Imageview. Thay might be the simples solution. Just add an other view to your xml and make sure they are overlapping. (Use for example a Relative or FrameLayout as container)
Use a Layer List and draw a shape above a Bitmap and add that to your ImageView
Write a custom ImageView and use the Canvas to draw the Border in the overwritten onDraw method. E.g. canvas.drawRect(...) its pretty straightforward.

The simple way:
A drawable for ImageView's attr that android:foreground
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1px" android:color="#ff0000" />
<solid android:color="#android:color/transparent"/>
</shape>
Then XML,
<ImageView
android:id="#+id/unreserved_head_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="#drawable/shape_border"
/>

The simplest solution I found recently.
Try to use material theme in your app. Use "Theme.MaterialComponents.Light"
Then use image view inside and material card view.
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="8dp"
app:cardElevation="0dp"
app:strokeColor="#color/colorPrimary"
app:strokeWidth="1dp">
<ImageView/>//define you image view hear
</com.google.android.material.card.MaterialCardView>
With property stokeColor and strokeWidth you can have border on an image view and make it dynamic.

you can use 9 patch in andorid studio to make an image a border!
i was finding a solution but i did not find any so i skipped that part
then i go to the google images of firebase assets and i accidentaly discovered that they use 9patch
heres the link: https://developer.android.com/studio/write/draw9patch
you just need to drag where the edges are
its just like boder edge in unity

Related

how to show gif on background image in android studio

I want to show Gif as a upper layer on background image. What exactly i want to have image in background and on that image i also want to show gif but when i run the code i am only seeing the gif background image is hidden can someone tell what should i do now
My XML Code is Here
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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/ice"
tools:context=".MainActivity">
<pl.droidsonroids.gif.GifImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/gif"
android:background="#drawable/ice"
/></android.support.constraint.ConstraintLayout>
i have used background image in both GifImage view and also in Layout background but in both case its not showing background.
Why you are seeing GIF Image only, not your background image?
Because
1) You are setting "width and height" of your GIF image as "match_parent" hence its
taking entire screen and you are not been able to see your background image.
2) Still if you want to set your GIF image as match_parent(that Ok!), make sure you
use "alpha GIF image or I would say transparent GIF image"
Note: You can convert your current GIF to transparent GIF online as well.
Hope this help you somehow.
This can be implemented with relative layout take a imageview and set it's height and width as match_parent after that add background to that imageview lastly add your gif view below image view which will basically align it on top of the imageview this should do the trick:
<Relativelayout>
<Imageview
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ice"/>
<pl.droidsonroids.gif.GifImageView
android:layout_width="match_parent"
android:layout_height="match_parent" //layout added at last will be shown on top
android:src="#drawable/gif"
android:background="#drawable/ice"
/>
</Relativelayout>

Android rounded background with different colors

I'm making a to-do app and I'm using a RecyclerView to create a multiple grid layout like this:
I'm using a background layout to round the corners:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="6dp" />
<corners android:radius="20dp"/>
</shape>
My problem is that whenever I change the color dynamically in the adapter like this:
public void onBindViewHolder( ViewHolder holder, int position) {
holder.timee.setBackgroundColor(task.get(position).getColor());
holder.timee.setTextColor(Color.WHITE);
holder.grid.setBackgroundColor(Color.WHITE);
holder.namee.setTextColor(task.get(position).getColor());
}
The background color seems to ignore the boundaries I've set with the background layout and I get this result:
What is the best way to make it have both rounded corners and a different color for every item in the RecycerView?
The background "layout" you are using is in fact not a layout at all; It is a drawable resource. This means that though the visible borders are rounded, the view itself still has its original shape.
When you set a background color programmatically, it replaces the previous drawable that had rounded corners and fills the entire rectangular view. In order to have both rounded corners, and a solid color fill within those bounds, you will need to modify your drawable itself. The <solid> tag should suit this purpose.
To support multiple colors, you can either have separate drawable resources for each of them (useful if you have just a couple of them), or you can use different tints on a base drawable. Other methods can be found at this question.
This doesn't directly answer your question, but it offers an alternative that I find much easier to manage.
When I need views with rounded corners, I tend to use a CardView and I just remove the elevation. I can then modify the layout like any other programmatically:
<android.support.v7.widget.CardView
android:layout_width="50dp"
android:layout_height="50dp"
card_view:cardBackgroundColor="#5500FF00"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="0dp" />
So you just use the CardView in your list item view that's inflated, and then in your code you simply do this:
public void onBindViewHolder( ViewHolder holder, int position) {
...
holder.cardView.setCardBackgroundColor(task.get(position).getColor());
...
}

How to make a Window-like background in XML for Android?

I'm working on an app that requires me to create a Window-like background in Android like
,
where each pane represents an Image that can be pressed.
I have come up with
,
but I don't know how to set the grids. I have used TableLayout here & I want each of my TableRows to have such a background that it looks like it's forming the grid of the Window.
Following is the background created in XML that is used by my TableLayout
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:topLeftRadius="30dp" android:topRightRadius="30dp"/>
<solid android:color="#FDFDFD"/>
<stroke android:color="#454545" android:width="1dp"/>
</shape>
Please help
try to use gridview.
https://developer.android.com/guide/topics/ui/layout/gridview.html
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
Use a GridView or a RecyclerView with gridlayoutmanager to get a proper scrollable grid-like arrangement.
Use a GridView if you want the coding to be nice and easy; however it will need a viewholder pattern for smooth scrolling. If you want super flexibility like directions of scrolling etc. Use a RecyclerView if you need to use a viewholder pattern anyway.
RecyclerView supports Grids, Linear and StaggeredGrids with horizontal and/or vertical scrolling. It uses a LayoutManager to handle all this -> LinearLayoutManager, GridLayoutManager StaggeredGridLayoutManager with direction either horizontal or vertical.
Reference for GridView: http://www.androidhive.info/2012/02/android-gridview-layout-tutorial/
Reference for RecyclerView: https://realm.io/news/android-recycler-view/

android border with different width

I'm trying to make border of ImageView which should be for example 25% blue/bold and 75% gray/thin. Let's say something like this:
To obtain simple border I am using:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1dp"
android:color="#A7A9AC"/>
</shape>
what gives me only gray/thin border.
But how to achieve example which was presented above? Probably it should be done in Java part, because border percentage is variable, so it has to be done dynamically. Someone adviced me to create custom Shape class, and use ShapeDrawable. But I do not know how to do it. Any ideas or examples?
I was working on a similar problem, I think this could help:
https://github.com/PhilJay/CircleDisplay
just change the color of the border, remove the text, and disable the animation and you will have what you want
Edit:
Something like this
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp">
<com.philjay.circledisplay.CircleDisplay
android:layout_width="100dp"
android:layout_height="100dp"/>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"/>
</FrameLayout>
The (com.philjay.circledisplay.CircleDisplay) depends on the path where you put the class of course.
In case the images are not always circles you can use this library:
https://github.com/vinc3m1/RoundedImageView

How to disable stretching of image in ImageView?

There are some ImageView and image for this view. ImageView is 100px/100px, but image is 50px/50px. I wouldn't like the image fills full space in ImageView, i.e. I want that the ImageView contains my image in center of ImageView without stretching. How can I do it?
UPDATE:
Sorry, I've made a mistake. My ImageView is 50px/50px, and my image is 100px/100px. What do you think about it?
Add to your ImageView:
android:scaleType="center"
Note that in the Android Studio xml layout preview if you use the android:background="#drawable/my_image" you will still see your image streached (In run time it won't streach).
But if you still want to see your ImageView background (not streached) also in the IDE preview use android:src="#drawable/my_image" instead of background property.
(in any case the scaleType should be center)
You need to set the android:scaleType attribute on your image view. If the image is bigger than your view, either use centerInside or one of the fitXY, fitStart, fitEnd options.
You have all the info you need on the Android developer documentation for the ImageView class.
set the android:scaleType with proper value, you can give centerCrop.
e.g. android:scaleType="centerCrop"
In ImageView we have a property called scaleType that is shown below in the code.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button2"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="94dp"
android:scaleType="center"
android:src="#drawable/ic_launcher" />
It will not scale your image.

Categories