I have a editbox, in which I defined an android:drawableLeft property.
I am expecting to have the EditBox look something like this (from Instagram app):
Note that the image is properly centered, and the top/right/left/bottom padding of the image seems all the same. The text on the right is bounded by the size of the image (between the blue lines that I draw)
When I am trying to do the same thing, my EditText view look like this:
I also set the line number of this multiline edittext box to be three, but this did not help fix the box size. There is a big padding on the top/bottom of the image that I don't know where it comes from. Here is my code:
Layout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1" >
<EditText
android:id="#+id/new_post_edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_edittext"
android:drawableLeft="#drawable/ic_launcher"
android:ems="10"
android:gravity="top|left"
android:hint="#string/compose_card_hint"
android:lines="3"
android:padding="5dip"
android:drawablePadding="5dp"
android:textColor="#999999" >
<requestFocus />
</EditText>
</LinearLayout>
Rounded corner drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dp"
android:shape="rectangle" >
<solid android:color="#bbbbbb" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
And also code to dynamically set the image:
Drawable img = this.getResources().getDrawable( R.drawable.sample_img );
img.setBounds( 0, 0, 200, 200);
EditText et = (EditText) findViewById(R.id.new_post_edittext);
et.setCompoundDrawables( img, null, null, null );
How I can re-adjust the layout to make it look the same as the Instagram one I showed above?
Thanks
There are two ways you can do it.
Use a custom layout with an ImageView and TextView in a LinearLayout/Relative Layout. It will make your list items uniform irrespective of text and image size.
Using drawable with EditText in combination with lines is a bad idea. use drawableLeft or Right when you need to display image on edges with default gravity. Margin and Padding for drawables associated with EditText is a cumbersome task.
Have you tried by changing android:gravity="top|left" to android:gravity="center_vertical"
Related
I have a standard TextView and TextSwitcher:
The TextView:
<android.support.v7.widget.AppCompatTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:textColor="#3F51B5"
android:textSize="40sp"
android:gravity="bottom|center_horizontal"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:background="#android:color/black">
The TextSwitcher:
<TextSwitcher
android:id="#+id/questionTextSwitcher"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"/>
The text of the TextView changes dynamically, and sometimes the text is a couple lines.
The black background is the TextView, and the white is the TextSwitcher:
When there is a longer text set it looks like this:
When there is a smaller text it looks like this:
I want the TextView to be placed at the bottom of the TextSwitcher - but that isn't happening?
try to match the parent height and also use the layout_gravity attribute.
Hi everyone i got a little problem about the width of my textview
it looks like this
as you can see, my textview is bigger than my text :/
here is my 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="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="destinataire"
android:id="#+id/tv_destinataire"
android:layout_gravity="left|top"
android:layout_weight="1"
android:layout_marginLeft="25dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:layout_marginBottom="10dp"
android:textColor="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="envoyeur"
android:id="#+id/tv_envoyeur"
android:layout_gravity="right|top"
android:layout_weight="1"
android:layout_marginRight="25dp"
android:layout_marginTop="10dp"
android:padding="10dp"
android:textColor="#ffffff"
android:layout_marginBottom="10dp" />
</LinearLayout>
i would like something like this, if the message contain some word well "wrap_content" whereas is long long message something like maximum 70% of width :
thank you :)
You can reach what you said adding some logic directly on your activity and not in the XML file. You can set the width by Java code with something like:
TextView t = (TextView)findViewById(R.id.myTextView);
where myTextView is the id that you declared in your XML.
Now go ahead and write some logic...
If is necessary:
t.setWidth(200);
Note that 200 is only an example, you can calculate the width you need before.
If I were you, I might use the relative layout and add maxWidth limit to TextView containing text, and as the dialog going, just place the TextView below the last TextView and use alignStart/alightParentStart and alignEnd/alignParentEnd to indicate who's speaking.
when a new message arrives
prepare your relative layout parameter, add layout rules
set text, maxwidth limit, layout parameter and other style you want for your text
add the view to a scrollable relative layout container
Sorry for my bad English in case of you have any reading problem. :)
I want to make an app with a login activity/layout similar to what Facebook app has. What I mean is when text field is focused soft keyboard pushes the entire view up but not squashing a logo. I have tried android:windowSoftInputMode="adjustPan/adjustResize" but it is not what I was trying to achieve.
I found this question on SO perhaps it will make things clearer, but it has no solution to the problem.
I have also tried various layouts types but it soft keyboard only pushes the focused < EditText > up. Please guide me.
UPDATE:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#DDDDDD">
<RelativeLayout
android:height="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:background="#ff0000">
<ImageView
android:layout_centerVertical="true"
android:layout_height="fill_parent"
android:layout_width="fill_parent"></ImageView>
</RelativeLayout>
<RelativeLayout
android:height="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent"
android:background="#00ff00">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0000ff"
android:height="0dp" >
<Button
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Log in"
/>
<EditText
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="4dp"
android:hint="password"
android:inputType="textPassword" >
</EditText>
<EditText
android:id="#+id/editText1"
android:hint="login"
android:padding="4dp"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" ></EditText>
</RelativeLayout>
</LinearLayout>
UPDATE working solution
I can't paste here the entire xml file, but the structure should be enough.
Based on Gabe Sechan's answer.
Layout{
Layout top weight 1
Layout mid weight 1
Layout bot weight 1
}
Child layouts have set to:
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" // should be changed accordingly to your layout design.
And here is a Java code for the activity(keyboard up/down):
View top, mid, bot;
final View activityRootView = findViewById(R.id.loginLayout);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int heightDiff = activityRootView.getRootView()
.getHeight() - activityRootView.getHeight();
if (heightDiff > 100) { //keyboard up
mid.setVisibility(View.INVISIBLE);
top.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 0f));
bot.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 1f));
} else {// keyboard down
// v.setVisibility(View.VISIBLE);
mid.setVisibility(View.VISIBLE);
top.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 2f));
bot.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 3f));
}
}
});
On keyboard up you need to change weights accourding to keyboard up design and on keyboard down change back to the default(layout that you've set via xml/java). I've tested the code on 2.3.x and up.
And don't forget to use android:inputType="textFilter" for the login&password EditText's to remove suggestions on input and save some pixels. In your manifest for the activity android:windowSoftInputMode="adjustResize|stateHidden". stateHidden is used so that keyboard won't be up when activity loads. Hope it helps. Good luck.
They're doing it with relative layouts, adjustResize, and android:layout_centerVertical. Basically, they have a linear layout for their main layout, with 3 equally weighted relative layouts inside of it. Each is set to 0dp height, so they take up equal thirds of the screen. The top RelativeLayout holds the logo, centered vertically. The middle holds the login fields and button, centered vertically one on top of the other. The bottom one holds the copyright text, aligned to bottom. The end result is that when the keyboard comes up, the 3 relative layouts get resized to take 1/3 of the new screen. Then their elements are centered in the new screen.
Remember you need the adjustResize window mode to get this, if you use pan it will just move up and the logo will scroll off center.
In Eclipse, go to File|New|Other and in the Wizard that follows, select Android Activity, then on the next page, select LoginActivity from the list of activities. This has the exact layout you're talking about, and you can use that as a framework. It uses a ScrollView to achieve the effect you're looking for.
I have an app which counts up from 1 to 100, showing the count-up on the screen.
I have a custom font. The problem is that the numbers keep jumping left and right as it counts up. I draw the numbers by drawing on a canvas, using graphics.Paint.
How can I set the font to be fixed and not jumping around?
You will either have to use a fixed width font or put the individual digits in a custom layout with fixed widths.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/digit1"
android:layout_width="0dp"
android:layout_weight="0.5"
android:gravity="center_horizontal|center_vertical" />
<TextView
android:id="#+id/digit2"
android:layout_width="0dp"
android:layout_weight="0.5"
android:gravity="center_horizontal|center_vertical" />
</LinearLayout>
Set the typeface using your custom font like this:
private void setLogoTypeface()
{
AssetManager assetManager = getContext().getAssets();
Typeface tf = Typeface.createFromAsset(assetManager,"GILB.TTF");
logo = (TextView)findViewById(R.id.logo);
logo.setTypeface(tf);
}
Substitute your font name and the textview should render the font.
i have an application , it has a button , when pressed it will fire a dialog with the default dialog shape , i wonder if i can change the default shape of dialog to an oval shape and also to apply special style to it ,
as explained in the images attached below :
1- the Default Dialog Shape:
2-The Oval Dialog Shape (which i try to achieve):
my dialoge code :
final Dialog dialog = new Dialog(context);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.custom_dialog);
TextView text = (TextView) dialog.findViewById(R.id.dialog_text);
text.setText(Html.fromHtml(getString(R.string.text_4)));
ImageView image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.pic);
Button dialogButton = (Button) dialog.findViewById(R.id.dialog_Button);
dialogButton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
});
}
style code of default dialog:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="2dp" android:height="2dp" android:color="#B22222" />
<solid android:color="#FCE6C9" />
<padding android:left="2dp" android:top="2dp" android:right="2dp"
android:bottom="2dp" />
<corners android:radius="5dp" />
</shape>
i hope to have this done by code rather than using 9-patch image so it will be easy to control the dilaoge dimensions and adjust the text inside it as i neeed ,
Any advice will be appreciated , thanks .
Not exactly sure how to do this on android, but the approach I use in java is make the JFrame or JDialog rendered surface transparent and then draw my own custom shape inside. To make them transparent I use AWTUtilities.setWindowOpacity
On this article you will find another ideas, like capturing the desktop before the frame or dialog is rendered and using it to patch your frame:
http://today.java.net/pub/a/today/2008/03/18/translucent-and-shaped-swing-windows.html
More information:
http://java.sun.com/developer/technicalArticles/GUI/translucent_shaped_windows/
Here you have an implementation, not for android but it may help:
http://www.codeproject.com/KB/java/shaped-transparent-jframe.aspx
Neat idea. On Android, to give an activity a transparent background, put this in your manifest file:
<activity android:name=".MyActivity" android:theme="#android:style/Theme.Translucent.NoTitleBar" />
Then, in your layout file for that activity, add this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myRoundBackground" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignTop="#+id/myImageView"
android:layout_alignRight="#+id/myImageView"
android:layout_alignBottom="#+id/myImageView"
android:layout_margin="1dp"
android:gravity="center"
android:text="Hello"
android:textColor="#000000" />
</RelativeLayout>
Then you can programmatically set the text on the TextView with the id myImageViewText .
Have a look at this quick action menu totorial. Try applying this tutorial with shape = oval background. I think you will get what you are trying to achieve.
I think a transparent background with image sliced in oval for will work for you. and place the button to left of the oval image.
THis method is similar to the one you are currently trying :
In your custom_dialog.xml give the relative layout an android:background="#drawable/ovaldialog" .
And in the ovaldialog.xml try giving the same parameters you are giving to edit the style by giving android:shape="oval" and also give the parameters to corners such as android:topLeftRadius="8dp" and android:bottomRightRadius="10dp" and play with those values until you get a desired kind of shape. To give the red color to the dialog give it a stroke of width 2/3dp and an android:color value.
Hope this helps