How to make white buttons visible on a white image-CodePudding

I have some texts and buttons that are displaying on an image view, where the image view can contain images of any color but the problem occurs with a white image if the text and button on the image view is in white and the image is also white the text and buttons will not be visible but I want to use the text and button color as white, is there any solutions for this I have added elevation but its not working

examples

1 this is an image that is colorful so the buttons are visible almost properly SS

2 this is an image that has the most white color so the buttons are not visible at all SS

I know I'm asking a dumb kind of question how can a white color button or text be visible on a white image, sorry for that but i cant change the layout now

If you want more references of the code please tell me I will update the question

imagepost_buttons.xml // this is the layout that contains the texts and the buttons, not the main image view

<?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/relativeLayoutImagePost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@ id/userName_Search_10List"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="15dp"
        android:layout_marginBottom="15dp"
        android:elevation="50dp"
        android:fontFamily="@font/roboto"
        android:text="@string/iansomerhalder"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold"
        tools:ignore="RelativeOverlap" />


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="20dp"
        android:contentDescription="@string/todo"
        android:elevation="50dp"
        android:src="@drawable/ic_baseline_post_option_icon_24" />

    <ImageView
        android:id="@ id/fav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="19dp"
        android:contentDescription="@string/todo"
        android:elevation="50dp"
        android:src="@drawable/ic_baseline_save_border_24" />

    <ImageView
        android:id="@ id/comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="20dp"
        android:layout_toStartOf="@ id/fav"
        android:contentDescription="@string/todo"
        android:elevation="50dp"
        android:src="@drawable/ic_icons8_comment_icon" />


    <ImageView
        android:id="@ id/unPressedLike"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="20dp"
        android:layout_toStartOf="@ id/comment"
        android:contentDescription="@string/todo"
        android:elevation="50dp"
        android:src="@drawable/ic_baseline_heart_border_24"
        android:visibility="visible" />

    <ImageView
        android:id="@ id/likePressed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="20dp"
        android:layout_toStartOf="@ id/comment"
        android:contentDescription="@string/todo"
        android:elevation="50dp"
        android:src="@drawable/ic_baseline_heart_red_24"
        android:visibility="invisible" />

    <TextView
        android:id="@ id/comentcount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="9dp"
        android:layout_marginBottom="6dp"
        android:layout_toStartOf="@id/fav"
        android:elevation="50dp"
        android:fontFamily="@font/roboto"
        android:text="@string/_125"
        android:textColor="@color/white"
        android:textSize="10sp"
        android:textStyle="bold|normal"
        tools:ignore="RelativeOverlap,SmallSp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="9dp"
        android:layout_marginBottom="6dp"
        android:layout_toStartOf="@ id/comment"
        android:elevation="50dp"
        android:fontFamily="@font/roboto"
        android:text="@string/_1_2k"
        android:textColor="@color/white"
        android:textSize="10sp"
        android:textStyle="bold|normal"
        tools:ignore="RelativeOverlap,SmallSp" />


</RelativeLayout>

CodePudding user response：

You can set some dark gradient at the bottom of the image to make sure the white text will be visible. Create a gradient drawable:

gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FF000000"
        android:endColor="#00000000"
        android:angle="90" />    
</shape>

Then add it to Your layout:

<?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/relativeLayoutImagePost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient">

    ...

</RelativeLayout>

You can try adding this type of gradient to the image itself, but it would propably require You to scale the gradient a little bit.