I'm working on an XML layout in my app and what I want to do is to make an ImageView have a piece of text on it (I want to have a TextView on it). Anyway, less words and more examples. What I want is something like this:
I would like to know what is the best way to make it (with an opaque strip and preferably with text that will stretch or shrink depending on the length of name. Though I think I might figure the stretching out by myself).
You can create a RelativeLayout with the ImageView and TextView as its two children
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/myImageView"
android:layout_width="150dp"
android:layout_height="75dp"
android:src="#drawable/myImage" />
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myImageView"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/myImageView"
android:background="#drawable/myBackground"
android:gravity="center" />
</RelativeLayout>
Building on what Chris Stillwell said, set the Alpha property to less than 1:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/myImageView"
android:layout_width="150dp"
android:layout_height="75dp"
android:src="#drawable/myImage" />
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myImageView"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/myImageView"
android:background="#drawable/myBackground"
android:gravity="center" />
</RelativeLayout>
Then in your onCreate()
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.yourlayout);
ImageView imageView = (ImageView)findViewById(R.id.myImageView);
TextView textView = (TextView)findViewById(R.id.myTextView);
textView.setText("Your Text");
textView.setAlpha(.6f);
}
Related
I am creating a calc app.
How to set padding to shrink the background image..
I want to convert to something like
My xml of TextView :
<TextView
android:id="#+id/c_tv_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text=""
android:background="#drawable/ic_backspace_black_24dp"
android:padding="5dp"/>
Use ImageView instead and give padding to it :
<ImageView
android:padding="20dp"
android:src="#drawable/ic_backspace_black_24dp"
android:id="#+id/product_main_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
and why you need Textview and Background image to that ?
You can simply put ImageView or ImageButton
You should use imageButton instead of TextView like this:
<ImageButton
android:id="#+id/delete_button"
android:layout_width="70dp"
android:layout_height="40dp"
android:background="#drawable/delete_icon"
android:layout_margin="16"/>
I suppose there's more than one way
First way, you have to extends TextView into new class and overwrite some #override methods. and use this class in xml... this is hard way
Second way (Recommended), use Adobe Illustrator or Photoshop to adjust a new drawable and make it easily as you like
Third way, use RelativeLayout or FrameLayout and make the background you want in a Imageview... easy way and do the job
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/iv1"
android:padding="your_padding_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_backspace_black_24dp"/>
<TextView
android:id="#+id/c_tv_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:text=""
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_alignBottom="#+id/iv1"
android:layout_alignEnd="#+id/iv1"
android:layout_alignStart="#+id/iv1"
android:layout_alignTop="#+id/iv1"/>
</RelativeLayout>
I am trying to have a TextView with an ImageView directly to its right. Right now the image partially overlaps the far right of the text, so if the text inputted is long, then the image is "over" the text. I have an ellipse setting on the text but I need the TextView to "stop" right at the left border of the ImageView.
TextView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
ImageView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv"
android:singleLine="true"
android:maxLines="1"
android:ellipsize="end"
.... />
<!-- background == #null if you don't want default button background -->
<ImageButton
android:id="#id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="3dp"
android:background="#null"
.... />
</RelativeLayout>
EDIT
See the comments in regards to why this works and the posted question doesn't. Also take a look at
Android Relative Layout alignParentRight and alignParentEnd
for a reference to end/right and start/left attributes.
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'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.
In my android app i want to design a layout exactly like twitter layout with a Image and Text View.
See the following screenshot
Please help me with this. How can i design this layout ?
Update:
Forget about background images and top bar. I am requiring 6 images and textviews. In the below image twobirds with Tweets(167), Lists, Mentions, Retweets etc.,
What you want is fairly simple, tho I am sure there are more fancy way's of doing this then i'm
about to show you.
For my application I used 4 ImageButtons, but the principle is the same for 4 or 6 buttons.
This is my XML layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/actionbar_layout"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:background="#drawable/actionbar_background"
android:gravity="center_vertical">
<TextView
android:id="#+id/tekst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App name"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:layout_marginLeft="5dp"
android:textStyle="bold"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/button_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_below="#id/actionbar_layout">
<ImageButton
android:id="#+id/button_schedule"
android:src="#drawable/schedule_icon"
android:scaleType="fitCenter"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="40dp"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/text_schedule"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="Rooster"
android:textSize="20dp"
android:layout_below="#id/button_schedule"
android:gravity="center"
/>
<ImageButton
android:id="#+id/button_locations"
android:src="#drawable/locations_icon"
android:scaleType="fitCenter"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF"
android:layout_below="#id/text_schedule"
/>
<TextView
android:id="#+id/text_locations"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="Links"
android:textSize="20dp"
android:layout_below="#id/button_locations"
android:gravity="center"
/>
<ImageButton
android:id="#+id/button_rss"
android:src="#drawable/rss_icon"
android:scaleType="fitCenter"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="40dp"
android:background="#FFFFFF"
android:layout_toRightOf="#id/button_schedule"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/text_rss"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="RSS"
android:textSize="20dp"
android:layout_toRightOf="#id/text_schedule"
android:layout_below="#id/button_rss"
android:layout_alignParentRight="true"
android:gravity="center"
/>
<ImageButton
android:id="#+id/button_settings"
android:src="#drawable/settings_icon"
android:scaleType="fitCenter"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF"
android:layout_toRightOf="#id/text_locations"
android:layout_below="#id/text_schedule"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/text_settings"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="Instellingen"
android:textSize="20dp"
android:layout_toRightOf="#id/text_locations"
android:layout_below="#id/button_settings"
android:layout_alignParentRight="true"
android:gravity="center"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/twitter_layout"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/button_layout">
<Gallery android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/gallery"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
</Gallery>
</RelativeLayout>
I pasted the whole file, so you can see how I implemented my actionbar.
But what you need is the second RelativeLayout tag.
You align your buttons/textviews by using "android:layout_toRightOf" and "android:layout_below" attributes.
Your first button is simple, the second one (the one to its right) you align with "android:layout_toRightOf="#id/first_button"
A third button (below the first button) can be aligned using "android:layout_below="#id/first_button"
The same goes for textviews, just use layout_toRightOf and layout_below to align them. The attributes only apply to the RelativeLayout.
Hope this will help you out a bit.
What you want to do is called a Dashboard pattern.
You can find implementation of ActionBar and Dashboard patterns in sources of the Google IO app. ActionBar in the file actionbar.xml (and HomeActivity.java, ActivityHelper.java), Dashboard in the file fragment_dashboard.xml (and DashBoard.java).
im sure , it's can be created like this :
image and textView mustBe on layout - so :
//start "a" code
LinearLayout oneObject ;
oneObject= new LinearLayout(this);
//need set to vertical mode
oneObject.setOrientation(LinearLayout.VERTICAL);
//it's our one object . image+text
next : TextView text = new TextView(this);
text.setText("tweets"); // or get from array
///image it's can be what you want - button, layout, textView(-____-)
// just need set on background new image . iget button - for normal clicking ;//
ImageButton image = new ImageButton(this);
image.setImageResource(r.drawable.blabla)
oneObject.addView(image);
oneObject.addView(text);
//also u need create 2 columns and add to this columns our object
//for size of oneObject - use LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(curWidth/2,curHeight/6); curWidth and curHeight - its my resolution of screen.
//end "a" code
for creating 6 objects u must rung it in cycle :
all code = "a"; so
for(int i = 0;i<6;i++)
{
a/// where a all our code
}
Hope it's help you.. also i can put more code where need some fixings