CODEWITHSUNDEEP
androidxmlimageview
binu j
binu j

Reputation: 399

Placing 2 images side by side with Text overlay

I want to place 2 images side by side with text overlay. Here is the code for 1 image with text, i want to place 2 images side by side with text overlay which is shown on the bottom.

enter image description here

And the code is 

<?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" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/overlay_margin"
        android:background="#FFF" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/salogo" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView1"
            android:layout_alignParentLeft="true"
            android:background="#7000"
            android:orientation="vertical"
            android:paddingTop="15dp" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:shadowColor="#000"
                android:shadowDx="3"
                android:shadowDy="3"
                android:shadowRadius="6"
                android:text="Styling Android"
                android:textColor="#FFF"
                android:textSize="36sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="A guide to applying styles and themes to Android apps"
                android:textColor="#CCC"
                android:textSize="12sp" />
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

I want the view like this

enter image description here

Upvotes: 1

Views: 1224

Answers (1)

Vincent D.
Vincent D.

Reputation: 997

You will need to use include from here Improving Layouts : Reusing

You will need to use your layout like this. If you want to add more stuff, wrap the MainLayout.xml root to another LinearLayout or RelativeLayout

Create your main layout that you will call on your Activity, Extract the "Hello Android" to your strings file:
MainLayout.xml

<LinearLayout
    android:layout_width=”match_parent”
    android:layout_height=”wrap_content”
    android:orientation="vertical">
     <TextView
         android:layout_width=”match_parent”
         android:layout_height=”wrap_content”
         android:Text="Hello Android"/>
     <LinearLayout
         android:layout_width=”match_parent”
         android:layout_height=”wrap_content”
         android:orientation="horizontal">
         <include layout="@Layout/myTextImageLayout"
                 android:layout_weight="1" />
         <include layout="@Layout/myTextImageLayout" 
                 android:layout_weight="1" />
     </LinearLayout>
</LinearLayout>

Then create another layout where most of your stuff will go :
myTextImageLayout.xml (your current layout)

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/overlay_margin"
    android:background="#FFF" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/salogo" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_alignParentLeft="true"
        android:background="#7000"
        android:orientation="vertical"
        android:paddingTop="15dp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:shadowColor="#000"
            android:shadowDx="3"
            android:shadowDy="3"
            android:shadowRadius="6"
            android:text="Styling Android"
            android:textColor="#FFF"
            android:textSize="36sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="A guide to applying styles and themes to Android apps"
            android:textColor="#CCC"
            android:textSize="12sp" />
    </LinearLayout>
</RelativeLayout>

Upvotes: 2

Related Questions