Android studio adapter align part of the text on the right side

Question

I am trying to make leaderboard in android studio using adapter but this worked fine like this:

but I wanted to make the scores display on the right side. So I made this, but there is problem when the scrolling comes in:

Because you can scroll both of them then the name and the score don't match.

How could I make this as there is one scroll only or somehow that name is on the left side and score is in the right side.

// Get ListView object from xml
final ListView nameView = (ListView) findViewById(R.id.nameView);
final ListView scoreView = (ListView) findViewById(R.id.scoreView);

// Create a new Adapter
final ArrayAdapter<String> nameAdapter = new ArrayAdapter<>(this,
        android.R.layout.simple_list_item_1, android.R.id.text1);
final ArrayAdapter<String> scoreAdapter = new ArrayAdapter<>(this,
        android.R.layout.simple_list_item_1, android.R.id.text1);

// Assign adapter to ListView
nameView.setAdapter(nameAdapter);
scoreView.setAdapter(scoreAdapter);

// Ordering with score and adding key values as string to nameList
highscoreRef.orderByChild("score").addChildEventListener(new ChildEventListener() {
    @Override
    public void onChildAdded(DataSnapshot snapshot, String previousChildKey) {
        nameList.push(snapshot.child("name").getValue().toString());
        scoreList.push(snapshot.child("score").getValue().toString());
    }
    @Override
    public void onChildChanged(DataSnapshot dataSnapshot, String s) {

    }
    @Override
    public void onChildRemoved(DataSnapshot dataSnapshot) {

    }
    @Override
    public void onChildMoved(DataSnapshot dataSnapshot, String s) {

    }
    @Override
    public void onCancelled(DatabaseError databaseError) {
        Toast.makeText(getApplicationContext(), "Error sending data.", Toast.LENGTH_LONG).show();
    }

});

//Collections.reverse(nameList);

highscoreRef.addValueEventListener(new ValueEventListener() {
    @Override
    public void onDataChange(DataSnapshot dataSnapshot) {

        for (String name : nameList) {
            nameAdapter.add(name);
        }
        for (String score : scoreList) {
            scoreAdapter.add(score);
        }

        nameList.clear();
        scoreList.clear();
    }
}


<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:text="Huippupisteet"
    android:id="@+id/highscore_text"
    android:layout_gravity="center"
    android:textSize="25dp"
    android:layout_weight="0"/>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">


    <ListView
        android:id="@+id/nameView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        >

    </ListView>
</LinearLayout>

Answer 1

You need to add username and score fields to a unique list item and then to use a single ListView. Then in your adapter you can set the two values. . To achieve this modify your simple_list_item_1 according to this example:

<?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="100dp">

    <TextView
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/score"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Roger" />

    <TextView
        android:id="@+id/score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true" />

</RelativeLayout>

Delete one of two ListView, extend the other to take all the necessary width and modify your adapter to set the two values, now present both into a single inflated view.

You must use an adapter that extends BaseAdapter. You can find a good example here

Answer 2

<?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/activity_main"
    android:layout_width="match_parent"`enter code here`
    android:layout_height="100dp"`enter code here`
    android:background="@android:color/white"
    tools:context="com.example.anuragsingla.myapplication.MainActivity">

    <TextView`enter code here`
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:gravity="center_vertical|left"
        android:layout_marginStart="10dp"
        android:text="Jejeje" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:layout_marginEnd="10dp"
        android:gravity="center_vertical|right"
        android:text="3" />
</RelativeLayout>

Use the above layout . Replace this with R.layout.simple_list_item_1.

Remove one of the Listview . Use single listview and make a custom adapter and inflate the above layout . I have used two TextViews . Set one textview for name and another for number .

http://www.journaldev.com/10416/android-listview-with-custom-adapter-example-tutorial