TextView above Image view in a layout - java

I am using this layout for my screen:
<?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" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_gravity="top|center" android:layout_marginTop="-10dp"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
android:layout_gravity="top|center"/>
</LinearLayout>
and i want to add a TextView to the screen that will be above the imageView2.
and when i add it to the xml it show it under the image.
what i need to do to be able to put TextView on image.


Try 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" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_marginTop="-10dp"/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>


You could add another LinearLayout where the second image is, for example:
<?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" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_gravity="top|center" android:layout_marginTop="-10dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Goes Here" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
android:layout_gravity="top|center"/>
</LinearLayout>
</LinearLayout>


Here is an alternative,
in your xml file,
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:layout_centerInParent="true"
android:layout_above="idofyourImage"
/>
Hope it helps

Related

XML markup in the Android application

How do I distribute the objects so that the TextView is perfectly in the middle of the parent object, and the ImageButton is on the left. Tried to install for the parent element
android:gravity="center"
, as well as for the TextView itself
android:layout_gravity="center"
, but nothing comes out. I attach the code below.
<?xml version="1.0" encoding="utf-8"?>
<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=".add">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp"
android:orientation="horizontal"
android:gravity="center">
<ImageButton
android:id="#+id/backArrow"
android:layout_width="30dp"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:background="#color/transparent"
android:src="#drawable/back_arrow" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/tenor_sans"
android:text="#string/adder"
android:textColor="#2C1E4D"
android:textSize="24sp" />
</LinearLayout>
</RelativeLayout>

Does this help you with your requirement
<?xml version="1.0" encoding="utf-8"?>
<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=".add">
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="67dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/backArrow"
android:layout_width="30dp"
android:layout_height="match_parent"
android:background="#color/colorBlack"
android:scaleType="fitCenter"
android:src="#drawable/back_arrow" />
<TextView
android:layout_gravity="center|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/aclonica"
android:text="#string/adder"
android:textColor="#2C1E4D"
android:textSize="24sp" />
</LinearLayout>
</RelativeLayout>

Display 2 or more textviews in one row

I saw some same questions, but
I'm using android:orientation="vertical"
so I can't use orientation as horizontal.
How can I display 2 or more textviews on 1 row?
(Sorry for my english skills)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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=".MainActivity"
android:orientation="vertical"
android:background="#drawable/background"
android:weightSum="1">
<TextView
android:layout_width="62dp"
android:layout_height="28dp"
android:layout_gravity="right"
android:text="Sign in"
android:textColor="#7041EE"
android:textSize="20dp" />
<TextView
android:id="#+id/nwah"
android:layout_width="162dp"
android:layout_height="28dp"
android:layout_gravity="left"
android:text="New around here?"
android:textColor="#ACACAC"
android:textSize="20dp" />
</LinearLayout>
enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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=".MainActivity"
android:orientation="vertical"
android:background="#drawable/background"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Sign in"
android:textColor="#7041EE"
android:textSize="20dp" />
<TextView
android:id="#+id/nwah"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="1"
android:layout_gravity="left"
android:text="New around here?"
android:textColor="#ACACAC"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>

You can add another view for textView
<LinearLayout // vertical
<LinearLayout // hotizontal
<TextView/>
<TextView/>
<LinearLayout/>
<LinearLayout/>
or you can use Constraint layout

How to set color in the side of cardview

I'm trying to understand what is the best way to set color in the side of a CardView like this
My cardview looks like this:
<?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"
xmlns:card_view="http://schemas.android.com/tools"
android:id="#+id/cardViewWe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:layout_marginRight="4dp"
android:layout_marginBottom="4dp"
android:foreground="?attr/selectableItemBackground"
android:transitionName="cardTransition"
app:cardBackgroundColor="#drawable/selector"
app:cardElevation="2dp"
card_view:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.....
.....
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Try this way
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="wrap_content"
android:orientation="vertical"
app:cardCornerRadius="10dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal">
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/colorAccent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nilesh Rathod" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nilesh Rathod" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nilesh Rathod" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
OUTPUT

How to create Layout Topside ribbon on android app

I want to create a layout with ribbon for my android app layout but the ribbon goes behind the image immediately it fetches data / image from server. this is my layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_medium"
android:clipToPadding="false"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="#dimen/card_radius"
app:cardElevation="#dimen/card_elevation"
app:cardUseCompatPadding="false">
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/lyt_parent"
style="#style/RippleStyleBlack"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/grey_40">
<ImageView
android:layout_width="#dimen/product_item_img"
android:layout_height="#dimen/product_item_img"
android:src="#drawable/loading_placeholder"
android:tint="#color/grey_60" />
<ImageView
android:text="RED"
android:id="#+id/down_ribbon"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right|top"
android:src="#drawable/ic_top_ad_right"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_height="150dp"
android:scaleType="centerCrop" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="#color/grey_5" />
</LinearLayout>
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
The first imageView above is the background The second Imageview is the ribbon and the third imageView is for the image gotten from the server.
My Question is how will i make image Ribbon come in front of the image after and before it fetches it from the server. Thanks

THe problem is that the ribbon imageView should come last since all of them are at the same RelativeLayout see the correct code below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_medium"
android:clipToPadding="false"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="#dimen/card_radius"
app:cardElevation="#dimen/card_elevation"
app:cardUseCompatPadding="false">
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/lyt_parent"
style="#style/RippleStyleBlack"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/grey_40">
<ImageView
android:layout_width="#dimen/product_item_img"
android:layout_height="#dimen/product_item_img"
android:src="#drawable/loading_placeholder"
android:tint="#color/grey_60" />
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_height="150dp"
android:scaleType="centerCrop" />
<ImageView
android:text="RED"
android:id="#+id/down_ribbon"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right|top"
android:src="#drawable/ic_top_ad_right"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="#color/grey_5" />
</LinearLayout>
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>

android align element at bottom of the screen

I am using android:layout_alignParentBottom="true" to align at parent bottom but for this particular case is not valid. Parent is a relative layout that has fixed size and bigger that screen height. Now I need to place a textview aligned at bottom of screen and not parent bottom. How to reach it? thank you.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="600dp" >
<RelativeLayout
android:id="#+id/blogLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:id="#+id/webviewBlog"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#android:color/black"
android:scrollbars="none"
android:fitsSystemWindows="true" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/Volver"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true">
<TextView
android:id="#+id/Volvertxt"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Volver"
android:textColor="#android:color/white"
android:textSize="30px"
android:gravity="center"
android:clickable="true"
android:onClick="onClickVolver" />
</RelativeLayout>
</RelativeLayout>

I have modified your code hope it solves your problem
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/webviewBlog"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#android:color/black"
android:scrollbars="none"
android:fitsSystemWindows="true" />
<TextView
android:id="#+id/Volvertxt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Volver"
android:textColor="#android:color/white"
android:textSize="30px"
android:gravity="center"
android:clickable="true"
android:onClick="onClickVolver" />
</RelativeLayout>

That is because, you are giving height in dp units of the parent layout. Make it match_parent.
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="#+id/webviewBlog"
android:layout_width="fill_parent"
android:layout_height="600dp"
android:textColor="#android:color/black"
android:scrollbars="none"
android:fitsSystemWindows="true" />
<RelativeLayout
android:id="#+id/Volver"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true">
<TextView
android:id="#+id/Volvertxt"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Volver"
android:textColor="#android:color/white"
android:textSize="30px"
android:gravity="center"
android:clickable="true"
android:onClick="onClickVolver" />
</RelativeLayout>
</RelativeLayout>

Categories

Resources