I currently have a textview that is centered, and would like to add another textview below the centered textview, but it just places it at the same place as the previous textview, is there a way to fix this?
Code:
<FrameLayout
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</FrameLayout>
Your are setting gravity in 2nd textview as center remove it or use your desire gravity there
Use Linear layout with android: orientation then you got your center layout
<LinearLayout
android:layout_width="350dp"
android:layout_height="500dp"
android:orientation="vertical"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</FrameLayout>
Instead of using FrameLayout use LinearLayout
<LinearLayout
android:gravity="center"
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#color/white"
android:orientation="vertical">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
/>
</LinearLayout>
Output:
I hope this will work for you.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<TextView
android:id="#+id/info_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:id="#+id/info_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
</FrameLayout>
Always use match_parent and wrap_content instead of dimensions in dp.
Place two text view inside relative layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="350dp"
android:layout_height="500dp"
android:background="#android:color/darker_gray">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Name"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:layout_below="#+id/info_name"
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Test"
android:textSize="18sp"
android:textStyle="normal" />
</RelativeLayout>
</FrameLayout>
I see in your file that you have android:layout_gravity="center" and android:gravity="center" for both textviews. This will make them sit on top of each other. You could try putting some padding on the bottom of the info_name and on the top of the info_text like so:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="350dp" android:layout_height="500dp">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="60dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="60dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal" />
</FrameLayout>
While this will add some space it is basically just stretching the textview itself and the textviews will still be overlapping. You could use the linear layout as suggested above but I prefer to use the constraint layout as it makes placing items and providing spacing so much easier. You can right click on the FrameLayout in the component Tree and convert it to ConstraintLayout. Then you can place the info_name and have its constraint handles set to 50 in the constraint widget, Android Studio ConstraintLayout Widget and then hook the other textview to it and set it where you like placing second textview.
Here is the xml:
<?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:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textSize="18sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/info_name"
app:layout_constraintVertical_bias="0.100000024" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can find out more information in the documentation here.
Related
I have the farrowing code that I am using to dynamically place items in gridview
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="350dp"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_margin="#dimen/margin_small"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="#dimen/margin_small">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_small"
android:layout_gravity="center">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name"
card_view:layout_constraintTop_toTopOf="parent"
card_view:layout_constraintBottom_toTopOf="#+id/cost"
card_view:layout_constraintStart_toStartOf="#+id/image"
android:maxLines="3"
android:padding="9dp"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<TextView
android:id="#+id/cost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ksh_000_00"
card_view:layout_constraintTop_toBottomOf="#+id/name"
card_view:layout_constraintBottom_toTopOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/image"
android:textAppearance="?android:attr/textAppearanceSmall"
android:typeface="serif"/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:contentDescription="#string/food_fuzz_logo"
android:src="#drawable/logo"
card_view:layout_constraintBottom_toTopOf="#+id/footer"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/cost"
tools:scaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:id="#+id/footer"
android:layout_height="wrap_content"
card_view:layout_constraintTop_toBottomOf="#+id/image"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/name"
android:orientation="horizontal"
android:background="#color/gradient_background">
<TextView
android:id="#+id/minus"
android:layout_width="14dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginStart="#dimen/activity_vertical_margin"
android:gravity="start"
android:text="#string/minus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:id="#+id/quantity"
android:text="#string/zero"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
android:layout_gravity="center"
android:gravity="center"/>
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:id="#+id/plus"
android:text="#string/plus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
android:layout_gravity="end"
android:gravity="end"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
now I would like to have it like the bootstrap card with card-header, card-body and card-footer effect but I am only able to make it have the body like effect only. My attempt for the footer only positions the footer id element in the centre and its components crumbled together instead of the first one(minus) being spread out one to the extreme left, the other(quantity) in the centre and the last one(plus)n to the extreme right of the cardview's linear layout item.
This is what the code gives me
And this is what I expect
yet what I want is for the grey area to span the entire width of the card view and position the components appropriately as explained earlier
How is it possible to achieve my design idea?
what I want is for the grey area to span the entire width of the card view
I see that you used tools:scaleType for the image, and this won't work at runtime, as tools namespace is used for design purpose, so change it to android:scaleType
and position the components appropriately as explained earlier
You need to set the width of the LinearLayout that holds the buttons to match_parent, and set the weight values so that the buttons can be distribute like you need:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_margin="#dimen/margin_small"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="#dimen/margin_small">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="#dimen/margin_small">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="3"
android:padding="9dp"
android:text="#string/name"
android:textAppearance="?android:attr/textAppearanceSmall"
card_view:layout_constraintBottom_toTopOf="#+id/cost"
card_view:layout_constraintStart_toStartOf="#+id/image"
card_view:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/cost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ksh_000_00"
android:textAppearance="?android:attr/textAppearanceSmall"
android:typeface="serif"
card_view:layout_constraintBottom_toTopOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/image"
card_view:layout_constraintTop_toBottomOf="#+id/name" />
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher_background"
card_view:layout_constraintBottom_toTopOf="#+id/footer"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/cost"
tools:scaleType="fitCenter" />
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gradient_background"
android:orientation="horizontal"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/name"
card_view:layout_constraintTop_toBottomOf="#+id/image">
<TextView
android:id="#+id/minus"
android:layout_width="14dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginStart="#dimen/activity_vertical_margin"
android:gravity="start"
android:text="#string/minus"
android:layout_weight="1"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/quantity"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/zero"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/plus"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/activity_vertical_margin"
android:layout_weight="1"
android:layout_gravity="end"
android:gravity="end"
android:text="#string/plus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Consider the case of when one wants a View within a LinearLayout to fill out the rest of the empty space in the layout; one then sets the weight of this view to 1, while the weights of the others are 0.
Is there any way at all to do a similar thing with a child view group within a parent view group.
For example, consider my xml below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/coffee"
android:scaleType="centerCrop"
android:alpha="0.7"/>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/bus_title"
android:textColor="#FFFF"
android:textSize="24dp"
android:textStyle="bold|italic" />
<TextView
android:id="#+id/about_heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="About Us"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold|italic" />
<TextView
android:id="#+id/about_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/about_heading"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/bus_description"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/opening_hours_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/about_text"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/opening_hours_header"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold|italic" />
<TextView
android:id="#+id/opening_times"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/opening_hours_header"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/opening_hours"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/Contact_Us_heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/opening_times"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/Contact_heading"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold|italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
android:layout_below="#id/Contact_Us_heading">
<EditText
android:id="#+id/email_field"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#80E0E0E0"
android:gravity="top"
android:inputType="text"
android:hint="Type a message here..."
android:layout_below="#id/Contact_Us_heading"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="SEND" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
You'll see that below several textViews I insert a child LinearLayout.
I want the Linear Layout to fill the 'remaining space' downwards of the RelativeLayout, in the same way that the editText View fills the rest of the LinearLayout.
Is there any way to do that?
It's not possible with a RelativeLayout but you can convert it into a ConstraintLayout and use app:constraintVerticalWeight="1" to control the height of the main EditText component.
In fact, you can do away with the nested LinearLayout entirely as ConstraintLayout can do it all for you in one go!
The modified layout XML would look something like the following:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.7"
android:scaleType="centerCrop"
android:src="#drawable/coffee" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/bus_title"
android:textColor="#FFFF"
android:textSize="24dp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toTopOf="#+id/about_heading"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/about_heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="About Us"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toTopOf="#+id/about_text"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintVertical_bias="0" />
<TextView
android:id="#+id/about_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/bus_description"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/opening_hours_header"
app:layout_constraintTop_toBottomOf="#+id/about_heading" />
<TextView
android:id="#+id/opening_hours_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/opening_hours_header"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toTopOf="#+id/opening_times"
app:layout_constraintTop_toBottomOf="#+id/about_text" />
<TextView
android:id="#+id/opening_times"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/opening_hours"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/Contact_Us_heading"
app:layout_constraintTop_toBottomOf="#+id/opening_hours_header" />
<TextView
android:id="#+id/Contact_Us_heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="#string/Contact_heading"
android:textColor="#FFFF"
android:textSize="16sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toTopOf="#+id/email_field"
app:layout_constraintTop_toBottomOf="#+id/opening_times" />
<EditText
android:id="#+id/email_field"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#80E0E0E0"
android:hint="Type a message here..."
android:inputType="text"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintTop_toBottomOf="#id/Contact_Us_heading"
app:layout_constraintVertical_weight="1" />
<Button
android:id="#+id/send_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEND"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/email_field" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
The resulting layout looks like this in the AndroidStudio UI designer (ignoring the missing string/drawable definitions, and noting I changed the text colour to black so that we could see the location of the text views):
I'm trying to align an image image with space at top of pictureat the top of a Linear Layout in android studio.I have a space as you can see on the picture. I would like to get rid of that space. Tried few things without success!!! Anyone has a clue how to do it??? Thanks
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.bourgeois.michel.relativesinglescreenapp.MainActivity">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/toppicture"
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="#drawable/danielarias" />
<TextView
android:id="#+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:textColor="#ff6600"
android:textStyle="bold"
android:paddingLeft="10dp"
android:text="Phone"/>
<TextView
android:id="#+id/number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:textColor="#000"
android:textStyle="normal"
android:text="424-278-8938"/>
<View
android:id="#+id/line"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="10dp"
android:background="#ff6600"/>
</LinearLayout>
<LinearLayout mlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/text"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:textColor="#000"
android:textStyle="bold"
android:text="Address: 5867 W 3rd St, Los Angeles, CA 90036"
/>
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button"
android:fontFamily="sans-serif-condensed"
android:paddingBottom="1dp"
android:textAlignment="center"
android:textColor="#000"
android:textSize="16sp"
android:text="Learn How To Dance Milonguero Tango Style!"/>
<TextView
android:id="#+id/thursday"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-condensed"
android:paddingBottom="5dp"
android:textAlignment="center"
android:textColor="#000"
android:textSize="16sp"
android:text="Every Thursday Night"/>
<TextView
android:id="#+id/hour"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-condensed"
android:paddingBottom="5dp"
android:textAlignment="center"
android:textColor="#000"
android:textSize="16sp"
android:text=" 8:30pm to 9:30pm"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:text="Join Us" />
Use your ImageView like :
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitXY"/>
Problem can be about your image sources width and height. There is no marginTop in your xml. Give a try like adding android:scaleType="fitXY" to your ImageView.
try adding
android:adjustViewBounds="true"
in ImageView parameters,adding scaleType="fitXY" will stretch the image so avoid it.
I am making chat activity and having issues with right chat bubble. As you can see in the image below. TextView stretches height wise. According to my thinking it should be stretching width wise first then if space is full it should stretch height wise. Please suggest me if it is possible with xml or not. I have seen java code solution but i want to find a solution in xml first.
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="#drawable/ic_bubble_sent"
android:gravity="right">
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_msg_content"
android:layout_marginTop="-9dp"
android:text="00:33"
android:textColor="#color/colorAppGray"
android:textSize="12sp"
android:textStyle="normal" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Replace your two TextView with this,
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
I removed all unnecessary alignments from first TextView.
UPDATE
The overall layout looks like,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
>
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Note : I removed your background for testing.
I go nuts on that layout. So here's what I'm trying to achieve. A simple layout having a label (TextView) or edit field (EditText) on the left side and a button on the right side. I want all labels and all buttons vertically adjusted - meaning all buttons of the same width and all labels too.
But how to do this? I tried a LinearLayout with vertical orientation and each line as another LinearLayout with horizontal orientation and inside that the label has a layout_weight of 8 and the button is 1. But still this does not guarantee what I want!
This is the current result. You can see that the buttons are not nicely aligned.
This is my layout:
Here's the XML:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="test_test_blabla"
android:layout_weight="8"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_scan"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_weight="1"
android:layout_gravity="right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="17:35"
android:layout_weight="8"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_pick_time"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_weight="1"
android:layout_gravity="right"
/>
</LinearLayout>
</LinearLayout>
Using a RelativeLayout you can achieve the desired layout as:
<?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:orientation="vertical">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/textView"
android:layout_toLeftOf="#+id/button"
android:fontFamily="sans-serif-thin"
android:hint="test_test_blabla"
android:textSize="24sp"/>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/textView"
android:fontFamily="sans-serif-thin"
android:hint="Scan"
android:textSize="24sp"/>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignParentLeft="true"
android:layout_below="#+id/editText"
android:layout_toLeftOf="#+id/button2"
android:fontFamily="sans-serif-thin"
android:text="17:35"
android:textSize="24sp"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/button"
android:fontFamily="sans-serif-thin"
android:hint="Pick Time"
android:textSize="24sp"/>
</RelativeLayout>
The key layout attribute used to match the size is android:layout_alignRight="#+id/textView" on the first EditText referencing the TextView just below.
Result:
According to people's advise, I used the TableLayout. But still the label (EditText) is not using the whole space til the button.
That's the XML:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="test_test_blabla"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_scan"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="17:35"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_pick_time"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
<TableRow>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="#string/hint_car_location_address"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_gps"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
</TableLayout>
Edit:
try RelativeLayout
something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:columnCount="2">
<EditText
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#android:id/button1"
android:text="test"/>
<Button
android:id="#android:id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingLeft="28dp"
android:paddingRight="28dp"
android:text="set"
/>
<TextView
android:id="#android:id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#android:id/button1"
android:layout_alignBottom="#android:id/button2"
android:layout_below="#android:id/button1"
android:gravity="center_vertical"
android:text="some test"/>
<Button
android:id="#android:id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/button1"
android:layout_alignLeft="#android:id/button1"
android:layout_alignRight="#android:id/button1"
android:text="Scan"
/>
</RelativeLayout>
5+ years later...OP is probably an expert in android xml by now. Nevertheless, to help with the question, linear layout is doable. I've added another linear layout to contain all the rows so that the margins can be adjust in this additional layout.
When weight sum is used, the corresponding variable (width / height) has to be 0dp so that it can be adjust accordingly.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="9">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:fontFamily="sans-serif-thin"
android:hint="test_test_blabla"
android:textSize="24sp" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:fontFamily="sans-serif-thin"
android:hint="#string/action_scan"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal"
android:weightSum="9">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:fontFamily="sans-serif-thin"
android:text="17:35"
android:textSize="24sp" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:fontFamily="sans-serif-thin"
android:hint="#string/action_pick_time"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>