So I've spent a day on this one and it's time to turn to the pros on StackOverflow.
I am working with RecyclerView and CardView to display cards that contain text and an image. In portrait it looks great but in landscape there is space on both sides of the image instead of being flush with the edge of the card. I cannot change the dimensions of the image so I would like to change the XML of the CardView on orientation change, like you can do with a Fragment or Activity.
Is this possible and how could this be implemented? The only thought I have now would be to have another ViewHolder inside of my RecyclerViewAdapter that is used when checking for orientation returns Landscape. I'm hoping for a simpler solutions. Thanks in advance guys.
CardView XML. Notice that the width of the card is set to match_parent.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/placeCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="8dp"
android:background="#drawable/ripple"
android:clickable="true"
android:focusable="true"
android:foreground="?selectableItemBackground">
<RelativeLayout
android:id="#+id/rippleForeground"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/articleImageView"
android:layout_width="match_parent"
android:layout_height="228dp" />
<RelativeLayout
android:id="#+id/infoRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/paletteView"
android:background="#android:color/white"
android:paddingRight="8dp"
android:paddingBottom="8dp"
android:paddingLeft="8dp">
<TextView
android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="8dp"
android:text="#string/placeholder"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/abstractTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/titleTextView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="8dp"
android:text="#string/placeholder" />
<!--<TextView
android:id="#+id/timeTextView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/placeholder"
android:textColor="#color/colorSecondaryText"/>-->
<TextView
android:id="#+id/globalTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/abstractTextView"
android:layout_alignParentBottom="true"
android:padding="8dp"
android:gravity="center"
android:text="#string/placeholder"
android:textStyle="bold"
android:textColor="#color/colorSecondaryText"/>
</RelativeLayout>
<View
android:id="#+id/paletteView"
android:layout_width="match_parent"
android:layout_below="#id/articleImageView"
android:layout_height="4dp"
android:layout_marginTop="12dp"/>
</RelativeLayout>
Add a layout_land folder in res and copy your xml to it.You will use xml in this folder if your orientation is Landscape.You can change the xml in this folder to fit.
You can scale the image in the xml like this:
<ImageView
android:id="#+id/articleImageView"
android:layout_width="match_parent"
android:layout_height="228dp"
android:scaleType="fitXY" />
Related
I'm designing an app in Android Studio. In the preview it looks like I want but when building the application there is a LinearLayout that contains two TextViews that looks smaller and I do not understand why
This is the Recycler View Item:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/friend_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_picture"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="#drawable/head" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:gravity="left"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
tools:text="Guillermo Rodriguez" />
<TextView
android:id="#+id/friend_position"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="delantero"
android:textColor="#color/white"
android:textSize="13sp" />
</LinearLayout>
This is how it looks: https://photos.app.goo.gl/BgNQhgpNKbgEGCCR6 and I need to the text fill the entirety width
I expect to see both TextView until the end of the screen but they end before the middle. Any ideas?
If I understood your question correctly, you must want the two TextViews to fill the entirety of the height, is that it?
In that case, in both your TextViews, change your layout_height attribute to 0dp and add android:layout_weigth=0.5 to them. This will make them fill the entire height of your LinearLayout, whichever height that might be, and they will be dividing the space right in the middle.
I recommend you utilize LinearLayout's weight attribute. set your root LinearLayout's to match_parent. and your nested LinearLayout and both TextView's layout_height to 0dp and their weight to 1
here's the edited code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/friend_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_picture"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="#drawable/head" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="1dp"
android:gravity="left"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
tools:text="Guillermo Rodriguez" />
<TextView
android:id="#+id/friend_position"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="delantero"
android:textColor="#color/white"
android:textSize="13sp" />
</LinearLayout>
</LinearLayout>
Please check if your RecycleView has the proper width set (e.g. match_parent) and it can stretch to the whole width. Could you provide the xml code with the RecycleView?
i think you set the recyclerview to specific width. try to cahngethe width into match parent.
I recommend to user constraintlayout to avoid nested viewgroup. like this:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/friend_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/profile_picture"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="#drawable/patient"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:gravity="left"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold"
tools:text="Guillermo Rodriguez"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/profile_picture"/>
<TextView
android:id="#+id/friend_position"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text="delantero"
android:textColor="#android:color/white"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/profile_picture"
app:layout_constraintTop_toBottomOf="#+id/name"/>
I solved it! Someone configured it whit GridLayoutManager and it had to be with LinearLayoutManager.. I changed it and it was fixed
This is my custom view (custom_view.xml): *Note that I define 3 margins on the CardView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:background="#color/white"
android:orientation="vertical"
app:cardCornerRadius="4dp"
app:cardElevation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:background="#color/white">
<ImageView
android:id="#+id/left_image"
android:layout_width="64dp"
android:layout_height="40dp"
android:layout_marginTop="5dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/left_image"
android:layout_toLeftOf="#+id/right_image"
android:layout_toRightOf="#id/left_image"
android:layout_toStartOf="#id/right_image"
android:orientation="vertical">
<com.ringapp.ui.view.TypefaceTextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.ringapp.ui.view.TypefaceTextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<ImageView
android:id="#id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginTop="5dp"
android:src="#drawable/icon_md_gray_arrow" />
</RelativeLayout>
</android.support.v7.widget.CardView>
I add the custom layout on the following xml (container.xml):
<?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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical">
<com.ringapp.ui.view.CustomView
android:id="#+id/test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:description="edsc"
app:title="title" />
<com.ringapp.ui.view.CustomView
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:description="asdasd"
app:title="asdasdasd" />
</LinearLayout>
The problem is that the margins that I defined on the custom_view.xml doesn't appear on the container.xml layout. Why is this happening? If I paste the code of custom_view.xml directly on container.xml the margins appears.
Instead of
<com.ringapp.ui.view.CustomView
android:id="#+id/test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Try this:
<include layout="#layout/custom_view" android:id="#+id/test2/>
I believe when you use the code you have, android tries to over right some of your view's properties, especially when you explicitly overwrite the layout width / height. Try the above line of code in place of yours. Also, no need to overwrite the layout width / height if you're just going to wrap content, as the layout dimensions will be brought over from your custom_view.
Edit: To clarify, your code would probably even work if you took out the layout width / height overwrites. But you should use includes when bringing other XML layouts into a different XML layout. The way you 'included' your view is fine, but should probably be used fro when you write custom view classes that extend android 'View'.
I have 2 devices: Asus Zenfone 2 (6.0.1) and Galaxy Note 3 (5.0)
In my app I take photo and on the next screen I show it on ImageView and add some information on it. Here is xml 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:keepScreenOn="true"
android:background="#android:color/black">
<LinearLayout
android:id="#+id/preview_buttons"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#android:color/black">
<TextView
android:id="#+id/tv_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textSize="16sp"
android:text="CANCEL"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"/>
<TextView
android:id="#+id/tv_accept"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textSize="16sp"
android:text="ACCEPT"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/preview_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/holo_blue_bright"
android:layout_above="#id/preview_buttons">
<ImageView
android:id="#+id/image_preview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
/>
<TextView
android:id="#+id/preview_top_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:layout_alignRight="#id/image_preview"
android:layout_alignTop="#id/image_preview"
android:gravity="right"
android:background="#drawable/top_text_background"
android:textSize="16sp"
android:textColor="#android:color/white"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginBottom="8dp"
android:layout_alignLeft="#id/image_preview"
android:layout_alignBottom="#id/image_preview"
android:src="#drawable/ic_verified_grey600"/>
<TextView
android:id="#+id/preview_bottom_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:layout_alignRight="#id/image_preview"
android:layout_alignBottom="#id/image_preview"
android:gravity="right"
android:background="#drawable/bottom_text_background"
android:textSize="16sp"
android:textColor="#android:color/white"/>
</RelativeLayout>
</RelativeLayout>
UPD. I have problem with RelativeLayout "preview_container"
From this layout I expect its width would wrap, if ImageView's width doesn't fill whole screen and be on the screen center. And it works nice on GN3, but on my AZ2 I get space at right side (No reputation to insert image, it's here http://i.imgur.com/cSujbAp.png)
UPD2. What I expect: RelativeLayout wraped correctly, so I don't see background. Example from my GN3 here (http://i.imgur.com/vKGQq8r.jpg). Transparent background also can't help because after that I need to get drawing cache of this layout and work with it
I know about alignParent issue, but I don't use it now and my extra views placed correct.
Please help me, what's wrong?
<ImageView
android:id="#+id/image_preview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
/>
android:layout_height="match_parent" should not be match_parent.
Your preview_top_text has the width set to match_parent so it means that, since her container is the same of the image, it will stretch way to contain also the textview and not only the imageview.
Add the android:layout_centerHorizontal="true" parameter to the imageview and it should be centered.
Hope it helped
UPDATE POINT 2
two possibilities:
change the sizes of the TextViews to wrap_content
change the background of the second relativelayout to transparent
I'd like to create a ListFragment in Android, and a background for each element, like this:
I'll want to set the width of theese background's from the code of my ListAdapter. I thought to create the list element's layout something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:id="#+id/surveyListRow_upperLayout"
android:layout_marginTop="7dp"
android:layout_marginBottom="7dp">
<RelativeLayout
android:layout_marginLeft="23dp"
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/surveyListRow_ringLayout"
android:background="#FFFFFF"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/textColor"
android:gravity="center"
android:id="#+id/surveyListRow_surveyName"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="55dp"
android:layout_marginRight="105dp"/>
<TextView
android:layout_width="80dp"
android:layout_height="match_parent"
android:textSize="18sp"
android:gravity="center"
android:id="#+id/surveyListRow_surveyPrize"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="57dp"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:layout_weight="30"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="70"/>
</LinearLayout>
</RelativeLayout>
And I'll set the weight property of the LinearLayout's children, to set the background width.
My problem is, when the text in the width is too long (as you can see in the third element). Then the background isn't scales to the bottom of the element.
Can you help me, why? I've tried almost everything I can imagine.
Thanks!
Try to add this to your TextView
<TextView
...
android:ellipsize="end"
android:ems="2"
android:maxLines="2" />
This don't let your textview has more than two lines and put an ellipsis on the end.
Maybe this would be a solution.
I'm new to Android and everything went well until now I have to deal with the layout.
What I want is this layout:
Layout how it should be:
The image should be properly scaled and keep its ratio.
That's why I tried this XML code, but it doesn't work the way I want. The image keeps its ratio but the left and right side are out of the screen when vertical and cut at the top and bottom when horizontal:
Layout how it is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:background="#color/background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:src="#drawable/logo"
android:gravity="center"
android:scaleType="centerCrop"
android:contentDescription="#string/app_logo"
android:layout_weight="2.5" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center">
<Button
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="20dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text1"
android:textSize="40sp"
/>
<Button
android:id="#+id/id2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text2"
/>
<Button
android:id="#+id/id3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_gravity="center"
android:text="#string/text3" />
</LinearLayout>
</LinearLayout>
I googled a lot but just could not find what I was looking for.
Please help!
It looks like android:scaleType="fitCenter" is what you are looking for
you have to design 2 layout for you vertical state and horizontal state and put them in two different folder in your android project:
while you put your regular layout in the layout folder you should put the landscape layout in the layout-land folder.
Try setting android:scaleType="fitXY" to your ImageView.