I'm trying to add a footer containing an imagebutton, an textview and another imagebutton to my activity (I want to make an app like whatsapp and it should nearly look the same). I have tried many ways, but all didnt work.
I tried to make a footer like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/chatBottom"
android:layout_width="wrap_content"
android:layout_height="55dp"
android:background="#D8D8D8"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/emojiButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:src="#drawable/emoji_button"
android:background="#D8D8D8"
android:padding="10dp"
android:contentDescription="#string/empty"/>
<EditText
android:id="#+id/enterMessage"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp"
android:padding="5dp"
android:layout_toLeftOf="#+id/sendMessage"
android:layout_toRightOf="#id/emojiButton"
android:background="#drawable/textfield_multiline_activated_holo_dark"
android:hint="" />
<ImageButton
android:id="#+id/sendMessage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#D8D8D8"
android:contentDescription="#string/empty"
android:padding="10dp"
android:src="#drawable/action_send_message" />
and add it using include in xml or via addView() in java, but nothing worked properly. Most important is that the footer has its on background colour (always when I tried to set a colour to the layout where the footer is in, the whole activity got this colour) and that the textview resizes automatically.
Best regards, Oliver
Related
Currently I'm creating an app and ran into a weird issue. My activity has this layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:customfont="http://schemas.android.com/apk/res-auto"
android:id="#+id/relativeLayout_all"
android:layout_width="320dp"
android:layout_height="407dp"
android:background="#color/background"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/rel_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" >
<TextView
android:id="#+id/id_result"
style="#style/font_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="105dp"
android:gravity="center"
android:maxLines="1"
android:maxWidth="216dp"
android:textColor="#color/grey" />
<TextView
android:id="#+id/id_unit"
style="#style/font_Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/id_result"
android:layout_alignBottom="#+id/id_result"
android:layout_alignStart="#+id/id_image"
android:maxLines="1"
android:maxWidth="80dp"
android:textColor="#color/grey" />
<ImageView
android:id="#+id/id_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/id_unit"
android:layout_marginBottom="27dp"
android:layout_toEndOf="#+id/id_result" />
<ImageView
android:id="#+id/id_image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/id_image"
android:layout_alignTop="#+id/id_result" />
</RelativeLayout>
</RelativeLayout>
In my onCreate() I call the Views by their ID and set the texts and the drawables. Depending on a meassured result, there are two scenarios:
1) Show the meassured result (let's say 42.9 GW/ms)
TextView id_result: '42.9'
TextView id_unit: 'GW/ms'
ImageView id_image: #drawable/image1_1
ImageView id_image2: #drawable/image2_1
Everything is fine
2) The result is too high
TextView id_result: 'HI'
TextView id_unit: visibility GONE
ImageView id_image: visibility GONE
ImageView id_image2: visibility GONE
Now here is the problem. I expected the text 'HI' to be shown centered on screen. Instead, only "H" is shown. When I set android:maxLines="2", it is revealed, that Android wraps the text after 'H'. 'I' sits on the second line. Why is this the case? '42.9' is longer and doesn't get wrapped.
Does anyone has a solution?
I am showing and hiding views on a particular actions using some animation, I used LayoutTransition and it seems to work fine except one thing, while the animation is going, the background of some TextViews changes and reset to the default white background!!
Following is the code I am using to apply animation after hide/show.
mRightTransitioner = new LayoutTransition();
mRightTransitioner.setDuration(1000);
vg_rightContainer.setLayoutTransition(mRightTransitioner);
Edited: even without animation i tried, same problem, the background resets once view's position changes
Edited: here how i declared the views in the XML
<LinearLayout
android:id="#+id/ll_req_reasonwrapper"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:baselineAligned="false"
android:gravity="right"
android:orientation="horizontal"
android:visibility="gone" >
<EditText
android:id="#+id/et_req_reasons"
android:layout_width="400dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:gravity="right|center_vertical"
android:inputType="text"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_preasons" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_req_timewrapper"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:baselineAligned="false"
android:gravity="right"
android:orientation="horizontal"
android:visibility="gone" >
<LinearLayout
android:id="#+id/ll_req_endtimewrapper"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/ftv_req_endtime"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:freezesText="true"
android:gravity="right|center_vertical"
android:inputType="numberDecimal"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_endtime" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_req_starttimewrapper"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="50dp" >
<TextView
android:id="#+id/ftv_req_starttime"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:freezesText="true"
android:gravity="right|center_vertical"
android:inputType="numberDecimal"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_starttime" />
</LinearLayout>
</LinearLayout>
for instance: if i hide 'll_req_reasonwrapper', then the LinearLayout 'll_req_timewrapper' moves up, then the backgrounds of the textViews like 'ftv_req_starttime' becomes white!!
Please help.
Edited Answer:
if your are using linear layout then if the child is not being displayed, it is not going to be laid out and not going to be the part of the measurements ( as it looks like ). I recommend to use the RelativeLayout.
You can try
android:background="#null"
for your buttons. if your are using some custom class for button then add
.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
for this specific views.
Need more code. The fact that disabling the LayoutTransition does not solve your issue, means that the animation is not the issue.
How do you reinstantiate child views or populate your view. Are you removing views with setVisibility(View.GONE) and then setting them back with setVisibility(View.VISIBLE)
OR
Are you removing childAt(i) and then dynamically adding custom views
I'm sorry I couldnt add a comment since I dont have the reputation for that but I think I am able to answer your question if you post more code.
I've got an activity layout specified in an XML file - activity_intro.xml - and I'm trying to create another one that is similar but slightly different - that's going to be activity_instructions.xml.
The Intro activity has a 9patch image at the bottom of the screen that is supposed to stay there and only adjust to different widths of the screens.
The Instructions activity is supposed to contain the same image but above 2 more buttons - all three of these views need to be always located at the bottom of the screen.
activity_intro.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="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/introAnimationImageView"
android:layout_width="152dip"
android:layout_height="176dip"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/intro_animation_content_description"
android:src="#drawable/animation_intro01" />
<TextView
android:id="#+id/introTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/introTextViewSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/introButtonLoginSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/intro_button_label_login_signup" />
<Button
android:id="#+id/introButtonInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/introButtonLoginSignup"
android:text="#string/intro_button_label_instructions" />
<Button
android:id="#+id/introButtonReportAnonymously"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introButtonLoginSignup"
android:layout_centerHorizontal="true"
android:text="#string/intro_button_label_report_anonymously" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/footer_cityscape" />
</LinearLayout>
Result:
Since I've got working code for Intro, I wanted to make Instructions follow its example but the layout_weight property isn't behaving as expected. First of all, I was only trying to put in the 2 buttons and leave out the image:
<?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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/instructionsTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/instructions_title_1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<ImageView
android:id="#+id/instructionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/instructions_image_content_description"
android:src="#drawable/forms" />
<TextView
android:id="#+id/instructionsTextViewDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/instructions_description_1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/instructionsButtonPrevious"
style="#style/ButtonPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/instructions_button_label_previous" />
<Button
android:id="#+id/instructionsButtonNext"
style="#style/ButtonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/instructions_button_label_next" />
</RelativeLayout>
</LinearLayout>
This only worked when I set the layout_weight of the bottom RelativeLayout to 1 (instead of 0) and for the ScrollView 0.1 (instead of 1). If I used the original values the RelativeLayout would take up all the screen. Could anyone explain to me why that is?
I also tried googling the issue and noticed people would suggest to set layout_height to 0dip which I tried but it also didn't work as expected.
Secondly, I tried adding the already mentioned ImageView to the bottom RelativeLayout. This, however, basically displays only the ImageView and not the buttons - or one of the buttons is on top of the image (hiding it). Why is that? Don't I specifically set the buttons to be placed below it?
What should the code look like in order for it to be doing what I expect it?
Further explanation:
Below are images that should help indicate what exactly I want to achieve. The green bits are the ScrollViews - I added them because Android devices tend to have diverse screen sizes. Their purpose is to present the content properly independently of the screen size, i.e. if the screen is small, the user will be able to scroll that part to read the entire text and view the image.
The red bit on the left (Intro) shows the ImageView that is supposed to always be at the bottom of the screen; it'll always be there, visible, and it's the green bit above it that will be movable.
If you take a look at the red bit on the right (Instructions), there's a Next button that's covering the image with the lorry/truck that was visible in the Intro screenshot. Now that's wrong - there should be 2 buttons BELOW the image, as seen on the last screenshot (the 2 blue rectangles).
When I click in my edit text and my keyboard shows up, everything seems to be ok as in the picture bellow:
But when it has to shrink a little bit more my image is resized extending a invisible area, and my TextView still as big as in the begining, then my layout doesn't work anymore:
I've tried to create new images and dimensions for xhdpi resolution, but it didn't any effect
How can I fix it? How can I resize everything proportionaly. (I've tried to put a scrollview but i have a ListView inside my layout, as you can see in the code below)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/login_background"
android:descendantFocusability="beforeDescendants"
android:clickable="true"
android:focusableInTouchMode="true"
tools:context=".LoginActivity"
android:id="#+id/fundoLogin" >
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/image_login_fields"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/image_logo"
android:layout_centerHorizontal="true"
android:contentDescription="#string/img_login_fields_desc"
android:src="#drawable/login_fields">
</ImageView>
<ImageView
android:id="#+id/image_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/margin_logo_to_fields"
android:contentDescription="#string/img_logo_desc"
android:src="#drawable/logo" />
<TextView
android:id="#+id/labelLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/image_login_fields"
android:layout_alignLeft="#id/image_login_fields"
android:layout_marginTop="#dimen/margin_top_label_login"
android:layout_marginLeft="#dimen/margin_left_label_login"
android:text="#string/login"
android:textSize="#dimen/login_txt_size"
/>
<EditText
android:id="#+id/txtFieldLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_left_txt_field_login"
android:layout_alignTop="#id/image_login_fields"
android:layout_toRightOf="#id/labelLogin"
android:layout_alignRight="#id/image_login_fields"
android:layout_marginRight="#dimen/margin_right_txt_field_login"
android:layout_marginTop="#dimen/margin_top_txt_field_login"
android:ems="10"
android:textSize="#dimen/login_txt_size"
android:hint="#string/txtFieldLoginHint"
android:singleLine="true" >
</EditText>
<TextView
android:id="#+id/labelSenha"
android:layout_below="#id/labelLogin"
android:layout_alignLeft="#id/image_login_fields"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_top_label_senha"
android:layout_marginLeft="#dimen/margin_left_label_senha"
android:text="#string/senha"
android:textSize="#dimen/senha_txt_size" />
<EditText
android:id="#+id/txtFieldSenha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txtFieldLogin"
android:layout_alignLeft="#id/txtFieldLogin"
android:layout_alignRight="#id/txtFieldLogin"
android:layout_marginTop="#dimen/margin_top_txt_field_senha"
android:ems="10"
android:hint="#string/txtFieldSenhaHint"
android:singleLine="true"
android:textSize="#dimen/senha_txt_size"></EditText>
<ImageButton
android:id="#+id/btnEntrar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/image_login_fields"
android:layout_alignBottom="#id/image_login_fields"
android:layout_marginRight="#dimen/margin_right_btn_entrar"
android:layout_marginBottom="#dimen/margin_bottom_btn_entrar"
android:background="#drawable/btn_entrar_clicked"
android:contentDescription="#string/btn_entrar_desc"
/>
<ListView
android:id="#+id/listEmails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/image_login_fields"
android:layout_alignRight="#id/image_login_fields"
android:layout_alignLeft="#id/txtFieldLogin"
android:background="#drawable/rounded_corner"
android:visibility="invisible" >
</ListView>
</RelativeLayout>
<Button
android:id="#+id/btnTeste"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:textSize="#dimen/btn_teste_txt_size"
android:layout_marginRight="#dimen/margin_right_btn_teste"
android:layout_marginBottom="#dimen/margin_bottom_btn_teste"
android:text="#string/btnCredenciaisDeTesteTxt"
android:textColor="#color/white" />
</RelativeLayout>
What you are looking for is the android:windowSoftInputMode attribute in the AndroidManifest. This controls how your screen will respond to the keyboard being shown. Right now it appears that it is using adjustResize and you want adjustPan so in your Activity declaration in the manifest add:
<activity android:windowSoftInputMode="adjustPan"
You can read more about your options here:
http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft
If you want the screen to resize you need to rethink your layout.
First, its bad form to have the login background as a separate ImageView. Since you want it to resize you should create a 9 patch for the image at its smallest necessary size. This makes the container define the size of the image, not the image itself.
Second, wrap your TextViews and EditText in a RelativeLayout alone then apply the 9 patch you created as the background of the RelativeLayout. Now you will always have a login box that wraps your Views the way you designed it even when resized.
I'm trying to set my TextView to the left of an ImageButton, but I can't seems to find this option.
I was expecting to use something like android:layout_alignLeft, but this option is missing.
I've tried to google the issue, but couldn't find any relative results.
Without it my TextView overlaps the ImageButton and I want to avoid it.
UPDATE
The full xml code is too complex, but here is the important part of it:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:background="#color/white"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="#+id/frameLayoutBalanceClosed">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button_edit_nickname"
android:id="#+id/card_closed_control_editNickname" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/card_closed_description_nickname"
android:layout_margin="8dp" android:layout_gravity="left"/>
</FrameLayout>
I think what you need is a RelativeLayout. You can specify your TextView to the left of your ImageView with it's specifications. Your code would look something like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imagebutton1" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
The reason FrameLayout isn't working is because it's purpose is to overlay items on top of each other, which wouldn't work at all!
If that isn't what you're looking for, you could also use a TableLayout in which items are arranged in columns.