CardView size not dynamic when set to wrap_content - android

I have a CardView for RecyclerView items that contains an ImageView and a LinearLayout (actionBar)
<androidx.cardview.widget.CardView 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/communityImageCv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
app:cardCornerRadius="30dp"
android:elevation="16dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/communityImageCl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/communityImageIv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/actionBar"
tools:src="#drawable/person_splash_2" />
<LinearLayout
android:id="#+id/actionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:background="#color/white"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:visibility="gone"
android:weightSum="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:visibility="visible">
<LinearLayout
android:id="#+id/loveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id="#+id/lovedIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:src="#drawable/loved_heart_empty">
</ImageView>
<TextView
android:id="#+id/lovedText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/radikal"
android:textColor="#color/black"
android:textSize="10sp"
tools:text="#string/love_this">
</TextView>
</LinearLayout>
<LinearLayout
android:id="#+id/shareButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone"
tools:visibility="visible"
>
<ImageView
android:id="#+id/shareIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:src="#drawable/share_arrow_empty">
</ImageView>
<TextView
android:id="#+id/sharedText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/radikal"
android:textColor="#color/black"
android:textSize="10sp"
tools:text="#string/shared_this">
</TextView>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
The LinearLayout is programmed to appear and disappear based on an attribute of the model. Afterward, the ImageView's height is changed programmatically based on another attribute (I'm only including this part in case it's relevant):
fun bind(model: CommunityOffer) {
if (model.isLikeable || model.isShareable) {
actionBar.visibility = View.VISIBLE
} else{
actionBar.visibility = GONE
}
if (!model.mediaAspectRatio.isNullOrEmpty()) {
val aspectRatioSplit = model.mediaAspectRatio.split(":")
widthRatio = Integer.parseInt(aspectRatioSplit[0])
heightRatio = Integer.parseInt(aspectRatioSplit[1])
communityImageIv.scaleType = ImageView.ScaleType.FIT_XY
height = ((width.toFloat() / widthRatio.toFloat()) * heightRatio).toInt()
communityImageIv.layoutParams.height = height
communityImageCl.layoutParams.height = height
Glide.with(itemView.context).load(model.coverUrl).apply(RequestOptions().override(width, height).skipMemoryCache(true)).listener(requestListener).into(communityImageIv)
} else {
communityImageIv.scaleType = ImageView.ScaleType.CENTER_CROP
widthRatio = 25
heightRatio = 21
height = ((width.toFloat() / widthRatio.toFloat()) * heightRatio).toInt()
communityImageIv.layoutParams.height = height
communityImageCl.layoutParams.height = height
Interactors.glide.loadImage(model.coverUrl, communityImageIv, requestListener)
}
Rather than increasing in size to hold both of its child views, the CardView moves up the ImageView by in proportion to the size of the actionBar, cutting off the top of the ImageView:
Without actionBar:
With actionBar:
This looks how it's supposed to in the display panel of the .xml file, but not at run time. How do I make the CardView wrap its children appropriately at run time?

I think you should try with linear layout insted of constraintLayout as a child layout of cardView and than set your all child widgets in linearLayout i hope it might be work.
like this
<androidx.cardview.widget.CardView
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/communityImageCv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
app:cardCornerRadius="30dp"
android:elevation="16dp">
<LinearLayout
android:id="#+id/communityImageCl"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
//set here your all child widgets
</LinearLayout>
</androidx.cardview.widget.CardView>

Related

Put 2 columns in single row horizontal recycleview for all screens

I have one parent Horizontal Recycleview which contains twelve Vertical Recycleviews. I would like to show only two columns per page, on only one horizontal row. I use GridLayoutManager.
GridLayoutManager layoutManager = new GridLayoutManager(this,1);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
Increasing span to 2 it creates two rows which i don't want.
Also i tried layout:width in xml to fixed value in dp or sp that results in different number of columns on different screen sizes.
xml for each block
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/view_table_view_game_block_constraint_layout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/shape_round_top"
android:layout_marginTop="8dp">
<TextView
android:id="#+id/textView_table_view_odds_block_time"
android:layout_width="0dp"
android:layout_height="50sp"
android:gravity="center_vertical"
android:textColor="#color/colorFontWhite"
android:textSize="#dimen/font_size"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_table_view_odds_block_hometeam"
android:layout_width="0dp"
android:layout_height="50sp"
android:layout_marginTop="4dp"
android:textAlignment="textStart"
android:background="#android:color/transparent"
android:textColor="#color/colorFontWhite"
android:textSize="#dimen/font_size"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView_table_view_odds_block_time" />
<Button
android:id="#+id/button_table_view_odds_block_drawable"
android:layout_width="0dp"
android:layout_height="50sp"
android:layout_marginTop="4dp"
android:background="#android:color/transparent"
android:textAlignment="textStart"
android:textColor="#color/colorFontWhite"
android:textSize="#dimen/font_size"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_table_view_odds_block_hometeam" />
<Button
android:id="#+id/button_table_view_game_odds_awayteam"
android:layout_width="0dp"
android:layout_height="50sp"
android:layout_marginTop="4dp"
android:background="#android:color/transparent"
android:textAlignment="textStart"
android:textColor="#color/colorFontWhite"
android:textSize="#dimen/font_size"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_table_view_odds_block_drawable" />
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Set width dynamically according to the screen size. this is the best way to get perfect result.
Update onBindViewHolder of your Horizontal Recyclerview like that.
#Override
public void onBindViewHolder(#NonNull UsersAdapter.UsersAdapterVh holder, int position) {
UserModel userModel = userModelList.get(position);
String username = userModel.getUserName();
String prefix = userModel.getUserName().substring(0,1);
holder.tvUsername.setText(username);
holder.tvPrefix.setText(prefix);
holder.item_layout.getLayoutParams().width = getScreenWidth(context)/2;
}
public static int getScreenWidth(Context context) {
WindowManager wm= (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
return dm.widthPixels;
}
This is how the RecyclerView item layout looks like for the given example.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:padding="10dp"
android:id="#+id/holder_view"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="50dp"
android:background="#drawable/users_bg"
android:layout_height="50dp">
<TextView
android:id="#+id/prefix"
android:layout_width="wrap_content"
android:textSize="16sp"
android:textColor="#color/headerColor"
android:text="T"
android:layout_centerInParent="true"
android:layout_height="wrap_content"/>
</RelativeLayout>
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:textSize="16sp"
android:textColor="#color/headerColor"
android:text="username"
android:layout_marginStart="90dp"
android:layout_centerVertical="true"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="wrap_content"
android:id="#+id/imageView"
android:layout_margin="10dp"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_navigate_next_black_24dp"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>

Not able to set width of a horizontal linear layout or height of vertical linear layout

I have made a fragment layout for which code is shown below.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/bill_display_id"
android:layout_gravity="start"
tools:context=".HomePage">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/zoom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/bill_text_id"
/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scroll_horiz_id">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/btn_default"
android:orientation="horizontal"
android:id="#+id/zoom_lin">
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/prd_id">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product"
android:layout_gravity="center"
/>
</LinearLayout>
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/rate_id">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate"
android:layout_gravity="center"
/>
</LinearLayout>
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/qty_id">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Qty"
android:layout_gravity="center"
/>
</LinearLayout>
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/price_id">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Price"
android:layout_gravity="center"
/>
</LinearLayout>
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</ScrollView>
Now i have a function setZoom (shown below) in which i am trying to set height and width of horizontal linear layout (id = zoom_lin).
But i am seeing that only height is getting set and not width.
protected void setZoom(float val)
{
View horz_lin = rootView.findViewById(R.id.zoom_lin);
ViewGroup.LayoutParams lp = horz_lin.getLayoutParams();
lp.width = 300; // 300 is a random number for testing only
lp.height = 600; // 600 is a random number for testing only
horz_lin.requestLayout();
}
Similarly if i try to set height and width for vertical linear layout (id = zoom), i see that only width is getting set and not height.
Is there any rule which forbids us from setting the width for horiizontal linear layout and height for vertical linear layout.
Please excuse me if am missing something trivial as i am a beginner in android development.
You need to set the updated layoutParams back to the linear layout:
protected void setZoom(float val)
{
LinearLayout horz_lin = (LinearLayout)rootView.findViewById(R.id.zoom_lin);
ViewGroup.LayoutParams lp = horz_lin.getLayoutParams();
lp.width = 300; // 300 is a random number for testing only
lp.height = 600; // 600 is a random number for testing only
horz_lin.setLayoutParams(lp); // ADD THIS LINE
horz_lin.requestLayout();
}

Set text items vertically or horizontally based on text width

I need to show a list of buttons either vertically or horizontally and make that decision based on how the text fits in the view.
I need to display the buttons like this:
but if the width of the text is longer and it needs to move it to a new line, I need to change the orientation and set them vertically, like so:
The number of items can differ, from 2 to at most 10. How can I know if the text will fit in the horizontally aligned views so that If they don't I can make them align vertically?
If Parent Layout has more than 4(or)5 view the String value will definitely break into new line,so if u want suggestions Use this if it helps
Make Parent Layout as Linear Layout with default orientation as horizontal in XML
In JAVA code check String raspuns = "dynamic string"; length
Try this
LinearLayout parent_layout = findViewById(R.id.parent);
if(raspuns.length > 7){
parent_layout.setOrientation(LinearLayout.VERTICAL);
}
Hope it Helps
What you need is to use android.support.v7.widget.ButtonBarLayout which is
An extension of LinearLayout that automatically switches to vertical
orientation when it can't fit its child views horizontally.
Which is being used by Android itself in abc_alert_dialog_button_bar_material.xml
So the code would look like
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.ButtonBarLayout 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="wrap_content"
android:gravity="bottom"
android:layoutDirection="locale"
android:orientation="horizontal"
android:paddingBottom="4dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:paddingTop="4dp">
<Button
android:id="#android:id/button3"
style="?attr/buttonBarNeutralButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Neutral button" />
<android.widget.Space
android:id="#+id/spacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="invisible" />
<Button
android:id="#android:id/button2"
style="?attr/buttonBarNegativeButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Negative button" />
<Button
android:id="#android:id/button1"
style="?attr/buttonBarPositiveButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Positive button" />
</android.support.v7.widget.ButtonBarLayout>
Output of this xml is
And if text is small for buttons, output for same layout is
just try like this and it's working fine for me
Layout
<HorizontalScrollView 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="wrap_content"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#color/colorAccent"
android:padding="16dp"
android:text="Hello World!"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#color/colorAccent"
android:padding="16dp"
android:text="Hello World!"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#color/colorAccent"
android:padding="16dp"
android:text="Hello World!"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#color/colorAccent"
android:padding="16dp"
android:text="Hello World!"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#color/colorAccent"
android:padding="16dp"
android:text="Hello World!"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</HorizontalScrollView>
code for Rearrange views
val displayMetrics = DisplayMetrics()
windowManager.defaultDisplay.getMetrics(displayMetrics)
val width = displayMetrics.widthPixels
var viewsWidth = 0;
for (i in 0..linear.childCount - 1) {
linear.getChildAt(i).post({
viewsWidth += linear.getChildAt(i).width
if (i == linear.childCount - 1) {
if (width < viewsWidth) {
linear.orientation = LinearLayout.VERTICAL
for (k in 0..linear.childCount - 1) {
(linear.getChildAt(k) as Button).width = (width - resources.getDimension(R.dimen.spacing_large)).toInt()
linear.getChildAt(k).requestLayout()
}
}
}
});
}
And spacing_large is sum of margin_start and margin_end

layout weight issuse for different screen

I have two spinner and a square imageview . I have set the weight for fixing the layout so that in every screen the ratio is same in all screen like small,normal, large and xlarge. I have discarded the small. The image is given below :
enter image description here
I have used the run time layout weight as like this :
private void initfixview()
{
LinearLayout.LayoutParams lnrspnrviewlayoutparams= (LinearLayout.LayoutParams)lnrspnrview.getLayoutParams();
LinearLayout.LayoutParams lnrimageviewlayoutparams= (LinearLayout.LayoutParams)lnrimageview.getLayoutParams();
LinearLayout.LayoutParams lnrdummyspacelayoutparams= (LinearLayout.LayoutParams)lnrdummyspace.getLayoutParams();
LinearLayout.LayoutParams lnrimgarrowupdownlayoutparams= (LinearLayout.LayoutParams)lnrimgarrowupdown.getLayoutParams();
LinearLayout.LayoutParams lnrcountrystatelayoutparams= (LinearLayout.LayoutParams)lnrcountrystate.getLayoutParams();
LinearLayout.LayoutParams lnrzipcodelayoutparams= (LinearLayout.LayoutParams)lnrzipcode.getLayoutParams();
if ((getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_LARGE)
{
lnrspnrviewlayoutparams.weight=80;
lnrspnrviewlayoutparams.width=80;
lnrimageviewlayoutparams.weight=20;
lnrimageviewlayoutparams.width=20;
lnrspnrview.setLayoutParams(lnrspnrviewlayoutparams);
lnrimageview.setLayoutParams(lnrimageviewlayoutparams);
lnrdummyspacelayoutparams.weight=80;
lnrdummyspacelayoutparams.width=80;
lnrimgarrowupdownlayoutparams.weight=20;
lnrimgarrowupdownlayoutparams.width=20;
lnrdummyspace.setLayoutParams(lnrspnrviewlayoutparams);
lnrimgarrowupdown.setLayoutParams(lnrimageviewlayoutparams);
lnrcountrystatelayoutparams.weight=80;
lnrcountrystatelayoutparams.width=80;
lnrzipcodelayoutparams.weight=20;
lnrzipcodelayoutparams.width=20;
lnrcountrystate.setLayoutParams(lnrspnrviewlayoutparams);
lnrzipcode.setLayoutParams(lnrimageviewlayoutparams);
}
else if ((getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_NORMAL)
{
lnrspnrviewlayoutparams.weight=70;
lnrspnrviewlayoutparams.width=70;
lnrimageviewlayoutparams.weight=30;
lnrimageviewlayoutparams.width=30;
lnrspnrview.setLayoutParams(lnrspnrviewlayoutparams);
lnrimageview.setLayoutParams(lnrimageviewlayoutparams);
lnrdummyspacelayoutparams.weight=70;
lnrdummyspacelayoutparams.width=70;
lnrimgarrowupdownlayoutparams.weight=30;
lnrimgarrowupdownlayoutparams.width=30;
lnrdummyspace.setLayoutParams(lnrspnrviewlayoutparams);
lnrimgarrowupdown.setLayoutParams(lnrimageviewlayoutparams);
lnrcountrystatelayoutparams.weight=70;
lnrcountrystatelayoutparams.width=70;
lnrzipcodelayoutparams.weight=30;
lnrzipcodelayoutparams.width=30;
lnrcountrystate.setLayoutParams(lnrspnrviewlayoutparams);
lnrzipcode.setLayoutParams(lnrimageviewlayoutparams);
}
else if ((getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_XLARGE)
{
lnrspnrviewlayoutparams.weight=85;
lnrspnrviewlayoutparams.width=85;
lnrimageviewlayoutparams.weight=15;
lnrimageviewlayoutparams.width=15;
lnrspnrview.setLayoutParams(lnrspnrviewlayoutparams);
lnrimageview.setLayoutParams(lnrimageviewlayoutparams);
lnrdummyspacelayoutparams.weight=85;
lnrdummyspacelayoutparams.width=85;
lnrimgarrowupdownlayoutparams.weight=15;
lnrimgarrowupdownlayoutparams.width=15;
lnrdummyspace.setLayoutParams(lnrspnrviewlayoutparams);
lnrimgarrowupdown.setLayoutParams(lnrimageviewlayoutparams);
lnrcountrystatelayoutparams.weight=85;
lnrcountrystatelayoutparams.width=85;
lnrzipcodelayoutparams.weight=15;
lnrzipcodelayoutparams.width=15;
lnrcountrystate.setLayoutParams(lnrspnrviewlayoutparams);
lnrzipcode.setLayoutParams(lnrimageviewlayoutparams);
}
else
{
lnrspnrviewlayoutparams.weight=70;
lnrspnrviewlayoutparams.width=70;
lnrimageviewlayoutparams.weight=30;
lnrimageviewlayoutparams.width=30;
lnrspnrview.setLayoutParams(lnrspnrviewlayoutparams);
lnrimageview.setLayoutParams(lnrimageviewlayoutparams);
lnrdummyspacelayoutparams.weight=70;
lnrdummyspacelayoutparams.width=70;
lnrimgarrowupdownlayoutparams.weight=30;
lnrimgarrowupdownlayoutparams.width=30;
lnrdummyspace.setLayoutParams(lnrspnrviewlayoutparams);
lnrimgarrowupdown.setLayoutParams(lnrimageviewlayoutparams);
lnrcountrystatelayoutparams.weight=70;
lnrcountrystatelayoutparams.width=70;
lnrzipcodelayoutparams.weight=30;
lnrzipcodelayoutparams.width=30;
lnrcountrystate.setLayoutParams(lnrspnrviewlayoutparams);
lnrzipcode.setLayoutParams(lnrimageviewlayoutparams);
}
edtcompanyname.setHint(Html.fromHtml(getString(R.string.namecompany)));
edtusertelephone.setHint(Html.fromHtml(getString(R.string.telephone)));
}
Now in devices its working fine but in some devices the ratio isnt maintained like normal devices with small size.
I have tried every possible solutions like smallest width, density factor and creating multiple layouts for the same:
The issued image is given below:
enter image description here
The code for my layout is given below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginEnd="#dimen/pleaseselectonemarginstart"
android:layout_marginLeft="#dimen/pleaseselectonemarginstart"
android:layout_marginRight="#dimen/pleaseselectonemarginstart"
android:layout_marginStart="#dimen/pleaseselectonemarginstart"
android:layout_marginTop="10dp"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:id="#+id/lnrspnrview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="70"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/shadow_white_normal"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<Spinner
android:id="#+id/spnrcountry"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/sfdmedium"
android:gravity="center|left"
android:hint="#string/telephone"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:textColor="#color/edtcolor"
android:textColorHint="#color/hintcolor"
android:textSize="#dimen/textsize" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/shadow_white_normal"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<Spinner
android:id="#+id/spnrbusinesscategory"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/sfdmedium"
android:gravity="center|left"
android:hint="#string/telephone"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:textColor="#color/edtcolor"
android:textColorHint="#color/hintcolor"
android:textSize="#dimen/textsize" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/lnrimageview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_weight="30"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<custom.SquareImageView
android:id="#+id/edtuploadimage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:gravity="center"
android:scaleType="fitXY"
android:src="#drawable/shadow_logo" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clickable="true"
android:fontFamily="#font/sfdmedium"
android:gravity="center"
android:text="#string/uploadlogo"
android:textColor="#color/hintcolor"
android:textSize="#dimen/lessertextsize" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I will be very glad here any possible solution. As I have every solution to this problem from creating multiple layout and smallest width and others.
If you set the weight in xml you don't need to change at run time based on device screen, it will preserve the same ratio for all screens. I have made some correction to you layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/lnrspnrview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Spinner
android:id="#+id/spnrcountry"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Spinner
android:id="#+id/spnrbusinesscategory"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4">
<custom.SquareImageView
android:id="#+id/edtuploadimage"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center" />
</RelativeLayout>
Here i just give the hint how the structure of your layout should've look like. If you follow this, then you do not need to change the weight programatically based on device screen because it will be same for all.

Resize Image to fit Parent layout height and width

I want to fit an Imageview according to Height and width of my RelativeLayout without disturbing its ratio. I am using a LinearLayout with a weightSum and adding two other layouts ie RelativeLayout with weight 20 and LinearLayout with weight 80. I am adding the imageview to the RelativeLayout to take up weight 20 but currently, my image takes up the width to its content and does not follow the width of the parent, thus resulting in pushing the other layout.
My Layout is as below:
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/order_detail_container"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="1dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="100"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20">
<Droid.CenterFitImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:id="#+id/imgArticleThumb"
android:src="#drawable/Icon" />
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:padding="5dp"
android:orientation="vertical">
<Droid.CustomTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txtCategory"
card_view:customFont="Fonts/Roboto-Bold.ttf"
android:textColor="#color/CatTitle"
android:textSize="12sp"
android:text="Category" />
<Droid.CustomTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txtTitle"
android:ellipsize="end"
android:singleLine="true"
card_view:customFont="Fonts/Roboto-Bold.ttf"
android:textColor="#000000"
android:textSize="16sp"
android:text="Title" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
CenterFitImageView.cs
protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
try
{
if (Drawable != null)
{
int w = MeasureSpec.GetSize(widthMeasureSpec);
int h = (int)Math.Ceiling((float)w * (float)Drawable.IntrinsicHeight / (float)Drawable.IntrinsicWidth);
SetMeasuredDimension(w, h);
}
else
base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
}
catch (Exception e)
{
base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
Expected output:
My output:
layout_width="wrap_content" on your root LinaerLayout, is where you have gone wrong. You have to use match_parent if you need your views to be aligned properly according to their weights.
Just remember that if you are using layout_weights and weightSum, then you have to give the root layout and specific width or height depending upon the arrangement. wrap_content, means display your layout, according to whatever size the child is.
So the resulting code will be
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100"
android:orientation="horizontal">
....
....
</LinearLayout>
And this is the output that I got
The first RelativeLayout with the ImageView is taking 20, and the other one with a TextView is taking 80.
First of all why you didn't use Linearlayout instead of RelativeLayout. When you are using all LinearLayout.
I will do this in this way.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/order_detail_container"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="40"
android:gravity="center">
<Droid.CenterFitImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:id="#+id/imgArticleThumb"
android:src="#drawable/Icon" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="60"
android:orientation="vertical"
android:layout_marginLeft="5dp">
<Droid.CustomTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtCategory"
card_view:customFont="Fonts/Roboto-Bold.ttf"
android:textColor="#color/CatTitle"
android:textSize="12sp"
android:text="Category" />
<Droid.CustomTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtTitle"
android:ellipsize="end"
android:singleLine="true"
card_view:customFont="Fonts/Roboto-Bold.ttf"
android:textColor="#000000"
android:textSize="16sp"
android:text="Title" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
Just used android:layout_height="wrap_content" instead of match_parent for ImageView and also set your textview height and width wrap_content.
replace the layout_width="0" of the image with maxwidth.

Categories

Resources