Bug layout does not show some part - android

I have designed in a linear layout with a listview it is supposed to have everything shown with the whole photo and it leaves the part of likey comment but only the photo comes out and in small photos if the part comes out but in other big photos it does not
It would be nice to implement picasso but I do not know how to do it or if it can
I attach the layouts:
this is the layout_post part of a recycler view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:layout_marginBottom="8dp"
android:orientation="horizontal">
<TextView
android:layout_marginBottom="5dp"
android:id="#+id/tv_post_username"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:singleLine="true"
android:text="Username"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:text="10h30" />
</LinearLayout>
<TextView
android:id="#+id/tv_post_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Post text has some words that I could use for a placeholder like this" />
<ImageView
android:id="#+id/iv_post_display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/imageholder" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/like_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:id="#+id/iv_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/chill"
android:layout_marginBottom="1dp"/>
<TextView
android:id="#+id/tv_likes"
android:layout_marginTop="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/comment_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_marginTop="5dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_mode_comment_black_24dp" />
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_comments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
this is the rowpost
is a cardview that include the layoutpost
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#212121">
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="60dp"
android:elevation="10dp">
<include layout="#layout/layout_post" />
</android.support.v7.widget.CardView>
the content view:
<FrameLayout 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:layout_marginTop="95dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.android.octa.memetixs.Activities.main.PostActivity"
tools:showIn="#layout/app_bar_post">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="471dp">
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
This is a small, low resolution photo here if it shows:
And here if everything is shown as it should be


If you use a LinearLayout without weightSum attribute then it simple stacks the child views one over the other Without adjusting its dimension to fit.
Use android:weightSum attribute in the LinearLayout and android:layout_weight + android:layout_height="0dp" for the child views, then if for example weightSum == 6 and a child has layout_weight == 1 then it will get 1/6 of space.

Related

Toolbar on top with weightSum

I have a view with a title bar above (RelativeLayout) and below a LinearLayout with weightSum.
I used the weightSum because I wanted to distribute the three elements (ImageView, TextView, Button ) 100% contained in the page.
Everything works fine, but when I go to write something from the textview the keyboard appears and the bar disappears from the view because it drags over.
I tried various systems to try to insert the scoolview and keep the bar fixed at the top.
I used both the scrollview and the NestedScrollView and I also changed the bar created with the RelativeLayout to a toolbar.
but the content of the LinearLayout with the weightSum stretches a lot.
do you have any suggestion for me?
thank you
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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/fond"
android:fillViewport="true"
tools:context=".client.FicheClient">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="center|top"
android:gravity="center|top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/surface_l"
android:orientation="horizontal"
android:paddingLeft="56dp"
android:paddingRight="56dp">
<TextView
android:id="#+id/txtNomFichier"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:ellipsize="end"
android:fontFamily="#font/inter_bold_700t"
android:gravity="center_horizontal"
android:maxLines="1"
android:text="#string/label_document"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="backList"
android:paddingStart="16dp"
android:paddingTop="12dp"
android:paddingEnd="16dp"
android:paddingBottom="12dp">
<ImageView
android:id="#+id/btn_Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/icone_arrow_left_blanc" />
</LinearLayout>
<Button
android:id="#+id/btn_share"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="12dp"
android:layout_marginEnd="16dp"
android:background="#drawable/fond_partage"
android:fontFamily="#font/inter_regular_400t"
android:onClick="launchPartage"
android:text=""
android:textColor="#color/blanc"
android:visibility="invisible" />
<ProgressBar
android:id="#+id/progressBarTop"
style="?android:attr/progressBarStyle"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="12dp"
android:layout_marginEnd="16dp"
android:theme="#style/colorProgressBarTop" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="77"
android:background="#drawable/radius_gris"
android:orientation="vertical">
<ImageView
android:layout_gravity="center_horizontal|center_vertical"
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.github.barteksc.pdfviewer.PDFView
android:layout_gravity="center_horizontal|center_vertical"
android:id="#+id/pdfView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:layout_weight="11"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
android:layout_marginBottom="16dp"
android:padding="12sp"
android:background="#drawable/radius_blanc"
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/txtLibelleNomFichier"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/inter_regular_400t"
android:gravity="left|center_vertical"
android:text="#string/label_file_name_obligatoire"
android:textColor="#color/surface_h"
android:textSize="12sp" />
<EditText
android:id="#+id/txtNom"
android:layout_width="match_parent"
android:layout_height="18dp"
android:background="#drawable/textedit_blanc_rounded_corners"
android:textColor="#color/surface_k"
android:ellipsize="end"
android:textSize="12sp"
android:fontFamily="#font/inter_semi_bold_600t"
android:gravity="left|center_vertical"
android:inputType="text"
android:maxLines="1"
android:layout_marginTop="2dp"
android:scrollHorizontally="true" />
</LinearLayout>
<LinearLayout
android:background="#color/blanc"
android:layout_weight="12"
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/btn_upload"
android:layout_width="match_parent"
android:layout_height="39dp"
android:layout_columnWeight="1"
android:layout_margin="16dp"
android:textAllCaps="false"
android:background="#drawable/radius_primary_5"
android:text="#string/btn_validate"
android:textColor="#color/blanc" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Linearlayout above Relativelayout ( gravity bottom )

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>

Translate LinearLayout into ConstraintLayout

I'm learning using ConstraintLayout but I still cannot get used to it. Could you please help me with "translating" this layout made using LinearLayout into ConstraintLayout to help me to understand how a "bit" more complex layouts could be built using that? With LinearLayout it is simple but building this kind of layout using Constraints seems problematic.
<?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"
android:orientation="vertical"
tools:context="com.xxx.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<EditText
android:id="#+id/editText_main_overallTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:inputType="time" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Exercised done"
android:textSize="18sp" />
<TextView
android:id="#+id/textView_main_exercisesDone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
tools:text="3/15" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:text="Next exercise"
android:textSize="18sp" />
<TextView
android:id="#+id/textView_main_nextExerciseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:gravity="center"
android:textSize="18sp"
tools:text="Paradiddle" />
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimaryDark"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"/>
<TextView
android:id="#+id/textView_main_currentExerciseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="24sp"
tools:text="Name of the excercise" />
<EditText
android:id="#+id/editText_main_timeLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="time" />
<ImageView
android:id="#+id/imageView_main_exercise"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
app:srcCompat="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/imageButton_main_power"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:srcCompat="#android:drawable/ic_media_play" />
</LinearLayout>

You can achieve the desired result by using Android Studio by using following steps:
Open design tab -> Component Tree -> Right click -> Convert Linear Layout to Constraint layout
Choose the appropriate option and click on OK
Check the Text tab, you Layout will now be translate to ConstraintLayout.

How to make ImageView width match the scaled image content width

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>

Adding movie overview TextView in xml inside a Scrollbar

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"
>

Categories

Resources