CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayoutnine-patch
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

How to put several text views over and image view in android?

I want to achieve following effect in my android app:

enter image description here

As background I use a nine-patch png image. I tried it like this with just one text view

<ImageView
    android:id="@+id/myImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/rowimage" />

<TextView
    android:id="@+id/myImageViewText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/myImageView"
    android:layout_alignTop="@+id/myImageView"
    android:layout_alignRight="@+id/myImageView"
    android:layout_alignBottom="@+id/myImageView"
    android:layout_margin="1dp"
    android:gravity="center"
    android:text="Hello"
    android:textColor="#000000" />

But this is what I get as result

enter image description here

Any ideas whats wrong? How can I achieve the effect from the first image?

Edit:

I updated my xml to relative layout, now I get following result

enter image description here

Why does the nine-patch image not scale with the text??

Upvotes: 4

Views: 3482

Answers (5)

Ranjit Mishra
Ranjit Mishra

Reputation: 450

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">

<ImageView android:src="@drawable/icon" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true"/>
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true">
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Left Text" android:layout_weight="1.0" />
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Right Text" android:layout_weight="1.0" />

</Linear Layout >

Upvotes: 1

selvaiyyamperumal
selvaiyyamperumal

Reputation: 333

          <?xml version="1.0" encoding="utf-8"?>

          <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:orientation="horizontal" 
             android:layout_width="fill_parent"
             android:layout_height="50dp"
             android:background="@drawable/your background image">


        <LinearLayout 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent" 
            android:layout_weight="1"
            android:gravity="center" 
            android:orientation="vertical">

            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:textColor="@color/white"
                android:textSize="18sp" 
                android:textStyle="bold"
                android:singleLine="true" 
                android:text="Subject1"/>
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:textColor="@color/white"
                android:textSize="18sp" 
                android:textStyle="bold"
                android:singleLine="true" 
                android:text="Subject2"/>
             <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:textColor="@color/white"
                android:textSize="18sp" 
                android:textStyle="bold"
                android:singleLine="true" 
                android:text="Subject3"/>

        </LinearLayout>

    </LinearLayout>

Upvotes: 2

Jave
Jave

Reputation: 31846

Answers have already been posted, but this is how I would do it:

<?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="wrap_content"
    android:gravity="center_vertical"
    android:padding="1dp"
    android:background="@drawable/tile">
    <TextView
        style="@style/textstyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello1"/>
    <View 
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <TextView
        style="@style/textstyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello2"/>
</LinearLayout>

The LinearLayout uses the ninepatch as a background so that it stretches with the content, The view in the middle stretches to create a gap between text1 and text2.

Upvotes: 2

Houcine
Houcine

Reputation: 24181

The first Solution try to add a RelativeLayout which is setted to fill_parent in width , and set your ninePatch image as a background for it , and then add your TextViews into it like this :

<RelativeLayout 
  android:id="@+id/layoutTextViews"  
  android:layout_width="fill_parent"
  android:layout_height = "wrap_content"
  android:background="@drawable/rowimage" 
>

<TextView
    android:id="@+id/txtView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_margin="1dp"
    android:gravity="center"
    android:text="Hello"
    android:textColor="#000000" />

<TextView
    android:id="@+id/txtView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_margin="1dp"
    android:gravity="center"
    android:text="Right"
    android:textColor="#000000" />

</RelativeLayout>

Upvotes: 4

Vishal Pawar
Vishal Pawar

Reputation: 4340

use this layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <ImageView android:src="@drawable/icon" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true"/>
    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true">
    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Left Text" android:layout_weight="1.0" />
    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Right Text" android:layout_weight="1.0" />
    </LinearLayout>
</RelativeLayout>

Upvotes: 2

Related Questions