We Keep Coding

Shimmer Effect not working on Height wrap_content

I'm trying to implement the shimmer effect with the Height of wrap_content but the images are not loading, I know why it is not loading the images because the imageView has wrap_content and the shimmer also has wrap_content but I want the Height Should be wrap_content and not fixed.
After implementing a fixed height of eg 200dp in shimmer it works but after that images are not loading
I want to make it like Pinterest where the height is adjusted according to the image
XML Files
post_item_container_search.xml
<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/imagePostSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:layout_marginTop="11dp"
android:layout_marginEnd="6dp"
android:contentDescription="#string/todo"
app:shapeAppearanceOverlay="#style/RoundedCorner" />
post_item_containe_shimmer.xml
<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/imageShimmer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="#string/todo"
app:shapeAppearanceOverlay="#style/RoundedCorner" />
this how it looks like after adding minHeight to both or in actual imageView

By default, the wrapcontent doesn't have any size so it is 0dp you need to define 50dp or something for the height of shimmer then only you can see the shimmering.
Can refer this blog
or try to use this
post_item_container_search.xml
<com.google.android.material.imageview.ShapeableImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/imagePostSearch"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitCenter"
android:layout_marginStart="6dp"
android:layout_marginTop="11dp"
android:layout_marginEnd="6dp"
android:contentDescription="#string/todo"
app:shapeAppearanceOverlay="#style/RoundedCorner" />

After implementing a fixed height of eg 200dp in shimmer it works but after that images are not loading
In that case, you should probably set an absolute width/height for the ImageView first. Later, you can set it back to WARP_CONTENT if you really need to. But first you'll need an estimated/absolute width/height for the view.
int height = bitmap.getHeight();
int width = bitmap.getWidth();
ShapeableImageView siv = findViewById(R.id.imagePostSearch);
ViewGroup.LayoutParams params = siv.getLayoutParams();
params.height = height;
params.width = width;
//To set it back to warp content or match parent:
params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
params.width = ViewGroup.LayoutParams.MATCH_PARENT;

Please keep android:minHeight for the ImageView as it will give you a minimum height and also android:height can be wrap_content so it grows if the image is larger than minHeight.
For example,
<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/imageShimmer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="100dp"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="#string/todo"
app:shapeAppearanceOverlay="#style/RoundedCorner" />

You can create a dummy view for shimmer with fixed height, make its visibility to visible and show it until the image loads, and once the image is loaded make the dummy view visibility gone.
//XML
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<shimmerView //You can use your own
android:id="#+id/dummyShimmerView"
android:layout_width="100dp"
android:layout_height="100dp"/>
<ImageView
android:id="#+id/postImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
</RelativeLayout>
//dummyShimmerView visibility is visible byDefault
Glide.with(context)
.load(url)
.listener(object : RequestListener<Drawable> {
override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
//TODO: something on exception
}
override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
Log.d(TAG, "OnResourceReady")
dummyShimmerView.visibility = View.GONE
postImageView.visibility = View.VISIBLE
return false
}
})
.into(imgView)

Restrict the size of a layout width in a chat app

The app I am building requires a simple chat module. I've got everything to work except restricting the width of each chat bubble that appears in the chat screen which is a Recyclerview.
The design logic is that if the width taken up by the chat bubble is greater than or equal to 70% of the screen width then the view will be restricted to 70% of the width, otherwise it will take up as much width as needed. You can observe how the chat bubble width are restricted in this image. (It's a lot easier in iOS where the the UI is completely programmatically built.)
So what I did was define the initial case in the XML for a left:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/chat_message"
android:textColor="#color/black"
android:fontFamily="#font/nexabold"
android:textSize="16sp"
android:layout_margin="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/background_chat_left"
android:padding="8dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
And then for the right:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/chat_message"
android:textColor="#color/fullWhite"
android:fontFamily="#font/nexabold"
android:textSize="16sp"
android:layout_margin="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/background_chat_right"
android:padding="8dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Finally, in my bind view holder method in the adapter for the Recyclerview I do the following. My thinking is that I leave the start (outgoing msg) /end (incoming msg) constraints open in the XML and populate the textview. If the textviews is more than 70% then restrict the width. This, however, isn't working and I am not sure why. I end up with the text spilling outside of the screen regardless.
#Override
public void onBindViewHolder(#NonNull MessagesViewHolder holder, int position) {
holder.tvMessage.setText(messagesArray.get(position).getBody());
Context context = holder.tvMessage.getContext();
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
int screenWidth = displayMetrics.widthPixels;
ViewGroup.LayoutParams layoutParams = holder.tvMessage.getLayoutParams();
if (layoutParams.width >= screenWidth * 0.7) {
holder.tvMessage.setLayoutParams(new ViewGroup.LayoutParams((int) (screenWidth * 0.7), ViewGroup.LayoutParams.WRAP_CONTENT));
}
}

How to add buttons in ZXing Scanner View?

I already found this How to add buttons in Zxing Scanner Camera View
But it's doesn't work ...
I use a camera in a pop up window like this
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int width =dm.widthPixels;
int height =dm.heightPixels;
getWindow().setLayout((int)(width*.9), (int)(height*.7));
WindowManager.LayoutParams params = getWindow().getAttributes();
params.gravity = Gravity.TOP;
params.x =0;
params.y = -20;
getWindow().setAttributes(params);
mScannerView = (ZXingScannerView) findViewById(R.id.zxscan);
mScannerView.setResultHandler(this);
mScannerView.startCamera();
And this is xml file
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CFD8DC"
android:orientation="vertical"
tools:context="com.example.adisi.turzilnic.S1">
<me.dm7.barcodescanner.zxing.ZXingScannerView
android:id="#+id/zxscan"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/FlashOFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/flashoff"
android:layout_marginLeft="150dp"
android:layout_marginStart="150dp"
android:layout_marginTop="150dp"/>
<ImageButton
android:id="#+id/FlashON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/flashon"
android:layout_gravity="center"
android:layout_marginTop="50dp"/>
</me.dm7.barcodescanner.zxing.ZXingScannerView>
</RelativeLayout>
What is wrong here? I don't understand.. My buttons aren't shown on camera.. Should be from that pop up? I set the buttons with margintop and marginleft on the middle because I wanted to see if the positions it's the problem.. but the same problem ..

The size of your buttons is wrap_content and instead of setting the image source on the button you are setting the image on the background. The view relative sizes don't keep track of your view's background so you will most probably have a view with width/height set to 0.
Try to set the images using "src" instead.

How to increase the height of a view in Android Layout dynamically?

How to extend the height of the separated vertical line (view) dynamically in the image?
This is the XML I'm using:
<View android:layout_width="1dp"
android:layout_height="100dp"
android:id="#+id/view_verdict"
android:background="#color/line"
android:foregroundGravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />

Maybe this example code will be useful (I suppose that your view is a LinearLayout):
final int newHeight = 100; //this is the new height will be set in your view
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, newHeight);//first param is the width, and second the height
myView.setLayoutParams(params);
Or just put:
...
android:layout_height="match_parent"
...

set
android:layout_height="match_parent"
for your view with id view_verdict

Android: alignment after scaling and size changed

I have a view which defines its width and height accordingly to layout dimensions (via ViewTreeObserver). I have another two ImageViews (wrapped in the RelativeLayouts).
I need this two images be aligned to the top and bottom of the first view. They do, but use old view dimensions, not the corrected ones: so there is a gap between the views, when central gets smaller.
Here is an image of what I mean:
And the code:
#Override
public void onGlobalLayout() {
layoutWidth = layout.getWidth(); \\ main layout
layoutHeight = layout.getHeight();
LayoutParams params = arrows.getLayoutParams();
params.width = layoutHeight/3;
params.height = layoutHeight/3;
arrows.setLayoutParams(params);
LayoutParams paramseyes = eyes.getLayoutParams();
paramseyes.width = layoutHeight/4;
eyes.setLayoutParams(paramseyes);
mouth.setLayoutParams(paramseyes);
/*
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams
(paramseyes);
lp.addRule(RelativeLayout.ABOVE, R.id.arrows);
eyes.setLayoutParams(lp); ... nah, it didnt work
*/
removeOnGlobalLayoutListener(arrows, this);
}
the XML:
<ee.st.running.arrowwidgt
android1:id="#+id/arrows"
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:layout_centerInParent="true"
android:dial="#drawable/hourglass1"
android:hand_hour="#drawable/hours"
android:hand_minute="#drawable/minuts"
android:scaleType="fitXY"
android1:src="#drawable/hourglass1" />
<RelativeLayout
android1:id="#+id/eyes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android1:layout_above="#id/arrows" >
<ImageView
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:layout_centerInParent="true"
android1:src="#drawable/eyes" />
</RelativeLayout>
<RelativeLayout
android1:id="#+id/mouthset"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android1:layout_below="#id/arrows"
android:layout_centerHorizontal="true"
>
<ImageView
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:layout_centerHorizontal="true"
android1:src="#drawable/mouth"
/>
</RelativeLayout>
This arrows view is big (for multiple screens support I just scale it to certain size later).

I finally realized why.
When I changed layout width, it correspondingly scaled the image. But it didn't change layout height.
I should make
paramseyes.height = ...
(In my situation it is layoutHeight/8;)
So, the problem is solved.