Develop Reference

How to animate images in android in a loop?

I have this xml file where there are 4 image views, with one logo at the centre and the other three are just circles with radius greater than the previous one surrounding the logo. I want to display this as an animation until my page gets loaded. In want that the three circles appear one after the other in loop in a sequence. How can I do that ?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/center" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/anim1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/anim2" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/anim3" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have also attached a picture for a better visualization if needed :
enter image description here

#Srijan,
There are more ways to achieve this.
Please refer to objectAnimator or animation-list drawable for more details.
As a quick answer to your problem, please see the below sample code.
package com.jrh.testanim;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
int count= 0;
int imgArr[] = new int[]{
R.drawable.circle1,
R.drawable.circle2,
R.drawable.circle3,
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageView imageView = (ImageView) findViewById(R.id.animation_imageview);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
imageView.setImageResource(imgArr[count]);
handler.postDelayed(this, 500);
count++;
if (count > 2) {
count = 0;
}
}
}, 500);
}
}
Please check this and mark accepted, if it solves your problem.
Thanks
JRH

EditText and Horizontal Line

When we type an input value by using EditText, I want a horizontal line to be placed below my input like phone book application in all mobile phones.
Enter Phone : ___________
I want my input to be placed on this line. How can I do this by using EditText ?

Try this
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp">
<EditText
android:id="#+id/Prac"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Practice"
android:inputType="text"
android:textSize="12sp" />
</android.support.design.widget.TextInputLayout>

You have to set width of EditText from match_parent to wrap_content line below code
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

You have to set width to either match_parent or to fixed width like 100dp
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

As everyone answer said set width and height to wrap_content this is the right answer but still their is another way to achieve this lets have a look.
First create a drawable file (myline.xml) which create the line.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
// You can change width according to your need
android:width="1dp"
android:color="#000000" />
</shape>
</item>
Now in your layout.xml use myline.xml in edit text background.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter Phone: "
android:textColor="#000"
android:textSize="18dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/myline"
android:textColor="#000"
android:textSize="18dp" />
</LinearLayout>
And its done see the output in screenshot below.

You can Try with CustomEditText Like Below code:
package com.cj.myapplication;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.EditText;
/**
* Created by E069099 on 7/20/2017.
*/
public class CustomEdiTextWithLine extends EditText {
private Rect rect;
private Paint paint;
public CustomEdiTextWithLine(Context context, AttributeSet attrs) {
super(context, attrs);
rect = new Rect();
paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.GREEN);
paint.setStrokeWidth(2F);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setTextSize(20);
}
#Override
protected void onDraw(Canvas canvas) {
//start at the vertical center of the textview
float top = (getHeight() + getPaddingTop() - getPaddingBottom())/2;
//start at the left margin
float left = getPaddingLeft();
//we draw all the way to the right
float right = getWidth() -getPaddingRight();
//we want the line to be 2 pixel thick
float bottom = getHeight()- getPaddingBottom();
canvas.drawLine(0,bottom,right,bottom,paint);
super.onDraw(canvas);
}
}

one method is,
make backgroundtint is black colour and set hint like below code
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:backgroundTint="#000000"
android:hint=" " />
other method is,
add a view with black background below the editText and background of the editText is make it null.

Prevent certain views from being animated with android:animateLayoutChanges="true"

I have a horizontal linear layout that has 3 views. An open and close button and a text view. On load the close button is set to
setVisibility(View.GONE);
So it is only showing one imageview, open, and a textview with some text. I am also using
android:animateLayoutChanges="true"
On my parent layout to animate the textview when it opens and closes. Everything functions right except when I open/close I can see the animation for the two buttons being set to GONE and VISIBLE respectively. I do not want animation on those two ImageViews. Any thoughts on how I can remove the animations on those two views? Thanks in advance.
XML File
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/CuFScrollView"
style="#style/ScrollView"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#A0A0A0"
>
<LinearLayout
style="#style/LinearLayoutVertical"
android:paddingTop="20dp"
>
<TextView
android:text="Basic Management Plan for Tactical Field Care"
android:id="#+id/header"
style="#style/Header"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#606060"
android:padding="5dp"
android:animateLayoutChanges="true"
>
<ImageView
android:id="#+id/open"
android:src="#drawable/open"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:onClick="open"
android:layout_gravity="center_vertical"
android:animateLayoutChanges="false"
/>
<ImageView
android:id="#+id/close"
android:src="#drawable/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:onClick="close"
android:layout_gravity="center_vertical"
android:animateLayoutChanges="false"
/>
<TextView
android:id="#+id/stepOne"
android:text="Step 1:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="0dp"
style="#style/Bullet"
/>
</LinearLayout>
</LinearLayout>
Java File
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.ScrollView;
import android.widget.TextView;
public class Careunderfirestudy extends AppCompatActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide();
setContentView(R.layout.careunderfirestudy);
ImageView close = (ImageView)findViewById(R.id.close);
close.setVisibility(View.GONE);
}
public void open(View view){
TextView stepOne = (TextView)findViewById(R.id.stepOne);
stepOne.setText("Casualties should be extricated from burning vehicles or buildings and moved to places of relative safety. Do what is necessary to stop the burning process.");
ImageView close = (ImageView)findViewById(R.id.close);
ImageView open = (ImageView)findViewById(R.id.open);
close.setVisibility(View.VISIBLE);
open.setVisibility(View.GONE);
}
public void close(View view){
TextView stepOne = (TextView)findViewById(R.id.stepOne);
stepOne.setText("Step 1:");
ImageView close = (ImageView)findViewById(R.id.close);
ImageView open = (ImageView)findViewById(R.id.open);
close.setVisibility(View.GONE);
open.setVisibility(View.VISIBLE);
}
}

The question was: Prevent certain views from being animated with android:animateLayoutChanges=“true” and I don't see the answer to this question in the previous answer.
I had the same problem and I solved it disabling temporary the LayoutTransition for appearing and disappearing type.
Here examples.
Hide a View without animating it:
LayoutTransition lt = ((ViewGroup)view.getParent()).getLayoutTransition();
lt.disableTransitionType( LayoutTransition.DISAPPEARING );
view.setVisibility(View.GONE);
lt.enableTransitionType( LayoutTransition.DISAPPEARING );
Show a View without animating it:
LayoutTransition lt = ((ViewGroup)view.getParent()).getLayoutTransition();
lt.disableTransitionType( LayoutTransition.APPEARING );
view.setVisibility(View.VISIBLE);
lt.enableTransitionType( LayoutTransition.APPEARING );
This does not prevent other views to be animated consequently to the view visibility change (they are animated under LayoutTransition.CHANGE_APPEARING and LayoutTransition.CHANGE_DISAPPEARING transition type).
Not null check to LayoutTransition may be done for safety.

You could just use 1 button and change the image:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#606060"
android:padding="5dp"
android:animateLayoutChanges="true"
android:id="#+id/parent"
>
<ImageView
android:id="#+id/toggleStep"
android:src="#drawable/open"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:onClick="toggle"
android:layout_gravity="center_vertical"
/>
protected void onCreate(Bundle savedInstanceState) {
...
LinearLayout parent = (LinearLayout) findViewById(R.id.parent);
parent.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);
...
}
private boolean mOpen = false;
public void toggle(View view){
TextView stepOne = (TextView)findViewById(R.id.stepOne);
ImageView toggle = (ImageView)findViewById(R.id.toggleStep);
if(mOpen){
stepOne.setText("Step 1:");
toggle.setImageResource(R.drawable.open);
}
else{
stepOne.setText("Casualties should be extricated from burning vehicles or buildings and moved to places of relative safety. Do what is necessary to stop the burning process.");
toggle.setImageResource(R.drawable.close);
}
mOpen = !mOpen;
}

Detecting number of digits of user input in android edit text

I'm working on a project and I need to lock my own app with a PIN code.
I want to use four circles as background of my edittext and fill each circle when user enters a digit. Just like iOS lock screen.
How can I fill these circles when there's an input?

Here's a quick example I put together for you to get started.
You should firstly define what your ellipse's for the pass-code will look like, I've defined mine inside two files inside my drawable folder:
elipse.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<gradient android:startColor="#8BE807" android:endColor="#68B002" android:angle="270" />
</shape>
ellipse_checked.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<gradient android:startColor="#C7C7C7" android:endColor="#8A8A8A" android:angle="270"/>
</shape>
Next I have added four ellipses (View's) and an ExitText to my view like so:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ellipse"
android:id="#+id/elipse1"
android:layout_margin="10dip" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ellipse"
android:id="#+id/elipse2"
android:layout_margin="10dip" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ellipse"
android:id="#+id/elipse3"
android:layout_margin="10dip" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ellipse"
android:id="#+id/elipse4"
android:layout_margin="10dip" />
</LinearLayout>
<EditText
android:layout_width="100dip"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="#+id/txtPass"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dip"
android:textAlignment="center"
android:maxLength="4"
android:gravity="center" />
</LinearLayout>
Then inside my MainActivity I have:
int passlen = 0;
Drawable mDrawableElipseChecked;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Used to change our pass-code ellipses style
mDrawableElipseChecked = this.getResources().getDrawable(R.drawable.ellipse_checked);
// Ellipses
final View elipse1 = findViewById(R.id.elipse1);
final View elipse2 = findViewById(R.id.elipse2);
final View elipse3 = findViewById(R.id.elipse3);
final View elipse4 = findViewById(R.id.elipse4);
// Listen for text changes to our pass-code EditText
final EditText txtPass = (EditText) findViewById(R.id.txtPass);
txtPass.setOnKeyListener(new View.OnKeyListener() {
#Override
public boolean onKey(View view, int i, KeyEvent keyEvent) {
if (keyEvent.getAction() == KeyEvent.ACTION_UP) {
// Crude example of how to "check" / "un-check" our
// ellipses NOTE: You should write a better implementation
// for handling deletes etc
passlen = txtPass.getText().length();
if (passlen == 1) {
elipse1.setBackground(mDrawableElipseChecked);
} else if (passlen == 2)
elipse2.setBackground(mDrawableElipseChecked);
else if (passlen == 3)
elipse3.setBackground(mDrawableElipseChecked);
else if (passlen == 4)
elipse4.setBackground(mDrawableElipseChecked);
else {
return true;
}
}
return false;
}
});
}
You should now have a very simple example of how to implement pass-code like functionality to an app.
Note: This is a simple demo of how to get started implementing a pass-code like screen, you should adapt and improve this to suit your needs.

Text over image with matching relative positioning on different screen sizes

I'm stuck.
The problem is how to place text on a static image and keep position depends on it between different screen dimensions.
To achieve this I've tried the layout above:
<?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"
android:padding="#dimen/default_view_padding">
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:adjustViewBounds="true"
android:layout_height="900dp"
android:layout_centerInParent="true"
android:src="#drawable/example"/>
<TextView
android:layout_alignLeft="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignEnd="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_width="wrap_content"
android:layout_marginTop="190dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>
</RelativeLayout>
But on different screens it looks differently.
So, by example, screenshots. The static image background (in example white image with green line), the view with text on nexus5, on nexus7.
As you can see, a text placed on different places over image.
I doesn't know why is it happend, because I'm using dp and relative layout.
I tried wrap_content/match_parent on image sizes, without ajust view bounds etc. And it haven't help.
Ty for answers.
EDIT: I want the text to always be above the green line on the same distance in different screen dimensions. (the same as in the second image)
EDIT2: Someone misunderstood me, sorry if the question isn't clear. As a background in example i'm tried to use imageview instead of background tag of relative layout, because it is'nt help whatever, i tried that before
The line, which I used in example, is only for that. It just needs to explain the issue of the text positioning

use dimens.xml to Support different size of screens.
in your res folder create some value folders Like :
values-xlarge
values-large
values-small
values-sw800dp
...
in these folders youy should have dimens.xml and define your dimensions.
for example this may be your dimensions for normal screens :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="ImageViewWidth">500dp</dimen>
<dimen name="ImageViewHeight">900dp</dimen>
<dimen name="TextViewMarginTop">190dp</dimen>
</resources>
Definitely your dimensions for large or xlarge screens are different!
to use these, simply put them in XML instead of hard-coding dimens
<TextView
android:layout_alignLeft="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignEnd="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_width="wrap_content"
android:layout_marginTop="#dimens/TextViewMarginTop"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>

If you just want green color as a background of text then use android:background on textview and remove ImageView. Create a 9Patch image with green line at bottom and give that image as background to your text.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/abc_ab_transparent_light_holo"
android:text="Dummy text string"
android:id="#+id/dummy_text" />

I don't know if I understand the question,
but I think solution could be putting RelativeLayout in another contener, ie:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:padding="#dimen/default_view_padding" >
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:layout_height="900dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/example" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/iv_background"
android:layout_alignLeft="#id/iv_background"
android:layout_alignRight="#id/iv_background"
android:layout_alignStart="#id/iv_background"
android:layout_alignTop="#id/iv_background"
android:layout_centerHorizontal="true"
android:layout_marginTop="190dp"
android:gravity="center"
android:text="Dummy text string" />
</RelativeLayout>
</LinearLayout>

set android:gravity="center", android:layout_centerInParent="true" and android:layout_alignParentTop="true" of the textview

Create a custom view like my sample:
layout view_product_image.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background_light_blue"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgProduct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dip"
android:src="#drawable/main0x" />
<TextView
android:id="#+id/tvQty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imgPoduct"
android:layout_marginLeft="3dp"
android:layout_marginTop="2dp"
android:background="#color/lightBlue3"
android:text="1111"
android:textColor="#color/red"
android:textSize="16dip" />
<TextView
android:id="#+id/tvInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgProduct"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:lines="2"
android:maxLines="2"
android:minLines="2"
android:singleLine="false"
android:text="TextView"
android:textColor="#color/black"
android:textSize="16dip" />
</RelativeLayout>
Class:
package org.mabna.order.ui;
import org.mabna.order.R;
import org.mabna.order.businessLayer.db.BoPreferences;
import org.mabna.order.utils.Farsi;
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class ImageView_Product extends LinearLayout implements OnTouchListener {
private static final float FONT_SIZE_LARGE = 20;
private static final float FONT_SIZE_NORMAL = 16;
private static final float FONT_SIZE_SMALL = 12;
private RelativeLayout rlParent;
private ImageView imgProduct;
private TextView tvInfo;
private TextView tvQty;
private double qty = 0;
private float mDensity;
private Typeface tf;
public ImageView_Product(Context context) {
super(context);
initialize();
}
public ImageView_Product(Context context, AttributeSet attrs) {
super(context, attrs);
initialize();
}
protected void initialize() {
if (!this.isInEditMode()) {
tf = Farsi.getFarsiFont(this.getContext());
}
mDensity = this.getResources().getDisplayMetrics().density;
LayoutInflater layoutInflater = (LayoutInflater) getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater
.inflate(R.layout.view_product_image, this);
rlParent = (RelativeLayout) view.findViewById(R.id.rlParent);
imgProduct = (ImageView) view.findViewById(R.id.imgProduct);
tvInfo = (TextView) view.findViewById(R.id.tvInfo);
tvQty = (TextView) view.findViewById(R.id.tvQty);
tvInfo.setTypeface(tf);
tvInfo.setTextSize(FONT_SIZE_SMALL);
}
public TextView getTextView() {
return tvInfo;
}
public ImageView getImageView() {
return imgProduct;
}
public TextView getQtyView() {
return tvQty;
}
public void setInfoText(String text) {
tvInfo.setText(text);
}
public String getInfoText(String text) {
return tvInfo.getText().toString();
}
public void setQty(double value) {
this.qty = value;
if (this.qty > 0) {
tvQty.setText(BoPreferences.getStringValueNoGrouping(this.qty,
getContext()));
setStateHasQty();
} else {
tvQty.setText("");
setStateHasNotQty();
}
}
public double getQty() {
return Double.valueOf(tvQty.getText().toString());
}
public void setStateSelected() {
imgProduct.setBackgroundResource(R.drawable.border06);
}
public void setStateNotSelected() {
imgProduct.setBackgroundResource(R.drawable.border05);
}
private void setStateHasQty() {
tvQty.setBackgroundResource(R.color.lightBlueTransparent);
tvQty.setTextSize(FONT_SIZE_LARGE);
// tvInfo.setBackgroundResource(R.color.darkGreen);
rlParent.setBackgroundResource(R.drawable.background_light_green);
}
private void setStateHasNotQty() {
tvQty.setBackgroundResource(0);
tvQty.setTextSize(FONT_SIZE_NORMAL);
// tvInfo.setBackgroundResource(R.color.lightBlue3);
rlParent.setBackgroundResource(R.drawable.background_light_blue);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
return false;
}
public void setImageSize(int width, int height) {
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)
imgProduct.getLayoutParams();
lp.width = (int) (width * mDensity);
lp.height = (int) (height * mDensity);
imgProduct.setLayoutParams(lp);
tvInfo.setMaxWidth(lp.width);
}
}

I think I understand your problem. Here I've aligned the image to the left and right of the text and set the ImageView and TextView layout_width to wrap_content. I have used android:layout_below and given it a top margin.
This appears to work on all screen sizes.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="20dp">
<TextView
android:id="#+id/tv_example"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="190dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Dummy text string"/>
<ImageView
android:id="#+id/iv_background"
android:layout_width="wrap_content"
android:layout_height="4dp"
android:layout_alignLeft="#+id/tv_example"
android:layout_alignRight="#id/tv_example"
android:layout_marginTop="4dp"
android:layout_below="#+id/tv_example"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:src="#drawable/example"/>
</RelativeLayout>
You can change the height and top margin of the ImageView if you wish.

Use LinearLayout instead of RelativeLayout:
<?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="vertical" >
<ImageView
android:id="#+id/iv_background"
android:layout_width="500dp"
android:layout_height="900dp"
android:adjustViewBounds="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="190dp"
android:gravity="center"
android:text="Dummy text string" />
</LinearLayout>
Second Solution is use android:drawablePadding=""and android:drawableBottom="" in TextView.
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding=""
android:drawableBottom=""
android:gravity="center"
android:text="Dummy text string" >
</TextView>