How to change android showcaseview circle position? - android

I have created showcase view using https://github.com/amlcurran/ShowcaseView library. By default the showcase view circle is pointing to the center of the element.
I want to move this circle to the beginning of the TextView
please help me
Updates
My layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.bm.eg.activities.CreateProfileActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/toolbar_transparent" />
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:hint="#string/hint_title"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#color/white_transparency_50"
android:textSize="24sp" />
in activity
mTVTitle = (TextView) findViewById(R.id.tv_title);
mShowcaseView = new ShowcaseView.Builder(this)
.setTarget(new ViewTarget(mTVTitle))
.setContentTitle(getString(R.string.sv_create_profile_title))
.setContentText(getString(R.string.sv_create_profile_title_description))
.setStyle(R.style.CustomShowcaseTheme2)
.blockAllTouches()
.replaceEndButton(R.layout.showcase_view_cusom_button)
.build();

Finally after researching on your issue i found a solution for you.
You have to modify your layout design add one more RelativeLayout in your design like below and add two TextViews in it and include your tv_title and hack_txt textview in it like below.
Note: hack_txt android:hint="aaaaaa" must add 5 or 6 character in it and set android:visibility="invisible".
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.bm.eg.activities.CreateProfileActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/toolbar_transparent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="8dp">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:hint="#string/hint_title"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#color/white_transparency_50"
android:textSize="24sp" />
<TextView
android:id="#+id/hack_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:hint="aaaaaa"
android:textSize="24sp"
android:visibility="invisible" />
</RelativeLayout>
<!--... your other view-->
</LinearLayout>
</RelativeLayout>
Now update here too
mTVTitle = (TextView) findViewById(R.id.tv_title);
mTVHack = (TextView) findViewById(R.id.hack_txt);
Lastly Update here too.
.setTarget(new ViewTarget(mTVHack))
You are Done happy Coding.

Related

Left view will take up all the space in a horizontal LinearLayout

I have two TextView (tv1 and tv2), and I want tv2 to be on the right of tv1, like this:
short text
or
long text
(Sorry I can't embed images because I don't have enough reputation : (
So I make a layout like this:
<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="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*" />
</LinearLayout>
If the text of tv1 is within one line, everything is perfect. But if the text is more than one line, tv1 will take all the space:
tv1 take all the space
I think it may be because of Android lays out views in the order in which they appear in the layout file, so I change the root view from LinearLayour to ConstraintLayout and make tv2 first:
<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="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"
app:layout_constraintLeft_toRightOf="#+id/tv1"
app:layout_constraintStart_toEndOf="#+id/tv1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This still doesn't work. I know I can use setLayoutParams to set tv1's width programmatically, but is there any other way besides programming?
At last I managed to make it by using padding:
<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"
tools:context=".MainActivity">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="12sp"
android:text="HelloWorld"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv2"
android:layout_width="12sp"
android:layout_height="wrap_content"
android:text="*"
app:layout_constraintRight_toRightOf="#id/tv1"
app:layout_constraintTop_toTopOf="#id/tv1" />
</androidx.constraintlayout.widget.ConstraintLayout>
The point is using tv2's right-to-right constraint for tv1, and setting a fixed size width of tv2 and padding-right size of tv1. So tv2 overlays on top (and inside) of tv1.
Try this its works for me. You have to set layout_width="0dp" and layout_weight="1" in both TextView.
<?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="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20dp"
android:text="hello world ********** welcome"/>
<TextView
android:id="#+id/tv2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20dp"
android:text="hello world ********** welcome" />
</LinearLayout>
Finally found a perfect way to archive this:
Change LinearLayout to TableLayout + TableRow
Use the shrinkColumns attribute of TableLayout to specify the zero-based index of the columns to shrink. I set it to 0 because I want tv1 to be shrinkable so that it will not take up all the space
<TableLayout 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="wrap_content">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*" />
</TableRow>
</TableLayout>

android:unable to make multiline chipgroup

I have a chipgroup within a relative layout along with a textview whose code is shown below.
<RelativeLayout
...
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="TextTitle"
android:layout_alignParentStart="true"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="#android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="#+id/tv"
android:layout_toLeftOf="#id/cg"
android:layout_alignBaseline="#id/cg"
/>
<com.google.android.material.chip.ChipGroup
android:id="#+id/cg"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
/>
</RelativeLayout>
I add chips to this chipgroup dynamically like the below:
Chip chip;
for(int i=0;i<2;i++){
chip = new Chip(this);
chip.setText("Text:"+i);
chip.setChipBackgroundColorResource(android.R.color.darker_gray);
chip.setTextColor(Color.WHITE);
mChipGroup.addView(chip);
}
The above brings the textview and chipgroup side by side (with the chips at the extreme right from the textview,which is what I want).
For 2 or 3 chips the output looks like this:
But when I have more than 3 chips,it looks bad like this:
I referred the docs and tried to make the chipgroup multiline and added the following in chipgroup xml
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
It looks the same as in the pic2.
What I need is a chipgroup with multiline option with spacing as that in the pic1,i.e in the pic1 , I want Text3 beneath Text0 and Text4 beneath Text1 and so on, if the no of chips increases!.
Im sure I must be missing something,but dont know what it is.Any help will be very useful.Thanks in advance!!
I update from #Sajith 's answer,see if it could work:
<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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="25"
android:layout_height="wrap_content"
android:text="TextTitle"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="#android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="#+id/tv" />
<FrameLayout
android:layout_width="0dp"
android:layout_weight="75"
android:layout_height="wrap_content" >
<com.google.android.material.chip.ChipGroup
android:id="#+id/cg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:textColor="#android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false" />
</FrameLayout>
</LinearLayout>
</RelativeLayout>
use your xml like below
<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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="25"
android:layout_height="wrap_content"
android:text="TextTitle"
android:gravity="left"
android:layout_marginTop="16dp"
android:textColor="#android:color/white"
android:textStyle="bold"
android:textSize="14sp"
android:id="#+id/tv"
/>
<com.google.android.material.chip.ChipGroup
android:id="#+id/cg"
android:layout_width="0dp"
android:layout_weight="75"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:textColor="#android:color/black"
android:textStyle="bold"
android:textSize="12sp"
app:singleSelection="false"
app:chipSpacingVertical="32dp"
app:chipSpacingHorizontal="5dp"
app:singleLine="false"
/>
</LinearLayout>
</RelativeLayout>
and your final screen would be like below . Adjust space and width of chips according to your requirement.
EDIT
if you want to set height use it like below in your activity (inside for loop)
chip.setChipMinHeight(10);
All of the previous solutions didn't work for me if you want to achieve a gmail like behaviour with chips on multiple lines. In order to do that I had to avoid using the ChipGroup and instead using a FlexboxLayout.
your_recipient_layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/recipient_label_TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_gravity="center_vertical" />
<com.google.android.flexbox.FlexboxLayout
android:id="#+id/recipient_group_FL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_gravity="center_vertical"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="space_around"
app:showDivider="beginning|middle|end"
app:dividerDrawable="#drawable/divider">
<EditText
android:id="#+id/recipient_input_ET"
android:layout_width="wrap_content"
android:layout_height="32dp"
app:layout_flexGrow="1"
android:background="#android:color/transparent"
android:imeOptions="actionDone"
android:inputType="text"/>
</com.google.android.flexbox.FlexboxLayout>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recipients_list_RV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
The trick now is adding a new chip to the group but as second last position. Something like this:
private fun addChipToGroup(person: String, chipGroup: FlexboxLayout) {
val chip = Chip(context)
chip.text = person
chip.chipIcon = ContextCompat.getDrawable(requireContext(), R.mipmap.ic_launcher_round)
chip.isCloseIconEnabled = true
chip.isClickable = true
chip.isCheckable = false
chipGroup.addView(chip as View, chipGroup.childCount - 1)
chip.setOnCloseIconClickListener { chipGroup.removeView(chip as View) }
}

How to align buttons next to text that should flow on 2 lines?

So I want to have a title with 2 buttons next to it. These buttons should stick to the left next to the text, and when the text becomes too long, it should flow on 2 lines.
I was able to replicate this by giving the textView a maxwidth, but this causes the textview to take that maxwidth, even if it reflows on 2 lines. Therefore my buttons don't align next to the text anymore.
Like this:
How can I make my textView take the width it needs, not the one I tell it to use as maxWidth?
Here comes the perfectly working answer using ConstraintLayout (as I love this layout).
This is the code.
<android.support.constraint.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.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text"
android:layout_marginTop="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:maxWidth="300dp">
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:maxWidth="300dp"
android:text="Some layout is going to be created and whatever I do it won't cross the limit."
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"/>
</android.support.constraint.ConstraintLayout>
<ImageView
android:layout_height="40dp"
android:background="#365987"
android:layout_width="40dp"
android:layout_marginStart="5dp"
android:id="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"/>
<ImageView
android:id="#+id/image1"
android:layout_height="40dp"
android:background="#e85f11"
android:layout_width="60dp"
android:layout_marginStart="5dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Outputs:
Whatever the text is, it will not cross the maxwidth. And with less width than maxwidth, it's width will be wrap_content.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:text="Male:"
android:textColor="#111111"
android:textSize="12dp" />
<ImageView
android:id="#+id/iv_male"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/block_user" />
<ImageView
android:id="#+id/iv_female"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/blocked_user" />
</LinearLayout>
<TextView
android:id="#+id/tv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is something Demo Content"
android:layout_marginLeft="#dimen/_15sdp"
android:textColor="#111111"
android:textSize="12dp" />
</LinearLayout>
So you can just add content below the linear layout complete
I Hope it Helps you and you will get your solution.
Try this code
<?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="wrap_content"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="2"
android:paddingEnd="100dp"
android:text="Simple textdfddfdf dfdfdfdfdf dfdf Sample Text Sample Text" />
<LinearLayout
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/zero"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Here, You have to pass android:paddingEnd="100dp". This you can manage from dimens.xml
I hope. This will help full
You should use ConstraintLayout
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Let's take an instance of that Planner part of the image.
<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:id="#+id/constraintLayout"
<!-- Other attributes -->
<TextView
android:id="#+id/text"
android:layout_width = "xxxdp"
android:layout_height = "xxxdp"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintLeft_toLeftOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
<!-- Other attributes --> />
Definition of Attributes used.
layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.

Android CardView containing ImageView and TextView issue

I made an item XML file that I want to pass to an Adapter so I can display a list of items within a RecyclerView.
The layout file consists of a CardView which contains an ImageView to show a movie poster and a TextView to display the movie title.
My problem is that I can't find a way to place the TextView over the ImageView so the title can be seen above the poster.
my xml file:
<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:layout_margin="#dimen/dimension_value_10"
>
<android.support.v7.widget.CardView
app:cardCornerRadius="#dimen/dimension_value_5"
android:layout_width="match_parent"
android:layout_height="200dp"
android:elevation="#dimen/dimension_value_15"
android:id="#+id/movie_poster_card"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<ImageView
android:id="#id/movie_poster_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="10dp" />
<TextView
android:id="#+id/movie_title_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/movie_poster_card"
android:layout_centerHorizontal="true"
android:gravity="center|start"
android:layout_margin="#dimen/dimension_value_10"
android:paddingLeft="#dimen/dimension_value_10"
android:text="Movie title here"
android:textColor="#color/white"
android:layout_gravity="bottom"
android:textSize="26sp" />
</android.support.v7.widget.CardView>
Here is the design image to be more explicit:
You can use a Vertical LinearLayout inside the CardView and center the textView..
<android.support.v7.widget.CardView
app:cardCornerRadius="#dimen/dimension_value_5"
android:layout_width="match_parent"
android:layout_height="200dp"
android:elevation="#dimen/dimension_value_15"
android:id="#+id/movie_poster_card"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/movie_title_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/movie_poster_card"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_margin="#dimen/dimension_value_10"
android:paddingLeft="#dimen/dimension_value_10"
android:text="Movie title here"
android:textColor="#color/white"
android:layout_gravity="bottom"
android:textSize="26sp" />
<ImageView
android:id="#id/movie_poster_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:elevation="10dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
A CardView is really only meant to have a single child. You should wrap your ImageView and TextView in something like a FrameLayout and make that the CardView child.
Wrap imageview and textview in a relative layout and move the elevation to the relative layout container to maintain the shadow effect you're looking for.
Edit::
I'm not sure why this was down voted, since it's the correct answer.
For clarity you should change your code to:
<android.support.v7.widget.CardView
app:cardCornerRadius="#dimen/dimension_value_5"
android:layout_width="match_parent"
android:layout_height="200dp"
android:elevation="#dimen/dimension_value_15"
android:id="#+id/movie_poster_card"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="10dp" >
<ImageView
android:id="#id/movie_poster_image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/movie_title_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/movie_poster_card"
android:layout_centerHorizontal="true"
android:gravity="center|start"
android:layout_margin="#dimen/dimension_value_10"
android:paddingLeft="#dimen/dimension_value_10"
android:text="Movie title here"
android:textColor="#color/white"
android:layout_gravity="bottom"
android:textSize="26sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>

Display textview below imageview and not bottom to the parent

I'm working on an Android application and I have an issue with how to display an image in a view. My issue is that I want to display an image and two textViews just below my imageView without aligning their bottom to the parent's. See the wireframe below.
My problem is that when the imageView is taking all the height of the relativeLayout, my textViews are hidden below the parents view.
I have tried a lot of things but nothing is satisfaying...
I have tried to put my imageview in a linearLayout and put a weight on it but if my imageView is smaller I have a blank between the imageView and the textView.
It's complicated because each image I load can have a different size and thus I can't fix a default size to it.
Also, my layout is in a viewPager and when I want to have the Height of the view when I instantiate it on my adapter it returns 0. So I can't compute the size of the elements in the view.
Have you any idea how can I make my layout ?
Maybe in a coordinatorLayout to have circular dependencies (but I don't know how to make it) ?
Here a wireframe of what I want to do with my view: image
And here the code of my layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relative_photo_detail_bottom_infos">
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/placeholder"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/photo_detail_full_size"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:textColor="#color/grey"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_photo_detail_bottom_infos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/relative_photo_detail_image"
android:padding="10dp">
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
Try putting your code inside Scroll view
Update your layout structure as below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TextView 2 -->
<TextView
android:id="#+id/photo_detail_owner_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="16sp"
android:textColor="#android:color/holo_red_dark"
android:text="This is TextView Two"/>
<!-- TextView 1 -->
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/photo_detail_owner_description"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:text="This is TextView One"/>
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/photo_detail_owner"
android:background="#android:color/black">
<!-- Image -->
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/dummy"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<!-- Delete Icon -->
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
OUTPUT:
Hope this will help~
Something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView2"
android:textAlignment="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView3"
android:textAlignment="center" />
</LinearLayout>

Categories

Resources