Picasso centerCrop and fit get different results - java

I want to insert an image to an ImageView, which gets used as a background. This background is in a RecyclerView. When it gets loaded the first time, it looks like this:
But when I scroll to another item and scroll back, it looks like this (it should always look like this):
Here i add the image:
public void onBindViewHolder(StoryViewHolder holder, int position) {
holder.cardView.setMinimumHeight(height/3);
holder.layout.setMinimumHeight((int) ((float) width / 4));
//set image
Picasso.with(activity).load(MainPostAdapter.URL + 140 + ".png").
transform(new BlurTransform(holder.background.getContext())).fit().centerCrop().into(holder.background);
holder.background.setAlpha(0.25f);
}
And this is the image itself:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/story_view_background"/>
What could the problem be?
EDIT:
whole XML (It doesn't show all of the code. Here is also pastebin:http://pastebin.com/8rJvSx7V):
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/story_view_background"/>
<RelativeLayout
android:id="#+id/story_view_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="50px">
<ImageView
android:id="#+id/story_view_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/story_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="13sp"
android:layout_below="#+id/story_view_image"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</FrameLayout>

try to set android:layout_height="150dp" for your CardView (don't use px!). Its child FrameLayout is unnecesarry (CardView is extending FrameLayout and have set same attributes set), remove it.
It's not so well written, all your Views have match_parent set for height, besides Image and Text views... Your item is probably trying to fit RecyclerView height in this case ("whole screen") and is measured without image at first time (Picasso async downloading, setting image when view is already measured). But when you inflate your View again (scroll and recycle) new list item will be measured differently, because Picasso will insert your image "in runtime", no need to async fetching (cache)

Related

Android VideoView hides Layout Elements

I have the following layout (cut down to a minimal example)
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<VideoView
android:id="#+id/videoView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/free_text_default_bg"
android:gravity="center_horizontal"
android:padding="#dimen/free_text_padding"
android:text="background element is a video view" />
</RelativeLayout>
The problem is, that if I move the EditText around (it has a drag listener attached to it), it dissapears at a certain point of the screen as you can see in this screenshot.
The problem seems to only appear when I have a VideoView. Even if I don't show a video.
When I replace it with e.g. an ImageView there is no problem at all.
So my question is, what's happening and how can I resolve this?
Thanks for your time!
UPDATE 1: This only happens if the VideoView has
android:layout_height="match_parent"
when I set it to some "dp" value everything works just fine...
I did not find a solution to my question jet but I have found a workaround:
Once the layout is finished, I get the height from the parent container, subtract 1px and set this as new height for the video view.
The 1px is barely visible...
Here is the code:
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
ViewGroup.LayoutParams layoutParams = videoView.getLayoutParams();
layoutParams.height = parentView.getHeight() - 1;
videoView.setLayoutParams(layoutParams);
}

Fill Listview row height with view when row is resized

I am facing a seemingly simple issue but after many hours on the case now I cannot figure it out. I am trying to create a ListView with rows that contains an ImageView which re-sizes based on the ImageView's image. This works through subclassing the ImageView and giving it a height ratio to follow since I know the image size before loading it:
Custom subclass of ImageView onMeasure method:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (mHeightRatio > 0.0) {
// set the image views size
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = (int) (width * mHeightRatio);
setMeasuredDimension(width, height);
}
else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
In the adapter I set the ratio of the ImageView:
holder.couponImage.setHeightRatio(359.0/1080.0);
The Problem is that I also want an overlay on the ImageView in form of a RelativeLayout with a semi-transparent background and containing a TextView. The issue is that when the ImageView Rezises the overlaying RelativeLayout doesn't, the white in the image below is the RelativeLayout:
The row XML looks like this:
<?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"
>
<se.bdms.babydirect.views.DynamicHeightImageView
android:id="#+id/couponImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/coupon_01"/>
<RelativeLayout
android:id="#+id/relRedeemedOverlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/almostWhiteTransparent"
android:gravity="center"
>
<se.bdms.babydirect.views.TextViewMega
android:id="#+id/lblRedeemed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextField"
android:textColor="#color/headlineGray"
android:layout_centerInParent="true"
android:textSize="24sp"/>
</RelativeLayout>
</RelativeLayout>
I have tried multiple solutions to fix this among them: this and this.
I have succeeded in making the RelativeLayout the same size as the ImageView by subclassing that in the same way the ImageView is subclassed but then then TextView is still not centered vertically and stays at the top like nothing happened.
I would like to let the RelativeLayout know that the row height has changed and fill the row and then the TextView centers itself based on the new height.
Does anyone have a clue what to do about this?
Any help is greatly appreciated!
I think the problem is just that you need to tell the overlay that it is the same height as the image. You'll be able to do that because the parent is already a RelativeLayout. I'm showing aligning the child RelativeLayout to the ImageView, but you could also use alignParentTop="true" and alignParentBottom="true". Also, I think best is if the parent view has height wrap_content, and both children are match_parent.
Once your overlay is the full height of the item, your centerInParent should work to center it within the overlay (which it already is).
<?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="wrap_content"
>
<se.bdms.babydirect.views.DynamicHeightImageView
android:id="#+id/couponImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/coupon_01"/>
<RelativeLayout
android:id="#+id/relRedeemedOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignTop="#id/couponImage"
android:layout_alignBottom="#id/couponImage"
android:background="#color/almostWhiteTransparent"
android:gravity="center"
>
<se.bdms.babydirect.views.TextViewMega
android:id="#+id/lblRedeemed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextField"
android:textColor="#color/headlineGray"
android:layout_centerInParent="true"
android:textSize="24sp"/>
</RelativeLayout>
</RelativeLayout>
Let me know whether that works.

ListView headers without list item separators

I'm currently writing an Android app that uses ListView with headers. It works okay, but not really as I want. Every item in ListView has 1-2px separator at the top and bottom of it. So does the header - and that's the problem. It does not look very pretty...
The interesting part is that system apps (like Settings, for instance) does not have such problem.
Here's my example adapter:
setListAdapter(new BaseAdapter() {
#Override
public int getCount() {
return 10;
}
#Override
public Object getItem(int i) {
return i;
}
#Override
public long getItemId(int i) {
return i;
}
#Override
public View getView(int i, View view, ViewGroup viewGroup) {
View v = ((LayoutInflater)getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(i % 3 == 0 ? R.layout.list_header : android.R.layout.simple_list_item_1, viewGroup, false);
((TextView)v.findViewById(android.R.id.text1)).setText("test");
return v;
}
});
And list header layout file:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello, World"
style="?android:attr/listSeparatorTextViewStyle">
</TextView>
So the question is: how to get rid of the item separators between headers and regular items, just like, for example, Settings app does?
EDIT:
After reading the answers, I want to clear one thing up. I do not want to remove separators completely. I want to remove them only between the header items and regular items. Also, half-measures like "removing separators completely and adding them on some items" do not satisfy me, too.
It seems that you have to use a custom item view for dividers and a little workaround. Let me explain how to manage this:
Do not use the default dividers, remove it.
Create a custom layout with a View at bottom to be the subline for headers.
Create a custom layout with a View at top to have the divider for items.
Then, the two types of dividers will be glue to make only one subline for header part, so dividers should have the same height in order to make a good subline. This will avoid to have a divider above the header sections but keeping the dividers for items list.
Therefore, let me show some code to achieve it. First, don't forget to avoid default divider on the ListView:
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#null"
android:dividerHeight="0dp"/>
Create an item layout with a divider at top set to 1dp (or whatever):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- this is the divider for items -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"/>
<!-- and the rest of item's content in another ViewGroup -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
<TextView
android:id="#+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:textColor="#android:color/white"/>
</LinearLayout>
</LinearLayout>
Finally, the header layout with a divider at bottom (with the same height as item's divider):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/item_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
style="?android:attr/listSeparatorTextViewStyle"/>
<!-- this is the ("half-")divider for header section -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"/>
<!-- this view above will be merged with item's dividers -->
</LinearLayout>
And it gives this result:
Remove the style you have set for the header TextView
Create your own custom style with required divider and set it to TextView
<style name="CustomListSeperatorTextViewStyle" parent="Widget.TextView.ListSeparator">
<item name="android:background">#drawable/your_own_here</item>
Seperator is due to the style you have set with the textview, just remove the style hope this will work.
I just found these parameters that seem to be what you need, you can try adding them in your ListView:
android:headerDividersEnabled="false"
android:footerDividersEnabled="false"
The documentation is available here and indicates:
When set to false, the ListView will not draw the divider after each header view. The default value is true.

Creating login layout like in facebook app for android

I want to make an app with a login activity/layout similar to what Facebook app has. What I mean is when text field is focused soft keyboard pushes the entire view up but not squashing a logo. I have tried android:windowSoftInputMode="adjustPan/adjustResize" but it is not what I was trying to achieve.
I found this question on SO perhaps it will make things clearer, but it has no solution to the problem.
I have also tried various layouts types but it soft keyboard only pushes the focused < EditText > up. Please guide me.
UPDATE:
<?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="fill_parent"
android:orientation="vertical"
android:background="#DDDDDD">
<RelativeLayout
android:height="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:background="#ff0000">
<ImageView
android:layout_centerVertical="true"
android:layout_height="fill_parent"
android:layout_width="fill_parent"></ImageView>
</RelativeLayout>
<RelativeLayout
android:height="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent"
android:background="#00ff00">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0000ff"
android:height="0dp" >
<Button
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Log in"
/>
<EditText
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="4dp"
android:hint="password"
android:inputType="textPassword" >
</EditText>
<EditText
android:id="#+id/editText1"
android:hint="login"
android:padding="4dp"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" ></EditText>
</RelativeLayout>
</LinearLayout>
UPDATE working solution
I can't paste here the entire xml file, but the structure should be enough.
Based on Gabe Sechan's answer.
Layout{
Layout top weight 1
Layout mid weight 1
Layout bot weight 1
}
Child layouts have set to:
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" // should be changed accordingly to your layout design.
And here is a Java code for the activity(keyboard up/down):
View top, mid, bot;
final View activityRootView = findViewById(R.id.loginLayout);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int heightDiff = activityRootView.getRootView()
.getHeight() - activityRootView.getHeight();
if (heightDiff > 100) { //keyboard up
mid.setVisibility(View.INVISIBLE);
top.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 0f));
bot.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 1f));
} else {// keyboard down
// v.setVisibility(View.VISIBLE);
mid.setVisibility(View.VISIBLE);
top.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 2f));
bot.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 3f));
}
}
});
On keyboard up you need to change weights accourding to keyboard up design and on keyboard down change back to the default(layout that you've set via xml/java). I've tested the code on 2.3.x and up.
And don't forget to use android:inputType="textFilter" for the login&password EditText's to remove suggestions on input and save some pixels. In your manifest for the activity android:windowSoftInputMode="adjustResize|stateHidden". stateHidden is used so that keyboard won't be up when activity loads. Hope it helps. Good luck.
They're doing it with relative layouts, adjustResize, and android:layout_centerVertical. Basically, they have a linear layout for their main layout, with 3 equally weighted relative layouts inside of it. Each is set to 0dp height, so they take up equal thirds of the screen. The top RelativeLayout holds the logo, centered vertically. The middle holds the login fields and button, centered vertically one on top of the other. The bottom one holds the copyright text, aligned to bottom. The end result is that when the keyboard comes up, the 3 relative layouts get resized to take 1/3 of the new screen. Then their elements are centered in the new screen.
Remember you need the adjustResize window mode to get this, if you use pan it will just move up and the logo will scroll off center.
In Eclipse, go to File|New|Other and in the Wizard that follows, select Android Activity, then on the next page, select LoginActivity from the list of activities. This has the exact layout you're talking about, and you can use that as a framework. It uses a ScrollView to achieve the effect you're looking for.

How can I make my android dialog fullscreen?

I already tried all things I could find (on stackoverflow and the net) but I somehow cannot set my dialog to fullscreen. It has a scrollview with a textview in it, and when there is not much text in the textview the scrollview is not fullscreen. How can I force it to be fullscreen even when there is not much text visible ?
I create the dialog like this:
final TextView box;
final Dialog info = new Dialog(cx);
final ScrollView scroll;
info.setContentView(R.layout.dialoginfo);
info.setTitle("Info");
info.setCancelable(true);
info.getWindow().setFlags(LayoutParams.FLAG_FULLSCREEN, LayoutParams.FLAG_FULLSCREEN);
scroll = ((ScrollView) info.findViewById(R.id.scrollviewinfo));
scroll.setPersistentDrawingCache(ScrollView.PERSISTENT_NO_CACHE);
scroll.setScrollbarFadingEnabled(false);
box = (TextView) info.findViewById(R.id.infotext);
box.setText(text);
info.show();
This is the xml:
<?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="fill_parent"
android:orientation="vertical"
android:id="#+id/infolayout"
>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/ImageView01"
android:layout_weight="1.0"
android:id="#+id/scrollviewinfo">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/infolayout2">
<TextView android:layout_margin="5dip" android:layout_width="fill_parent" android:layout_height="wrap_content"
android:id="#+id/infotext"
android:textSize="8sp"
android:text=""/>
</LinearLayout>
</ScrollView>
</LinearLayout>
It looks like your ScrollView has its height set to wrap_content, I'd first try replacing it with fill_parent.
Here are some other resources that may help you:
How can I get a Dialog style activity window to fill the screen?
I've never used the setFlags() method, so this may give you the same results. Basically try replacing
info.getWindow().setFlags(LayoutParams.FLAG_FULLSCREEN, LayoutParams.FLAG_FULLSCREEN);
with
info.getWindow().setLayout(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
Alternatively, if you wanted more exact control over the height, you can create an instance of layout params, as the first answer here describes:
How to make an alert dialog fill 90% of screen size?
You can also use this code to get the screen size, if you wanted to modify it to be slightly smaller than full screen.
Display display = ((WindowManager) getSystemService(WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();
There are quite a few other ways to get the current screen size, too, this is just one example. Good luck!
Have you tried setting layout_height of the ScrollView to "match_parent" (and you can set the LinearLayout to "match_parent" too, though I don't think it's necessary)?. I'm guessing it shrinks when there isn't much text because it's set to "wrap_content". Try this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/ImageView01"
android:layout_weight="1.0"
android:id="#+id/scrollviewinfo">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/infolayout2">
...
</LinearLayout>
</ScrollView>
Try wrapping your dialog custom layout into RelativeLayout instead of Linear Layout. That worked for me.

Categories