Vertical TextView taking too much space in Android [duplicate] - android

This question already has answers here:
Vertical (rotated) label in Android
(10 answers)
Closed 1 year ago.
I am trying to create something like the following using LinearLayout and TableLayout:
I am stuck on Vertical Text, though. It is taking more space than it should take after rotation.
The following is the 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" >
<TextView
android:id="#+id/tv_CONSEQUENCES"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rotation="-90"
android:text="CONSEQUENCES"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
and the output is like this:
The vertical text is taking more space than it should need, and not all of the text is appearing. :(


You can use code below:
android:rotation="270"


None of the solutions worked for me but I found this blog post by Mark Allison:
https://blog.stylingandroid.com/verticaltext-part-1/
public class VerticalTextView extends TextView
{
final boolean topDown;
public VerticalTextView( Context context,
AttributeSet attrs )
{
super( context, attrs );
final int gravity = getGravity();
if ( Gravity.isVertical( gravity )
&& ( gravity & Gravity.VERTICAL_GRAVITY_MASK )
== Gravity.BOTTOM )
{
setGravity(
( gravity & Gravity.HORIZONTAL_GRAVITY_MASK )
| Gravity.TOP );
topDown = false;
}
else
{
topDown = true;
}
}
#Override
protected void onMeasure( int widthMeasureSpec,
int heightMeasureSpec )
{
super.onMeasure( heightMeasureSpec,
widthMeasureSpec );
setMeasuredDimension( getMeasuredHeight(),
getMeasuredWidth() );
}
#Override
protected void onDraw( Canvas canvas )
{
TextPaint textPaint = getPaint();
textPaint.setColor( getCurrentTextColor() );
textPaint.drawableState = getDrawableState();
canvas.save();
if ( topDown )
{
canvas.translate( getWidth(), 0 );
canvas.rotate( 90 );
}
else
{
canvas.translate( 0, getHeight() );
canvas.rotate( -90 );
}
canvas.translate( getCompoundPaddingLeft(),
getExtendedPaddingTop() );
getLayout().draw( canvas );
canvas.restore();
}
}
The rotation is done by the gravity. So be sure to set this in your xml:
<com.stylingandroid.verticaltext.VerticalTextView
style="#style/verticalTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom|right"
android:text="#string/text" />


val textPaint = Paint(Paint.ANTI_ALIAS_FLAG)
textPaint.textSize=toPx(16)
textPaint.color=Color.parseColor("#FFFFFF")
canvas.save()
canvas.translate(50F, 60F)
canvas.rotate(90F)
canvas.drawPaint(textPaint)
canvas.drawText("YourText", 0F,0F, textPaint)
canvas.restore()


Here is a hack to create vertical text view.
So the scenario was I need to show a static tag on the right side of the screen.
so I just used "\n" for the new line as my text was less.
android:text="A\nC\nT\nI\nO\nN"
You can check the image I've attached. although it's not suggested if you showing data from Dynamically.
<TextView
android:id="#+id/tv_action"
android:layout_width="20dp"
android:layout_height="126dp"
android:background="#drawable/bg_red_left_rcorner"
android:gravity="center"
android:padding="2dp"
android:textStyle="bold"
android:text="A\nC\nT\nI\nO\nN"
android:textColor="#color/white"
app:layout_anchor="#+id/drawer_layout"
app:layout_anchorGravity="end|center" />


Put all the Text view in Linear Layout and try to give proper Layout weight to solve your problem


android:rotation="-90"
android:layout_gravity="center"
Worked for me.


in .xml file just put
<TextView>
android:layout_width="wrap content"
android:layout_height="wrap content"
android:rotation="270"
</TextView>


why not put padding?so it will go in the center of your screen.just try it out if you like


If you want to reproduce your image I would use a GridView or a TableLayout with no buttons, just set the proper listeners if you need to do any action. This way you can set fixed heights and widths.

Related

How can i overlay one Button over another button

i want 0 to 9 buttons in two row.Each button have overlay of another small button in right bottom corner.when i click the button,count will be displayed on overlay button.sorry for my bad english thanks in advance
<?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">
<LinearLayout
android:id="#+id/expandable2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignBottom="#id/btn0"
android:layout_alignRight="#id/btn0"
android:background="#FFFFFF"
android:text="0" />
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
My output
any other suggestion will be appreciated

Try setting it like this
android:layout_marginLeft="-20dp"
android:layout_marginTop="10dp"

Use a textview for showing the count because a button over a button is meaningless.
Anyways how to show it.
<RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "60dp">
<Button
android:layout_width = "match_parent"
android:layout_height="match_parent"
android:id="#+id/btn"/>
<Button
android:layout_width = "wrap_content"
android:layout_height="wrap_content"
android:id="#+id/countbtn"
android:layout_alignParentBottom="true"
android:layout_alignParentRight= "true"/>
</RelativeLayout>
use this view in your Grid or RecyclerView Adapter to make it 10 times as you wish to show.
incase you want to use TextView to show Count remove the countBtn and make it a textView with last two attributes same.

Use a framelayout
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button
android:id="#+id/icon_image"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/black"
android:text="0" />
<Button
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="bottom|right"
android:background="#color/white"
android:layout_marginLeft="6dp"
android:src="#drawable/ic_goal_check" />
</FrameLayout>
After that you can reuse this layout for all your buttons. To reuse this in your xml, create a custom view as follows :
public class YourButton extends FrameLayout {
private Button buttonOne, buttonTwo;
public YourButton(Context context) {
super(context);
this.context = context;
initializeViews();
}
public YourButton(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.GoalButton);
typedArray.recycle();
initializeViews();
}
private void initializeViews() {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.your_button_layout, this);
}
#Override
protected void onFinishInflate() {
super.onFinishInflate();
buttonOne = (TextView) this.findViewById(R.id.button_one);
buttonTwo = (ImageView) this.findViewById(R.id.button_two);
}
public void setCount(String count){
buttonTwo.setText(count);
}
}
now you can use in your layout as
<yourPackageName.YourButton
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
This will keep your main layout simple and tidy.

Add labels above Seekbars steps with different font size, vertically aligned to seekbars thumb

I would like to create a Seekbar, above which there will be text label on each Seekbar step, what it should look like is shown in below image
this is the expected result, for which what i have done,
<RelativeLayout
android:id="#+id/layout_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtFont_size_hint"
style="#style/textStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Aa" />
<LinearLayout
android:id="#+id/layout_seekbar_interval_holder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/txtFont_size_hint"
android:layout_marginLeft="16dp"
android:layout_marginRight="#dimen/margin_16dp"
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:id="#+id/txtSize_14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_14" />
<TextView
android:id="#+id/txtSize_18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_18sp" />
<TextView
android:id="#+id/txtSize_24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_24sp" />
<TextView
android:id="#+id/textSize_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_30sp" />
<TextView
android:id="#+id/txtSize_36"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_36sp" />
</LinearLayout>
<SeekBar
android:id="#+id/seekBarSetting_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_below="#id/layout_seekbar_interval_holder"
android:layout_marginLeft="#dimen/margin_16dp"
android:layout_marginRight="#dimen/margin_16dp"
android:max="4"
android:theme="#style/seekBarYelloStyle" />
</RelativeLayout>
Output of this is
the Layout looks similar to what is expected but, while moving the seekbar thumb, the thumb is not vertically aligned with the TextView so the problem here is the seekbar thumb is not vertically aligend with the text indicating the steps of seekBar.
I had also tried calculating the exact position of TextView by dividing the seekbars width by steps (Here we have 5 steps but first one is on 0th position so i divided the total seekbar Width by 4 and then placed each text accordingly) but didn't got the expected solution.
I am bit confused here, and want a simple solution as soon as possible.
P.S: ScreenShot of output of view created dynamically is also attached for reference

layout for this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="android.sample.MainActivity">
<TextView
android:id="#+id/txtFont_size_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sizes"/>
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:weightSum="5">
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<TextView
android:id="#+id/txtSize1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="15sp"/>
<TextView
android:id="#+id/txtSize_18"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="20sp"/>
<TextView
android:id="#+id/txtSize_24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="25sp"/>
<TextView
android:id="#+id/textSize_30"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="30sp"/>
<TextView
android:id="#+id/txtSize_36"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="35sp"/>
</LinearLayout>
<SeekBar
android:id="#+id/seekBarSetting_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="4"/>
Now what i have done is aligned the width of Seekbar till the center of the last TextView which in this case is txtSize_36
and have set the ems as android:max="4" so there are five possible values(you can change this to as much as you want)
Code for Activity is :
public class MainActivity extends AppCompatActivity {
SeekBar seekBar;
private LinearLayout bar, ll;
TextView txtSize_14, txtSize_36;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
seekBar = (SeekBar) findViewById(R.id.seekBarSetting_font_size);
txtSize_14 = (TextView) findViewById(R.id.txtSize1);
txtSize_36 = (TextView) findViewById(R.id.txtSize_36);
ll = (LinearLayout) findViewById(R.id.ll);
}
float density;
#Override
protected void onResume() {
super.onResume();
ViewTreeObserver vto = ll.getViewTreeObserver();
//****old code (may not work on all orientations)****
/*vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
int width = ll.getMeasuredWidth();
int height = ll.getMeasuredHeight();
ViewGroup.LayoutParams params = seekBar.getLayoutParams();
density = getResources().getDisplayMetrics().density;
int newwidth = (int) (txtSize_14.getLeft() / density);
newwidth = newwidth+ (txtSize_36.getLeft() + txtSize_36.getRight()) / 2;
params.width = newwidth;
seekBar.setLayoutParams(params);
}
});*/
//****new code (should work on all orientations)****
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
seekBar.setPadding(15, 0, 15, 0);
seekBar.setX(((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) - 15);
ViewGroup.LayoutParams params = seekBar.getLayoutParams();
int centerwidth = ((txtSize_36.getLeft() + txtSize_36.getRight()) / 2) - ((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) + 15;
params.width = centerwidth;
seekBar.setLayoutParams(params);
}
});
}
}
Here is screenshot for reference (I have clubbed for all positions of seekbar):

Frankly speaking it took me a while to sort this out using XML only.
The first and last label are differently positioned than the others....
In case you will change the size of the thumb from 15dp - you must also change the margin of first and last TextView and size of Spaces (margin + Space = thumb size)
preview
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingRight="0dp"
android:paddingLeft="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="0dp">
<TextView
android:text="7 days"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="left|center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="0.5"
android:layout_marginLeft="5dp"/>
<Space
android:layout_width="10dp"
android:layout_height="match_parent"/>
<TextView
android:text="1 month"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginRight="0dp"
android:id="#+id/textView" />
<TextView
android:text="3 months"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginRight="0dp"/>
<TextView
android:text="1 year"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginLeft="0dp"/>
<TextView
android:text="3 years"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginLeft="0dp"/>
<Space
android:layout_width="10dp"
android:layout_height="match_parent"/>
<TextView
android:text="5 years"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="right|center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="0.5"
android:layout_marginRight="5dp"/>
</LinearLayout>
</RelativeLayout>

android:ellipsize in ICS text continues after ellipsis

I have a textview that I am programmatically setting maxLines with and then setting it to android:ellipsize="end". It works partially, but for some reason the text that is being truncated continues for a few characters after the ellipsis in 4.2.2. It is the actual text that is being truncated, not new characters.
It also is not working properly in 2.3.6 as it adds an ellipsis for each section with a line break or "\n".
I am not using any custom fonts, I have seen that has caused problems before.
Here is where I calculate and set the maxlines:
final TextView reviewView = (TextView) view.findViewById(R.id.textViewPosition3);
ViewTreeObserver observer = reviewView.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int maxLines = (int) reviewView.getHeight() / reviewView.getLineHeight();
reviewView.setMaxLines(maxLines);
reviewView.setEllipsize(TruncateAt.END);
reviewView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//reviewView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
});
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentTestLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/restaurantImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test"
android:layout_marginTop="-10dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
/>
<ImageView
android:id="#+id/squareBlack"
android:layout_alignRight="#id/restaurantImage"
android:layout_alignTop="#id/restaurantImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/square_black_small"
/>
<TextView
android:id="#+id/textViewPosition"
android:layout_alignRight="#id/squareBlack"
android:layout_alignLeft="#id/squareBlack"
android:layout_alignBottom="#id/squareBlack"
android:layout_alignTop="#id/squareBlack"
android:layout_margin="1dp"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a test"
android:textSize="25sp"
android:textColor="#a6cbff"
android:textStyle="bold"
/>
<ImageView
android:id="#+id/squareBlue"
android:layout_toLeftOf="#id/squareBlack"
android:layout_alignTop="#id/squareBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/square_blue_small"
/>
<TextView
android:id="#+id/textViewPosition1"
android:layout_alignRight="#id/squareBlue"
android:layout_alignLeft="#id/squareBlue"
android:layout_alignBottom="#id/squareBlue"
android:layout_alignTop="#id/squareBlue"
android:layout_margin="1dp"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7.5"
android:textSize="25sp"
android:textColor="#902515"
android:textStyle="bold"
/>
<TextView
android:id="#+id/restaurantName"
android:layout_alignLeft="#id/restaurantImage"
android:layout_alignBottom="#id/restaurantImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Restaurant Name"
android:textSize="25sp"
android:textColor="#fff"
android:textStyle="bold"
android:background="#drawable/greybar"
/>
<TextView
android:id="#+id/textViewPosition2"
android:layout_below="#id/restaurantImage"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="February 15, 2013"
android:textColor="#555"
android:textStyle="bold"
android:textSize="15sp"
/>
<Button android:id="#+id/readReview"
android:background="#drawable/readreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Read the Review"
android:textColor="#fff"
android:textColorHighlight="#ccc"
android:textSize="15sp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewPosition3"
android:layout_below="#id/textViewPosition2"
android:layout_above="#id/readReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColorLink="#C90404"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:textColor="#000"
/>
</RelativeLayout>

I solved this programatically, but I'm not sure it's the best solution as it feels like more of a hack. It seems to be working though.
ViewTreeObserver observer = reviewView.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int maxLines = (int) reviewView.getHeight() / reviewView.getLineHeight();
reviewView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
if(reviewView.getLineCount() > maxLines)
{
int lineEndIndex = reviewView.getLayout().getLineEnd(maxLines - 1);
String text = reviewView.getText().subSequence(0, lineEndIndex-3) +" ...";
reviewView.setText(text);
}
}
});

put this in xml
android:singleLine="true"
android:ellipsize="end"
android:maxLines="1"

How to place buttons over Image in android?

I want to create a custom view like this.
I tried the following
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/customView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/sample_image" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|top"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:text="Button" />
</FrameLayout>
How can i create a view like this? How can i place buttons over imageview like this?
Thanks in Advance

you can try to use relative layout to do this,
for btn1;
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
for btn1;
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
[EDIT 1]
to give space for button use margin, android:layout_margin="20dp"
Example layout
<RelativeLayout android:layout_width="300dp"
android:layout_height="300dp">
<ImageView
android:id="#+id/img"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffaadd"
android:layout_margin="20dp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="btn1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="btn2" />
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:padding="60dp"
android:src="#drawable/abs__ab_stacked_solid_dark_holo" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentLeft="true"
android:layout_marginLeft="30dp"
android:background="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="32dp"
android:layout_marginTop="102dp"
android:background="#drawable/ic_launcher" />
</RelativeLayout>

Use a RelativeLayout. This will allow you to have different Views overlap on the screen.

Here is a tutorial I always use http://www.learn-android.com/2010/01/05/android-layout-tutorial/
You should find what you need. It is good explained, so you shouldn't have any problems.

This solved for me
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src = "#drawable/basic"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/button1"
android:layout_alignEnd="#+id/button1" />
<ImageButton
android:id="#+id/button1"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="btn1"
android:background="#drawable/ic_cancel_black"/>
</RelativeLayout>

This is my solution programatically, for diferent size of devices.
I have three buttons that i have to positioning in the right place of an image 1080x1920
on positions (157,927), 387,927), (617,927)
final ImageView iv = (ImageView)findViewById( R.id.imageView );
iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
// Once data has been obtained, this listener is no longer needed, so remove it...
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
RectF bounds = new RectF();
Drawable drawable = iv.getDrawable();
if (drawable != null) {
iv.getImageMatrix().mapRect(bounds, new RectF(drawable.getBounds()));
}
float x = bounds.left;
float y = bounds.top;
float new_width = bounds.right - x;
float new_height = bounds.bottom - y;
int original_width = 1080;
int original_height = 1920;
int x1 = (int) (x + (new_width*157/original_width));
int x2 = (int) (x + (new_width*387/original_width));
int x3 = (int) (x + (new_width*617/original_width));
int newY = (int) (y + (new_height*927/original_height));
enroll.setX(x1);
ccfront.setX(x2);
verify.setX(x3);
enroll.setY(newY);
ccfront.setY(newY);
verify.setY(newY);
}
});

Android, trying to get buttons to be on buttom of screen

I'm trying to make a simple app to show pictures. The images get scaled to fit the screen then there is a next and prev button below the image. I would like the next and prev buttons to be at the button, but they keep getting drawn at the button of the image. Thus they move up and down, depending how big the picture is, each time you display a new image.
I found the following solution here, but it is not working for me:
android:gravity="bottom"
android:layout_alignParentBottom="true"
This is the xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/backFeetGallery"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/viewimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/background" />
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/butLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12px"
android:text=" Left "
android:textColor="#ff0000ff" />
<Button
android:id="#+id/butFavrest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12px"
android:text=" Favrets "
android:textColor="#ff0000ff" />
<Button
android:id="#+id/butEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12px"
android:text=" email "
android:textColor="#ff0000ff" />
<Button
android:id="#+id/butRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12px"
android:text=" Right "
android:textColor="#ff0000ff" />
</LinearLayout>
</LinearLayout>
source code
public class cFeetView extends cBaseView implements OnClickListener {
cFileNames mFileNames;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.feet);
// add listeners
View mLeft = findViewById(R.id.butRight);
mLeft.setOnClickListener(this);
// add listeners
View mRight = findViewById(R.id.butLeft);
mRight.setOnClickListener(this);
mFileNames=new cFileNames();
mFileNames.Start();
DrawFeet();
}
public void DrawFeet()
{
int screenHeight;
ImageView picImage = (ImageView) findViewById(R.id.viewimage);// R.id.viewpic);
try {
String FileName = "canon20.png";
FileName=mFileNames.Current();
AssetManager assetManager = getAssets();
InputStream inputStream;
inputStream = assetManager.open(FileName);
Bitmap icon = BitmapFactory.decodeStream(inputStream);
int screenWidth = getWindowManager().getDefaultDisplay().getWidth();
screenHeight = getWindowManager().getDefaultDisplay().getHeight();
int bw = icon.getWidth();
int bh=icon.getHeight();
float t = (float) screenWidth / (float) bw;
int iConHeight=(int)((float)bh*t);
picImage.setImageBitmap(icon);
// scale it
picImage.getLayoutParams().width = screenWidth;
picImage.getLayoutParams().height =iConHeight;
Bitmap scaledIcon = Bitmap.createScaledBitmap(icon, screenWidth, iConHeight, false);
} catch (IOException e) {
}
}
// set the top and buttom margins
public void onClick(View v)
{
Intent i;
switch(v.getId())
{
case R.id.butLeft:
mFileNames.Pre();
DrawFeet();
break;
case R.id.butRight:
mFileNames.Next();
DrawFeet();
break;
}
}
} // end class

Instead of LinearLayout, use RelativeLayout in your xml file.
LinearLayout is used only to arrange them in horizontal or vertical directions.

In order to use alignParentBottom you need to use RelativeLayout. And you dont need the gravity attribute.
My suggestion for your particular scenario is that you you have a RelativeLayout and put all your buttons inside a LinearLayout that is aligned at bottom and the ImageView above it.
Psedo:
<RelativeLayout>
<ImageView />
<LinearLayout
android:layout_below="#ImageView_id"
android:layout_alignParentBottom=true>
</LinearLayout>
</RelativeLayout>
Edited with your xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/backFeetGallery"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/viewimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/background" />
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_below="#id/viewimage"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<Button
android:id="#+id/butLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12px"
android:text=" Left "
android:textColor="#ff0000ff" />
<Button
android:id="#+id/butFavrest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12px"
android:text=" Favrets "
android:textColor="#ff0000ff" />
<Button
android:id="#+id/butEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12px"
android:text=" email "
android:textColor="#ff0000ff" />
<Button
android:id="#+id/butRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12px"
android:text=" Right "
android:textColor="#ff0000ff" />
</LinearLayout>
</RelativeLayout>

You need to have everything in RelativeLayout. For example, look at this sample code which I made for one button which is aligned to bottom center of screen.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Button" />
And here is the complete layout file for your layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/button2"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/button3"
android:text="Button" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="38dp"
android:src="#android:drawable/gallery_thumb" />
This is how it looks,

Categories

Resources