Edittext loses style when align_baseline used - android

I have a layout where I have RelativeLayout with some Edittext which use the default style and are baseline aligned with some Textfield. The issue is the Edittext are losing the default Holo Light style line (the line under the text). If I take out the baseline then the line is shown though, of course, the Edittext loses the alignment.
I suspect this is bug or at least a very strange behavior, but I will give it a try by asking here in SO :-)
This is how it looks (Edittexts are the blank spaces to the right of Opens and Closes TextViews):
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dip"
android:layout_weight="50"
android:orientation="vertical" >
<EditText
android:id="#+id/store_name_edit"
android:hint="#string/store_name"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_code_edit"
android:hint="#string/store_code"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_group_edit"
android:hint="#string/store_group"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_type_edit"
android:hint="#string/store_type"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_address_edit"
android:hint="#string/store_street"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="20dip"
android:textSize="20sp"
android:text="#string/store_description" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/opening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_opening_hours" />
<TextView
android:id="#+id/opens"
android:layout_below="#id/opening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_open" />
<EditText
android:id="#+id/opens_edit"
android:layout_toRightOf="#id/opens"
android:layout_alignBaseline="#id/opens"
android:layout_height="wrap_content"
android:layout_width="100dip"
android:textSize="18sp" />
<TextView
android:id="#+id/closes"
android:layout_alignBaseline="#id/opens"
android:layout_toRightOf="#id/opens_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_close" />
<EditText
android:id="#+id/closes_edit"
android:layout_alignBaseline="#id/opens"
android:layout_toRightOf="#id/closes"
android:layout_height="wrap_content"
android:layout_width="100dip"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>

My guess is the containing RelativeLayout somehow isn't expanding to allow for the lines on the EditTexts to show.
Change the containing RelativeLayout to:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp">
I realise this may not be the best solution but it's a start. Another option might be to try using alignParentBottom instead of baseline on all the "bottom" row elements.

Related

How do I right justify a TextView in a Linear Layout?

I am trying to get the TextView, "tv_amount" to stay on the right side of the screen. I have tried using android:gravity="right" but that hasn't been working for me. Anyone have any suggestions?
Image of emulator running this code:
<?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="45dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="40sp"
android:layout_height="40sp"
android:background="#drawable/circle_border"
android:padding="6sp"
android:layout_marginLeft="6dp"
android:src="#drawable/food"/>
<TextView
android:id="#+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="12dp"
android:text="Yummy Pizza"
android:textSize="20sp" />
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:gravity="end"
android:text="$25"
android:textSize="25sp" />
</LinearLayout>
I am expecting the transaction or "tv_amount" to stay be right justified so that end of the number is staying towards the right side of the screen.
I tried using :
android:layout_weight="0"
android:layout_gravity="end"
android:gravity="right"
but these don't seem to work obviously. I am a beginner when it comes to android development and can't seem to find any answers that have helped anywhere else. They all say to use android:gravity or some other alternative. Maybe there is something in my code that doesn't allow that.
Try it like this:
Splitting the content into left and right will result in the weight and gravity properties working. Check out this layout below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="20sp" />
<!--Separate layout aligned to the left, containing an image and a yummy pizza label. -->
<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"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/tv_text_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Left"
android:textSize="16sp" />
</LinearLayout>
<!--Display the pizza price on a separate label aligned to the right -->
<TextView
android:id="#+id/tv_text_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Text Right"
android:layout_weight="1"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
I am dumb. The issue wasn't with the code in my individual recycler view layout code. It was with my activity_main.xml. I set the recycler_view width to "wrap_content" when it should have been "match_parent." Rookie mistake.

How can I prevent FrameLayout from shadowing my Views?

My interface looks like this:
XML:
<?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="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/profile_fields_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/account_person_name_label" />
<EditText
android:id="#+id/person_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_emailId_label" />
<EditText
android:id="#+id/person_emailId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_phoneNo_label" />
<EditText
android:id="#+id/person_phoneNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLength="10"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_password_label" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_retypePassword_label" />
<EditText
android:id="#+id/retype_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/learner_tutor_status_label" />
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/learner_tutor_status_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<!--Floating Button-->
<Button
android:id="#+id/create_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/create_account_string"
style="#style/Widget.AppCompat.Button.Colored"/>
</FrameLayout>
Now, you can see at the bottom there is I am here to.... This is a dropdown and when I choose one of the options, my code dynamically adds a few views to the hierarchy but the problem is they are not visible(not all of them; just I am a... is visible.)
I checked the layout hierarchy through the Layout inspector and turns out that the hierarchy is alive but the floating button(Create Account) has overshadowed it.
Now, I know if I were to replace the root FrameLayout with a LinearLayout, it would be visible but the problem is that if then I would click on a EditText button, the keypad would cover the screen with the Create Account button as covered too. I actually want this button to be on the screen at all times.
Does anyone how can I get around this problem?
Your layout is not totally correct because your floating button hides the bottom of your ScrollView all the time. You should replace the FrameLayout with a vertical LinearLayout (just like you said) and then specify the window behavior of your activity when the soft keyboard pops up with the windowSoftInputMode attribute in your activity element on the AndroidManifest.xml file. If you use android:windowSoftInputMode="adjustResize", the window will resize accordingly and the button should be always visible.

Make an element fill all the free space in wrap_content-based layout

I have a vertical layout: 2 text field and a horizontal bar of buttons:
<?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="#ff00ff00"
android:orientation="vertical"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_send"
android:layout_weight="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
I want the button bar to have wrap_content size policy (can't even have them fixed size because this app has different localizations). I also want the text fields to have the same width as the button box. Here's how the above xml looks in designer (Eclipse + ADT) with platform 17 selected (and how I want it to look). Colors are just for easy debugging:
And here's how it looks on an Android 4.1 tablet:
This layout is used as a custom layout to a Dialog. No manipulations has been done to the Dialog apart from setting content and title.
Interesting fact: it looks exactly as I want it to (and same as ADT designer shows) on Android 3.1 tablet. But not on 4.1.
How can I achieve the desired layout?
You might want to use RelativeLayout to accomplish what you're looking for. Try changing your xml to the following:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="#ff00ff00"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_below="#+id/et_email"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<RelativeLayout
android:id="#+id/buttonbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_comment" >
<Button
android:id="#+id/btn_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toLeftOf="#+id/btn_show"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toRightOf="#+id/btn_show"
android:text="Cancel" />
</RelativeLayout>
</RelativeLayout>
This seems silly but it seems to work. Try putting in a nested layout. Change your outer layout width/height to fill parent. Then, inside that make another linear layout with all of your views and such. Give the inner LinearLayout the wrap_content values and that should do it. There's got to be a better way to do it than this but I can't think of it at the moment.

Android edittext auto grow with text and pushing things down

Yes, this is yet another edittext grow question on SO. And yes I've already gone through all those edittext grow questions. But this ones a bit specific.
UI:
A simple android layout with edittext and button below it. When text is less, the edittext view is still covering whole screen leaving space for button below.
Once user starts entering text, edittext grows vertically to accommodate text. At the same time, the button should also kept pushing downwards to let edittext grow.
User can vertically scroll through screen to view full text.
UI after entering significant text:
Here's the layout with edittext and button below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:clipToPadding="false"
android:fadingEdge="none"
android:fillViewport="true"
android:padding="13dp"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- some fixed width image -->
<ImageView
android:id="#+id/someimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:src="#drawable/page_white_text" />
<EditText
android:id="#+id/some"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/someimage"
android:background="#null"
android:gravity="top"
android:minLines="10"
android:minHeight="50dp"
android:textColor="#222222"
android:textSize="15dp"
android:typeface="serif" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
This works more or less. But when I enter to much text, instead of pushing button downwards. It goes behind it like:
Any help here is much appreciated. Thanks :)
Here's my recommendation: inside the ScrollView, put a RelativeLayout in which you can place every element in a certain order using android:layout_below. For the auto-growing of your EditText, use this solution.
Let's see an example:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center">
<RelativeLayout
android:id="#+id/general2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20sp" >
<TextView
android:id="#+id/textFirstOpinion"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/titleFirstOpinion"
android:textStyle="bold"
android:textSize="23sp"
android:textColor="#FFFFFF"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/fieldFirstOpinion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textFirstOpinion"
android:minHeight="80sp"
android:isScrollContainer="true"
android:inputType="textMultiLine"
android:textSize="20sp"
android:gravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_below="#id/fieldFirstOpinion"
android:layout_centerHorizontal="true"
android:layout_marginTop="37sp"
android:textSize="23sp"
android:text="#string/textSendButton"
android:gravity="center_horizontal"
android:padding="10dp" />
</RelativeLayout>
</ScrollView>
try adding android:layout_below="#id/some" in your LinearLayout like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical"
android:layout_below="#id/some" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Since you want the button to be at the bottom of the page, add the following line
android:layout_below="#+id/some"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
in your LinearLayout code here like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/some"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
Also make sure the layout:height parameter of EditText is set to wrap_content
Try this and tell me if it works or not

Android text will not align to center

I have a TextView and 3 Buttons centered in a RelativeLayout, and the text in all three of them is left-justified with the parent center as the leftmost line.
I've tried changing the gravity of the TextView, Buttons, and layout but nothing is working and I'm baffled because I've never seen Android align text like this before.
I want the Button text to be centered within each Button and the top text to be center-justified.
An image of what it looks like is here: http://i.stack.imgur.com/9lHEd.png
Here's my xml:
<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" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:gravity="center_horizontal"
android:text="#string/greeting"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/startQuizButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:onClick="#string/startQuiz"
android:text="#string/start_quiz" />
<Button
android:id="#+id/lessonsButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/startQuizButton"
android:layout_centerHorizontal="true"
android:onClick="#string/startLesson"
android:text="#string/lessonsString" />
<Button
android:id="#+id/viewAllButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/lessonsButton"
android:layout_centerHorizontal="true"
android:onClick="#string/showAll"
android:text="#string/view_all" />
I included a RelativeLayout because you have it as your parent layout. However, i am not sure that it is needed. See if the following code is what you are looking for.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Greetings" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Quiz" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lessons" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="View all questions" />
</LinearLayout>
</RelativeLayout>
add in button tab android:gravity="center"...see if it works..
u need to set layout width and height to fill_parent and everything will work fine
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="your text" />
if you want to centre some text, then you could also do it this way:
<TextView
android:text="Quantity"
android:textSize="34sp"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:layout_centerHorizontal="true"
android:paddingTop="10dp"/>
here i have changed made it horozontal by using android:layout_centerHorizontal="true"which takes a boolean value of true or false, by making it true, it will automatically be centred on all devices
hope that helps

Categories

Resources