Search code examples
androidandroid-layoutandroid-relativelayout

put the Element on certain points on the background in a RelativeLayout


I have an image, I want to put a TextView on a certain point(on the brown rectangle) in different devices with different screen sizes. My image is below:
CAUTION:the scaleType of the ImageView is CenterCrop
my background

in image below I show where I want to put the TextView:

textview bg

And this is my xml:

<?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"
    >
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/startpage"<!-- my background-->
        android:scaleType="centerCrop"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#fff"/>
</RelativeLayout>

Solution

  • At last, I found it myself, see these java codes:
    I find the display width and height, then calculate the scale, the according to the scale I scale the margins.

    @Bind(R.id.name_tv)TextView nameTV;
    
    public final static float bgWidth = 768;
    public final static float bgHeight = 1136;
    
    public float tVsRightMargin = 123;
    public float nameTVtopMargin = 314;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ResourceManager.setActivity(this);
    setContentView(R.layout.main);
    ButterKnife.bind(this);
    
    DisplayMetrics displayMetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    int displayWidth = displayMetrics.widthPixels;
    int displayHeight = displayMetrics.heightPixels;
    Log.v("MainActivity","displayWidth: "+displayWidth);
    Log.v("MainActivity", "displayHeight: " + displayHeight);
    
    float scale = Math.max(displayWidth/bgWidth, displayHeight/bgHeight);
    Log.v("MainActivity", "scale: "+scale);
    
    float bgScaledWidth = scale*bgWidth;
    float bgScaledHeight = scale*bgHeight;
    
    tVsRightMargin *= scale;
    nameTVtopMargin *= scale;
    
    if(bgScaledWidth>displayWidth) {
        tVsRightMargin -= ((bgScaledWidth - displayWidth) / 2f);
    }
    if(bgScaledHeight>displayHeight){
        nameTVtopMargin -= ((bgScaledHeight-displayHeight)/2f);
    }
    
    nameTV.setText("محمد");
    nameTV.setTypeface(ResourceManager.getTypeface());
    
    
    Log.v("MainActivity", "top margin: " + nameTVtopMargin);
    Log.v("MainActivity", "right margin: " + tVsRightMargin);
    ((RelativeLayout.LayoutParams) nameTV.getLayoutParams()).setMargins(0, (int) nameTVtopMargin, (int) tVsRightMargin, 0);
    

    }