Text field or button appears on outside of design? - android

with the following code i had trouble adding text view or buttons. Every time i try it appers on the design page that the button is on the outside of the phone. i inserted a picture to show what i mean on design page.
http://postimg.org/image/dtqbnoqxv/
<?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:background="#d1cbcb">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#767eca">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="label"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"></TextView>
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"></Button>
</LinearLayout>

Try adding android:orientation="vertical" or android:orientation="horizontal" of LinearLayout according your desire.
<?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:background="#d1cbcb"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#767eca">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="label"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"></TextView>
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"></Button>
</LinearLayout>

Related

having problem creating ScrollView with TextView inside ImageView

I want to create a scrollview including several imageviews that have some textviews inside them. like in the picture.
I tried to do this with constraintlayout and using sdp, but when the size of the screen even slightly changes, it gets messy.
what is the best way to do this?
Use RelativeLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="200dp"
android:layout_gravity="center"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/sdf"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:weightSum="3"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAlignment="center"
android:textColor="#android:color/white"
android:text="Text1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAlignment="center"
android:textColor="#android:color/white"
android:text="Text1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAlignment="center"
android:textColor="#android:color/white"
android:text="Text1"/>
</LinearLayout>
</RelativeLayout>
If you want now to add more of these into your ScrollView do it like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_gravity="center"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//ADD VIEWS HERE
</LinearLayout>
</ScrollView>
You can add them manually or programmatically. The result is this:

place a linearLayout in center of a wrap_content relativeLayout

I have a listView, and view of each item of the list should be like this (a background image and group name) :
but when i set layout_centerInParent="true" to linearLayout, it placed in center of screen(not in center of image).like this :
and there is my xml :
<?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="wrap_content"
android:background="#444">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/linear_category_name"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingRight="16dp"
android:paddingLeft="16dp">
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:text="Gold"/>
</LinearLayout>
</RelativeLayout>
How can i place linearLayout in center of relaytiveLayout ??
For your scenario, I think it's a lot easier to use FrameLayout instead.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/gold_image"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/white_border"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gold"
android:textColor="#android:color/white"
android:textSize="18sp"/>
</LinearLayout>
</FrameLayout>
I've tested this and it looked exactly like what you're trying to achieve.
Try this.
<?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="wrap_content"
android:background="#444">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test/>
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:text="Gold"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Try this
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:src="#drawable/test"/>
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:layout_centerInParent="true"
android:text="Gold"/>

Android - Aligning views to the ends of a layout

Sorry if my question sounds simple but I'm working on a simple layout for my list item and my intention align to textviews one on each end of the layout. My attempts are as below but the texviews are right next to each other. Any ideas where I'm going wrong?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll_finc_calctr_result_label">
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_alignRight="#+id/ll_finc_calctr_result_label"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/ll_finc_calctr_result_label">
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
Try this..
<?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="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="text left" />
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="text right" />
</LinearLayout>
Firstly, you need to remove the two properties of alignRight and toRightOf from the second linear layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll_finc_calctr_result_label">
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="wrap_content"
android:text="ss"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_alignParentRight="true" >
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sse"
android:layout_gravity="center"/>
</LinearLayout>
</RelativeLayout>
Which will result in the second textview on right side.
And I would advise that you don't take two linear layout as both of them contain just a single textview:
Something like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ss" />
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="sse" />
</RelativeLayout>
Output:
The solution provided by Hariharan is excellent. Another option might be more useful if you need the textViews' width to actually be wrap_content (for instance if they have a background styling, etc.) You can achieve a more accurate behavior using a space:
<?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="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<TextView
android:id="#+id/tv_finc_calctr_result_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_finc_calctr_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>

View is overlapped by another view with match_parent and wrap_content on Android

I want to create a view with two parts:
1. Avatar, which is always displayed at right/center_vertial on screen.
2. Name, which is always displayed at left on screen (do not overlap on Avatar).
<?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="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/username" />
</LinearLayout>
<LinearLayout
android:id="#id/avatar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
android:orientation="vertical" >
<ImageView
android:id="#+id/avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:scaleType="center"
android:src="#drawable/useravatar" />
</LinearLayout>
</LinearLayout>
The problem is when Name is too long, it overlaps on Avatar. How can I fix this problem?
You should use RelativeLayout and a android:layout_toLeftOf="#id/avatar" attribute for the TextView.
You're better off using a Relative Layout for this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/avatar"
android:text="Some User Name" />
<ImageView
android:id="#+id/avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="right|center_vertical"
android:scaleType="center"
android:src="#drawable/thumbr" />
</RelativeLayout>

Change item layout in multiple spinner in android

I use Multiple spinner from this post: Android Spinner with multiple choice
but I want to change looks of items. I have my own layout:
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/radiobutton2" />
<LinearLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/black">
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_marginLeft="10dp"/>
</LinearLayout>
and I want to change items layout on my own layout. How I can do that?

Categories

Resources