0

how to stop images from stretching in android?

Lcdrgreg 6 years ago updated by icahill (Administrator) 6 years ago 1
We are creating a database of tasks which have an icon associated with them. And using the icons image to select and put the correct file source name in the DB.  Here is the class and the problem is that it looks great in IOS but on Android the images stretch horizontally.  I know we could create separate panels to contain but is there another way?

<code>

<class name="addtolist">
<panel name="addcontainer" alias="ADDCONTAINER" height="100%" width="100%">
<panel name="cklistbg" alias="CKLISTBG" xpos="5%" ypos="7%" height="60%" width="90%" background="#dddddd" cornerradius="5" alpha="1">
<text name="addtolisttitle" size="24" height="10%" width="90%" text="Add To Checklist" xpos="5%" ypos="3%" alignment="center"/>
<textfield name="chore" alias="CHORE" text="" xpos="5%" ypos="15%" placeholder="Enter Chore" height="10%" width="90%" border="line" onreturnkeypressed="iconreturn"/>
<panel name="typeselect" alias="TYPESELECT" height="10%" width="90%" xpos="5%" ypos="28%" border="line" borderwidth="1" bordercolor="#000000">
<text name="type" size="18" height="100%" width="100%" text=" List:" xpos="0%" ypos="0%" align="left" />
<panel name="mornselect" alias="MORNSELECT" height="90%" width="20%" xpos="34%" ypos="5%" cornerradius="5" background="#ff0000" onclickup="mornselect">
<text name="mornselect" height="100%" width="100%" size="16" text="MORN" alignment="center"/></panel>
<panel name="afternoonselect" alias="AFTSELECT" height="90%" width="20%" xpos="56%" ypos="5%" cornerradius="5" background="#00ff00" onclickup="aftselect">
<text name="afternoonselect" height="100%" width="100%" size="16" text="AFT" alignment="center"/></panel>
<panel name="eveselect" alias="EVESELECT" height="90%" width="20%" xpos="78%" ypos="5%" cornerradius="5" background="#0000ff" onclickup="eveselect">
<text name="eveselect" height="100%" width="100%" size="16" text="EVE" alignment="center"/>
</panel>
</panel>
<panel name="icon" alias="ICONSELECT" xpos="2%" ypos="40%" height="12%" width="96%" >
<image name="sun" alias="SUN" source="sun.png" _source="" align="left" contain="yes" onclickup="addsun" />
<image name="tooth" alias="TOOTH" source="tooth.png" _source="" rightof="SUN" contain="yes" onclickup="addtooth"/>
<image name="dishes" alias="DISHES" source="dishes.png" _source="" rightof="TOOTH" contain="yes" onclickup="adddishes"/>
<image name="bed" alias="BED" source="bedroom.png" _source="" rightof="DISHES" contain="yes" onclickup="addbed" />
</panel>
<textfield name="icon" alias="ICON" text="" xpos="5%" ypos="75%" placeholder="Selected Image File Name" height="10%" width="90%" border="line"/>
<panel name="cancel" alias="CANCEL" xpos="10%" ypos="88%" height="10%" width="30%" background="#00ff3a" cornerradius="5">
<text name="canceltext" alias="CANCELTEXT" xpos="0%" ypos="0%" height="100%" width="100%" text="Cancel" size="14" alignment="center" font="Helvetica-Bold" onclick="deletecheck"/>
</panel>
<panel name="accept" alias="ACCEPT" xpos="60%" ypos="88%" height="10%" width="30%" background="#00ff3a" cornerradius="5">
<text name="accepttext" alias="ACCEPTTEXT" xpos="0%" ypos="0%" height="100%" width="100%" text="Accept" size="14" alignment="center" font="Helvetica-Bold" onclick="addtochecklist"/>
</panel>
</panel>
</panel>
</class>

</code>
I assume you are referring to this section:

<panel name="icon" alias="ICONSELECT" xpos="2%" ypos="40%" height="12%" width="96%" >

<image name="sun" alias="SUN" source="sun.png" _source="" align="left" contain="yes" onclickup="addsun" /> 

<image name="tooth" alias="TOOTH" source="tooth.png" _source="" rightof="SUN" contain="yes" onclickup="addtooth"/>

<image name="dishes" alias="DISHES" source="dishes.png" _source="" rightof="TOOTH" contain="yes" onclickup="adddishes"/>

<image name="bed" alias="BED" source="bedroom.png" _source="" rightof="DISHES" contain="yes" onclickup="addbed" />

</panel>


Because your parent panel is in percentages, you can't reasonably rely on android to not stretch depending on the device. You will need to define height and width to the images in pixels in order to make sure that they stay static.