Develop Reference

Android design : a scrollview 3 button below

I'm trying to create a design (and i'm pretty bad at this -__- ) where I will have a scrollview and a set of 3 buttons, horizontally aligned ALWAYS at the bottom of the screen (I mean the scrollview should be ABOVE my layout with my button and may scroll, but the button have to ALWAYS be displayed/visible)
I have already tried several solution, the last one I used is this , but it doesn't succeeded :(
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:id="#+id/header"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scroll"
android:layout_above="#+id/footer"
android:layout_below="#+id/header">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Chargement en cours"
android:id="#+id/TNom"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:id="#+id/Bplus"
android:onClick="onClickSuivant"
android:layout_toLeftOf="#+id/Begale"
android:layout_toStartOf="#+id/Begale" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/Begale"
android:onClick="onClickSuivant"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:id="#+id/Bmoins"
android:onClick="onClickSuivant"
android:layout_toRightOf="#+id/Begale"
android:layout_toEndOf="#+id/Begale" />
</RelativeLayout>
NB : I have no need of the "header" part ... but the last code I found have it and it seems to be exactly I need.... seemed only -__- :(
And I have 2 questions on this design (while i'm asking, I ask everything :p )
1/ How may I force the size of the Image I will be downloading into ImageView1 to a "maximum" height (I mean my picture will be portrait OR landscape... let say 10*15 and 15*10 ... how may i forced them to be 10*6.666 instead of 15*10 <= It's an example... I don't know the image size I will have, but I know I want them at the same height every time, width may change according to the ratio)
2/why Lint is writing this part in red....
android:textAppearance="?android:attr/textAppearanceLarge"
Thx in advance to everyone who stops here and give me hints :)
(and sorry for my english)
EDIT : I have found some answer !! I used RELATIVELayout instead of LINEARLayout, which is recommended to do what I wanted ...
Si here is the "new" template (for reference if anyone is interested), where I still have problem
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:id="#+id/scroll"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Chargement en cours"
android:id="#+id/TNom"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:id="#+id/Bplus"
android:onClick="onClickSuivant"
android:layout_toLeftOf="#+id/Begale"
android:layout_toStartOf="#+id/Begale" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/Begale"
android:onClick="onClickSuivant"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:id="#+id/Bmoins"
android:onClick="onClickSuivant"
android:layout_toRightOf="#+id/Begale"
android:layout_toEndOf="#+id/Begale" />
</LinearLayout>
With the previous design, button were well aligned and take all the screen (match_parent) ... with this one, they are located at the bottom left ... As android:layout_centerHorizontal="true" is made for RelativeLayout, problem come from this... how may i change it ?

Try using android:gravity="center" in your LinearLayout (which encapsulates the buttons) or android:layout_gravity="center" in Button elements. I believe the first option will be enough.
EDIT: regarding Lint warning message, I believe it's related to this line:
android:text="Chargement en cours"
It's discouraged to use hard-coded strings. Try replacing it by android:text="#string/my_string_id" and define such string in your strings.xml file.

Android listview overlaps edit text field when keyboard shows

I am new to android programming so please bear with me...
I am trying to create a chat UI in android, for that I need to have an edittext field and send message button at bottom and listview (of message) at the rest of the screen (top to just above edittext and send message button). I am able to create the UI for that but when i show keyboard, the last message in listview overlaps the edittext field.
Here's my code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="codes.electrux.lets_start_android.PostAuthenticate">
<ListView
android:layout_width="wrap_content"
android:layout_height="410dp"
android:id="#+id/listView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/edit_msg"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/msg_to_send"
android:layout_gravity="bottom" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:layout_gravity="bottom"
android:onClick="sendMessage" />
</LinearLayout>
</RelativeLayout>
Here's what happens when keyboard shows up:
Here's what it looks like without keyboard:
I tried all solutions I could find on stackoverflow, but honestly, couldn't understand most of them.
Please help,
Thanks and Regards,
electrux.

Try like this.
Here your linear layout will be contains within the list view so it is overlaying last item of list. Just change as below and it will work.
Just replace this code with your xml.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="codes.electrux.lets_start_android.PostAuthenticate">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="410dp"
android:layout_above="#+id/linearLayout" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/edit_msg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:hint="Send Msg" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:onClick="sendMessage"
android:text="Send Data" />
</LinearLayout>
</RelativeLayout>
And it's Done.
Hope this will help you.

Try to do like the following,
Just change the list height from default to wrap_content,
And give a id to the linearLayout , make the listView to be placed above LinearLayout.
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_above="#+id/test"/>
<LinearLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">

The first thing you should do is set the ListView to match_parent widht and height.
The next, in your manifest you should declare your activity like this:
<activity android:name=".ConversationChatActivity"
android:windowSoftInputMode="adjustResize"
>
and in the activity the listView should apply this:
listview = (ListView) this.findViewById(R.id.listMessages);
listview.setTranscriptMode(ListView.TRANSCRIPT_MODE_NORMAL);
listview.setStackFromBottom(true);
Hope it helps you!!

Android: How to create a specific horizontal linear layout

I am making an app where there is a custom search bar. I want there to be a search part that is big, a spinner for region selection that is a small square, and a search button that is also a small square.
Here is what I am talking about.
The code I have right now is this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<EditText
android:hint="#string/summoner_name"
android:layout_width="wrap_content"
android:layout_weight="75"
android:layout_height="wrap_content"
android:id="#+id/summoner_name"/>
<Spinner
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/regions">
</Spinner>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/search_button"/>
</LinearLayout>
However, this makes the search half the screen, and the button for 2/5's the screen, and the spinner for a smaller ammount. Anyone know how to accomplish this?
Thanks :)

give weight 1 to EditText android:layout_weight="1" , and remove weight tags from other components.
Also you will require to set Spinners width statically, if above doesnt work because of Spinner's width part

like this?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:layout_width="wrap_content"
android:layout_weight="75"
android:layout_height="wrap_content"
android:id="#+id/summoner_name"/>
<Spinner
android:layout_weight="1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="#+id/regions"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/search_button"/>
</LinearLayout>
</LinearLayout>

android Layout - scrollview don't show

I have a ScrollView which contains EditText, but the problem is it doesn't show properly in the emulator and on a physical device. Can anyone see any problems with my code?
XML snippet
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#drawable/background2"
tools:context="com.jack.cheng.buddhistcopy.Activity1">
<ScrollView
android:layout_width="300dp"
android:layout_height="300dp"
android:id="#+id/scrollView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:fillViewport="true"
android:isScrollContainer="true"
android:saveEnabled="true">
<TableLayout
android:id="#+id/sutra"
android:layout_width="295dp"
android:layout_height="295dp"
android:orientation="vertical"
>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:text="Test"
android:layout_width="10dp"
android:layout_height="10dp"
>
</EditText>
</TableRow>
</TableLayout>
</ScrollView>
</RelativeLayout>

Did you try adding the following attribute to the ScrollView?
xmlns:android="http://schemas.android.com/apk/res/android"

Try using:
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TestText"
/>
You might want to use the conditions : wrap_content, fill_parent or match_parent as using these allows your view elements to adjust accordingly to the device screen which can vary.
Also you might want to add an android:id="#id/myIdentifier" to that EditText so you can link it to whatever process you have going on in your app.

Make scrollview in layout (crash)

I'm trying to make a screen scrollable with scroll view but my application keeps crashing.
What I've done is to replace RelativeLayout by ScrollView, but it doesn't work.
I need your help with this. Here is the code of the screen:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="0dp"
android:background="#drawable/background01"
tools:context=".MainActivity"
android:id="#+id/relativeLayout">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/id"
android:background="#drawable/lightcontainer"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:weightSum="1"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_marginBottom="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/mainTitle1"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:textColor="#ffffff"
android:shadowColor="#000000"
android:shadowRadius="1.5"
android:shadowDx="2"
android:shadowDy="2"/>
</LinearLayout>

what you are trying to do is not an scrollable view it's just a relative layout. Try to put your code inside a ScrollView component, like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<!-- PUT YOUR CODE HERE -->
</ScrollView>
Make sure you close all tags correctly as well (your relative layout is not closed).
<RelativeLayout>
Content
</RelativeLayout> <-- This closing tag is always necessary