I want to match an image on all layout.
I got an image here:
I tried everything, here is the code
<LinearLayout
android:id="#+id/mid_linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
...>
<TableLayout
android:id="#+id/tiles_tables"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3">
<ImageView
android:id="#+id/tile1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
/>
<ImageView
android:id="#+id/tile2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
/>
here I got the main function:
ImageView[] tiles = new ImageView[9];
for (int i = 0; i <= 8; i++)
{
tiles[i].setImageResource(getResources().getIdentifier("tile_image1","drawable", getPackageName()));
// this is just to get one image for all imageViews
// here stars the problem
tiles[i].getLayoutParams().height = ViewGroup.LayoutParams.MATCH_PARENT;
tiles[i].getLayoutParams().width = ViewGroup.LayoutParams.MATCH_PARENT;
}
I want image to match all tile layout.
Any help would be appreciated.
You Can use list with recyclerView and set grid adapter with 3 colums.
for make square of particular item you need to use ContraintLayout as parent then in chlid apply ratio 1:1 for image.
<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="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="1:1"
tools:src="#drawable/ic_chat_bubble_black_24dp"
/>
</android.support.constraint.ConstraintLayout>
Or you can refer this also
#Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
View view = LayoutInflater
.from(parent.getContext())
.inflate(R.layout.item_list, null);
int height = parent.getMeasuredHeight() / 4;
int width = parent.getMeasuredWidth();
view.setLayoutParams(new RecyclerView.LayoutParams(width, height));
return new ViewHolder(view);
}
Related
I have the following layout:
Each of the Pokemon Team rows has a fixed size of 100dp :
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pokemonTeambuilderContainer"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/pokemonTeambuilderTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/untitled"
android:textSize="16sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/pokemonTeambuilderSpritesLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal" />
</LinearLayout>
</androidx.cardview.widget.CardView>
The Pokemon inside each row are image view created in this adapter :
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
PokemonTeam pokemonTeam = mData.get(position);
for (Pokemon pokemon : pokemonTeam.getPokemonList()) {
CircularImageView ivPokemonSprite = new CircularImageView(mContext);
int color = PokemonUtils.getDominantColorFromPokemon(pokemon.get_id(), mContext);
ivPokemonSprite.setBorderColor(color);
ivPokemonSprite.setBorderWidth(4);
ivPokemonSprite.setCircleColor(PokemonUtils.lighterColor(color, DARK_FACTOR));
Picasso.get().load(PokemonUtils.getPokemonSugimoriImageById(pokemon.get_id(), mContext)).fit().centerCrop().into(ivPokemonSprite);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT, 1);
layoutParams.setMargins(3, 10, 3, 10);
ivPokemonSprite.setLayoutParams(layoutParams);
holder.teamSpritesLinearLayout.addView(ivPokemonSprite);
}
String pokemonTeamName = pokemonTeam.getName();
if (pokemonTeamName != null && !pokemonTeamName.isEmpty()) {
holder.teamTitleTextView.setText(pokemonTeam.getName());
}
}
My problem is when I rotate the device :
I would like to have at least 200dp of height in order to make each row bigger (otherwise I think that in devices like Tablet it will look very small), like this :
you can have alternative layouts for different devices, I think that's the most reliable way https://developer.android.com/guide/practices/screens_support
You can also check the orientation and set up the height accordingly https://stackoverflow.com/a/2799001/12506486
I have a slight problem getting my layout_weight to work. I am creating a custom bottomBar. But i cant make it to stretch as i want it to.
Bottom Bar View
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottom_bar_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/bottom_bar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4"
android:orientation="horizontal"/>
</RelativeLayout>
This is the big container i am adding my buttons (items) to.
Bottom Bar Item
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/bottom_bar_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/arrow_up_float"/>
<TextView
android:id="#+id/bottom_bar_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEXT"/>
</LinearLayout>
This is my items that i add dynamically to the view. But somehow the view is not stretched properly.
But when i hardcode it in. It works. So could it be that layout weight does not work dynamically?
How i add the views (items)
private void updateItems(final List<BottomBarTab> bottomBarTabs) {
if (bottomBarTabs.size() < TABS_COUNT) {
throw new RuntimeException("Not enough buttons for bottomBar");
}
for (int i = 0; i < TABS_COUNT; i++) {
bottomBarTabs.get(i).setOnClickListener(this);
bottomBarTabs.get(i).prepareLayout();
container.addView(bottomBarTabs.get(i));
}
}
Screenshot
LayoutWeight is given to inner components of layout only not on parent Linearlayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:weightSum="2">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/bottom_bar_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:drawable/arrow_up_float"/>
<TextView
android:id="#+id/bottom_bar_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TEXT"/>
</LinearLayout>
public void prepareLayout() {
View view = inflate(getContext(), R.layout.bottom_bar_item,this);
LinearLayout.LayoutParams params =
new LayoutParams(0,LayoutParams.MATCH_PARENT,LAYOUT_WEIGHT);
view.setLayoutParams(params);
if(backgroundColor != null) {
view.setBackgroundColor(backgroundColor);
}
TextView titleText = (TextView) view.findViewById(R.id.bottom_bar_item_text);
titleText.setText(title);
AppCompatImageView imageView = (AppCompatImageView) view.findViewById(R.id.bottom_bar_item_icon);
imageView.setImageResource(iconResId);
}
I changed in my prepareLayout function and put new layoutParams. Because somehow after inflation. The view ignores the weight that was set to it. So i had to force it by code. Maybe this is a android bug?
How do I create a colored Rectangle like above one. Is it possible to control the length of each colored rectangle from java code? (above figure has a single rectangle with 4 colored inside it). I've been searching for answers since a few hours & was unable to find a solution.
EDIT:
I'm using AppCompatActivity and here's content_main.xml & activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.MainActivity"
tools:showIn="#layout/activity_main">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:id="#+id/parentis"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight=".25"
android:background="#dc3838"/>
<View
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight=".25"
android:background="#c4c11f"/>
<View
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight=".25"
android:background="#2c64e7"/>
<View
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight=".25"
android:background="#a11a7d"/>
</LinearLayout>
</RelativeLayout>
activity_main.xml
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
Finally java code:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
View child1= new View(this);
View child2= new View(this);
View child3= new View(this);
View child4= new View(this);
LinearLayout parent = (LinearLayout) findViewById(R.id.parentis);
LinearLayout.LayoutParams childParam1 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
childParam1.weight = 0.15f;
child1.setLayoutParams(childParam1);
LinearLayout.LayoutParams childParam2 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
childParam2.weight = 0.15f;
child2.setLayoutParams(childParam2);
LinearLayout.LayoutParams childParam3 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
childParam3.weight = 0.20f;
child3.setLayoutParams(childParam3);
LinearLayout.LayoutParams childParam4 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
childParam4.weight = 0.50f;
child4.setLayoutParams(childParam4);
parent.setWeightSum(1f);
parent.addView(child1);
parent.addView(child2);
parent.addView(child3);
parent.addView(child4);
}
you can display colored rectangles on the screen by simply setting the backgroundcolor of imageviews:
imageview.SetBackground(R.color.mycolor);
Then you just need to put 4 of those ImageViews inside a LinearLayout and change their size programmatically.
first, you should get the screen size:
private Point getScreenSize(){
WindowManager windowManager = (WindowManager) YamsaferApplication.getContext().getSystemService(Context.WINDOW_SERVICE);
Display display = windowManager.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
}
then write the following code:
int width = getScreenSize().x;
int redWidth = width / 4;
int orangeWidth = width / 4;
int greenWidth = width / 4;
int cyanWidth = width / 4;
LinearLayout container = new LinearLayout(getContext());
container.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(MATCH_PARENT,70);
container.setLayoutParams(params);
// create the red area:
View redView = new View(getContext());
redView.setBackgroundColor(Color.RED);
redView.setLayoutParams(new LinearLayout.LayoutParams(redWidth,70));
container.addView(redView);
// create the orangeArea:
View orangeView = new View(getContext());
orangeView.setBackgroundColor(Color.RED);
orangeView.setLayoutParams(new LinearLayout.LayoutParams(orangeWidth,70));
container.addView(orangeView);
//create the green area
View greenView = new View(getContext());
greenView.setBackgroundColor(Color.RED);
greenView.setLayoutParams(new LinearLayout.LayoutParams(greenWidth,70));
container.addView(greenView);
create the cyan area:
View cyanView = new View(getContext());
cyanView.setBackgroundColor(Color.RED);
cyanView.setLayoutParams(new LinearLayout.LayoutParams(cyanWidth,70));
cyanainer.addView(cyanView);
If you would like to have a simpler layout with just one view and be able to change the sizes of the rectangles dynamically you can create a simple custom view. Override the onDraw(Canvas canvas) method and inside you can do something like this:
int rectWidth = getWidth() / 4;
canvas.drawRect(0, 0, rectWidth, getHeight(), redPaint);
canvas.drawRect(rectWidth, 0, 2 * rectWidth, getHeight(), orangePaint);
canvas.drawRect(2 * rectWidth, 0, 3 * rectWidth, getHeight(), greenPaint);
canvas.drawRect(3 * rectWidth, 0, getWidth(), getHeight(), pinkPaint);
You can create paints like this:
redPaint = new Paint();
redPaint.setColor(*Your red color here*);
If you need the black border around the smaller rectangles you can just add some margin to the drawRect(...) calls above and add canvas.drawARGB(255,0,0,0) above them. For round rectangles you can use the drawRoundRect(...) methods.
use this for same size rectangle .
rectangle.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="horizontal">
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="100dp"
android:background="#dc3838"/>
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="100dp"
android:background="#c4c11f"/>
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="100dp"
android:background="#2c64e7"/>
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="100dp"
android:background="#a11a7d"/>
</LinearLayout>
and this different size rectangle....
<?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="horizontal">
<View
android:layout_width="80dp"
android:layout_height="100dp"
android:background="#dc3838"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#c4c11f"/>
<View
android:layout_width="50dp"
android:layout_height="100dp"
android:background="#2c64e7"/>
<View
android:layout_width="90dp"
android:layout_height="100dp"
android:background="#a11a7d"/>
</LinearLayout>
output like that .......
Note:-set id to each one and change its size using LayoutPrams....
Take a linear layout with android:weightsum="1" .Then create 4 different views inside the linear layout with android:weight=".25"
Set your desired color for each views.
Do not forget to set the orientation of linear layout as horizontal
Sample code:
<?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="wrap_content"
android:weightSum="1"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#color/your_color"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#color/your_color"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#color/your_color"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#color/your_color"/>
</LinearLayout>
This will distribute each color equally.If you not want to distribute each color equally then you can redistribute weight for each views.
To set the view length consisting each color:
First create a blank linear layout in your xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:weightSum="1"
android:id="#+id/ll_parent"
android:orientation="horizontal">
</LinearLayout>
Then in the java file:
LinearLayout parent=(LinearLayout)findViewById(R.id.ll_parent);
View child1= new View(this);
View child2= new View(this);
View child3= new View(this);
View child4= new View(this);
LinearLayout.LayoutParams childParam1 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
childParam1.weight = 0.25f;
child1.setLayoutParams(childParam1);
LinearLayout.LayoutParams childParam2 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
childParam2.weight = 0.25f;
child2.setLayoutParams(childParam2);
LinearLayout.LayoutParams childParam3 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
childParam3.weight = 0.25f;
child3.setLayoutParams(childParam3);
LinearLayout.LayoutParams childParam4 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
childParam4.weight = 0.25f;
child4.setLayoutParams(childParam4);
parent.setWeightSum(1f);
parent.addView(child1);
parent.addView(child2);
parent.addView(child3);
parent.addView(child4);
Is there a way from which I can know what percentage of my layout inside a recyclerView is visible on the Screen.
The layout inflated inside RecyclerView has params of
android:layout_width="match_parent"
android:layout_height="match_parent"
Edit added layout file
Layout file - custom_card.xml
<?xml version="1.0" encoding="utf-8"?
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#id/imageView"
android:layout_alignTop="#id/imageView"
android:scaleType="fitCenter"
android:src="#drawable/image_view_screen" />
</RelativeLayout>
Activity Layout File.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ProgressBar
android:visibility="gone"
android:layout_width="56dp"
android:layout_height="56dp"
android:id="#+id/progress_bar"
android:layout_centerInParent="true"/>
</RelativeLayout>
I am using a Vertical LinearLayoutManager
After much Try I figured it out. If it helps anyone.
Since my layout height was match_parent it was easier for me. But this method will work for everyone with some calculations.
int firstItemPos=mLayoutManager.findFirstVisibleItemPosition();
View firstItemView=mLayoutManager.findViewByPosition(firstItemPos);
int lastItemPos=mLayoutManager.findLastVisibleItemPosition();
View lastItemView=mLayoutManager.findViewByPosition(lastItemPos);
Now all items between firstItemPos and lastItemPos is visible 100%.
For firstItemView-
Math.abs(firstItemView.getY()) / firstItemView.getHeight()
Similarly for lastItemView-
Math.abs(lastItemView.getY()) / lastItemView.getHeight()
use this;
in your adapter;
private final Rect mCurrentViewRect = new Rect();
... your inits...
in your onBindViewHolder;
View firstItemView = linearLayoutManager.findViewByPosition(position);
int pos= getVisibilityPercents(position);
use these metods;
public int getVisibilityPercents(View currentView) {
int percents = 100;
currentView.getLocalVisibleRect(mCurrentViewRect);
int height = currentView.getHeight();
if (viewIsPartiallyHiddenTop()) {
percents = (height - mCurrentViewRect.top) * 100 / height;
} else if (viewIsPartiallyHiddenBottom(height)) {
percents = mCurrentViewRect.bottom * 100 / height;
}
return percents;
}
private boolean viewIsPartiallyHiddenBottom(int height) {
return mCurrentViewRect.bottom > 0 && mCurrentViewRect.bottom < height;
}
private boolean viewIsPartiallyHiddenTop() {
return mCurrentViewRect.top > 0;
}
btw, dont remember get your recyclerView and linearLayoutManager to your adapter in constructor.
For more => https://github.com/danylovolokh/VideoPlayerManager
I have a FrameLayout, containing various overlayed ImageViews:
<FrameLayout
android:id="#+id/australia_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/australia"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/map_australia"
/>
<ImageView
android:id="#+id/nsw"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/map_nsw"
android:visibility="invisible"
/>
<ImageView
android:id="#+id/victoria"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/map_victoria"
android:visibility="invisible"
/>
...etc...
</FrameLayout>
In my code I try and render my FrameLayout:
final Dialog dialog = new Dialog((Context) parent);
dialog.setContentView(R.layout.dialog_region);
FrameLayout fl = (FrameLayout) dialog.findViewById(R.id.australia_frame);
final int height = fl.getHeight();
Validate.isTrue(height > 0);
My code crashes with:
java.lang.IllegalArgumentException: The validated expression is false
at org.apache.commons.lang3.Validate.isTrue(Validate.java:180)
The line that's crashing is Validate.isTrue(height > 0);.
Why does my FrameLayout not have a height? Is there a way to get the exact px height and width that my FrameLayout is rendering at?
This may help you
FrameLayout target = (FrameLayout) dialog.findViewById(R.id.australia_frame);
target.post(new Runnable() {
#Override
public void run() {
int width = target.getWidth();
int height = width/2;
/*your code with width and height*/
}
});
}