Android people app's detail view develop

Question

I'm developing an android app with an activity like the people detail view, but I don't know how to display the list of emails, phones and other data, since I'm retrieving this information from a database, I need to achieve the same layout as the people app.

enter image description here

what I tried so far:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <HorizontalScrollView
                android:id="@+id/hori_scroll"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                </LinearLayout>
            </HorizontalScrollView>
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="15dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginBottom="10dp">
                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="DADOS DO CLIENTE"
                        android:textSize="20dp"
                        android:textColor="#50A7B3"
                        android:layout_marginBottom="5dp"/>
                    <View
                        android:layout_height="1dp"
                        android:layout_width="match_parent"
                        android:background="#728C93"/>
                    <LinearLayout
                        android:orientation="horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
                        <LinearLayout
                            android:layout_marginTop="10dp"
                            android:orientation="vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="left"
                            android:layout_weight="0.60">
                            <TextView
                                android:id="@+id/nome"
                                android:layout_height="wrap_content"
                                android:layout_width="wrap_content"
                                android:text="NomeCliente"
                                android:textSize="20dp"
                                android:textColor="#696969"
                                android:layout_marginBottom="5dp"/>
                            <TextView
                                android:id="@+id/tipoPessoa"
                                android:layout_height="wrap_content"
                                android:layout_width="wrap_content"
                                android:text=""
                                android:textSize="20dp"
                                android:textColor="#6D6D6D"
                                android:layout_marginBottom="5dp"/>
                        </LinearLayout>
                        <LinearLayout
                            android:layout_marginTop="10dp"
                            android:orientation="vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="right"
                            android:layout_weight="0.40">

                        </LinearLayout>
                    </LinearLayout>
                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="ENDEREÇO"
                        android:textSize="20dp"
                        android:textColor="#50A7B3"
                        android:layout_marginBottom="5dp"
                        android:layout_marginTop="10dp"/>
                    <View
                        android:layout_height="1dp"
                        android:layout_width="match_parent"
                        android:background="#728C93"/>
                    <TextView
                        android:id="@+id/enderecoId"
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:visibility="gone"
                        android:textSize="20dp"
                        android:textColor="#696969"
                        android:layout_marginBottom="5dp"
                        android:layout_marginTop="10dp"/>
                    <TextView
                        android:id="@+id/endereco"
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="xxxxxxxxxxxxxx"
                        android:textSize="20dp"
                        android:textColor="#696969"
                        android:layout_marginBottom="5dp"
                        android:layout_marginTop="10dp"/>
                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="TELEFONE"
                        android:textSize="20dp"
                        android:textColor="#50A7B3"
                        android:layout_marginBottom="5dp"
                        android:layout_marginTop="10dp"/>
                    <View
                        android:layout_height="1dp"
                        android:layout_width="match_parent"
                        android:background="#728C93"/>
                    <TextView
                        android:id="@+id/telefone"
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="xxxxxxxxx"
                        android:textSize="20dp"
                        android:textColor="#6D6D6D"
                        android:layout_marginBottom="5dp"/>
                    <LinearLayout 
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
                        <ListView android:id="@id/android:list"
                            android:layout_width="fill_parent"
                            android:layout_height="fill_parent"/>
                        <TextView android:id="@id/android:empty"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Empty"/>
                    </LinearLayout>


                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="EMAIL"
                        android:textSize="20dp"
                        android:textColor="#50A7B3"
                        android:layout_marginBottom="5dp"
                        android:layout_marginTop="10dp"/>
                    <View
                        android:layout_height="1dp"
                        android:layout_width="match_parent"
                        android:background="#728C93"/>
                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="xxxxxxxxx"
                        android:textSize="20dp"
                        android:textColor="#6D6D6D"
                        android:layout_marginBottom="5dp"/>
                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="CONTATOS"
                        android:textSize="20dp"
                        android:textColor="#50A7B3"
                        android:layout_marginBottom="5dp"
                        android:layout_marginTop="10dp"/>
                    <View
                        android:layout_height="1dp"
                        android:layout_width="match_parent"
                        android:background="#728C93"/>
                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="xxxxxxxxxxxxxx"
                        android:textSize="20dp"
                        android:textColor="#696969"
                        android:layout_marginBottom="5dp"
                        android:layout_marginTop="10dp"/>
                    <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:text="xxxxxxxxx"
                        android:textSize="20dp"
                        android:textColor="#6D6D6D"
                        android:layout_marginBottom="5dp"/>
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

Details:

  lv = (ListView) findViewById(R.id.lista);

        tel = new ArrayList<TelefoneModel>();



            Repositorio mRepositorioTelefones = new Repositorio(this);
            List mTelefones = mRepositorioTelefones.getTelefonesDoCliente(Integer.valueOf(rm_IdCliente));


            tel = mTelefones;

            ads = new TelefoneViewAdapter(getApplicationContext(), this, tel);

            telAdapter(true);


            lv.setAdapter(ads);

Listview:

                         <LinearLayout 
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content">
                            <ListView android:id="@id/android:list"
                                android:layout_width="fill_parent"
                                android:layout_height="fill_parent"/>
                            <TextView android:id="@id/android:empty"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Empty"/>
                        </LinearLayout>

It uses a sectioned ListView, each section as an header (Phone, Email, IM). You have to query the database with a GROUP BY sentence, I don't know the name for the "kind" column, to know what kind of information you're reading (email, phone, im, etc). — David Corsalini, Oct 06 '14 at 07:51
@DavidCorsalini is there an online example of that implementation? — jgandroid, Oct 06 '14 at 13:32
http://javatechig.com/android/listview-with-section-header-in-android First google result. — David Corsalini, Oct 06 '14 at 13:41

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

The view that you want to develop seems like a good candidate for ViewPager. The top part will be a ViewPager.

Layout manager that allows the user to flip left and right through pages of data.

As for the "Phone" with the blue line under it, it is a TextView with a section separator. You can achieve this as follows:

<TextView
    android:id="@+id/address_label"
    style="?android:attr/listSeparatorTextViewStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Address"/>

Source: Adding "section dividers" to my layout?

edited May 23 '17 at 10:26

Community

1
1

answered Oct 02 '14 at 19:28

An SO User

24,612
35
133
221

OK, but what if have more than 1 phone to show, do I have to use a list view to display that? – jgandroid Oct 02 '14 at 19:33
@jgandroid More than one contact on the same screen? How so? :/ – An SO User Oct 02 '14 at 19:34
like the image above, it has 2 emails, are these emails in a listview or not? the thing is, I have a contact activity and when a user click on a contact it takes him to a contactdetails activity, and in this activity will show the phones, emais, etc... – jgandroid Oct 02 '14 at 19:40
So pass the `URI` of the contact to `ContactDetail` activity. In `ContactDetail`, just do the retrieval process. Voila! As for email, yes, it is quite possibly a `ListView` in case there are multiple email addresses. You will need a custom adapter for it. – An SO User Oct 02 '14 at 20:12
Ok, @Little Child, you helped me a lot, thank you, just one more question, if the emails are in a listview, how can it not scroll, I mean, the listview is scrollable by default, but in that layout is the entire activity that scroll, not the listview,[LIKE HERE](http://imgur.com/1I2bc) see this example to understand what I'm meaning. – jgandroid Oct 02 '14 at 20:37
1

If you do not want a `ListView`, you can consider dynamically adding two `TextView`s. A `ListView` only scrolls when it has more items than it can display. Set the `ListView`'s height to `wrap_content` and give it only two items. It probably wont scroll. :) – An SO User Oct 02 '14 at 21:14

Android people app's detail view develop

1 Answers1