How to display text on `PhotoView`?

Question

In my application I am displaying an image in full screen (which is actually a new activity) using the library called PhotoView. The sample image is below, so I need the text to be displayed just like that.

I have posted the XML code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_view_full_screen_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.theace.fullscreen.ViewFullScreenImage"
    android:orientation="vertical">

        <LinearLayout
            android:id="@+id/li1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

                <com.github.chrisbanes.photoview.PhotoView
                    android:id="@+id/photo_view"
                    android:layout_width="match_parent"
                    android:layout_centerInParent="true"
                    android:layout_height="match_parent"
                    android:layout_marginBottom="40dp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:layout_marginBottom="10dp"
                    android:textColor="@android:color/white"
                    android:id="@+id/tv1"/>


        </LinearLayout>


</LinearLayout>

Below is my related Java code

package com.example.theace.fullscreen;

import android.graphics.Color;
import android.net.Uri;
import android.support.v4.app.NavUtils;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.github.chrisbanes.photoview.PhotoView;
import com.squareup.picasso.Picasso;

public class ViewFullScreenImage extends AppCompatActivity {

    RelativeLayout li1;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_view_full_screen_image);
        li1 = (RelativeLayout) findViewById(R.id.activity_view_full_screen_image);
        li1.setBackgroundColor(Color.BLACK);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        textView = (TextView)findViewById(R.id.tv1);

        loadImage();
    }

    public void loadImage(){

        Uri imageUrl = Uri.parse("https://s-media-cache-ak0.pinimg.com/736x/39/c7/64/39c764abd350c509f76c6362780a3a78--outdoor-portraits-outdoor-portrait-photography.jpg");

        PhotoView photoView = (PhotoView) findViewById(R.id.photo_view);
        Picasso.with(this).load(imageUrl).into(photoView);
        textView.setText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique nunc turpis, at congue est molestie a. Etiam nec cursus arcu. Curabitur vestibulum ligula vitae velit rutrum sollicitudin. Phasellus imperdiet ultrices semper. Morbi laoreet magna sit amet mi vulputate pharetra. Proin faucibus maximus massa, sit amet vestibulum elit posuere eget.");
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                NavUtils.navigateUpFromSameTask(this);
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

How can I fix this?

Regarding down votes and close votes to this question, SO "way" is to tell why you down voted or close voted, and not just hit a button and run. I see no reason for a down vote or close vote. SO really need investigation team on these "hit and run" people. — PeakGen, Aug 17 '17 at 05:53
@PeakGen: you have been misinformed. The SO way is that people may vote for any reason they like, and they may do so anonymously, as long as they do not focus on one user. Many proposals to change this at _Meta Stack Overflow_ have failed. — halfer, Oct 20 '17 at 19:45

score 1 · Accepted Answer · answered Aug 17 '17 at 05:51

Just use the below code

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_view_full_screen_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.theace.fullscreen.ViewFullScreenImage"
    android:orientation="vertical">


        <com.github.chrisbanes.photoview.PhotoView
            android:id="@+id/photo_view"
            android:layout_width="match_parent"
            android:layout_centerInParent="true"
            android:layout_height="match_parent"
            android:scaleType="center"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_alignParentBottom="true"
            android:textColor="@android:color/white"
            android:layout_gravity="bottom|center_horizontal"
            android:id="@+id/tv1"/>


</FrameLayout>

AskNilesh · Answer 2 · 2017-08-17T06:02:42.300

try this make your activity_view_full_screen.xml like this

use RelativeLayout and make your TextView to android:layout_alignParentBottom="true"

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_view_full_screen_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<com.github.chrisbanes.photoview.PhotoView
    android:id="@+id/photo_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:scaleType="fitXY"
    android:layout_marginBottom="40dp"
    android:src="@drawable/disha" />



    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:padding="5dp"
        android:layout_alignParentBottom="true"
        android:background="#9a080808"
        android:text="@string/abc"
        android:textColor="@android:color/white" />


</RelativeLayout>

Sorry, but this is not the solution. You are displaying the text below the image making the image to be displayed on top of text no matter what. I also tried adding a long text of 50 words, the majority of the text simply got non-visible. The text should be on top of bottom part of the image (if the image is big enough) — Nuwan Withanage, Aug 17 '17 at 05:15
The text should be like in the screenshot I have provided. Please check, there the text is not below the image, but at the bottom part of the image. The screenshot is taken from WhatsApp. In there the text will be visible right below the image in a black background if the image is not "big enough" to be displayed FULLSCREEN, otherwise it displays the text as in the screenshot. — Nuwan Withanage, Aug 17 '17 at 05:20

How to display text on `PhotoView`?

2 Answers2