How to make the ImageView rounded in GridView of Android (Java)? - java

I have tried to make the image rounded inside the Gridview but it appears as shown below. Please help me to solve this issue
Here is the code that I have tried:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if(convertView == null){
imageView = new ImageView(mContext);
imageView.setBackgroundResource(R.drawable.shape);
GridLayout.LayoutParams param =new GridLayout.LayoutParams();
param.height = 300;
param.width = 300;
imageView.setLayoutParams(param);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setPadding(16,16,16,16);
}else{
imageView = (ImageView) convertView;
}
imageView.setImageResource(image[position]);
return imageView;
}
The below is the shape.xml file that I have added:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background Color -->
<solid android:color="#ffffff" />
<!-- Border Color -->
<stroke android:width="1dp" android:color="#000000" />
<!-- Round Corners -->
<corners android:radius="50dp" />
</shape>

You can use CircleImageView library to do it easily and you will find examples in the read me or if you want to create your own version you can read the library code and learn from it to improve your own version

I always use these two libraries for Round Image View
implementation 'de.hdodenhof:circleimageview:3.1.0'
implementation 'com.makeramen:roundedimageview:2.3.0'
Example of circleimageview
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageProfile"
android:layout_width="#dimen/_80sdp"
android:layout_height="#dimen/_80sdp"
app:civ_border_color="#color/textPrimary"
app:civ_border_width="#dimen/_1sdp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textChangeBio" />
Example of RoundedImageView
<com.makeramen.roundedimageview.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/imageView1"
android:src="#drawable/photo1"
android:scaleType="fitCenter"
app:riv_corner_radius="30dip"
app:riv_border_width="2dip"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_tile_mode="repeat"
app:riv_oval="true" />
you can also set custom radius in RoundImageView

Related

Increase height of selected icon in navigation bottom view android when using custom icon?

Please, I want to use custom icon for bottom navigation view in android like this. How to change icon position when selected? When they are selected they go up a bit. Do you create a selected icon with a certain margin or is there a way to set the height in android? This image is from a flutter library though. I want to reproduce that in an Android Java project. Or find a library that implement it
Inside your bottomNavigationView.setOnNavigationItemSelectedListener for each icon pressed call that animation method animateBottomIcon(int itemIndex, boolean isChecked).
BottomNavigationView bottomNav;
BottomNavigationMenuView menuView;
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
bottomNav.setClipChildren(false);
bottomNav.setClipToPadding(false);
bottomNav.setClipToOutline(false);
menuView.setClipChildren(false);
menuView = (BottomNavigationMenuView) bottomNav.getChildAt(0);
}
private void animateBottomIcon(int itemIndex, boolean isChecked) {
final View view = menuView.getChildAt(itemIndex).findViewById(com.google.android.material.R.id.icon);
ObjectAnimator translateUpAnimator = ObjectAnimator.ofFloat(view, "translationY",
0,
(float) (-(bottomNav.getHeight() / 2))).setDuration(500);
if(!isChecked) {
translateUpAnimator.start();
}
if(currentItemIndex != -1) {
final View currentView = menuView.getChildAt(currentItemIndex).findViewById(com.google.android.material.R.id.icon);
ObjectAnimator translateDownAnimator = ObjectAnimator.ofFloat(currentView, "translationY",
0,
(float) (-(bottomNav.getHeight() / 2))).setDuration(500);
if (!isChecked) {
translateDownAnimator.reverse();
}
}
}
Usually the menu icon will be cut off by the BottomNavigation to avoid that use: android:clipChildren="false" on the root view of your layout, and in your java class, inside onCreateView():
bottomNav.setClipChildren(false);
bottomNav.setClipToPadding(false);
bottomNav.setClipToOutline(false);
and most importantly on your menuItem, because it's the parent of your icon items. menuView.setClipChildren(false);.
Remember to give your bottom navigation view a fixed height.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="56dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_gravity="bottom"
android:background="#color/white"
app:itemIconSize="54dp"
app:elevation="12dp"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/menu_bottom_nav">[![enter image description here][1]][1]
UPDATE: The library is live here https://github.com/Kwasow/BottomNavigationCircles-Android
I stumbled upon your question and created a custom android navigation bar inspired by the design.
The navigation bar looks like this:
The code for it is located here: https://github.com/Kwasow/Archipelago/blob/main/app/src/main/java/com/github/kwasow/archipelago/views/CustomBottomNavigation.kt
The bg_green_circle.xml drawable looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="24dp"
android:height="24dp"/>
<solid android:color="#6CB86A"/>
</shape>
I might turn it into a package in the future, but it still requires some work. I'll update the post if it happens.
You can do this by using a selector.
For this you need two separate images:
1) when state selected is true means your selected image
2) default means when no icon is selected.
XML
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/YOUR SELECTED IMAGE">
</item>
<item android:drawable="#drawable/YOUR DEFAULT IMAGE"></item>
</selector>
Then use this selector as a drawable for each image icon for the bottom navigation view.
You can add other attributes in selector a/c to your requirements.

Change BackgroundTint of ImageView on Android

I have an ImageButton which have a drawable background resource which is oval shape.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:angle="270"
android:color="#FFFF0000" />
</shape>
Here is the ImageButton in XML:
<ImageButton
android:id="#+id/c1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_columnSpan="1"
android:layout_rowSpan="1"
android:background="#drawable/circle"
android:layout_margin="10dp"
/>
I need to change the color of the circle shape dynamically, this will be done by either change the backgroundTint property in the ImageButton or change the circle shape color.
NOTE:
I have array of strings that stores a list of RGB colors i need to use these RGB colors.
You can do it like this:
mImageView.setBackgroundTintList(getResources().getColorStateList(R.color.my_color));
Or you can do better, to support versions pre LOLLIPOP:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
ColorStateList stateList = ColorStateList.valueOf(getResources().getColor(R.color.my_color));
mImageView.setBackgroundTintList(stateList);
}
else
{
mImageView.getBackground().getCurrent().setColorFilter(
new PorterDuffColorFilter(getResources().getColor(R.color.my_color),
PorterDuff.Mode.MULTIPLY));
}
More about PorterDuffColorFilter here.
i just found the answer, it works as follow:
In my changeColors(int id) function
Create ImageButton variable.
Assign the passed id to the ImageButton variable.
Define GradientDrawable variable to store the ImageButton background.
Update the color of the background using GradientDrawable variable.
Update the ImageButton to the new background.
This is the code:
ImageButton circle;
circle = (ImageButton) findViewById(id);
GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.circle);
drawable.setColor(Color.parseColor("color in format #FFFFFF");
circle.setBackground(drawable);
You may use ImageView instead and use app:tint to set the tint color for the background drawable.
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/circle"
app:tint="#android:color/holo_red_dark"/>

Add Text in ImageView on Android

I'm currently having a viewlist composed of Imageview. I'm trying to add text on each imageview of the list.
Here is the view management: A call called the ImgView method with it's context and Associated view.
public ImgView(Context c, ImageView ImageV) {
mImageView = filteredImage;
mImageView.setTag(this);
mFiltersText = new TextView(c);
mFiltersText.setText("No effect");
mFiltersText.setVisibility(View.VISIBLE);
mContext = c;
mImage = new GPUImage(mContext);
mEffect = R.id.none;
mActivity = (Activity) mContext;
}
the mEffect is just an int used to know the type of effect I want to apply on the pic and stored in xml
<resources>
<item type="id" name="none" />
<item type="id" name="blackandwhite" />
<item type="id" name="bla" />
</resources>
My goal is to find a way to get a string from the xml and display this string on the image view.
for example, when selecting "None" id, I display "No effect" on the image
I defined mFilterText but it's not displaying anything.
The View is get as shown below:
public View getView(int position, View convertView, ViewGroup parent) {
....
convertView = LayoutInflater.from(mContext).inflate(R.layout.list_item_filter, null);
filteredImage = (ImageView) convertView.findViewById(R.id.filteredImage);
filteredImage.setBackground(new BitmapDrawable(mFakeBitmap));
filteredText = new TextView(mContext);
it's possible that filteredText is not correctly used. I use it as new but perhaps I need to attached it ad the FilteredImage do.
Any idea
Just place TextView on top of ImageView.
Use a Framelayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</FrameLayout>
You can also use the drawable property of textview
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_clear_white_24dp"
android:drawableRight="#drawable/ic_clear_white_24dp"
android:drawableBottom="#drawable/ic_clear_white_24dp"
android:drawableTop="#drawable/ic_clear_white_24dp"
/>

TextView with shape or line

I want to draw a simple line on top of some text in a TextView. I have looked at various examples which seem to override the onDraw() function but my understanding is that onDraw() is called when something is drawn.
I would like a vertical line in my TextView and at this moment in time I dont really care where it is, once I have the line I am sure I will be able to manipulate it to the position I would like.
I have a TextViewWithLines class extending TextView where the code will go:
public class TextViewWithLines extends TextView {
public TextViewWithLines(Context context){
super(context);
}
public TextViewWithLines(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TextViewWithLines(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
and I also have a fragment where I would like the drawing of the line to be done when I create the view.
public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState){
View v = inflater.inflate(R.layout.fragment_hello_moon, parent, false);
t1 = (TextViewWithLines)v.findViewById(R.id.display1);
.................
}
Any help would be appreciated
As you describe, you simply need to do your drawing in onDraw().
Here is a (working) example of someone that wants all text in the Textview underlined;
How can I have a row separating line in TextView
One possible solution (just a simple XML layout):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/small_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"
android:textSize="#dimen/define_your_size"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<LinearLayout
android:id="#+id/text_separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="vertical"
android:background="#color/define_your_color"
android:layout_alignParentTop="true"/>
</RelativeLayout>
If you want to draw a shape around a TextView (like a rectangle), you can define a drawable background and set the colors you want:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<stroke android:color="#FFCC00" android:width="3dp"></stroke>
<corners android:radius="5dp"/>
<solid android:color="#FAFFA8"/>
</shape>
</item>
<item android:state_enabled="false">
<shape>
<stroke android:color="#FFFFFF" android:width="2dp"></stroke>
<corners android:radius="5dp"/>
<solid android:color="#00FFFFFF"/>
</shape>
</item>
<item>
<shape>
<stroke android:color="#DADADA" android:width="2dp"></stroke>
<corners android:radius="5dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</item>
</selector>

Java/Android rounded drawable/bitmap - 4 diffrent radiuses and size

I searched but not found any clue to help my problem:
I have an ImageView with some layer drawable that presents border radiuses to that view. Also I set jpg/png file that should present its background(and should be more like css equivalent to code shortly like 'background-image:url(....)'),
My main issue is that when jpg/png file is small theres a problem that it is first cornered, and then stretched, and cause of result image looks more like circle, not like stretched rectangle with rounded corners.
Important note:I have 4 different corner-radiuses(any number from 0 to 1000), like in web radius-top-left,radius-top-right, etc.
Anyone had problem like that or know better way of implementing this?
I tried to add use custom drawable:
public class RoundCornersBitmap extends PaintDrawable {
private Bitmap mBitmap;
private final Paint mPaint;
private final BitmapShader mShader;
private final ImageView mView;
public RoundCornersBitmap(Bitmap bmp, ImageView view) {
mBitmap = bmp;
mPaint = new Paint();
mShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setAntiAlias(true);
mPaint.setColor(Color.BLACK);
mPaint.setShader(mShader);
mPaint.setFlags(Paint.FILTER_BITMAP_FLAG);
mView = view;
//example corners
this.setCornerRadii(new float[]{50, 50, 120, 120, 90, 90, 40, 40});
}
#Override
public int getIntrinsicWidth() {
return mBitmap.getWidth();
}
#Override
public int getIntrinsicHeight() {
return mBitmap.getHeight();
}
#Override
public Paint getPaint() {
return mPaint;
}
#Override
public void draw(Canvas canvas) {
getShape().draw(canvas, mPaint);
}
}
and my with layer list presents as folowing:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ff00ff"></solid>
<corners android:topLeftRadius="50px" android:topRightRadius="120px"
android:bottomLeftRadius="90px"
android:bottomRightRadius="40px"></corners>
<padding android:top="20px" android:left="20px" android:right="20px" android:bottom="20px"></padding>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#f0000f"></solid>
<corners android:topLeftRadius="50px" android:topRightRadius="120px"
android:bottomLeftRadius="90px"
android:bottomRightRadius="40px"></corners>
<padding android:top="1px" android:bottom="1px" android:left="1px" android:right="1px"></padding>
</shape>
</item>
</layer-list>
addinationaly my layout.xml presents like that:
<?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"
>
<ImageView
android:id="#+id/sk"
android:layout_width="320px"
android:layout_height="380px"
android:background="#drawable/skdrawable"
android:src="#drawable/ski2"
android:scaleType="fitCenter"
/>
</LinearLayout>
also code in my activity that should do the task:
ImageView view = (ImageView) findViewById(R.id.sk);
BitmapDrawable d = (BitmapDrawable) getResources().getDrawable(R.drawable.ski2);
view.setImageDrawable(new RoundCornersBitmap(d.getBitmap(),view));
I'd appreciate any help .
I found workaround with using extra path in my imageview:
Rect outRect = new Rect();
getDrawingRect(outRect);
mPath.addRoundRect(new RectF(outRect.left,outRect.top, width,height), floats_array, Path.Direction.CW);
and clipping it in onDraw:
canvas.clipPath(mPath);

Categories

Resources