Make layout size depend on image size in XML - android

I'm currently writing an android app with Android Studio. In order to fit most screen sizes I decided to use LinearLayouts inside ConstraintLayout.
I have the following code for xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackground"
tools:context=".Kadr1Activity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/contentDescrKadr1"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/lol" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/backBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginStart="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_back" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/nextBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_next" />
</LinearLayout>
</LinearLayout>
It looks like this:
I want ImageButtons height depend on the height of the ImageView. I tried using RelativeLayout, however, I cannot get how to implement dependencies not on whole screen size, but only on ImageView size.
So, how can I adjust height of my horizontal LinearLayout (with buttons) to be 4 times smaller (for example) than ImageView height?
Would be grateful for any possible advice.


Thanks to #Marcin Orlowski, I got it:
should set ImageView height to "0dp", horizontal LinearLayout height to "0dp", then set ImageView weight to "4" and LinearLayout weight to "1".
It works properly:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackground"
tools:context=".Kadr1Activity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:adjustViewBounds="true"
android:contentDescription="#string/contentDescrKadr1"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/lol" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1">
<ImageButton
android:id="#+id/backBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginStart="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_back" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/nextBtn"
style="#style/Widget.AppCompat.ImageButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#string/contentDescrNext"
android:onClick="nextClick"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:srcCompat="#drawable/btn_next" />
</LinearLayout>
</LinearLayout>

Related

Scale Imagebuttons to fit width

I have a Scrollview with a ConstraintLayout and I want to add some Imagebuttons. They should be scaled to fit the half width so I can put 2 Buttons in a row.
The whole thing must me scrollable because I want to add about 10 rows of buttons.
I tried many options like seen here ConstraintLayout: how to have a view be half the screen width and centered?
My layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
tools:ignore="SpeakableTextPresentCheck">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:adSize="BANNER"
app:adUnitId="ca-app-pub-xxxxxx"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/ibDog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/dog"
app:layout_constraintEnd_toStartOf="#+id/ibHorse"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView"
app:srcCompat="#drawable/dog" />
<ImageButton
android:id="#+id/ibHorse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/horse"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/ibDog"
app:layout_constraintTop_toBottomOf="#+id/adView"
app:srcCompat="#drawable/horse" />
<ImageButton
android:id="#+id/ibCat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cat"
app:layout_constraintEnd_toStartOf="#+id/ibFrog"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ibHorse"
app:srcCompat="#drawable/cat" />
<ImageButton
android:id="#+id/ibFrog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/frog"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/ibCat"
app:layout_constraintTop_toBottomOf="#id/ibHorse"
app:srcCompat="#drawable/frog" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Thanks!

Try the following. I have changed the width of the ScrollView to match_parent and changed the width of the ImageViews to 0dp which will stretch out the images according to chain logic.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
tools:ignore="SpeakableTextPresentCheck">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/adView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:adSize="BANNER"
app:adUnitId="ca-app-pub-xxxxxx"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/ibDog"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/ibHorse"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView"
app:srcCompat="#drawable/ic_launcher_foreground" />
<ImageButton
android:id="#+id/ibHorse"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ibDog"
app:layout_constraintTop_toBottomOf="#+id/adView"
app:srcCompat="#drawable/ic_launcher_foreground" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageButton
android:id="#+id/ibHorse"
android:layout_width="0dp"
android:layout_weight="1"
android:contentDescription="#string/dog"
android:layout_height="wrap_content"
app:srcCompat="#drawable/horse" />
<ImageButton
android:id="#+id/ibCat"
android:layout_width="0dp"
android:layout_weight="1"
android:contentDescription="#string/cat"
android:layout_height="wrap_content"
app:srcCompat="#drawable/cat" />
</LinearLayout>

How to divide screen two equal part vertically in ConstraintLayout in android

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_12"
android:src="#drawable/ic_top_log"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_4"
android:src="#drawable/ic_top_log_p"
app:layout_constraintBottom_toBottomOf="#+id/imageView4"
app:layout_constraintStart_toEndOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="#+id/imageView4" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/textView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4">
// this part we have to divide in two part
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This my code i want to divide in two part equal part i have tired but it not showing in two part please help me how to divide ConstraintLayout in to two equal part vertically .

<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/textView9"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4">
<LinearLayout
android:id="#+id/linear1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/linear2"
app:layout_constraintTop_toTopOf="parent">
<!--Do Your Stuff -->
</LinearLayout>
<LinearLayout
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/linear1">
<!--Do Your Stuff-->
</LinearLayout>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="#id/linear1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/linear2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Preview
You can replace any view instead of LinearLayout too.

Constraintlayout(in RelativeLayout) layout_alignParentBottom cuts from bottom(in default mode of app)

I have added ConstraintLayout in RelativeLayout and I want that at the bottom of my RelativeLayout.So, it's proper when the app opens in full-screen mode but in default mode constraint layout cuts from the bottom.
I have checked this thing in the different scenario like if I put it on top it comes proper even in the default mode but when I align it to bottom it gets cut.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="org.cocos2dx.cpp.AppActivity"
android:id="#+id/cameraView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:paddingBottom="0dp"
android:layout_alignParentBottom="true"
android:background="#color/control_background">
<ImageButton
android:id="#+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:background="#android:color/transparent"
android:src="#drawable/close"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageCaptureBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:scaleX="1.20"
android:scaleY="1.20"
android:src="#drawable/capture"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
<ImageButton
android:id="#+id/reverseCameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#android:color/transparent"
android:src="#drawable/reverse_cam"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.508" />
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
So, here in ConstraintLayout when I keep
android:layout_alignParentTop="true"
It doesn't get cut from top like in the image
but when I give it to android:layout_alignParentBottom="true" it gets cut only in default mode of the app and I want this constraintLayout at bottom of the RelativeLayout

You can also use Constraint layout as Rootview like below.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/cameraView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/colorPrimary">
<ImageButton
android:id="#+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageCaptureBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:scaleX="1.20"
android:scaleY="1.20"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageButton
android:id="#+id/reverseCameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I am struggling to control the gravity of a textView inside my CardView items once I put it inside a GridView

Below is a screenshot of my gridView currently:
Even though I have centered the TextField inside the card, they are still pinned to the left. How do I fix this so that the Text is centered in the middle? It seems like once I add an item to a gridView, the gridView attributes overrule their children.
Here is my layout code:
CARDVIEW
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
layout_height=""
android:layout_width="120dp"
android:layout_height="120dp"
app:cardBackgroundColor="#E73737"
app:cardElevation="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivCategoryIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/tvCategoryTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/btn_translation_panel_loading" />
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Fragment
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.fragments.CategoryViewFragment">
<GridView
android:id="#+id/gvCategories"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:clickable="true"
android:clipChildren="false"
android:gravity="center"
android:horizontalSpacing="8dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>

Add android:gravity="center" in your textview like following.
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:gravity="center"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"/>

use relative layout insists of ConstraintLayout.
use center_horizontal to the text view=true

Can you please try this and change your constraint layout ?
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivCategoryIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/btn_translation_panel_loading" />
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

How to make image background of textview semi transparent but not the text?

I need to set an image background of a textview dynamically and make it semi transparent, with text with full opacity.
Something like this does, but compatible with <21 API.
android:backgroundTint="#80FFFFFF"
android:backgroundTintMode="src_over"
When I use
textView.setBackgroundResource(x.getPicture());
textview.getBackground().setAlpha(80);
it works but later when I use the same resource to an imageview it remains transparent even though I use
imageView.setImageAlpha(255);
or
imageView.setAlpha((float) 1.0);
And this affects whole textview including the text itself.
textView.setAlpha((float) 0.5);
I tried everything I could find but didn't find a solution. What am I doing wrong?
Whole layout xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg1">
<include
android:id="#+id/top_toolbar_details"
layout="#layout/toolbar"
android:layout_width="0dp"
android:layout_height="68dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<LinearLayout
android:id="#+id/ll_graphics"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_toolbar_details">
<!--This is the imageview-->
<ImageView
android:id="#+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:keepScreenOn="true"
android:longClickable="true"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_toolbar_details" />
<VideoView
android:id="#+id/vv_video"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/iv_image"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_toolbar_details"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<ScrollView
android:id="#+id/sv_scroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="vertical">
<!--This is the textview-->
<TextView
android:id="#+id/tv_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="20"
android:paddingBottom="20dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="10dp"
android:scrollbars="vertical"
android:textColor="#color/black"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/iv_image"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_toolbar_details" />
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="1"
app:layout_constraintBottom_toTopOf="#+id/llImg"
app:layout_constraintHorizontal_bias="0.505"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ImageButton
android:id="#+id/b_last_viewed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/circle_shape_drawable"
android:scaleType="fitCenter"
android:src="#drawable/ic_previous"
app:layout_constraintBottom_toTopOf="#+id/llImg"
app:layout_constraintHorizontal_bias="0.773"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/b_to_all"
app:layout_constraintTop_toBottomOf="#+id/vv_video"
app:layout_constraintVertical_bias="0.97" />
<ImageButton
android:id="#+id/b_to_all"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:adjustViewBounds="true"
android:background="#drawable/circle_shape_drawable"
android:scaleType="fitCenter"
android:src="#drawable/ic_grid"
app:layout_constraintBottom_toTopOf="#+id/llImg"
app:layout_constraintTop_toBottomOf="#+id/vv_video"
app:layout_constraintVertical_bias="0.95"
tools:layout_editor_absoluteX="176dp" />
<ImageButton
android:id="#+id/b_to_favourites"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#drawable/circle_shape_drawable"
android:scaleType="fitCenter"
android:src="#drawable/ic_favourite"
app:layout_constraintBottom_toTopOf="#+id/llImg"
app:layout_constraintHorizontal_bias="0.164"
app:layout_constraintLeft_toRightOf="#+id/b_to_all"
app:layout_constraintRight_toRightOf="parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/llImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
tools:layout_editor_absoluteX="0dp">
<android.support.v17.leanback.widget.HorizontalGridView
android:id="#+id/gv_small_preview"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_marginBottom="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/b_last_viewed"
app:layout_constraintVertical_bias="0.0"
tools:layout_editor_absoluteX="0dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

just realign your layout
//this is your root
<RelativeLayout>
//this is your background
//add your semi transparent for below imageView
<ImageView android:height="match_parent" android:witdh="match_parent"/>
//this is your text
<TextView/ >
</RelativeLayout>
then programmatically
imageView.setImageAlpha(255); //it will not affect the textview
or just add android:alpha in xml at imageView

Try this:
int myColor = Color.parseColor("#80FFFFFF");
Drawable backgroundColor = new ColorDrawable(myColor);
backgroundColor.setAlpha(yourAlpha);
textView.setBackground(backgroundColor);

Categories

Resources