I designed one layout which have total 4 RelativeLayout one is outer cover and 3 are child of it. When I put White color in the outer layout than no spaces are left but when I put 9patch image as drawable image than little default padding/margin are left. Is there any properly which solve the padding/margin issue? I have tried margin negative but it will hide bit layout I think it is not proper solution, here is my layout
when I put white color as background than my layout look like
Here is the following code of my layout
<RelativeLayout
android:id="#+id/DetailSection1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/HeaderLayout"
android:layout_toLeftOf="#+id/DetailSection2"
>
<TextView
android:id="#+id/lblRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/DetailSection1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:textColor="#color/heding_font"
android:textSize="#dimen/headingFont"
android:text="Restaurant Name" />
<ImageView
android:id="#+id/imgpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblRestaurantName"
android:layout_margin="5dp"
android:src="#drawable/pin" />
<TextView
android:id="#+id/lblAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblRestaurantName"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgpin"
android:text="Address"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblAddress"
android:layout_margin="5dp"
android:src="#drawable/phn" />
<TextView
android:id="#+id/lblMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAddress"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgphone"
android:text="Mobile"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgstar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/star" />
<TextView
android:id="#+id/lblStar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblMobile"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgstar"
android:text="Star"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignBottom="#+id/DetailSection1"
android:layout_toLeftOf="#+id/DetailSection3"
android:layout_toRightOf="#+id/lblStar" >
<ImageView
android:id="#+id/imgmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/read_more" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection3"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/HeaderLayout"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/photo_cover" >
<ImageView
android:id="#+id/imgRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/rihanna" />
</RelativeLayout>
</RelativeLayout>
From the 9-patch drawable image you posted:
The bottom line which indicates the horizontal data population on the view wasn't drawn from the starting point of left.
I am not sure about it. And I know I wasn't clear in explaining the above line.
Just check this:
Consider the below 9-patch is used as a background for a TextView. If you put some text in it, it will start from the area where the bottom line is drawn. Which mean it will start from the left and go all the way to right.
If you use the following 9-patch as a background and try the same thing which you did above. Will result in Text not written from the left. It leaves a bit padding.
That is the reason why you get such result. Of course I am 100% sure about it.
So, just to find out if this works. Try changing the bottom line to fill complete image.
I think you better apply the background color for which layout you want exactly.And one more keep the code so that we can understand easily what is your issue.
Related
I am trying to put a text below an image but they are not showing up in android layout.
Here is the screenshot:
I dont' see any text below image.
And my code: inside a relative layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_footer"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/panelcolor" >
<ImageView
android:id="#+id/searchicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingRight="60dp"
android:src="#drawable/search_white" />
<TextView
android:id="#+id/searchText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/searchicon"
android:text="Search" />
<ImageView
android:id="#+id/homeicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingRight="60dp"
android:layout_toRightOf="#+id/searchicon"
android:src="#drawable/ic_home" />
<TextView
android:id="#+id/hometext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/homeicon"
android:text="Home" />
<ImageView
android:id="#+id/wishicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/homeicon"
android:src="#drawable/ic_favorite" />
<TextView
android:id="#+id/wishtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/wishicon"
android:text="Wish List" />
<ImageView
android:id="#+id/viewicon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="60dp"
android:layout_toRightOf="#+id/wishicon"
android:src="#drawable/ic_eye" />
<TextView
android:id="#+id/viewtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="60dp"
android:textColor="#color/whitetext"
android:layout_below="#+id/wishicon"
android:text="Viewed" />
</RelativeLayout>
Not sure what is wrong?
Assuming you follow Googles Design guidelines
(Tabs with icons and text Height - 72dp;
Icon - 24 x 24dp)
Change 'match_parent' to 'wrap_content' for the ImageViews
The problem is you have put android:layout_height="match_parent" for image views and android:layout_height="wrap_content" for text views. Either use wrap_content for image view or use use a LinearLayout with android:weight property. Using LinearLayout would also solve your problem of alignment if it occurs!
Try setting android:layout_alignParentBottom="true" instead of android:layout_below="#+id/homeicon".
This aligns the text at the bottom of the parent. You might also need to set android:layout_alignLeft="" and align it to the corresponding imageView.
This method will only work, if there is enough padding below the image. This is because the text will now overlap the image.
EDIT:
Another way would be, to set the relative layout to a fixed height you know (like 60dp) and set the imageView to a fixed height (like 40dp). Then the TextView will also show up below the ImageView.
I wanted to make an ImageButton to put in my app, but I need a very specific one.
I wanted to make an ImageButton similar to that of the one in QuickPic. Notice on the left screenshot, the Camera. See how there's an image, with a translucent gray bar at the bottom with text in it? I wanted to make something very similar to that, but with one large textview in the gray bar instead of two small ones. I am completely lost on how to do this in XML so if someone could help me, It'd be greatly appreciated. Thanks!
You mean something like this? :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageButton1"
android:layout_alignLeft="#+id/imageButton1"
android:layout_alignRight="#+id/imageButton1"
android:background="#33000000"
android:text="Image Text" />
</RelativeLayout>
Additionally, you can specify the TextView's gravity and textSize to further match your needs:
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageButton1"
android:layout_alignLeft="#+id/imageButton1"
android:layout_alignRight="#+id/imageButton1"
android:background="#33000000"
android:gravity="center_horizontal"
android:text="Image Text"
android:textSize="8sp" />
I want to ask about hierarchy view result. I have an custom component i paste the layout code below, i dont understand what is the problem ? Why hierarchy viewer gives red point ?
Any opinion will be appreciated
hierarchy view result
Measure : 1.873 ms
Layout: 0.298 ms
Draw : 1.472 ms
yellow / red / yellow
Custom componenet Layout
<com.ab.framework.component.ui.RelativeLayout1
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<com.ab.framework.component.ui.TextView1
android:id="#+id/textMoneyRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="#dimen/moneyview_item_margin"
android:layout_marginTop="#dimen/moneyview_TextField2_Padding"
android:text="#string/empty_text"
android:textSize="#dimen/moneyview_textField2_size" />
<com.ab.framework.component.ui.TextView1
android:id="#+id/textMoneyLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/moneyview_item_margin3x"
android:layout_toLeftOf="#+id/textMoneyRight"
android:text="#string/empty_text"
android:textSize="#dimen/moneyview_textField1_size"
android:textStyle="bold" />
<com.ab.framework.component.ui.TextView1
android:id="#+id/textMoneySeperator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="false"
android:layout_marginTop="2dp"
android:layout_toLeftOf="#+id/textMoneyRight"
android:text="#string/price_seperator"
android:textStyle="bold" />
<com.ab.framework.component.ui.TextView1
android:id="#+id/textMoneyCurrency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/textMoneyRight"
android:layout_marginTop="#dimen/moneyview_item_margin"
android:text="#string/currency" />
<com.ab.framework.component.ui.TextView1
android:id="#+id/textMoneyDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/textMoneyCurrency"
android:layout_marginLeft="#dimen/moneyview_item_margin"
android:layout_marginTop="#dimen/moneyview_TextField2_Padding"
android:text="#string/empty_text"
android:textSize="#dimen/moneyview_textField2_size" />
</com.ab.framework.component.ui.RelativeLayout1>
</merge>
Red / yellow / green points are relative values. You should be looking at them only when you notice there is a problem with performance.
Try with a simple layout containing TextView and ImageView and you should see red dot there too.
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.