I'm creating a list of items with a personalized layout for the rows. In each row I want to have two images of fixed size:
one must contact its left border with the left border of the row layout (red square).
the other one must contact its right border with the right border of the row layout (orange square)
In between these images I want to have some extra elements inside a layout (green area). Thus, the size of this layout should be match_parent, but without hiding neither of the previous two images.
How can I do this?
I'm trying to put three linear layouts, wrapping to width the first and the third, and matching_parent the green one, but the green is hidding the orange.
EDIT: This is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/img_A"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="70dp"
android:minHeight="70dp"
app:srcCompat="#drawable/ic_baseline_A_24" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/lbl_textA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/lbl_textB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="14sp" />
<TextView
android:id="#+id/lbl_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4"
android:text="TextView"
android:textAlignment="textEnd" />
</LinearLayout>
<TextView
android:id="#+id/lbl_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="vertical">
<ImageView
android:id="#+id/img_B"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp"
android:layout_marginRight="15dp"
android:adjustViewBounds="false"
android:cropToPadding="false"
android:minWidth="30dp"
android:minHeight="30dp"
app:srcCompat="#drawable/ic_baseline_B_24" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Related
Based on this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lytContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<Button
android:id="#+id/scanButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/scan" />
<TextView
android:id="#+id/authorship"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="" />
</LinearLayout>
I'd like to keep the Scan Button centered horizontally keeping the screen ratio, so it's always kept in the middle of the screen.
Next, I'd like to have the TextView centered on the bottom of the screen and centered too, like this:
Seems like the property and value of android:gravity="center_vertical|center_horizontal" I have on the LinearLayout is stopping me from having it so, but I have no idea how to proceed.
Here the code snippet here I hope this work for you as per your need...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:weightSum="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:layout_height="wrap_content">
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
app:cornerRadius="10dp"
android:paddingHorizontal="10dp"
android:textSize="16sp"
android:text="Scan Product"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World!"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</LinearLayout>
This is basically how I want my layout to look like:
There has to be a space separating the imageView from the Text. Ok button in the center, but I think the main challenge is making sure that the bold text is very closely aligned (almost touching the tip) to the regular text and is above it. Also, the added challenge is that all of this must be done using ONLY linear layout. So far, I have been using a vertical orientation linear layout followed by a horizontal orientation linear layout. The horizontal orientation linear layout covers the imageView and the regular text. My main problem is that I can not get the bold text and the regular text to align in the way I need it to.
By the way, I got rid of all the id's and images, since these are all private, but adding them should be no problem.
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:text="Bold Text"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="13dp"
android:layout_marginTop="12dp"
android:src="#drawable/" />
<TextView
android:id="#+id/"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Regular Text"
android:textColor="#color/black" />
</LinearLayout>
<Button
android:id="#+id/"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ok"
/>
</LinearLayout>
Unless this is for a school project or something I wouldn't actually use nested layouts like this.
<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">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
app:srcCompat="#drawable/ic_launcher_background" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Bold Text"
android:textStyle="bold" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Edit:
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitXY"
android:layout_gravity="center_vertical"
app:srcCompat="#drawable/ic_launcher_background" />
Parent should be vertical linear layout, as you have now.
First child should be horizontal linear layout
First child of that should be ImageView
Second child should be BOLD TEXT with gravity=center_horizontal
Second child of your parent should be Regular Text Blah Blah Blah with gravity=center_horizontal
Third child of parent should be ok button with gravity=center_horizontal
If you want to add more space before things, give them android:marginStart="some_value"
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:padding="16dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/img"
android:layout_width="75dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:src="#drawable/dummy_camera" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="Bold Text"
android:gravity="bottom"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="20dp"
android:gravity="top"
android:text="Regular Text"
android:textColor="#color/black" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ok" />
</LinearLayout>
Add this to TextView parameters:
android:baselineAlignBottom="true"
I have a requirement to realize a certain type of layout. These layout contains an ImageView that is part of the item layout for an horizontal RecyclerView that displays the movies that belong to a particular category.
Desired layout screenshot
My current layout screenshot
The item layout for the RecyclerView containing the ImageView and
TextView label.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:background="#android:color/black">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageViewMediaThumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_gravity="top"
android:src="#mipmap/placeholder_image" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/clientMediaThumbnailLabel"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:text="Movie Name"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
Try this code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" >
<TextView
android:id="#+id/movieTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="32sp"
android:text=""
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="left"/>
<ImageView
android:id="#+id/movieImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/movieTitle" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/movieTitle"
android:layout_centerHorizontal="true"
android:id="#+id/linearLayout">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/textView"
android:layout_weight="1"
android:gravity="right" />
</LinearLayout>
I have been able to arrive at a solution through setting a layout bottom margin of 20dp for the Image View while reducing the text size of the TextView (to avoid it showing a parent layout right margin space wider than the image).
Adding the bottom margin of 20dp to the image view made the text view's text to become visible.
Here is my updated layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginRight="4dp"
android:background="#android:color/black">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/clientMediaThumbnailLabel"
android:orientation="vertical">
<ImageView
android:id="#+id/imageViewMediaThumbnail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_gravity="top"
android:src="#mipmap/placeholder_image"
android:layout_marginBottom="20dp"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Movie Name"
android:textColor="#android:color/white"
android:textSize="10sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.v7.widget.CardView>
This is code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
I want to practice a layout in android studio and I'm getting an error while implementing the code.
This is the text which goes outside the mobile screen:
Why does the blue box go outside the mobile screen?
You're not properly setting the layout. The childViews of your parentView(LinearLayout) was aligned horizontally without setting the layout weight. You should read the documentation on LinearLayout. However, to fix your layout, you can add another container to hold the first row of your layout to make the second row visible on the screen. Your current code contains all the childViews in a single row which makes the other views not visible. Try the code below:
<?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">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Email:"
android:textSize="30dp"
android:paddingLeft="0dp"
android:paddingTop="10dp"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:singleLine="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:paddingTop="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
You are setting the layout_width of each view yourself. You should know that there is a maximum width of screen that is available. Moreover, you are setting the width of button as match_parent that is not proper way when the neighbouring views have some fixed width. If your are using LinearLayout try layout_weight attribute. Play around and try to experiment.
For example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingLeft="0dp"
android:paddingTop="10dp"
android:text="Email:"
android:textSize="30dp" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="2"
android:singleLine="true" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:paddingTop="10dp"
android:text="Login" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="Home" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="About" />
</LinearLayout>
</LinearLayout>
My problem is that when i try to change the radius of the cardView i get this in the Image below:
any help would be appreciated.
These words just to skip the error your post is mostly code:
skipping stupid error.
<?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="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<android.support.v7.widget.CardView
android:id="#+id/cv"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp">
<!--android:padding="16dp"-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/team_photo"
android:layout_width="70dp"
android:layout_height="70dp"
android:padding="10dp"
android:layout_margin="8dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/team1Linear"
android:orientation="horizontal">
<TextView
android:id="#+id/team1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ssss"
android:textColor="#color/black"
android:textSize="15sp" />
<TextView
android:id="#+id/team1_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:text="ssss"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:textColor="#color/black"
android:textSize="15sp" />
</LinearLayout>
<View
android:id="#+id/separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/background_material_light" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/team2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ssss"
android:textColor="#color/black"
android:textSize="15sp" />
<TextView
android:id="#+id/team2_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:text="ssss"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:textColor="#color/black"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
you need to use
app:cardUseCompatPadding="true"
this will do that job for you
Those are shadows of CardViews. It's normal, there is no problem.
So CardViews have their elevations that they drop shadows on the background.
You set radius for the CardViews. Then you can look the background through rounded corners. You see the shadows of CardViews dropping on the background.
app:cardCornerRadius="10dp"
If you don't want the rounded corners of the CardViews, I think you should just set the radius to 0.
app:cardCornerRadius="0"
add this, your problem with the shadow
app:cardElevation="#dimen/dp_0"