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" />
Related
I'm trying to make a list_item_view similar to
can anybody help me create it...
What i have tried
made separate view for the list items i.e list_item_even and 'list_item_odd'
for brevity i'll only show one of them, below is the code for list_item_even
<TextView
android:id="#+id/displaysms_lastmsgtime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/displaysms_contactname"
android:layout_below="#+id/displaysms_contactname"
android:gravity="right"
android:text="88:88"
android:textColor="#10bcc9"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:id="#+id/displaysms_msgtext"
android:layout_width="260dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageButton1"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/imageButton1"
android:background="#fff"
android:shadowColor="#color/textShadow"
android:shadowDx="1"
android:shadowDy="1"
android:text="hi"
android:textColor="#color/textColor"
android:textSize="16sp" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/displaysms_lastmsgtime"
android:src="#android:drawable/btn_star" />
<TextView
android:id="#+id/displaysms_contactname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="45dp"
android:layout_toRightOf="#+id/displaysms_msgtext"
android:text="john"
android:textColor="#fff"
android:textSize="15sp"
android:textStyle="bold"
android:typeface="sans" />
and here is output
is it possible to create the yellow icon without using image and place an image inside it?
plaese help, Regards
is it possible to create the yellow icon without using image and place
an image inside it?
Maybe, but why put an unnecessary constraint on yourself? You can use a 9patch drawable for the yellow background thing if you're worried about stretching the pointed part. You can learn all about 9patch here.
i think you better off defining the layout programatically and check the row number if odd use one layout if even use a different one
if (row%2==0) use one layout
else use a different one
I am trying to create a Button that looks like a Spinner.
I have done this by creating a Button like this:
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
android:textSize="15sp"
style="?android:attr/spinnerStyle"
android:gravity="center_vertical|center_horizontal" />
The problem is that the text ("default text") inside the Button seems to have extra padding around it, which makes the Button look bloated and expanded in its height.
I thought that setting the layout_height for the button to "wrap_content" would fix this and make the button thinner, but it does not have any effect.
Does anyone know how to make this button's height wrap to the text inside it?
Here is the example code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp" >
<TextView
android:id="#+id/dateLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="Select date:"
android:textSize="15sp" />
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
android:textSize="15sp"
style="?android:attr/spinnerStyle"
android:gravity="center_vertical|center_horizontal" />
</RelativeLayout>
android:gravity="center_vertical|center_horizontal" instead of this you can write
android:gravity="center" but as per your requirment just remove this line.do not add any gravity and change your height size android:layout_height="40dp"
i changed your code
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="35dp"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
style="?android:attr/spinnerStyle"
/>
The padding of this button is decided by the drawable of it. You either need to change the spinner drawable (can be done at runtime) , or provide your own drawable to the given button that would make it look like a spinner, without using the default one
I have a Button with its width as match_parent. And I want a image/icon with a text in its center. I have triedandroid:drawableStart attribute but its of no help. I don't know what I am missing. Is there any one who is also facing the same problem.
Note:This link is not solving my problem. I am attaching my button portion of xml
<Button
android:background="#drawable/blue_button"
android:id="#+id/btn_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:drawableStart="#drawable/ic_list"
android:text="#string/btn_schedule"
android:textColor="#android:color/white" />
After adding these attribute my text is coming on center but image/icon is still on left side of button. Can any body help!!!
You might want to check my answer to this question:
Android Button with text and image
Its an ugly solution but it you want the image and text to be centered as a group in the button rather than text center and drawable padded from the side then its the only way I have found.
100% working
<FrameLayout
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#null"
android:clickable="false"
android:drawableLeft="#android:drawable/ic_delete"
android:focusable="false"
android:gravity="center"
android:minHeight="0dp"
android:minWidth="0dp"
android:text="Button Challenge" />
from here
This works for me. Basically play with the paddingLeft and PaddingRight of the button to get the text and image close together to the center.
Note: Might be an issue with rather long texts.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="search button"
android:drawableStart="#drawable/ic_action_search"
android:paddingLeft="60dp"
android:paddingRight="60dp"/>
</LinearLayout>
I had the same problem and I hadn't found anywhere clear solution. BUT I got some information which also help me to provide following solutions (I have chosen the second one):
Create image which will contain your image and text
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableTop="#drawable/YOUR_IMAGE"
android:gravity="center_horizontal|center_vertical" />
It is not so clear and you have to add more complicated changes to your layout but it is easier to modify the text later
<FrameLayout
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_height="50dp"
android:layout_width="match_parent" />
<TextView
android:text="sample"
android:layout_height="50dp"
android:layout_width="wrap_content"
android:drawableLeft="#drawable/YOUR_IMAGE"
android:gravity="center_horizontal|center_vertical" />
</FrameLayout>
I tried android:drawableTop
The image shown in the center of the button
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.
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.