How to make white buttons visible on a white image

Question

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>

score 1 · Accepted Answer · answered Nov 05 '21 at 11:45

1

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.

answered Nov 05 '21 at 11:45

sweak

1,369
2
6
21

thanks for the answer it's working, but it makes the image darker, which I'm sorry but I don't want that, is there any other way – Vasant Raval Nov 05 '21 at 11:53
Are You applying the gradient to the image itself or the layout with the text and buttons? Because You don't want the gradient to fill the whole image - only the area with buttons and text. – sweak Nov 05 '21 at 11:53
in the layout not in the imageview – Vasant Raval Nov 05 '21 at 11:55
Can You show how it looks? – sweak Nov 05 '21 at 11:56
ok I have a idea what if we just gradient the bottom, can you suggest to me a startColor that is almost transparent so the image doesn't lose it original color – Vasant Raval Nov 05 '21 at 11:57
I would use something lighter than black like `#88000000` – sweak Nov 05 '21 at 11:58
colorful image https://drive.google.com/file/d/1OGdzhUNPHwWw7JCm87j3bSsvv-fM2D7R/view?usp=sharing – Vasant Raval Nov 05 '21 at 12:00
white image https://drive.google.com/file/d/1OMF47dtUAER-Y8DKlhqNsBgjY1RVkiCx/view?usp=sharing – Vasant Raval Nov 05 '21 at 12:01
I think this is way better now, but try increasing the transparency of the black until it is as light as possible and the text can still be visible. – sweak Nov 05 '21 at 12:03
ok i have used #88000000 this and it worked, https://drive.google.com/file/d/1ORzH6aInMTZCiWLblvvhspurM5hhhkDQ/view?usp=sharing , is there any way to just add endColor and not startColor – Vasant Raval Nov 05 '21 at 12:07
Gradient has to have two colors it makes transition through, so both start and end colours are required. – sweak Nov 05 '21 at 12:26
hey can you tell me what is android:angle="90" i mean what it does – Vasant Raval Nov 05 '21 at 19:41
It specifies the angle of direction of the gradient. You can try to delete this attribute and see what happens, this will help You understand. – sweak Nov 05 '21 at 19:43
1

ok, i understand it set the direction of the gradient as angle,90 means the 90-degree angle, am I right? – Vasant Raval Nov 05 '21 at 19:46
if we don't specify the startColor starts from the left and goes to the right – Vasant Raval Nov 05 '21 at 19:48
Here is nice follow-up on the angle attribute: https://stackoverflow.com/questions/12153890/angle-attribute-in-android-gradient – sweak Nov 05 '21 at 19:50
thanks for your help – Vasant Raval Nov 05 '21 at 19:56
can you give me a suggestion, as you can see from the images I have shared, is it is a good UI design for the image view or I just separate all the buttons and the text views in a different segment and leave the image view alone (I'm trying to develop a social media app ) – Vasant Raval Nov 05 '21 at 19:59
because if the image is bright enough there is not much a problem, but not every user has some kind of image brightness – Vasant Raval Nov 05 '21 at 20:03
I think that this is all up to You now :D – sweak Nov 05 '21 at 20:09
1

yup , btw thanks once again for your efforts for solving my question – Vasant Raval Nov 05 '21 at 20:10

How to make white buttons visible on a white image

1 Answers1