Android Linear Layout adapting height to elements - android

I have the following Horizontal Linear Layout inside a Vertical Linear Layout :
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#color/White"
android:orientation="vertical">
<TextView
android:id="#+id/pokemonTeambuilderTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top|start"
android:paddingStart="10dp"
android:paddingTop="10dp"
android:paddingEnd="10dp"
android:paddingBottom="5dp"
android:text="#string/placeholder"
android:textColor="#color/Black"
android:textSize="16sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/pokemonTeambuilderSpritesLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
And programmatically I set the elements this way in my adapter :
for (Pokemon pokemon : pokemonTeam.getPokemonList()) {
String pokemonNickname = pokemon.getNickname();
String pokemonName = pokemon.getName();
ImageView tvPokemonSprite = new ImageView(mContext);
int color = PokemonUtils.getDominantColorFromPokemon(pokemon.get_id(),mContext);
tvPokemonSprite.setImageResource(PokemonUtils.getPokemonSugimoriImageById(pokemon.get_id(), mContext));
tvPokemonSprite.setScaleType(ImageView.ScaleType.FIT_CENTER);
PokemonUtils.setResourceAndBorderBackgroundColorToElementFromColor(tvPokemonSprite,R.drawable.circle_shape,color,PokemonUtils.lighterColor(color, DARK_FACTOR));
TableLayout.LayoutParams layout = new TableLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1);
tvPokemonSprite.setLayoutParams(layout);
holder.teamSpritesLinearLayout.addView(tvPokemonSprite);
}
However , if I rotate my phone , the elements don't fit completly in the Linear Layout , the bottom and the top is half cutted , also if the horizontal linear layout only have 1 Pokemon , instead of adapting to 1 slot it expands the WHOLE view (as you can see with charizard)

Add below code to imageview:
tvPokemonSprite.setAdjustViewBounds(true)
i hope work for you.

Related

How do I programmatically distribute child views evenly in a horizontal linear layout?

I have a view like this:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/sample_icon_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:src="#drawable/active_state"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/sample_item_bar_iv"
android:layout_width="128dp"
android:layout_height="1dp"
android:background="#color/brown_grey"
app:layout_constraintBottom_toBottomOf="#id/sample_icon_iv"
app:layout_constraintStart_toEndOf="#id/sample_icon_iv"
app:layout_constraintTop_toTopOf="#id/sample_icon_iv"
/>
<TextView
android:id="#+id/leave_planner_item_date_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="26 March"
app:layout_constraintEnd_toStartOf="#+id/sample_item_bar_iv"
app:layout_constraintStart_toStartOf="#+id/sample_icon_iv"
app:layout_constraintTop_toBottomOf="#+id/sample_icon_iv"
tools:text="26 March" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
I need to inflate this view x times and show those evenly distributed in a horizontal scrollable fashion. I tried adding weight 1 to the inflated views before adding to the parent, but still doesn't seem to work. I also face spacing issues between the bar and the next icon. But if I remove the margin, I am not able to center the text under the icon.
This is how I would like to see the views
How do I achieve this?
Wrap your views in LinearLayout. Determine how many childs you want it to have and then set it like so:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
This example will create 3 buttons that take up the entire width of the screen, each button will get 1/3 of the screen width.
To do so programmatically:
LinearLayout layout = findViewById(R.id.yourLayoutID);
Button b = new Button(); // Or, if you want something more complicated than a simple object, you can do View v = inflater.inflate(R.layout.your_layout, null);
LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT);
p.weight = 1;
b.setLayoutParams(p);
layout.addView(b);
that's the general idea

Top elements are hidden in ScrollView with white space at bottom. How to fix the issue

I am adding text views to a linearLayout which is in a scrollView.
in 80 tags around 30 are lost on top. And there is some white space at the bottom of the scrollView. As you can see in the picture, top tag is cut(top of scrollView).
ScrollView Xml:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/backLayout"
android:layout_above="#+id/buttonSeparator"
android:background="#color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/tagsLayout"></LinearLayout>
</ScrollView>
text item xml:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="38dp"
android:layout_marginLeft="10dp"
android:background="#drawable/tag_background"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textColor="#color/text_color"
android:textSize="14sp"
android:alpha="0.70"
android:paddingLeft="15dp"
android:paddingRight="15dp" />
</RelativeLayout>
Adding text views to linear layout:
for(String tag: tagList){
View tagHeader = LayoutInflater.from(mcontext).inflate(R.layout.tag_item, null);
TextView tagText = (TextView) tagHeader.findViewById(R.id.tag);
tagText.setText(tag);
tagsLayout.addView(tagHeader);
}
I found few solutions that said to remove gravity from the layout. still same after removed the gravity parameter. fillViewport set to true did not work either

Huge gap between imageview and textview

On my activity with fragments, I've some pages that have an image and some that don't. The layout is like this: Textview-Imageview-Textview, so when I there isn't an image I want the Textviews to be below each other. This is my XML:
<?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"
android:background="#006400">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/handling"
android:textColor="#ffffff"
android:textSize="20dp" />
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/stilling"
android:layout_below="#id/handling"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAlignment="center"
android:text="New Text"
android:id="#+id/arabisk"
android:layout_below="#id/stilling"
android:layout_gravity="center"
android:textSize="18dp"
android:textColor="#ff0000" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
This is what I get
EDIT:
My array of images
int[] billede = new int[18];
billede[1] = R.mipmap.sojle1;
billede[2] = R.mipmap.sojle4;
billede[3] = R.mipmap.sojle2;
billede[4] = R.mipmap.sojle3;
billede[6] = R.mipmap.sojle4;
billede[8] = R.mipmap.sojle6;
billede[10] = R.mipmap.sojle7;
billede[12] = R.mipmap.sojle8;
billede[15] = R.mipmap.sojle9;
stilling.setImageResource(billede[mPage]);
return view;
Set the visiblity to GONE
in your xml
android:visibility="GONE"
or via code
imageView.setVisibility(View.GONE);
Set ImageView visibility to Gone and your text view must be one below other like you want. Like this
stilling.setVisibility(View.GONE);
Use LinearLayout instead of RelativeLayout. And set visible View.GONE to hide ImageView.

Android: ScrollView does not re-size when adding child views

I have a ScrollView that I am trying to populate dynamically. Here is the XML that contains the ScrollView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f6f5f5" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#40ff0000"
android:paddingBottom="70dp"
android:paddingTop="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<LinearLayout
android:id="#+id/option_list_container"
android:background="#40ffff00"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#292929"
android:paddingBottom="5dp"
android:paddingLeft="15dp"
android:paddingTop="5dp"
android:text="Stap 3/5"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
</ScrollView>
And here is the XML for the element I'm inserting in the ScrollvVew:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<np.custom.FontIcon
android:id="#+id/option_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/calendar_circleround"
android:textSize="40sp"
android:gravity="center"
android:text="#string/planit_selection_empty_circle"
android:textColor="#292929" />
<TextView
android:id="#+id/option_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_marginLeft="10dp"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
This is the code I use to populate the scrollview:
ArrayList<String> g = new ArrayList<String>();
g.add("Fix a Bug");
g.add("Buy a new PC");
g.add("Make Coffee");
g.add("Take a Break");
g.add("Don't do that");
g.add("Throw your hands in the air like you just don't care!");
LinearLayout optionListLayout = (LinearLayout) rootView.findViewById(R.id.option_list_container);
LayoutInflater inflater = LayoutInflater.from(getActivity());
for(String p:g){
View v = inflater.inflate(R.layout.planit_option_item, null);
TextView optText = (TextView) v.findViewById(R.id.option_text);
optText.setText(p);
optionListLayout.addView(v);
}
This all works almost fine, except that the sizes of the ScrollView and the LinearLayout it contains do not come out as I expected. This a screenshot of that it looks like on a device, which shows text being cut out when it goes to a second line:
So how can I make sure the linear layout re-sizes to accommodate children views of different heights?
Your issue isn't the ScrollView not accommodating new children. The problem is that the text, when it spans more than one line, is being clipped due to layout parameters in R.layout.planit_option_item. Try changing the TextView of ID #+id/option_text so that its height is wrap_content.
Change your TextView for the ScrollView element to accommodate two lines:
...
<TextView
android:id="#+id/option_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_marginLeft="10dp"
android:maxLines="2"
android:singleLine="false"
android:textAppearance="?android:attr/textAppearanceMedium" />
...
This is not an issue with ScrollView, it's an issue with the specifications of the element you are inserting into the ScrollView. If you expect there may be more than 2 lines of text in some cases set maxLines = X where X is the maximum number of lines you expect.
Please let me know if this does not work and I would be happy to help further.

Large text coming wrapped in a Textview

This is what is expected to come-----
The first text view:
Fox Pro
Drag
Main View Item
This is what is coming-----
And the other text view:
Fox Pro
Drag
Main View Item
So if the text is long enough to certain limit, it is coming wrapped in a next line.
Please note that the problem is only coming in the higher ppi 7inch device(~213 ppi).
The same thing is coming fine in lower ppi 7inch device(~160 ppi).
I tried to do the following programatically,
setting the width to full match_parent-------
DisplayMetrics dm = new DisplayMetrics();
// Display device dpi value of Y in pixels
int screenDPIy = (int)dm.ydpi;
if(screenDPIy > 180)
{
entrytype.setTextSize(14);
entrydate.setTextSize(12);
entrytype.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
entrydate.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
}
else
{
entrytype.setTextSize(16);
entrydate.setTextSize(14);
}
No Success.
My Layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/mapentrieslist"
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#drawable/selector"
android:gravity="left|center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_weight="0.9"
android:orientation="horizontal"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.47"
android:orientation="vertical" >
<TextView
android:id="#+id/entrytype"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fox Pro"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/vehicle_source"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:visibility="gone"/>
<TextView
android:id="#+id/entrydate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#989898"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
You have a number of options:
Add a marquee that automatically scrolls : textView marquee
Place the TextView inside of a Horizontal ScrollView instead of a LinearLayout
Set the TextView to put an ellipses at the end : Detect whether TextView in ListView is ellipsized
The first two preserve the text while the third removes the extra characters.

Categories

Resources