I have this XML code:
<?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">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:hint="enter your name"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:id="#+id/button"
android:layout_below="#+id/editText"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="name"
android:id="#+id/textView8"
android:layout_below="#+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="20dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:text="copy"
android:layout_alignBottom="#+id/textView8"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
In AVD, it looks like this:
And in mobile, it looks like this:
How can I make them look the same?
This discrepancy occurs because you're using the RelativeLayout quite carelessly. Relative Layout positions items relatively to one another, so it might look different across different devices.
I'd suggest that you use one vertical LinearLayout and to have it have 2 horizontal LinearLayouts as its children, as the rows in which you put these fields. I will provide some modified code of yours below, but keep in mind that this will look the same on each device, and you need to make it look prettier, as this is just an example. Something like this:
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wawdsd"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="name"
android:id="#+id/textView8" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:hint="enter your name" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:id="#+id/button"
android:layout_marginTop="20dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:text="copy"/>
</LinearLayout>
Related
I want to create a view like this.
The problem is, that when the TextView size is bigger, it looks like this.
So it overlaps "View all (35)" TextView. How to prevent the overlapping? The ImageView should be right of TextView, but it has not to overlap "View all (35)". I think you understand. Thank you.
Here's the xml file.
<RelativeLayout
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="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="#font/montserrat_semi_bold"
android:maxLines="1"
android:layout_alignParentStart="true"
android:textColor="#color/colorTextDark"
android:textSize="#dimen/text_extra_large"
tools:text="Birthday" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#+id/textView"
android:src="#drawable/wishlist_public" />
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/montserrat_semi_bold"
android:text="View all (35)"
android:layout_alignParentEnd="true"
android:textColor="#color/colorTextPrimary"
android:textSize="#dimen/text_small" />
</RelativeLayout>
Try to put your imageView to textView's drawableEnd property, after put it in nested linear layout and give to it a weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/imageView"
android:layout_marginStart="16dp"
android:maxLines="1"
android:gravity="start|center"
android:textSize="#dimen/text_extra_large"
android:ellipsize="end"
android:text="Your text here" />
<Space
android:layout_width="match_parent"
android:layout_height="match_parent">
</Space>
</LinearLayout>
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:gravity="end"
android:layout_gravity="center_vertical"
android:text="View All"
android:textSize="#dimen/text_small" />
</LinearLayout>
Try this(Please add some of your dimens property that i remove because i didn't had them) :
<?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="horizontal"
android:paddingTop="10dp"
android:weightSum="3">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:maxLines="1"
android:textSize="20dp"
tools:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:layout_toRightOf="#id/textView"
android:src="#drawable/wishlist_public"
/>
</LinearLayout>
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_weight="2"
android:text="View all (35)"
android:textSize="20dp" />
</LinearLayout>
I think you can use Linearlayout to achieve something like that I use to write this code and I think it can help you achieve this layout design
<?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:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
android:layout_weight="1"
android:textSize="20sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#111"
android:layout_marginStart="10dp" />
</LinearLayout>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View All(35)"
android:textSize="20sp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"/>
</LinearLayout>
After that, you will get something like that
Click here to view image
Try to use ContraintLayout and use Barrier constraint or Guidline constraint to achiever you desired layout
I have fixed using guideline contraint
<?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"
android:paddingTop="16dp">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="24sp"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.095"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.005"
tools:text="Birthday" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_adb_black_24dp"
app:layout_constraintBottom_toBottomOf="#+id/textViewAll"
app:layout_constraintEnd_toStartOf="#+id/textViewAll"
app:layout_constraintHorizontal_bias="0.13"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="View all (35)"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="333dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.62" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm working on a currency converter app. Everything is working fine. I'm using Nested Linear and Relative Layouts in my xml file. I have arranged the layouts one above the other in RelativeLayout like this. (SIMPLE IDEA)
--------------RelativeLayout----------
------FirstRow------
------Divider-------
-----secondRow------
--------------/RelativeLayout/----------
I've set the divider below firstRow and then secondRow below divider in xml. Now i want to rearrange the rows like this.
--------------RelativeLayout----------
------secondRow------
------Divider-------
-----firstRow------
--------------/RelativeLayout/----------
I'm trying to do like this divider below secondRow and firstRow below divider. but its giving me circular dependencies error. I know all about circular dependencies and i believe the java code is not reseting the above layoutparams, instead its something like merging the two layouts which will definitely shoot circular dependencies error.
XML CODE
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/firstRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/namelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/img"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/ic_sampleicon" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="#dimen/activity_horizontal_margin"
android:orientation="vertical">
<TextView
android:id="#+id/name"
style="#style/TextLableMyTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="#+id/brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#f7f7f7" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tvpoints"
style="#style/TextCurrencyMyTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/firstRow"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:orientation="horizontal">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="#drawable/background_gradient_light" />
<ImageView
android:id="#+id/switcherImg"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:src="#drawable/ic_settings"
android:tint="#f7f7f7" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/secondRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/divider"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_cash"
android:tint="#ffe100" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="#dimen/activity_horizontal_margin"
android:orientation="vertical">
<TextView
android:id="#+id/name2"
style="#style/TextLableMyTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Riyal" />
<TextView
android:id="#+id/brand2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#f7f7f7" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tv"
style="#style/TextCurrencyMyTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="0.0" />
</RelativeLayout>
</RelativeLayout>
Java Code to update params
RelativeLayout.LayoutParams _firstRowParams =
(RelativeLayout.LayoutParams)_firstRow.getLayoutParams();
_firstRowParams.addRule(RelativeLayout.BELOW, R.id.divider);
RelativeLayout.LayoutParams _dividerParams =
(RelativeLayout.LayoutParams)_divider.getLayoutParams();
_dividerParams.addRule(RelativeLayout.BELOW, R.id.secondRow);
/* _firstRow.setLayoutParams(_firstRowParams);
_divider.setLayoutParams(_dividerParams);*/
Try adding below code:
RelativeLayout.LayoutParams _secondRowParams =
(RelativeLayout.LayoutParams)_secondRow.getLayoutParams();
_secondRowParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
_secondRowParams.removeRule(RelativeLayout.BELOW);
Try with above code. It worked for me. You need to remove previous Below rule to avoid circular dependency.
As #Luksprog have mentioned about removing the existing rules before adding the new ones this code snippet will work.
RelativeLayout.LayoutParams _firstRowParams =
(RelativeLayout.LayoutParams)_firstRow.getLayoutParams();
_firstRowParams.removeRule(EXISIING_RULE)//RelativeLayout.Below or RelativeLayout.Above or any other
_firstRowParams.addRule(RelativeLayout.BELOW, R.id.divider);
RelativeLayout.LayoutParams _dividerParams =
(RelativeLayout.LayoutParams)_divider.getLayoutParams();
_dividerRowParams.removeRule(EXISIING_RULE)//RelativeLayout.Below or RelativeLayout.Above or any other
_dividerParams.addRule(RelativeLayout.BELOW, R.id.secondRow);
I'm revamping my app to follow look more "Material Design-ey", but have run into trouble with the FAB. I have a scrollview with two floating action buttons:
When I scroll to the bottom, the FABs cover my content. I want to be able to scroll a little past the bottom so the FABs can be align_parent_bottom without overlapping anything:
(should be able to scroll a little more for FABs to be aligned below)
(Before scrolling down)
How do I create extra space at the bottom of my app after scrolling down to the max for the FABs to rest?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:background="#68d9cc">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#68d9cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="20dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:id="#+id/back"
android:onClick="cancel"
android:src="#drawable/ic_arrow_back_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test example"
android:textSize="22sp"
android:id="#+id/header"
android:textColor="#color/textColorPrimary"
android:layout_gravity="center"
android:paddingRight="10dp"
/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linear"
android:layout_marginBottom="55dp"
android:layout_below="#+id/textView12"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#android:color/black"
android:layout_below="#+id/textView12"
android:text="textview:"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView4"
android:layout_alignBottom="#+id/textView4"
android:layout_toEndOf="#+id/textView4"
android:layout_toRightOf="#+id/textView4"
android:imeOptions="actionDone"
android:inputType="text" />
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:choiceMode="singleChoice"
android:layout_height="300dp"
android:layout_below="#+id/toolbar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:elevation="9dp">
</ListView>
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="78dp"
android:gravity="center_horizontal"
android:text="textview"
android:textColor="#000000"
android:textSize="18sp"
android:layout_below="#+id/listview"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/cancel"
android:onClick="cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:clickable="true"
app:fabSize="normal"
app:srcCompat="#drawable/ic_close_black_24dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:clickable="true"
app:fabSize="normal"
app:srcCompat="#drawable/ic_done_black_24dp"
/>
</RelativeLayout>
If you are aiming for Material Design as you mentioned, then putting those Floating Action Button like that are not encouraged. Either stack them on top of each other on the right, or have one where it will open multiple mini FAB on click.
An easy fix however I can think of here would be to add paddingBottom to your layout so it would have more "content" and it would scroll up more.
I would read this section if you haven't already.
https://material.io/guidelines/components/buttons-floating-action-button.html#
I created this interface such that, the top most row of the table layout has 3 equally distributed buttons using layout_weight. But this is what I end up with:
And this is my code:
<RelativeLayout
android:id="#+id/content_rel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ECECEC"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/blurImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<ImageButton
android:id="#+id/btnHeartLike"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#drawable/selector" />
<ImageButton
android:id="#+id/btnShare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#drawable/share39" />
<ImageButton
android:id="#+id/btnProductComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#drawable/comment_icon" />
</TableRow>
I didn't add the rest of the code since it's long and irrelevant (I think?). Let me know if you need the rest as well but I think the problem is with the layout it is in? What do you think is wrong?
why you are using TableRow. you can create it using linearlayout
use the following code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
the another way
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
Try setting the width to 0 instead of having wrap_content: android:layout_width="0.0dip"
And check the following link for the explanation.
How can I put the image view below two of the text views, tv_pw and tv_un. So that in the layout the two text views are on top of the image, while the image serves as a background for that two text views. How could I do that?
Here is my xml file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="510dip"
android:layout_marginTop="10dip"
android:background="#DDDDDD">"
<EditText
android:id="#+id/et_pw"
android:layout_width="150dip"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/et_un"
android:layout_below="#+id/et_un"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="textPassword" />
<TextView
android:id="#+id/tv_pw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/et_pw"
android:layout_alignBottom="#+id/et_pw"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/et_pw"
android:text="Password:"
android:textColor="#444444"
android:textSize="10pt" />
<Button
android:id="#+id/btn_login"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_below="#+id/et_pw"
android:layout_centerHorizontal="true"
android:text="Login" />
<TextView
android:id="#+id/tv_un"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/tv_pw"
android:layout_marginTop="98dp"
android:text="User Name:"
android:textColor="#444444"
android:textSize="10pt" />
<EditText
android:id="#+id/et_un"
android:layout_width="150dip"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tv_un"
android:layout_centerHorizontal="true"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="text" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_login"
android:layout_centerHorizontal="true"
android:text="" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="32dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:src="#drawable/bkground" />
There's a lot more in your XML but, focusing on what you are asking, you can use the margin attribute to overlap the textviews.
Try something like this
<RelativeLayout 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" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myImage">
</ImageView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:layout_marginTop="-50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world2" />
</LinearLayout>
</RelativeLayout>
In this example I wrapped the two textviews inside a linear-layout (vertical) and set the linear-layout below the imageview and a margin of -50dp so it goes up and overlap.
HIH
Another way would be to use drawableBottom="#drawable/ic_launcher" inside your textview
If you don't care about having control on how the image scales, you can set the background of a LinearLayout that's wrapped around the TextViews.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/your_background_image_here"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_view_1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_view_2" />
</LinearLayout>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="510dp"
android:layout_marginTop="10dp"
android:orientation="vertical"
android:gravity="center"
android:background="#DDDDDD">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="98dp">
<LinearLayout
android:layout_width="110dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/bkground">
<TextView
android:id="#+id/tv_un"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="User Name:"
android:textColor="#444444"
android:textSize="10pt" />
<TextView
android:id="#+id/tv_pw"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:text="Password:"
android:textColor="#444444"
android:textSize="10pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="20dp">
<EditText
android:id="#+id/et_un"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="text" />
<EditText
android:id="#+id/et_pw"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="textPassword" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn_login"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Login" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Wrap the two TextViews in linear layout with vertical orientation and assign background for linear layout.
use android:weight on the the two text views and boom
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />