Layout wrap content not working
Below is my XML code . I want to place the portion linear layout with grey colour just above the main image . Screenshot of my code here.
In devices with aspect ratio 16:9 design is correct , but in 18:9 and 18.5:9 the grey portion is on top side .
The topic text and icon must be top left side portion of main image .
The design i want here
Never mind top side . From bottom the hight must be wrap the size of image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#color/light_green"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/dark_green">
<LinearLayout
android:id="#+id/topLin"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/grey"
android:orientation="horizontal">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/test" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#color/grey"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Here the main layout is RelativeLayout and the children are both layout_alignParentBottom="true"
You can just switch the child layouts around until you get the required layout
Tip: The less layouts you use, the faster rendering will be on slow devices.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_green">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/grey">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
</LinearLayout>
</RelativeLayout>
I have added weightSum to parent LinearLayout so you can easily divide screen according to your requirements.
Assigned View android:layout_weight="3" so it will cover 3/10th part of the screen, you can change it according to what you feels good for you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#android:color/holo_green_light"
android:orientation="vertical"
android:weightSum="10"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/holo_green_light"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="25"
android:padding="11dp"
android:background="#android:color/darker_gray"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/RelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/nameTxt"
android:layout_alignParentBottom="true"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/mobile_world" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:background="#android:color/black"
android:padding="11dp"
>
<ImageView
android:id="#+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:layout_gravity="center_vertical"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Output
Check this layout:
<?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"
android:background="#android:color/holo_green_light">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView"
android:background="#android:color/darker_gray"
android:maxLength="25"
android:padding="10dp"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/test" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:drawableStart="#drawable/ic_love"
android:drawablePadding="10dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>
Related
I was wondering, how can I make my ImageView width, match the scaled image content width.
I'm using wrap_content for ImageView.
This works very well, if the image content is small sized.
However, it doesn't work well, for a large portrait or large landscape image.
Here's my outcome.
1st row is what I wish to achieve. It is using a small image.
Respect image content width by using wrap_content.
Respect left TextViews' height, by using match_parent.
However, when comes to 2nd row and 3rd row, it is not something what I expect.
2nd row is using large portrait image. 3rd row is using large landscape image.
Doesn't respect image content width.
Image content is not right most.
For ImageView, I'm using the following XML
<ImageView
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/landscape" />
Here's my complete layout XML
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/about_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:cardElevation="2dp"
app:cardCornerRadius="2dp"
app:cardPreventCornerOverlap="false"
android:foreground="?attr/selectableItemBackground"
android:clickable="false" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="#dimen/space_among_cards"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/primaryTextColor"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_refresh_black_18dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="#dimen/space_among_cards"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/primaryTextColor"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/portrait" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="#dimen/space_among_cards"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/primaryTextColor"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/landscape" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
Here's the image I'm using
Small image
Large portrait image
Large landscape image
Any idea how I can make ImageView behaves the following when using large image?
Respect the scaled image content width
Make image content right most
Update
I had tried to use android:adjustViewBounds="true". However, it get thing worst as you can see the large portrait image is pushing its left TextViews away.
Try this:
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#ff0000"
android:scaleType="fitEnd"
android:src="#drawable/portrait" />
Try using
adjustViewBounds="true"
On the ImageView, (see documentation), to make sure the view only uses the necessary width.
i have added weightSum to root layout and give weight to the child
layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/about_card_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
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"
android:layout_marginBottom="20dp"
android:weightSum="100">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="0dp"
android:layout_weight="60"
android:layout_height="wrap_content"
android:src="#drawable/mic_pic" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dp"
android:weightSum="100">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="0dp"
android:layout_weight="60"
android:layout_height="wrap_content"
android:src="#drawable/images1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="40"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="CEO"
android:textSize="12sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="6dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#02B8B9"
android:text="Mark_Zuckerberg"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:background="#ff0000"
android:layout_width="0dp"
android:layout_weight="60"
android:layout_height="wrap_content"
android:src="#drawable/test_image" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have the following xml. Basically I want to display the movie overview below the Layout whose id is equals to layoutOne.
<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="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay">
<LinearLayout
android:id="#+id/layoutOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#color/primary"
>
<ImageView
android:id="#+id/movie_image"
android:layout_width="160dp"
android:layout_height="240dp"
android:scaleType="fitXY"
android:layout_gravity="center_vertical"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:padding="16dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content">
<TextView
android:id="#+id/movie_title"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
/>
<TextView
android:layout_below="#+id/movie_title"
android:layout_centerHorizontal="true"
android:id="#+id/movie_rating"
android:text="9/10"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_below="#+id/movie_rating"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_marginTop="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/ic_menu_my_calendar"/>
<TextView
android:layout_below="#+id/movie_rating"
android:layout_centerHorizontal="true"
android:id="#+id/movie_date"
android:text="2017-10-9"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
/>
</LinearLayout>
</RelativeLayout>
<TextView
android:id="#+id/title_overview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Great movie" />
</LinearLayout>
</ScrollView>
Here is what I get.
I want the sample text Great movie to be below that light pink layout. The tricky part here is that Scrollbar view allow only one child view. Any ideas?
Thanks,
Theo.
The Constraint of the RelativeLayout should fit the whole page. If you want to use ScrollView you should add the RelativeLayout to the ScrollView too.
Hence it would be like this :
<LinearLayout
android:id="#+id/layoutOne"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#color/primary"
>
Later you can use the following to adjust the image:
<LinearLayout
android:layout_marginBottom="439dp"
android:layout_marginEnd="156dp"
android:layout_marginStart="156dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
This may be dumb question but i couldn't find any solution for my problem, let me explain my problem am trying to align small square shaped button to right of text like in the below image i tried many things but nothing has helped me let me post what i have tried so far:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/content_spare_request"
android:background="#fff"
android:layout_marginBottom="20dp"
android:layout_margin="10dp"
android:layout_below="#+id/root1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/spare_text"
android:layout_marginStart="2sp"
android:paddingLeft="10dp"
android:layout_marginTop="07dp"
android:text="#string/Spare"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/SForange"
android:textSize="16sp" />
<Button
android:id="#+id/btn_spare"
android:layout_width="20dp"
android:layout_height="match_parent"
android:minHeight="0dp"
android:minWidth="0dp"
android:background="#color/SForange"
android:layout_alignParentRight="true"
/>
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:id="#+id/view2"
android:layout_below="#+id/spare_text"
android:background="#color/SForange"
android:gravity="center" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="#+id/spare_recyclerview"
android:layout_below="#+id/view2"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="75dp"
android:gravity="center_horizontal"
android:layout_below="#+id/view2"
android:visibility="visible"
android:text="No Data Available"
/>
</RelativeLayout>
You can do below things.
Make width of relativelayout as match_parent.
Set btn_spare as right aligned and textview to start of btn_spare.
use ConstraintLayout. it gets you the ability to define exact location of view among others. for example you want a button under the imageview with specific distance between them, ConstraintLayout will give you something like this.
Don't use match_parent for button height. Change your Button height from match_parent to specific height and add android_background to it:
<Button
android:id="#+id/btn_spare"
android:layout_width="35dp"
android:layout_height="35dp"
android:minHeight="0dp"
android:minWidth="0dp"
android:background="#mipmap/ic_launcher"
android:layout_alignParentRight="true"
/>
Output:
Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_spare_request"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/root1"
android:layout_margin="10dp"
android:layout_marginBottom="20dp"
android:background="#fff">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/spare_text"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:paddingLeft="10dp"
android:text="#string/Spare"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/SForange"
android:textSize="16sp" />
<Button
android:id="#+id/btn_spare"
android:layout_width="40dp"
android:layout_height="match_parent"
android:background="#color/SForange"
android:minHeight="0dp"
android:minWidth="0dp" />
</LinearLayout>
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_below="#+id/header"
android:background="#color/SForange"
android:gravity="center" />
<android.support.v7.widget.RecyclerView
android:id="#+id/spare_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/view2" />
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/view2"
android:gravity="center_horizontal"
android:paddingBottom="75dp"
android:text="No Data Available"
android:visibility="visible" />
</RelativeLayout>
tried this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_spare_request"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/root1"
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_marginBottom="20dp"
android:background="#fff">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<TextView
android:id="#+id/spare_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginStart="2sp"
android:layout_marginTop="07dp"
android:paddingLeft="10dp"
android:text="#string/tip_brush_size"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/facebook"
android:textSize="16sp" />
<Button
android:id="#+id/btn_spare"
android:layout_width="20dp"
android:layout_height="match_parent"
android:background="#color/facebook"
android:layout_alignParentRight="true"
android:minHeight="0dp"
android:minWidth="0dp" />
</RelativeLayout>
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_below="#+id/spare_text"
android:background="#color/facebook"
android:gravity="center" />
<android.support.v7.widget.RecyclerView
android:id="#+id/spare_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/view2" />
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:gravity="center_horizontal"
android:paddingBottom="75dp"
android:text="No Data Available"
android:visibility="visible" />
</LinearLayout>
I am using the following XML to draw a layout with heading, subheading, image and button. Image takes all remaining space but at the end I set it to visibility = View.GONE and my button is not aligned to bottom. What am I doing wrong?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:baselineAligned="false">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/kasel"
android:id="#+id/txtChokeNext"
android:textSize="20sp"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_gravity="top"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/kaselDesc"
android:id="#+id/txtChokeNextDesc"
android:gravity="center"
android:layout_marginTop="10dp"
android:textStyle="bold"
android:layout_gravity="top"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/imgChokeDesc"
android:src="#drawable/kasel"
android:adjustViewBounds="true"
android:baselineAlignBottom="false"
android:cropToPadding="false"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/firstAidNext"
android:id="#+id/buttonChokeNext"
android:layout_marginTop="10dp"
android:paddingLeft="10dp"
android:paddingTop="20dp"
android:paddingRight="10dp"
android:paddingBottom="20dp"
android:layout_gravity="bottom"
/>
</LinearLayout>
Thanks in forward
You could change your layout to RelativeLayout and set this parameter to your Button:
android:layout_alignParentBottom="true"
You should also add the android:layout_below="..." in the subheader and image to place them one after the other (replace ... with the id of the element that should be above the element you're editing)
solution of the your problem
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/kasel"
android:id="#+id/txtChokeNext"
android:textSize="20sp"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_gravity="top" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/kaselDesc"
android:id="#+id/txtChokeNextDesc"
android:gravity="center"
android:layout_marginTop="10dp"
android:textStyle="bold"
android:layout_gravity="top" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/imgChokeDesc"
android:src="#drawable/kasel"
android:adjustViewBounds="true"
android:baselineAlignBottom="false"
android:cropToPadding="false"
android:layout_weight="1" />
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/firstAidNext"
android:id="#+id/buttonChokeNext"
android:layout_marginTop="10dp"
android:paddingLeft="10dp"
android:paddingTop="20dp"
android:paddingRight="10dp"
android:paddingBottom="20dp"
android:layout_gravity="bottom" />
</LinearLayout>
I am trying to have textviews overlay over imageviews. Something like this
Can someone help me with the code.
Wrap a TextView and ImageView into FrameLayout, put the TextView in FrameLayout after ImageView. Then, wrap the FrameLayout into RelativeLayout OR LinearLayout. Make some position setup (as per the needs).
<RelativeLayout>
<FrameLayout>
<ImageView />
<TextView />
</FrameLayout>
</RelativeLayout>
You can create a frame layout and within the frame layout keep an imageview and a linearlayout(with a translucent background and a textview).
The translucent color can be placed in the colors file as : #80000000
Here is a snippet :)
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:foregroundGravity="bottom"
android:orientation="vertical" >
<ImageView
android:id="#+id/ivFullScreenAd"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="8dp"
android:src="#drawable/home_page_ad" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/translucent"
android:orientation="vertical" >
<TextView
android:id="#+id/detailTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dip"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Please swipe up"
android:textColor="#color/white"
android:textIsSelectable="true"
android:textSize="20sp" />
</LinearLayout>
</FrameLayout>
I had the same problem and solved it using a custom gridView. You must apply this in getView.
Custom gridView XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_practitioner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:contentDescription="#string/contentDescriptionContent"
/>
<LinearLayout
android:id="#+id/layout_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:background="#CC515116"
android:visibility="gone"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:text="#string/text_enter_pass_password"
android:paddingBottom="7dp"
android:textSize="20sp"
/>
<EditText
android:id="#+id/edit_practitioner_pin"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#drawable/edittext_shape"
android:ems="6"
android:gravity="center"
android:inputType="numberPassword"
android:maxLength="4"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:visibility="visible"
/>
<Button
android:id="#+id/pract_button"
android:layout_width="70dp"
android:layout_height="30dp"
android:background="#drawable/buton_shape"
android:layout_marginBottom="35dp"
android:text="#string/btn_ok"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="#bbffffff"
android:focusable="false"
android:focusableInTouchMode="false" >
<TextView android:id="#+id/item_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:textColor="#color/text_black"
android:gravity="bottom|center"
android:textSize="20sp"
android:textAllCaps="true"
android:paddingBottom="0dp"
/>
<TextView
android:id="#+id/text_pratiotioner_group_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/sub_title_color"
android:visibility="visible"
android:gravity="bottom|center"
android:textAllCaps="true"
/>
</LinearLayout>
</FrameLayout>
Though an old question but should incase anyone is interested in the card view version of this question here you go...
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
android:layout_weight="0.5"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
android:clickable="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical"
android:layout_centerInParent="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#89969F">
<ImageView
android:id="#+id/iv_overlay"
android:layout_width="196dp"
android:layout_height="196dp"
android:clickable="true"
android:src="#drawable/your_image"
android:layout_centerInParent="true" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#80000000"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textSize="22sp"
android:textStyle="bold"
android:gravity="center_vertical"
android:text="Settings"
android:textColor="#color/white"
android:layout_gravity="center"
android:layout_alignParentTop="false"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:padding="8dp" />
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
Please modify the layout accordingly, If you want to accommodate the images on an imageview only, then you can drop the below layout in a relative one including an imageview too.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/your_image"
android:orientation="vertical" >
<TextView
android:id="#+id/bottom_textview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<!-- layout_gravity="supply accordingly" -->
android:gravity="center"/>
</LinearLayout>