I have a list view with a custom layout. In the layout I display a series of comments. The problem is the image I've set as the background gets stretched when the comments are too long.
I know I could probably use a nine patch but the question is would it really work? If not what alternative do I have?
Could someone recommend the best of handling this.
<TextView android:id="#+id/txtCommentBody"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="" android:textColor="#color/black" android:paddingTop="25dip"
android:paddingLeft="5dip" android:paddingRight="5dip"
android:layout_marginTop="10dip" android:background="#drawable/comment_bg">
</TextView>
A nine-patch would work provided you pad the top of your text so it's below the part that won't scale. Alternatively, truncate all your comments to some reasonable length that will fit, and let people click them to read the whole thing.
Related
Android Layouts have changed a bit since I've been away from the topic and I never had to get this deep into it before, so forgive what I hope is a relatively simple question.
Say you are developing a card game with a human player and 3 computer or remote opponents (not quite accurate, but close enough for my purposes). My plan is that there will be four children Layouts representing each of the player's "hands". The ones on the left and right will display their images in top down order. The ones on the top and bottom will display their images in left-to right order.
It's reasonable to assume Left and Right Layouts will have identical (gravity, right?) behavior (if different start and end pixels). Same goes for Top and Bottom. If it matters, usage will be restricted to Landscape mode.
What is the correct method of getting said childLayouts into their correct locations? What's the correct top level layout(s) to use for this? What should the player's children layouts be? (I have assumed GridLayouts, but it seemsa host of others might work too -- they will do nothing but hold a number of dynamically generated ImageViews)
Once I've got layouts in the right location, I'm good...I think.
Tx in advance
The answer apparently is to use the layout_width and layout_height params for a gridLayout specifying where they need to be inside of a relativeLayout (in this case I know I am using a 1200 x 600 device, but I'm sure there is a better way to go about this.
<GridLayout
android:layout_width="500px"
android:layout_height="100px"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/NORTH">
</GridLayout>
<GridLayout
android:layout_width="500px"
android:layout_height="100px"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/SOUTH">
</GridLayout>
<GridLayout
android:layout_width="100px"
android:layout_height="500px"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:id="#+id/WEST">
</GridLayout>
<GridLayout
android:layout_width="100px"
android:layout_height="500px"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:id="#+id/EAST">
I'm building an app with the Fresco library, by Facebook.
I'm having issues trying to understand how I should implement a view using Fresco, if my App will be usable among different devices. As you can see in the images attached, I have a Nexus6, a NexusOne and a Nexus7.
All of them have the same Fresco Drawee, (200dp x 200dp). As I've read through the documentation of Fresco, it is necessary, and mandatory, to fix the image size. However I'm having trouble understanding how can I achieve something as simple as having an ImageView using 50% of the image width using Fresco.
The desired result would be to have an image that uses half of the screen (in terms of width), and leave the rest of the space for the different texts (title+descriptions shown).
Normally I would do this using weight's, however I'm not sure how to achieve this with the library, or what the best practices would be.
Based on this question (and documentation), I'm not sure if adding a listener is the best option. I'm just failing to understand how Facebook or other applications who use this library, do it for different devices.
Thanks in advance
The code shown of this images is basically the following:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/my_image_view"
android:layout_width="200dp"
android:layout_height="200dp"
fresco:actualImageScaleType="focusCrop"
fresco:backgroundImage="#drawable/user_icon"
fresco:fadeDuration="300"
fresco:placeholderImage="#color/common_action_bar_splitter"
fresco:placeholderImageScaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#+id/my_image_view">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Title 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#color/menu_color"
android:text="Description 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Title 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#color/menu_color"
android:text="Description 2" />
</LinearLayout>
</RelativeLayout>
UPDATE:
I also don't know how to get a full-screen image. If we must either specify the dimensions, or use match_parent, but using match_parent on both would use the whole parent, how can I get something like the image showing the Facebook image?.
I believe #Gueorgui Obregon's is a good idea, however I'm still wondering if the problem is the design pattern of using 50% of the screen for a picture. For instance, take 2 cell phone models with the same dimensions (MDPI for example), but one of them is a little bit wider than the other. Using the dimensions approach I'd get than on one mobile it takes half of the screen, but on the other one, it would take a little bit more/less.
In summary: Where is the problem? Is thinking in percentages a bad idea when designing views? Should I tell my designer that it's a bad design idea for android to use percentages? More importantly, how can Facebook achieve something like the last photo (where the pictures use a ~33% of the screen)?
Your could use dimensions.xml for different values folder for different screens.
res/values/dimensions.xml
res/values-sw600dp/dimensions.xml -> 7+ inches
res/values-sw720dp/dimensions.xml -> 10+ inches
Add on each dimensions the desire value
res/values/dimensions.xml
<dimen name="my_image_view_width">200dp</dimen>
<dimen name="my_image_view_height">200dp</dimen>
res/values-sw720dp/dimensions.xml
<dimen name="my_image_view_width">400dp</dimen>
<dimen name="my_image_view_height">400dp</dimen>
Then simply use #dimen/my_image_view_width and #dimen/my_image_view_height in your SimpleDraweeView like this
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/my_image_view"
android:layout_width="#dimen/my_image_view_width"
android:layout_height="#dimen/my_image_view_height"
fresco:actualImageScaleType="focusCrop"
fresco:backgroundImage="#drawable/user_icon"
fresco:fadeDuration="300"
fresco:placeholderImage="#color/common_action_bar_splitter"
fresco:placeholderImageScaleType="fitCenter" />
Hope this helps!!
Okay this is probably a newb question but I can't find any solutions on google.
I'm a new android programmer and I made a simple hello world type program. I didn't do any funny configurations in the layout xml file but for some reason on certain devices the screen looks really zoomed in and almost kinda pixelated.
Is there some kind of common reason for this? All I have on my linear layout is an EditText widget, a textview widget, and two button widgets.
My Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10px"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditText
android:id="#+id/txtUser"
android:layout_height="wrap_content"
android:layout_width="200px"
android:text="" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Submit"
android:onClick="userSubmit" />
</LinearLayout>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Clear Screen"
android:onClick="clearScreen" />
<TextView
android:id="#+id/txtMain"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16px"
android:text="Ready\n\n"
/>
</LinearLayout>
It's probably some version of the screen compatibility mode which attempts to make old apps compatible with newer large displays, scaling the UI up as necessary. Scaling causes pixelated look as well.
If you don't specify a targetSdkVersion in your manifest, it defaults to 1, enabling all compatibility modes.
Solution: Specify an actual target SDK version you're developing your app on. Usually it should be the highest one available.
It is because you should use DP dp units instead of Pixels px since DP works with the screen density. Remove things like android:layout_width="200px" and change them to android:layout_width="200dp"
PS: note the following:
Generally you do not want to set dp values, you should do pretty well using wrap_content or match_parent, since the LinearLayout calculate widths and heights for you. Try to resist the temptation of setting fixed values to views, unless is extremely necessary. As an experience Android developer I tell you that cases you wanna set fixed width/height are cases like:
You are downloading images from the Internet and you want the ImageView that will show it to be displayed as a placeholder until the download completes.
You're creating an horizontal gallery and you need to give it a maximum height so it wont surpass the screen.
In resume, complicated stuff like that. If you're starting, try to learn to use wrap_content and match_parent, it will save you a lot of headache later on :)
Am running into something that I have spent hours trying to get working. I have tried searching but what stumbles me is how to search a resolution for this as it is a strange and apparently not-so-common issue?
All I want is to be able to stretch a 'dash of paint' vertically using the y-axis scalable area marked as a single pixel on the left. My 9patch file is below:
I have gotten this to HALF-work as can be seen (ignore the top horizontal line, this is a separate imageview):
As you can see, I am missing what I call the 'Non-scalable end' which is basically the static part of the 9patch file (unmarked on left y-axis scalable area)
The code in the layout is simple:
<ImageView
android:id="#+id/repeater"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/PlayersList"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/PlayersList"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/repeater" />
(file is named repeater.9.png and stored in res/drawable-xhdpi)
Note: For some reason this works exactly as required in the 9-patch tool, but doesn't seem to work in eclipse (earlier screenshot):
Is this the effect you were looking for ?
I have attached images for all drawables let me know if it worked.
You can use http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
to generate 9 patch images instead of making it form default tools.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_example"
android:scaleType="fitXY"
android:contentDescription="#null"
android:adjustViewBounds="false" />
I've created a 9-patch background for EditText.
XML code:
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:background="#drawable/searchnew"
android:ems="10"
android:hint=" Search recorded files..."
android:textColor="#646464" >
</EditText>
XML Preview:
Real device:
9-patch image:
To be honest it isn't even bothering me that much, but I'm still wondering why the hell is it happening? Why is the EditText background wider and higher on real device?
Bonus unrelated question: any idea how could I get rid of the "ugly" corners? You can see pixels individually if you look closely, but I want a pixel perfect design.
Just found the reason after doing some more research. The text inside the EditText has some default padding. That's why the 9-patch was stretched more when I ran it on real device. All I had to do was to set padding to 0.
Setting top padding to 0 example:
android:paddingTop="0dp"
Do it like this for top, bottom, left, right and background will stay fixed :)