Photoshop Question posted in
The official user guide can be found here.

Put a textview over Imageview in LinearLayout – Photoshop

I have stuck in some xml code and i hope you can help me out.

So here is what I need/what I have done by now.

I have 3 images of 650px width and I need them one below another while keeping aspect ratio.

I did that with the following code and it looks as it should. No problem here.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ll"
android:orientation="vertical"
android:background="#3afa3f"
android:weightSum="3">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/krk_history"
    android:layout_weight="1"
    android:background="@drawable/povjestkrka_vintage_yellow600" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:id="@+id/krk_frankopan"
    android:background="@drawable/frankopan2_vintage_sundown600" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:id="@+id/krk_turizam"
    android:background="@drawable/krk_turizam_vintage"/>

The problem is. I need to put three textviews in a left bottom corner of each image. Imagine it like image menu with text description on each image.

So, I can not use relative or frame layout because images won’t play nicely with each other 🙂 There is always a gap between or not aspect ration etc. I need weightsum.

Second, I can’t hardcode the text on each image in photoshop because the app will be translated and text needs to change for each language.

I can have different images for each language but I am trying to avoid that.

Ah yea, one more last thing.
I tried to put entire linearlayout in relative layout and put the text between but the text appears beneath the image and I can’t bring it upfront.

Any suggestions?

Thanks a lot,
Xsonz

Tags:

4

Answers


  1. 0

    Take three FrameLayout inside your LinearLayout and inside FrameLayout keep the ImageView and TextView.

    Or Else You can use RelativeLayout and give dependency to Views

    Login or Signup to reply.
  2. 0

    You can use frame layout inside linear layout. create imageview inside the linear layout and create textview in another frame layout below it.

    <FrameLayout
    android:id="@+id/frameLayout_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/krk_history"
        android:layout_weight="1"
        android:background="@drawable/povjestkrka_vintage_yellow600" />
</FrameLayout>
<FrameLayout
    android:id="@+id/frameLayout_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="-5dp" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="string" />
</FrameLayout>
    Login or Signup to reply.
  3. 0

    just copy this : 

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


<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:padding="5dp"
        android:text="Text 1" />

</FrameLayout>
 <FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:padding="5dp"
        android:text="Text 2" />

</FrameLayout>
 <FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:padding="5dp"
        android:text="Text 3" />

</FrameLayout>

    Login or Signup to reply.
  4. 0

    Something like this might work for you.

    //your layout -> LinearLayout>
....
<RelativeLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image1"
        android:layout_weight="1"
        android:background="@drawable/A1" />
    <TextView android:id="@+id/textview1"
        android:layout_margin="0dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My Text"
        android:layout_below="@id/image1"
        android:layout_alignLeft="@id/image1" />

</RelativeLayout>
// end your LinearLayout

    You can play with these parameters using Relative Layout Parameters android.com. The relative layout allows you to control the “relative” positioning between your elements.
    You can lay your images out side by side, or in whatever fashion you wish.

    Then you can adjust the text dynamically.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search