Android Popup List with Android Studio
Hi guys, here you have a tutorial to create a custom popup list. I will post a series of tutorials related to this Edit Profile screen.
YouTube tutorial, code snippets and GitHub source code. Enjoy!
Code Display
package jonathandelasen.com.custom_popup_list;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.AppCompatEditText;
import android.support.v7.widget.ListPopupWindow;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private AppCompatEditText acetStatus;
private ListPopupWindow statusPopupList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
getWindow().setStatusBarColor(getResources().getColor(R.color.white));
acetStatus = findViewById(R.id.acet_status);
setPopupList();
//we need to show the list when clicking on the field
setListeners();
}
private void setListeners() {
acetStatus.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
statusPopupList.show();
}
});
}
private void setPopupList() {
final List<String> status = new ArrayList<>();
status.add("Status 1");
status.add("Status 2");
status.add("Status 3");
status.add("Status 4");
statusPopupList = new ListPopupWindow(MainActivity.this);
ArrayAdapter adapter = new ArrayAdapter<>(MainActivity.this, R.layout.item_simple_status, R.id.tv_element, status);
statusPopupList.setAnchorView(acetStatus); //this let as set the popup below the EditText
statusPopupList.setAdapter(adapter);
statusPopupList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
acetStatus.setText(status.get(position));//we set the selected element in the EditText
statusPopupList.dismiss();
}
});
}
}
activity_main.xml
<?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:orientation="vertical"
android:background="@color/white"
>
<RelativeLayout
android:id="@+id/fl_toolbar"
android:layout_width="match_parent"
android:layout_height="54dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Custom Popup List"
android:textAllCaps="true"
android:fontFamily="@font/my_nunito_bold"
android:textColor="@color/title"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/divider"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
<ScrollView
android:id="@+id/sv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:layout_below="@+id/fl_toolbar"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="6dp"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:textColor="@color/subtitle_light"
android:fontFamily="@font/my_nunito_bold"
android:text="Photos"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
>
<ImageView
android:id="@+id/iv"
android:layout_width="100dp"
android:layout_height="150dp"
android:background="@drawable/add_image_bg"
/>
<ImageView
android:id="@+id/iv_add_image"
android:layout_width="42dp"
android:layout_height="42dp"
android:src="@drawable/ic_add_circle"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:textColor="@color/subtitle_light"
android:fontFamily="@font/my_nunito_bold"
android:text="Status"
android:layout_marginTop="12dp"
/>
<android.support.v7.widget.AppCompatEditText
android:id="@+id/acet_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/MyEditText"
android:hint="@string/status_hint"
android:inputType="none"
android:clickable="false"
android:focusable="false"
/>
<TextView
android:id="@+id/tv_error_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/MyErrorText"
android:layout_gravity="end"
android:layout_marginBottom="8dp"
android:text="You should add a Status"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:textColor="@color/subtitle_light"
android:fontFamily="@font/my_nunito_bold"
android:text="Bio"
/>
<android.support.v7.widget.AppCompatEditText
android:id="@+id/acet_bio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/MyEditText"
android:hint="@string/bio_hint"
android:inputType="textLongMessage"
android:maxLength="150"
/>
<TextView
android:id="@+id/tv_error_bio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/MyErrorText"
android:layout_gravity="end"
android:layout_marginBottom="4dp"
android:text="You should add a bio"
/>
</LinearLayout>
</ScrollView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="22dp"
android:layout_alignParentBottom="true"
>
<TextView
android:id="@+id/tv_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/MyMainRoundedActionButton"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="22dp"
android:text="@string/save_label"
android:elevation="6dp"
/>
</FrameLayout>
</RelativeLayout>
item_simple_status.html
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
>
<TextView
android:id="@+id/tv_element"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Item 1"
android:layout_margin="10dp"
android:textColor="@color/title"
android:textSize="14sp"
android:fontFamily="@font/my_nunito"
/>
</LinearLayout>
