How to fit layout background Image

Question

I wanna use one image ( 1280x800 ) for two device with different screen size and same density .

Screen sizes are 1280x800 and 320x480 .

image is nine patch ( with content area ) . I want to use image for a row's background , that have a textview . and don't use manual padding for text ( i wanna use content area ) .

if i use this xml :

<RelativeLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
xmlns:foo="http://schemas.android.com/apk/res/pak.name"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@layout/menu_selector"
android:gravity="right|center_vertical">

<pack.name.TextViewPlus
    android:id="@+id/menutext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#3D1E00"
    android:textSize="@dimen/TitleNormalM"
    foo:customFont="font.ttf"
    android:text="blah blah"/>

output in emulator is:

and if i use this xml:

<RelativeLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
xmlns:foo="http://schemas.android.com/apk/res/pack.name."
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingRight="15dp"
android:paddingLeft="15dp">

<ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@layout/menu_selector"
    android:scaleType="fitCenter"
    />

<pack.name..TextViewPlus
    android:id="@+id/menutext"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#3D1E00"
    android:textSize="@dimen/TitleNormalM"
    foo:customFont="font.ttf"
    android:gravity="right|center_vertical"
    android:text="blah blah blah"/>

output is:

and this is listview xml (that i think not important for this question) :

<ListView
    android:id = "@android:id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:divider="@null"
    android:dividerHeight="3dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:cacheColorHint="@android:color/transparent"
    android:listSelector="@android:color/transparent"
    />

and its menu_selector xml code that is in layout folder:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed -->
<item android:state_pressed="true" android:drawable="@drawable/bg_menu_pressed" />
<!-- selected -->
<item android:state_selected="true" android:drawable="@drawable/bg_menu_focused" />
<!-- selected & pressed -->
<item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/bg_menu_pressed" />
<!-- default -->
<item android:drawable="@drawable/bg_menu" />

score 2 · Accepted Answer · answered Aug 13 '12 at 19:14

2

please check out this project,

basically problem is your 9 patch image, i just modify your image for desire performance for your problem.

i will suggest you to use bg_menu277x77 for 1280x800 and bg_menu144x40 for 320x480 resolution from above linked project. Just for testing you can interchange both image for both resolution and try.

Bellow i try my best to explain 9 patch image, other great tutorial & information you can google it :)

enter image description here

answered Aug 13 '12 at 19:14

rajpara

5,203
1
29
46

tnx for your attention. about point 1 : because of a shadow bottom of image , i had stretch my image. / after all,its not solve my problme and u change my question.i said wanna use ONE big image that has 9patch and can scalable.i think its not possible(two technique:A-nine patch in layout background. B-scalable image and use ONE image for some screen sizes). – CooL i3oY Aug 14 '12 at 05:07
1

`two technique:A-nine patch in layout background. B-scalable image and use ONE image for some screen sizes`, yes agreed to overcome this you have to create 9patch image for smaller and larger screen separately. You can reserve one pixel straight if you want one image fits all. +1 :) – Mohammed Azharuddin Shaikh Aug 14 '12 at 10:31
@rajpara i check ur attached project.but problem is text is not in content area. – CooL i3oY Aug 23 '12 at 03:56
@CooLi3oY then keep textview's layout gravity to center – rajpara Aug 23 '12 at 05:11
@rajpara no.its not good way.because i want to set text in right of content area. i want this : ||||____ContentArea|||| not this: ||||__ContentArea__|||| and now it is like : ||||______Content|A|r|e|a| – CooL i3oY Aug 25 '12 at 05:42
@CooLi3oY textview's layout gravity to right|center_vertical & set paddingRight to 10 or 30 dp – rajpara Aug 25 '12 at 05:48
@rajpara i think found some bug(that cause of my problem).for example my image width is 750px and so bottom line(content area) is 750px.and mobile width is 800.because of layout_width=fill_parent ,then background width going from 750 to 800.and bug is here : my content area to take text to show is not 800px( or even 750px ) ! its 50px! :| . so to solve this,i use your image in this post and in result,bottom line increase with top line and i have for example a image with 800px width and 800px bottom line for content area – CooL i3oY Aug 26 '12 at 03:36

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

If i am understanding your requirement correctly then you want a list view and each row of the list view contains a background and a text view to display some text.
You don't have to use an image view for this purpose. All you need to do is to place a background for the layout container and a text view.

Here is how you can achieve this:

<RelativeLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
xmlns:foo="http://schemas.android.com/apk/res/pack.name."
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingRight="15dp"
android:paddingLeft="15dp"
android:background="@drawable/some_drawable or any selector">

<pack.name..TextViewPlus
    android:id="@+id/menutext"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#3D1E00"
    android:textSize="@dimen/TitleNormalM"
    foo:customFont="font.ttf"
    android:gravity="right|center_vertical"
    android:text="blah blah blah"/>
</RelativeLayout>

The problem with your code is that you are using fill_parent as the height and width of individual row items. Instead you should use fill_parent as the width and wrap_content or some dp value as the height as shown in the above code.

I hope this will help :)

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 13 '12 at 12:21

karn

5,963
3
22
29

and its on galaxy note emulator : http://pen.kuheo.com/pic/554f89dd61ca.png pay attention to padding . there is no right and left padding side of row image , but we set it! – CooL i3oY Aug 16 '12 at 05:40
You are using text view with default multi-line property enabled that's why the row image is getting enlarged when the text is too long. For solving this problem you should use android:singleLine="true" feature of text view. Regarding the padding problem : I tried creating a 9 patch image with padding but the images is such that it doesn't work. So instead you should either use android:gravity="center" or you should use padding in the xml definition. – karn Aug 18 '12 at 06:02
if i use singleLine=true attribute,output:http://photo.voovq.com/pic/f34132b15dd0.jpg – CooL i3oY Aug 22 '12 at 06:11
Size of the screen is fixed so we can not display a very long text on the same line, instead you should set a MAX width and single line true. And details can be shown when the user clicks on the list item. – karn Aug 22 '12 at 06:20
i'm using a nine patch image for background of row.in related to my last comment on this post,if don't use singleLine=true , output:http://picture.rupai.net/pic/bbb5420ed2dc.png – CooL i3oY Aug 22 '12 at 12:00
that's what I am saying.You are going in the right direction and list also seems to be rendered as per your requirement. – karn Aug 22 '12 at 12:36
no,its not my requirement.true sentence is like http://i.stack.imgur.com/Dutae.png . means in one line.how can i do that? – CooL i3oY Aug 23 '12 at 03:32
If you can send me the background images you are using then i can try it myself.. my mail id is vik.karn87@gmail.com – karn Aug 23 '12 at 05:28
i think found some bug(that cause of my problem).for example my image width is 750px and so bottom line(content area) is 750px.and mobile width is 800.because of layout_width=fill_parent ,then background width going from 750 to 800.and bug is here : my content area to take text to show is not 800px( or even 750px ) ! its 50px! :| – CooL i3oY Aug 26 '12 at 03:34

How to fit layout background Image

2 Answers2